@font-face {
  font-family: "Amiri Quran";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/AmiriQuran.woff2?v=35f4f02bbd") format("woff2");
}
@font-face {
  font-family: "Honorifics";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/Honorifics.woff2?v=14c618d0b7") format("woff2");
  unicode-range: U+FD40-FD42, U+FD47, U+FD4D, U+FDFA;
}
@font-face {
  font-family: "Translit Serif"; font-style: normal; font-weight: 400; size-adjust: 110%;
  font-display: swap; src: url("/TranslitSerif.woff2?v=862311fad0") format("woff2");
  unicode-range: U+0100-0101, U+012A-012B, U+016A-016B, U+02BE-02BF,
                 U+1E0C-1E0D, U+1E24-1E25, U+1E62-1E63, U+1E6C-1E6D, U+1E92-1E93;
}
@font-face {
  font-family: "Translit Serif"; font-style: normal; font-weight: 700; size-adjust: 110%;
  font-display: swap; src: url("/TranslitSerif-Bold.woff2?v=06f462a878") format("woff2");
  unicode-range: U+0100-0101, U+012A-012B, U+016A-016B, U+02BE-02BF,
                 U+1E0C-1E0D, U+1E24-1E25, U+1E62-1E63, U+1E6C-1E6D, U+1E92-1E93;
}
@font-face {
  font-family: "Translit Sans"; font-style: normal; font-weight: 400; size-adjust: 95%;
  font-display: swap; src: url("/TranslitSans.woff2?v=cb52c5a9ac") format("woff2");
  unicode-range: U+0100-0101, U+012A-012B, U+016A-016B, U+02BE-02BF,
                 U+1E0C-1E0D, U+1E24-1E25, U+1E62-1E63, U+1E6C-1E6D, U+1E92-1E93;
}
@font-face {
  font-family: "Translit Sans"; font-style: normal; font-weight: 700; size-adjust: 95%;
  font-display: swap; src: url("/TranslitSans-Bold.woff2?v=c949ea1f2a") format("woff2");
  unicode-range: U+0100-0101, U+012A-012B, U+016A-016B, U+02BE-02BF,
                 U+1E0C-1E0D, U+1E24-1E25, U+1E62-1E63, U+1E6C-1E6D, U+1E92-1E93;
}
:root {
  --frise-w: 138px;
  --motif-h: 64px;
  --motif-zoom: 1.25;
  --motif-p: calc(var(--motif-h) * var(--motif-zoom));
  --motif-dur: 30s;
  --gelule: rgba(20, 13, 6, 0.8);
  
  --fs-00: 0.72rem;   
  --fs-0:  0.78rem;   
  --fs-1:  0.82rem;   
  --fs-2:  0.9rem;    
  --fs-3:  1rem;      
  --fs-4:  1.1rem;    
  --fs-5:  1.3rem;    
  --fs-6:  1.45rem;   
  --fs-7:  2rem;      
  --r-xs: 3px;    
  --r-sm: 6px;    
  --r-md: 10px;   
  --r-pill: 999px;
  --ombre-1: 0 1px 2px rgba(0, 0, 0, 0.20), 0 1px 1px rgba(0, 0, 0, 0.12);
  --ombre-2: 0 4px 12px rgba(0, 0, 0, 0.26), 0 1px 3px rgba(0, 0, 0, 0.16);
  --ombre-3: 0 12px 32px rgba(0, 0, 0, 0.34), 0 2px 8px rgba(0, 0, 0, 0.18);
  --ease-entree: cubic-bezier(0.16, 1, 0.3, 1);   
  --ease-vif:    cubic-bezier(0.2, 0, 0, 1);      
  --gold-ink: var(--c-ululazm); --green-ink: var(--c-quran);
  --or-ink: var(--c-ululazm);
  --accent-trait: var(--c-ululazm);
  --accent-fond: var(--c-ululazm);
  --voile-survol: 10%; --voile-survol-ouvert: 14%;
  
  color-scheme: dark;
  
  --bg: #2b2015;
  --bg-raised: #3a2c1d;
  --bg-raised-2: #473724;
  --panel: #33271a;
  --banner-strong: #46331f;
  --line: #6a5a41;
  --c-son-link: #7f6c4e;
  --ism-fg: #b39a6e;
  --line-soft: #4d3f2a;
  --text: #f2e9d8;
  --text-muted: #c4b192;
  --text-faint: #b7a07a;
  
  --src-quran: #59c089;
  --src-ibnkathir: #c07ad0;
  --src-tabari: #d8a13a;
  --src-nassaba: #5cb0a8;
  --src-israiliyyat: #6f97ca;
  --src-archeo: #94a3b3;
  --src-unsourced: #837562;
  
  --dt-textual: #e6c168;
  --dt-contemp: #c3a052;
  --dt-interp: #9b8153;
  --dt-gen: #74654f;
  --dt-unknown: #4e4738;
  
  --c-quran: #59c089;
  --c-ululazm: #e0b23e;
  --c-muhammad-bg: #196b3a;
  --c-muhammad-gold: #f9e2a6;
  --c-desc-link: #e0b23e;
  --c-mrca: #e2574c;      
  --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  --card-pressed: inset 0 3px 8px -2px rgba(0, 0, 0, 0.5);
  --box-shadow-pressed: 0 1px 4px rgba(0, 0, 0, 0.22);
  --card-bg: #3a2c1d;
  --card-bg-ululazm: #4a3719;
  --card-border: #5c4b34;
  --toggle-bg: #6a5a41;
  --toggle-fg: #f7efdd;
  --tag-plum: #c08fd0;  --tag-blue: #7ba7dd;
  --tag-amber: #e0b23e; --tag-red: #d98a72;   --tag-green: #6cc79a;
  --tag-teal: #6fc6c0;   --tag-crimson: #e0685c;  --tag-tribe: #b98cc9;
  --tag-orange: #e8994e; --tag-qurashi: #c9743a;  --tag-syriac: #8fb8a0;
  --tag-moab: #a9bd72;
  --tag-perse: #7f8fd4;  --tag-abyssin: #b8708f;
  --tag-pink: #e79ab8;   --tag-rose: #dd5f92;     --tag-caliph: #3f9d6c;
  --alliance: #dd5f92;
  --tag-clan: #b9784a;   --tag-teal2: #79c4a8;
  --tag-bayt: #dd7fd6;
  --clan-hashim: #c58c63;      --clan-muttalib: #c5b663;
  --clan-nawfal: #aac563;      --clan-umayyah: #80c563;
  --clan-abd_al_dar: #63c570;  --clan-asad_uzza: #63c59a;
  --clan-zuhrah: #63c5c4;      --clan-taym: #639cc5;
  --clan-makhzum: #6372c5;     --clan-adiyy: #7e63c5;
  --clan-sahm: #a863c5;        --clan-jumah: #c563b8;
  --clan-amir_luayy: #c5638e;  --clan-harith_fihr: #c56364;
  --encadre-enceinte: #b8a074;
  --tribu-trait-enceinte: #9a8250;
  --tribu-trait-tamim: #b0843e;
  --tribu-trait-clan: #9a5a2e;
  --tag-tamim: #d0a05e;
  --tag-himyar: #cd7a5c;
  --tag-qudaa: #d9a066;
  --tag-kahlan: #b5624a;
  --tag-ruin: #b0a08a;
  --ns-canvas: #322418;
  --panel-w: min(360px, 88vw);
  --tag-hijra: #9db4c6;  --tag-event: #a396e8;
  --tag-sabiq: #9ccc65;  --tag-scribe: #5cb8d8;
  --tag-emissaire: #e6a07f;
  --tag-poete: #d6c64e;  --tag-mawla: #aab0bb;
  --ere-1: #d9a441; --ere-2: #e07b58; --ere-3: #5fc4b8; --ere-4: #b48be0;
  --ere-5: #7ea4e8; --ere-6: #a8b85a; --ere-7: #e08aa8; --ere-8: #6cc79a;
  --ere-9: #a7b4c6;
  --glow-prophet: 0 0 14px 1px rgba(123, 167, 221, 0.38);
  --glow-ululazm: 0 0 18px 2px rgba(224, 178, 62, 0.40);
  --name-glow: 0 0 10px rgba(240, 205, 118, 0.45), 0 0 3px rgba(240, 205, 118, 0.35);
  --c-select: #f2e9d8;
  --c-arabic: #c9a06a;
  --info-bg: #f2dfae;
  --info-fg: #3a2c1d;
  --legend-bg: #4a3a26;
  --card-bg-prophet: #33313d;
  --card-bg-sahabi: #2b3a33;
  --star-opacity: 0.5;
  
  --font-display: "Translit Serif", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, "Honorifics", "Amiri Quran", serif;
  --font-body: "Translit Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Honorifics", "Amiri Quran", sans-serif;
  --font-arabic: "Amiri Quran", "Traditional Arabic", serif;
  
  --marque-encre: #f4efe2;
  --marque-or: #b39a6e;
  --font-carte: "Translit Serif", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, "Honorifics", "Amiri Quran", serif;
  
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-8: 4rem;
  --dur-teinte: 0.15s;
  --dur-geste: 0.22s;
  --dur-volet: 0.28s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}
:root.light {
  color-scheme: light;
  --ombre-1: 0 1px 2px rgba(80, 55, 20, 0.10), 0 1px 1px rgba(80, 55, 20, 0.06);
  --ombre-2: 0 4px 12px rgba(80, 55, 20, 0.14), 0 1px 3px rgba(80, 55, 20, 0.08);
  --ombre-3: 0 12px 32px rgba(80, 55, 20, 0.18), 0 2px 8px rgba(80, 55, 20, 0.10);
  --gold-ink: #6b4d08; --green-ink: #0b6e40;
  --or-ink: #6b4d08;
  --marque-encre: #1e1a12;
  --marque-or: #6b4d08;
  --voile-survol: 15%; --voile-survol-ouvert: 24%;
  --bg: #f4efe2;
  --bg-raised: #fbf8ef;
  --bg-raised-2: #ece3cf;
  --panel: #fbf8ef;
  --banner-strong: #6b4f31;
  --line: #cabd9f;
  --c-son-link: #9d8b62;
  --ism-fg: #97794a;
  --line-soft: #ddd3bd;
  --text: #2a2317;
  --text-muted: #6b6047;
  --text-faint: #746b59;
  --src-quran: #2f8f5b;
  --src-ibnkathir: #9b4cb0;
  --src-tabari: #b07a12;
  --src-nassaba: #2b8079;
  --src-israiliyyat: #3d6ea8;
  --src-archeo: #5d7183;
  --src-unsourced: #8f8877;
  
  --dt-textual: #6b4d08;
  --dt-contemp: #8d7028;
  --dt-interp: #ab9159;
  --dt-gen: #c6b48c;
  --dt-unknown: #ded6c2;
  --c-quran: #2f8f5b;
  --c-ululazm: #b3861a;
  --c-muhammad-bg: #1f7a4d;
  --c-muhammad-gold: #e4bd54;
  --c-desc-link: #a97e12;
  --c-mrca: #c0392b;
  --box-shadow: 0 3px 14px rgba(80, 55, 20, 0.10);
  --card-pressed: inset 0 3px 8px -2px rgba(80, 55, 20, 0.28);
  --box-shadow-pressed: 0 1px 4px rgba(80, 55, 20, 0.10);
  --card-bg: #ffffff;
  --card-bg-ululazm: #fdf5e3;
  --card-border: #ece3d3;
  --toggle-bg: #7a6449;
  --toggle-fg: #fffaf0;
  --tag-plum: #8b5ea3;  --tag-blue: #3d6fa8;
  --tag-amber: #a9781a; --tag-red: #b4523a;   --tag-green: #2f8f5b;
  --tag-teal: #2f8a86;   --tag-crimson: #c0392b;  --tag-tribe: #7d5ba6;
  --tag-orange: #c9691a; --tag-qurashi: #97501f;  --tag-syriac: #3f7a5c;
  --tag-moab: #556b16;
  --tag-perse: #37479b;  --tag-abyssin: #7d2448;
  --tag-pink: #c0507c;   --tag-rose: #93194f;     --tag-caliph: #16603a;
  --alliance: #c2185b;
  --tag-clan: #6d3810;   --tag-teal2: #3d7f66;
  --tag-bayt: #8e1f86;
  --clan-hashim: #864f27;      --clan-muttalib: #867827;
  --clan-nawfal: #6c8627;      --clan-umayyah: #438627;
  --clan-abd_al_dar: #278634;  --clan-asad_uzza: #27865c;
  --clan-zuhrah: #278685;      --clan-taym: #275f86;
  --clan-makhzum: #273686;     --clan-adiyy: #412786;
  --clan-sahm: #6a2786;        --clan-jumah: #86277a;
  --clan-amir_luayy: #862751;  --clan-harith_fihr: #862728;
  --encadre-enceinte: #6f5528;
  --tribu-trait-enceinte: #4a3714;
  --tribu-trait-tamim: #5c4209;
  --tribu-trait-clan: #4a2408;
  --tag-tamim: #8a6415;
  --tag-himyar: #a04a2c;
  --tag-qudaa: #8f6420;
  --tag-kahlan: #7a3620;
  --tag-ruin: #6f6350;
  --ns-canvas: #f6efe0;
  --panel-w: min(360px, 88vw);
  --tag-hijra: #3f5c73;  --tag-event: #4436a0;
  --tag-sabiq: #44710f;  --tag-scribe: #1d6787;
  --tag-emissaire: #94431f;
  --tag-poete: #75680a;  --tag-mawla: #575e6a;
  --ere-1: #9c6a12; --ere-2: #b04e2c; --ere-3: #23807a; --ere-4: #7a4fa8;
  --ere-5: #3d64ad; --ere-6: #66781f; --ere-7: #b0446e; --ere-8: #2f8f5b;
  --ere-9: #52677d;
  --glow-prophet: 0 0 13px 1px rgba(61, 111, 168, 0.26);
  --glow-ululazm: 0 0 16px 2px rgba(179, 134, 26, 0.30);
  --name-glow: 0 0 7px rgba(179, 134, 26, 0.20);
  --c-select: #2a2317;
  --c-arabic: #7a5a34;
  --info-bg: #f0d79a;
  --info-fg: #4a3a1c;
  --legend-bg: #fdfaf2;
  --card-bg-prophet: #f2f6fb;
  --card-bg-sahabi: #eef6f0;
  --star-opacity: 0;
}
* { box-sizing: border-box; scrollbar-color: var(--line) transparent; scrollbar-width: thin; }
[hidden] { display: none !important; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}
body { display: flex; flex-direction: column; }
.view { flex: 1; min-height: 0; }
body.en-attente .view { visibility: hidden; }
.sans-script { max-width: 42rem; margin: 3rem auto; padding: 0 var(--space-4); line-height: 1.7; color: var(--text); }
.view:not(.active) { display: none; }
#view-choix, #view-home, #view-about, #view-contact, #view-tags, #view-concepts,
#view-frise, #view-clans { overflow-y: auto; }
#view-clans { container-type: inline-size; }
#motifs { position: absolute; width: 0; height: 0; overflow: hidden; }
body.rtl { direction: rtl; }
body.rtl #tree-svg, body.rtl #map-container { direction: ltr; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--star-opacity);
  transition: opacity 0.3s ease;
  background-image:
    radial-gradient(1px 1px at 8% 15%, rgba(236, 227, 209, 0.35), transparent),
    radial-gradient(1px 1px at 22% 68%, rgba(236, 227, 209, 0.25), transparent),
    radial-gradient(1.5px 1.5px at 38% 32%, rgba(236, 227, 209, 0.3), transparent),
    radial-gradient(1px 1px at 55% 78%, rgba(236, 227, 209, 0.2), transparent),
    radial-gradient(1.5px 1.5px at 68% 12%, rgba(213, 169, 51, 0.35), transparent),
    radial-gradient(1px 1px at 82% 55%, rgba(236, 227, 209, 0.25), transparent),
    radial-gradient(1px 1px at 92% 85%, rgba(236, 227, 209, 0.2), transparent),
    radial-gradient(1.5px 1.5px at 12% 90%, rgba(76, 175, 125, 0.3), transparent);
  background-repeat: repeat;
  background-size: 480px 480px;
}
.banner {
  position: sticky;
  top: 0;
  z-index: 28;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.75rem;
  min-height: var(--motif-h);
  padding: 0 0.75rem 0 0;
  background: var(--banner-strong);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
}
.bandeau-motif, .choix-motif {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.bandeau-motif { z-index: 0; }
.banner > .nav, .banner > .banner-right, .banner > .ed-menu { position: relative; z-index: 1; }
.motif-defile {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 2 * var(--motif-p));
  height: calc(100% + 2 * var(--motif-p));
  animation: motif-diag calc(2 * var(--motif-dur)) linear infinite;
  will-change: transform;
}
@keyframes motif-diag {
  to { transform: translate(calc(-2 * var(--motif-p)), calc(-2 * var(--motif-p))); }
}
body[data-edition="anbiya"]:not(.au-choix) .bandeau-motif .motif-defile,
.choix-porte[data-edition-choisie="anbiya"] .motif-defile {
  width: calc(100% + 20 * var(--motif-p));
  height: calc(100% + 20 * var(--motif-p));
  animation: motif-diag-20 calc(20 * var(--motif-dur)) linear infinite;
}
@keyframes motif-diag-20 {
  to { transform: translate(calc(-20 * var(--motif-p)), calc(-20 * var(--motif-p))); }
}
@media (prefers-reduced-motion: reduce) {
  .motif-defile { animation: none !important; }
}
.bandeau-motif rect { fill: url(#f-13a); }
:root.light .bandeau-motif rect { fill: url(#f-12a); }
body[data-edition="sahabah"]:not(.au-choix) .bandeau-motif rect { fill: url(#f-23e); }
:root.light body[data-edition="sahabah"]:not(.au-choix) .bandeau-motif rect { fill: url(#f-25a); }
body[data-edition="anbiya"]:not(.au-choix) .bandeau-motif rect { fill: url(#f-21c-n); }
:root.light body[data-edition="anbiya"]:not(.au-choix) .bandeau-motif rect { fill: url(#f-21c); }
#skip-link {
  position: fixed;
  top: -100px;
  inset-inline-start: var(--space-4);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--accent-trait);
  border-radius: var(--r-xs);
  background: var(--bg-raised);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-3);
  text-decoration: none;
  box-shadow: var(--box-shadow);
  transition: top var(--dur-geste) var(--ease);
}
#skip-link:focus { top: calc(var(--banner-h, 64px) + var(--space-2)); }
#main { scroll-margin-top: var(--banner-h, 64px); }
#main:focus { outline: none; }   
.nav-menu.ed-menu { align-self: stretch; display: flex; margin-bottom: -1px; }
.ed-carre {
  position: relative;
  flex: none;
  align-self: stretch;
  width: var(--motif-h);
  padding: 0;
  border: none;
  border-inline-end: 1px solid rgba(20, 13, 6, 0.45);
  background: var(--ed-complet);
  cursor: pointer;
  transition: filter var(--dur-teinte) var(--ease-vif);
}
body[data-edition="sahabah"] .ed-carre { background: var(--ed-sahabah); }
body[data-edition="anbiya"] .ed-carre { background: var(--ed-anbiya); }
.ed-carre .marque-cadre {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform var(--dur-geste) var(--ease-entree);
}
.ed-carre-caret {
  position: absolute;
  inset-inline-end: 3px;
  bottom: 1px;
  font-size: 10px;
  line-height: 1;
  color: #1e1a12;
  opacity: 0.55;
  transition: opacity var(--dur-teinte) var(--ease-vif);
}
body[data-edition="sahabah"] .ed-carre-caret,
body[data-edition="anbiya"] .ed-carre-caret { color: #fbf8ef; }
.ed-carre:hover .marque-cadre, .ed-menu.open .marque-cadre { transform: scale(0.92); }
.ed-carre:hover .ed-carre-caret, .ed-menu.open .ed-carre-caret,
.ed-carre:focus-visible .ed-carre-caret { opacity: 1; }
.ed-carre:focus-visible { outline: 2px solid #ffd98a; outline-offset: -4px; }
.ed-drop { min-width: 290px; padding: 0.35rem; }
.ed-drop-titre {
  margin: 0.25rem 0.55rem 0.4rem;
  font-family: var(--font-body);
  font-size: var(--fs-00);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.rtl .ed-drop-titre { letter-spacing: 0; text-transform: none; font-size: var(--fs-1); }
.nav-drop.ed-drop button {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0.55rem;
}
.ed-drop .marque-cadre { width: 38px; height: 38px; flex: none; }
.ed-drop-txt { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ed-drop-nom { font-family: var(--font-display); font-size: var(--fs-3); line-height: 1.25; }
.ed-drop-ar { font-family: var(--font-arabic); font-size: var(--fs-2); line-height: 1.5; color: var(--text-muted); text-align: start; }
body.rtl .ed-drop-ar { display: none; }
body.rtl .ed-drop-nom { font-family: var(--font-arabic); }
.nav-drop.ed-drop button.active { box-shadow: inset 0 0 0 1px var(--c-ululazm); font-weight: 400; }
.nav { display: flex; align-items: center; gap: 0.4rem; }
.banner .nav {
  flex: 0 1 auto;
  min-width: 0;
  gap: 2px;
  padding: 4px;
  border: 1px solid rgba(255, 236, 200, 0.16);
  border-radius: var(--r-pill);
  background: var(--gelule);
  backdrop-filter: blur(8px);
  overflow-x: auto;
  scrollbar-width: none;
}
.banner .nav::-webkit-scrollbar { display: none; }
.nav-btn {
  padding: 0.5rem 1.05rem;
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-3);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: var(--dur-teinte);
  transition-timing-function: var(--ease-vif);
}
.banner .nav-btn {
  flex: none;
  padding: 0.36rem 0.85rem;
  border-radius: var(--r-pill);
  background: transparent;
  color: #f3e6ce;
  font-size: 0.9rem;
  white-space: nowrap;
}
.banner .seg button, .banner .theme-toggle { color: #f3e6ce; }
.banner .seg { border-color: rgba(255,255,255,0.25); }
.banner .seg button { border-right-color: rgba(255,255,255,0.2); }
.nav-btn:hover { color: #fff; background: rgba(20, 13, 6, 0.74); }
.banner .nav-btn:hover { background: rgba(255, 236, 200, 0.12); }
.banner .nav-btn.active {
  background: var(--ed-pastille, #ffd98a);
  color: var(--ed-pastille-encre, #2a1d08);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(20, 13, 6, 0.35);
}
.banner .nav-btn.active:hover { background: #ffe3a6; color: #2a1d08; }
body[data-edition="sahabah"] .banner .nav-btn.active:hover,
body[data-edition="anbiya"] .banner .nav-btn.active:hover {
  background: color-mix(in srgb, var(--ed-pastille) 85%, #fff);
  color: var(--ed-pastille-encre);
}
.theme-toggle, .banner-ico {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: #f3e6ce;
  cursor: pointer;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease;
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: var(--dur-teinte);
  transition-timing-function: var(--ease-vif);
}
.theme-toggle:hover, .banner-ico:hover { border-color: #ffd98a; }
.banner .theme-toggle:hover, .banner .banner-ico:hover { border-color: transparent; background: rgba(255, 236, 200, 0.12); }
.theme-toggle svg, .banner-ico svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle .ico-moon { fill: currentColor; stroke: none; }
.theme-toggle .ico-moon { display: none; }          
:root.light .theme-toggle .ico-sun { display: none; }
:root.light .theme-toggle .ico-moon { display: block; }
.lang-menu { display: inline-flex; }
.lang-drop { min-width: 148px; }
.lang-drop button.active { background: #b8912f; color: #241a08; }
.lang-drop button.active:hover { background: #b8912f; }
.lang-drop button[lang="ar"] {
  font-family: var(--font-arabic);
  direction: rtl;
  text-align: right;
  font-size: var(--fs-3);
}
.view { display: none; }
.view.active { display: block; }
body[data-edition="sahabah"] [data-sans~="sahabah"],
body[data-edition="anbiya"] [data-sans~="anbiya"],
body[data-edition="complet"] [data-sans~="complet"] { display: none !important; }
#view-choix { padding: var(--space-5) var(--space-4) var(--space-6); }
.basmala {
  margin: 0 0 var(--space-3);
  font-family: var(--font-arabic);
  font-size: var(--fs-4);
  line-height: 1.9;
  color: var(--or-ink);
  text-align: center;
}
.home-inner > .basmala { margin: var(--space-4) 0 0; }
.choix-inner { max-width: 1040px; margin: 0 auto; }
body.au-choix .banner > .nav, body.au-choix .banner > .ed-menu, body.au-choix #fav-page-btn { display: none; }
body.au-choix .banner { justify-content: flex-end; }
.choix-tete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: var(--space-5);
  text-align: center;
}
.choix-tete .brand-mark { width: 64px; height: 64px; }
.choix-tete .brand-name { font-size: clamp(2rem, 4vw, 2.75rem); }
.choix-consigne {
  margin: var(--space-2) 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-1);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.rtl .choix-consigne {
  font-family: var(--font-arabic);
  font-size: var(--fs-4);
  letter-spacing: 0;
  text-transform: none;
}
.choix-portes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.choix-porte {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--banner-strong);
  color: #f3e6ce;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-teinte) var(--ease-vif);
}
.choix-porte.choix-large { grid-column: 1 / -1; min-height: 200px; }
.choix-voile {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  max-width: 32rem;
  padding: var(--space-4) var(--space-6);
  border-radius: 5px;
  background: var(--voile-porte);
  transition: background-color var(--dur-teinte) var(--ease-vif);
}
.choix-porte[data-edition-choisie="sahabah"] { --voile-porte: color-mix(in srgb, var(--ed-sahabah) 34%, rgba(8, 14, 11, 0.9)); }
.choix-porte[data-edition-choisie="anbiya"] { --voile-porte: color-mix(in srgb, var(--ed-anbiya) 52%, rgba(16, 5, 8, 0.9)); }
.choix-porte[data-edition-choisie="complet"] { --voile-porte: rgba(30, 24, 15, 0.9); }
.choix-porte:hover { border-color: #ffd98a; }
.choix-porte:hover .choix-voile { background: color-mix(in srgb, var(--voile-porte) 82%, #000); }
.choix-porte:focus-visible { outline: 2px solid #ffd98a; outline-offset: 3px; }
.choix-porte .marque-cadre { width: 60px; height: 60px; }
.choix-nom {
  font-family: var(--font-display);
  font-size: var(--fs-6);
  line-height: 1.25;
  letter-spacing: 0.02em;
}
.choix-porte:hover .choix-nom { color: #ffd98a; }
.choix-ar { font-family: var(--font-arabic); font-size: var(--fs-5); line-height: 1.6; }
body.rtl .choix-ar { display: none; }
body.rtl .choix-nom { font-family: var(--font-arabic); letter-spacing: 0; line-height: 1.6; }
.choix-sous { font-family: var(--font-body); font-size: var(--fs-3); line-height: 1.5; color: #f6ecd9; }
.choix-voile .ah { --ah-encre: currentColor; }
.insecable { white-space: nowrap; }
.choix-porte[data-edition-choisie="complet"] rect { fill: url(#f-13a); }
:root.light .choix-porte[data-edition-choisie="complet"] rect { fill: url(#f-12a); }
.choix-porte[data-edition-choisie="sahabah"] rect { fill: url(#f-23e); }
:root.light .choix-porte[data-edition-choisie="sahabah"] rect { fill: url(#f-25a); }
.choix-porte[data-edition-choisie="anbiya"] rect { fill: url(#f-21c-n); }
:root.light .choix-porte[data-edition-choisie="anbiya"] rect { fill: url(#f-21c); }
:root { --ed-complet: #efe2c6; --ed-sahabah: #557a6f; --ed-anbiya: #6d1a34; }
.marque-cadre { display: block; --mc-fond: var(--ed-complet); --mc-or: #6b4d08; --mc-encre: #1e1a12; }
.choix-porte[data-edition-choisie="sahabah"] .marque-cadre, .marque-cadre[data-ed="sahabah"],
body[data-edition="sahabah"] .brand-cadre:not([data-ed]) { --mc-fond: var(--ed-sahabah); --mc-or: #f3d48a; --mc-encre: #fbf8ef; }
.choix-porte[data-edition-choisie="anbiya"] .marque-cadre, .marque-cadre[data-ed="anbiya"],
body[data-edition="anbiya"] .brand-cadre:not([data-ed]) { --mc-fond: var(--ed-anbiya); --mc-or: #e8c366; --mc-encre: #f4efe2; }
body[data-edition="sahabah"] {
  --ed-accent: #8fc4b2;
  --ed-pastille: #9ccfbd; --ed-pastille-encre: #0f2620;
  --accent-fond: #557a6f;
}
:root.light body[data-edition="sahabah"] { --ed-accent: #3a6457; }
body[data-edition="anbiya"] {
  --ed-accent: #e27390;
  --ed-pastille: #b8405f; --ed-pastille-encre: #fff7f0;
  --accent-fond: #8e2443;
}
:root.light body[data-edition="anbiya"] { --ed-accent: #8e2443; }
body[data-edition="sahabah"], body[data-edition="anbiya"] {
  --gold-ink: var(--ed-accent);
  --accent-trait: var(--ed-accent);
}
body[data-edition="sahabah"].sur-l-arbre, body[data-edition="anbiya"].sur-l-arbre {
  --cartouche-encre: var(--c-desc-link);
}
body[data-edition="sahabah"].sur-l-arbre {
  --line: #45605a; --line-soft: #2f423a;
  --c-son-link: #647e72; --ism-fg: #93b3a5;
  --text: #e6eee8; --text-muted: #b0c2b8; --text-faint: #9db2a7;
  --card-border: #3a5047;
  --toggle-bg: #4b665b;
  --c-desc-link: #8fc4b2;
  --encadre-enceinte: #7fa797; --tribu-trait-enceinte: #6b9484;
  --fond-trait: color-mix(in srgb, #45605a 78%, transparent);
}
:root.light body[data-edition="sahabah"].sur-l-arbre {
  --line: #b6c6bb; --line-soft: #d4dfd7;
  --c-son-link: #71887d; --ism-fg: #557566;
  --text: #1f2a25; --text-muted: #4f6058; --text-faint: #5b6b63;
  --card-border: #dbe5de;
  --toggle-bg: #4e6d62;
  --c-desc-link: #3e7766;
  --encadre-enceinte: #3f6a5c; --tribu-trait-enceinte: #2c5246;
  --fond-trait: color-mix(in srgb, #b6c6bb 78%, transparent);
}
body[data-edition="anbiya"].sur-l-arbre {
  --bg: #23151a; --bg-raised: #2d1b21; --bg-raised-2: #3b252d; --panel: #2a1a20;
  --line: #664450; --line-soft: #452b34;
  --c-son-link: #866470; --ism-fg: #c79aa6;
  --text: #f3e8ea; --text-muted: #ccb0b7; --text-faint: #ba9ca4;
  --card-bg: #301f25; --card-border: #553640;
  --toggle-bg: #6b4552;
  --c-desc-link: #e27390;
  --encadre-enceinte: #c58a99; --tribu-trait-enceinte: #b0707f;
  --fond-trait: color-mix(in srgb, #664450 78%, transparent);
}
:root.light body[data-edition="anbiya"].sur-l-arbre {
  --bg: #f6eff0; --bg-raised: #fcf8f8; --bg-raised-2: #ecdfe2; --panel: #fcf8f8;
  --line: #d2bcc1; --line-soft: #e6d7da;
  --c-son-link: #9a7a83; --ism-fg: #87566a;
  --text: #2b1d21; --text-muted: #6a4c54; --text-faint: #735a61;
  --card-bg: #ffffff; --card-border: #ecdfe2;
  --toggle-bg: #7a4655;
  --c-desc-link: #8e2443;
  --encadre-enceinte: #7d3a4c; --tribu-trait-enceinte: #5e2535;
  --fond-trait: color-mix(in srgb, #d2bcc1 78%, transparent);
}
#view-home {
  padding: 0 1.5rem 2rem;
  overflow-y: auto;
  overflow-x: hidden;
}
#view-home.active { display: flex; justify-content: center; }
#view-home.active > .home-inner { margin-block: auto; }
.home-inner { position: relative; width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 1rem; }
.home-inner > :not(.home-fond):not(.build-corner) { position: relative; z-index: 1; }
.home-hero:has(.mrca-sugg:not([hidden])) { z-index: 2; }
.rosace { display: block; color: var(--c-ululazm); will-change: transform; }
@keyframes rosace-tourne { to { transform: rotate(360deg); } }
.home-fond { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.rosace-fond { position: absolute; width: 760px; height: 760px; opacity: 0.07; animation: rosace-tourne 360s linear infinite; }
.rosace-fond-1 { top: 560px; inset-inline-start: -430px; }
.rosace-fond-2 { bottom: 180px; inset-inline-end: -470px; width: 900px; height: 900px; animation-direction: reverse; }
:root.light .rosace-fond { opacity: 0.1; }
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center;
  gap: 2.5rem;
  min-height: min(680px, calc(100svh - var(--motif-h)));
  padding-block: 3rem 2.5rem;
}
.hero-texte { text-align: start; }
.hero-surtitre { margin-bottom: 1.1rem; }
.hero-point { opacity: 0.6; }
#view-home .hero-texte h1 {
  margin: 0 0 0.9rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 4.5vw, 3.7rem);
  line-height: 1.07;
  letter-spacing: -0.018em;
  text-wrap: balance;
  color: var(--text);
}
body[data-edition="complet"] #view-home .hero-texte h1 { font-size: clamp(2rem, 3.7vw, 3.05rem); }
#view-home h1 em { font-style: normal; color: var(--gold-ink); }
#view-home h1 .ah { font-size: 0.62em; }
body.rtl #view-home .hero-texte h1 { font-family: var(--font-arabic); line-height: 1.45; letter-spacing: 0; }
.hero-texte .kicker { margin: 0 0 1.1rem; text-align: left; font-size: 1.3rem; }
body.rtl .hero-texte .kicker { text-align: right; }
.hero-texte .lead { margin: 0 0 1.7rem; max-width: 36rem; text-align: start; }
.hero-recherche { position: relative; display: flex; align-items: center; max-width: 34rem; margin-bottom: 1.3rem; }
.hero-loupe {
  position: absolute;
  inset-inline-start: 1.05rem;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
#home-search {
  width: 100%;
  padding: 0.95rem 1.2rem 0.95rem 3rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-raised);
  box-shadow: var(--ombre-1);
  color: var(--text);
  font: var(--fs-3) var(--font-body);
  transition: border-color var(--dur-teinte) var(--ease-vif), box-shadow var(--dur-teinte) var(--ease-vif);
}
body.rtl #home-search { padding: 0.95rem 3rem 0.95rem 1.2rem; }
#home-search::placeholder { color: var(--text-faint); }
#home-search:focus { outline: none; border-color: var(--accent-trait); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-trait) 22%, transparent); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.5rem; }
.hero-actions .cta { margin: 0; }
.hero-actions .ed-changer { display: inline-block; margin: 0; }
.hero-sceau {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  justify-self: center;
  width: 100%;
  max-width: 470px;
  aspect-ratio: 1;
}
.rosace-hero {
  --rosace-d: calc(100vw - 128px);
  --rosace-bord: 0.35;
  --rosace-points: 0;
  position: absolute;
  z-index: -1;
  top: 0;
  left: calc(50% + 50vw);
  width: var(--rosace-d);
  height: var(--rosace-d);
  translate: -50% -50%;
  opacity: 0.5;
  pointer-events: none;
  animation: rosace-tourne 240s linear infinite;
}
body.rtl .rosace-hero { left: auto; right: calc(50% + 50vw); translate: 50% -50%; }
.hero-sceau::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 86%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--bg) 58%, transparent);
}
.brand-mark.hero-marque {
  position: relative;
  z-index: 1;
  width: clamp(120px, 13vw, 176px);
  height: clamp(120px, 13vw, 176px);
  margin-bottom: -0.6rem;
}
.hero-calligraphie {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-family: var(--font-arabic);
  line-height: 1.3;
  text-align: center;
  color: var(--or-ink);
}
.hc-1 { font-size: clamp(3.6rem, 7.4vw, 5.8rem); }
.hc-ligne { display: flex; align-items: baseline; gap: 0.32em; white-space: nowrap; }
.hc-ligne .hc-1 { font-size: clamp(2.7rem, 5.3vw, 4.3rem); }
.hc-3 { margin-top: 0.1em; font-size: clamp(1.35rem, 2.5vw, 2rem); }
.hc-ed { color: var(--ed-accent, var(--c-arabic)); }
.home-chiffres { margin-top: 0.5rem; }
.home-chiffres-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.home-chiffre { padding: 1.5rem 0.8rem 1.3rem; text-align: center; }
.home-chiffre + .home-chiffre { border-inline-start: 1px solid var(--line-soft); }
.home-chiffre-n {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.home-chiffre-lib { font-size: var(--fs-00); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
body.rtl .home-chiffre-lib { letter-spacing: 0; text-transform: none; font-size: var(--fs-1); }
.home-sources { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem 1.2rem; margin: 0.9rem 0 0; font-size: var(--fs-1); color: var(--text-muted); }
.home-sources-lib { font-size: var(--fs-00); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
body.rtl .home-sources-lib { letter-spacing: 0; text-transform: none; }
.home-src { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.home-src b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.home-section { margin-top: 4.2rem; }
.home-section-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.8rem 1.5rem; margin-bottom: 1.4rem; }
.home-section-tete .surtitre { margin-bottom: 0.5rem; }
.home-section h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.15; color: var(--text); }
body.rtl .home-section h2 { font-family: var(--font-arabic); line-height: 1.5; }
.home-autres {
  padding: 0.45rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-muted);
  font: var(--fs-1) var(--font-body);
  cursor: pointer;
  transition: color var(--dur-teinte) var(--ease-vif), border-color var(--dur-teinte) var(--ease-vif);
}
.home-autres:hover { color: var(--gold-ink); border-color: var(--accent-trait); }
.home-gens { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 1rem; }
.gens-carte {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--card-bg);
  box-shadow: var(--ombre-1);
  overflow: hidden;
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: transform var(--dur-teinte) var(--ease-vif), border-color var(--dur-teinte) var(--ease-vif);
}
.gens-carte:hover { transform: translateY(-3px); border-color: var(--accent-trait); }
.gens-carte:focus-visible { outline: 2px solid var(--accent-trait); outline-offset: 2px; }
.gc-portrait { position: relative; display: grid; place-items: center; height: 112px; overflow: hidden; background: var(--gc-fond, var(--bg-raised-2)); }
.gc-portrait .rosace { position: absolute; width: 300px; height: 300px; opacity: 0.16; }
.gc-ar { position: relative; font-family: var(--font-arabic); font-size: 2rem; line-height: 1.5; color: var(--c-arabic); direction: rtl; }
.gens-carte.gc-quran    { --gc-fond: var(--card-bg-prophet); }
.gens-carte.gc-ululazm  { --gc-fond: var(--card-bg-ululazm); }
.gens-carte.gc-sahabi   { --gc-fond: var(--card-bg-sahabi); }
.gens-carte.gc-muhammad { --gc-fond: var(--c-muhammad-bg); }
.gens-carte.gc-muhammad .gc-ar { color: var(--c-muhammad-gold); }
.gens-carte.gc-muhammad .gc-portrait .rosace { color: var(--c-muhammad-gold); }
:root.light .gens-carte { --gc-fond: #473724; }
:root.light .gens-carte.gc-quran   { --gc-fond: #33313d; }
:root.light .gens-carte.gc-ululazm { --gc-fond: #4a3719; }
:root.light .gens-carte.gc-sahabi  { --gc-fond: #2b3a33; }
:root.light .gens-carte.gc-muhammad { --gc-fond: var(--c-muhammad-bg); }
:root.light .gens-carte:not(.gc-muhammad) .gc-ar { color: #e8c67e; }
:root.light .gens-carte .gc-portrait .rosace { color: #e0b23e; opacity: 0.22; }
.gc-corps { display: flex; flex: 1; flex-direction: column; gap: 0.3rem; padding: 0.8rem 0.9rem 0.95rem; }
.gc-nom { font-family: var(--font-display); font-size: var(--fs-4); line-height: 1.25; }
.gc-surnom { font-size: var(--fs-1); font-style: italic; line-height: 1.35; color: var(--text-muted); }
.gc-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.15rem; }
.gc-tags .tag { font-size: 11px; }
.gc-lire { margin-top: auto; padding-top: 0.45rem; font-size: var(--fs-1); color: var(--gold-ink); }
body.rtl .gc-lire span[aria-hidden] { display: inline-block; transform: scaleX(-1); }
.home-questions { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.question {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.1rem 1.25rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-raised) 82%, transparent);
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: transform var(--dur-teinte) var(--ease-vif), border-color var(--dur-teinte) var(--ease-vif);
}
.question:hover { transform: translateY(-2px); border-color: var(--accent-trait); }
.question:focus-visible { outline: 2px solid var(--accent-trait); outline-offset: 2px; }
.q-outil { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-00); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); }
.q-outil::before { content: ""; width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); }
body.rtl .q-outil { letter-spacing: 0; text-transform: none; font-size: var(--fs-1); }
.q-texte { font-family: var(--font-display); font-size: var(--fs-4); line-height: 1.38; }
body.rtl .q-texte { font-family: var(--font-arabic); line-height: 1.7; }
.q-aller { margin-top: auto; font-size: var(--fs-1); color: var(--text-muted); }
body.rtl .q-aller span[aria-hidden] { display: inline-block; transform: scaleX(-1); }
@media (max-width: 900px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); gap: 1rem; min-height: 0; padding-block: 2.2rem 1.5rem; }
  .hero-sceau { max-width: 300px; }
  .rosace-hero { --rosace-d: 150vw; }
  .home-chiffres-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-chiffre:nth-child(3) { border-inline-start: none; }
  .home-chiffre:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }
  .rosace-fond { display: none; }
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.build-corner {
  margin: var(--space-5) auto 0;
  padding: 0;
  max-width: 50rem;
  text-align: start;
}
@media (min-width: 1600px) {
  .build-corner {
    position: fixed;
    inset-inline-start: 0.5rem;
    bottom: 0.5rem;
    z-index: 4;
    margin: 0;
    max-width: calc((100vw - 1200px) / 2 - 1rem);
  }
  .build-corner .build-news { max-height: 45vh; overflow-y: auto; }
}
.build-mark {
  margin: 0;
  font-size: var(--fs-00);
  letter-spacing: 0.03em;
  color: var(--text-faint);
}
.build-mark-clic {
  cursor: pointer;
  text-decoration: underline dotted currentColor;
  text-underline-offset: 3px;
}
.build-mark-clic:hover,
.build-mark-clic:focus-visible { color: var(--gold-ink); }
.build-news { margin-top: 0.42rem; color: var(--text-faint); font-size: var(--fs-00); }
.build-news-title {
  margin: 0 0 0.22rem;
  font-size: var(--fs-00);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}
.build-news ul { margin: 0; padding: 0; list-style: none; }
.build-news li {
  margin: 0 0 0.18rem;
  padding-inline-start: 0.7rem;
  line-height: 1.35;
  text-indent: -0.7rem;
}
.build-news li::before { content: "— "; }
@media (max-width: 700px) {
  #view-home.active { flex-direction: column; justify-content: flex-start; }
  #view-home.active > .home-inner { margin-inline: 0; width: 100%; }
  .build-corner { margin-top: var(--space-6); }
  .pick-tag, .cross-op, .tagpick-nbtn, .fold-btn, .seg button,
  .nav-btn, .nav-drop button { min-height: 44px; }
  #close-panel-btn, #fiche-close, #hint-close, #mrca-banner-close,
  .cf-btn, .theme-toggle, .banner-ico { min-width: 44px; min-height: 44px; }
  .sm-check, .prophets-toggle, .ns-opt { padding-block: 0.55rem; }
}
.brand-mark { width: 112px; height: 112px; display: block; }
.brand-mark .m-encre { fill: var(--marque-encre); }
.brand-mark .m-or { fill: var(--marque-or); }
.brand-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 5.4vw, 3.75rem);
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--text);
}
body.rtl .brand-name { font-family: var(--font-arabic); letter-spacing: 0; line-height: 1.5; }
.kicker {
  display: block;
  font-family: var(--font-arabic);
  direction: rtl;
  font-size: 1.36rem;
  color: var(--c-ululazm);
  margin: 0 0 var(--space-4);
  line-height: 1.9;
}
.lead {
  margin: 0 auto var(--space-6);
  max-width: 46ch;
  color: var(--text-muted);
  font-size: var(--fs-4);
  line-height: 1.7;
  font-style: normal;
}
.lead em, .lead i { font-style: italic; }
.cta {
  display: inline-block;
  padding: 0.8rem 2rem;
  border-radius: 2px;
  border: 1px solid var(--c-ululazm);
  background: transparent;
  color: var(--c-ululazm);
  font-family: var(--font-body);
  font-size: var(--fs-3);
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
  transition-property: color, background-color, border-color, box-shadow, transform;
}
.cta:hover {
  background: var(--c-ululazm);
  color: var(--bg);
}
body[data-edition="sahabah"] #view-home .cta { background: var(--ed-sahabah); border-color: #f3d48a; color: #fbf8ef; }
body[data-edition="anbiya"] #view-home .cta { background: var(--ed-anbiya); border-color: #e8c366; color: #f4efe2; }
body[data-edition="sahabah"] #view-home .cta:hover,
body[data-edition="anbiya"] #view-home .cta:hover { color: #ffd98a; border-color: #ffd98a; }
.ed-changer {
  display: block;
  margin: var(--space-4) auto 0;
  padding: var(--space-1) var(--space-2);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-1);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ed-changer:hover { color: var(--text); }
#view-tree.active { display: flex; flex-direction: row; }
:root {
  --fold-y: 66px;
  --sb-w: 288px;
  --sb-glisse: calc(-1 * var(--sb-w));
  --sb-rentre: calc(-1px - var(--sb-w));
}
body.rtl { --sb-glisse: var(--sb-w); }
#sidebar {
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  flex: none;
  width: var(--sb-w);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0.95rem 1rem;
  background: var(--bg-raised);
  border-right: 1px solid var(--line-soft);
  overflow-y: auto;
}
.sb-top, .sb-bottom { display: flex; flex-direction: column; gap: 0.6rem; }
.sb-searchrow { display: flex; align-items: center; }
.sb-searchrow #search-input { flex: 1; min-width: 0; }
#search-go {
  position: absolute;
  inset-inline-end: 4px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
#search-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor;
                 stroke-width: 1.9; stroke-linecap: round; }
#search-go:hover:not(:disabled) { color: var(--gold-ink); background: var(--bg-raised); }
#search-go:focus-visible { outline: 2px solid var(--c-select); outline-offset: 1px; }
#search-go:disabled { opacity: 0.35; cursor: default; }
#sidebar-hide, #sidebar-reopen {
  position: absolute;
  top: calc(var(--banner-h, 64px) + var(--fold-y) - 26px);
  z-index: 26;
  width: 46px; height: 52px;
  align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-inline-start: none;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: 7px;
  border-end-end-radius: 7px;
  background: var(--bg-raised);
  color: var(--text-muted);
  cursor: pointer;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.16);
  transition-property: transform, opacity, visibility, color, background-color, border-color, box-shadow;
  transition-duration: var(--dur-volet), var(--dur-teinte), 0s, var(--dur-teinte), var(--dur-teinte), var(--dur-teinte), var(--dur-teinte);
  transition-timing-function: var(--ease-entree), linear, linear, var(--ease-vif), var(--ease-vif), var(--ease-vif), var(--ease-vif);
}
#view-tree.sidebar-collapsed #sidebar-hide,
#view-tree.sidebar-collapsed #sidebar-reopen { transform: translateX(var(--sb-glisse)); }
body.rtl #view-tree.sidebar-collapsed #sidebar-hide { transform: translateX(var(--sb-glisse)) scaleX(-1); }
#sidebar-hide:hover, #sidebar-reopen:hover { border-color: var(--accent-trait); color: var(--accent-trait); }
#sidebar-hide {
  inset-inline-start: var(--sb-w);
  display: flex;
  font-size: 2rem;
  line-height: 1;
  padding-bottom: 0.18rem;
}
#sidebar-reopen {
  inset-inline-start: var(--sb-w);
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#sidebar::-webkit-scrollbar { width: 0; height: 0; }
#sidebar-hide { transition-delay: 0s, var(--dur-teinte), 0s, 0s, 0s, 0s, 0s; }
#view-tree.sidebar-collapsed #sidebar-hide {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition-delay: 0s, 0s, var(--dur-volet), 0s, 0s, 0s, 0s;
}
#view-tree.sidebar-collapsed #sidebar-reopen {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition-delay: 0s, var(--dur-teinte), 0s, 0s, 0s, 0s, 0s;
}
#view-tree.sidebar-collapsed #sidebar { margin-left: var(--sb-rentre); pointer-events: none; }
.gear-ico { width: 26px; height: 26px; fill: currentColor; }
#collapsed-fold { display: none; }
.cf-btn {
  width: 46px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  color: var(--text-muted);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.14);
  transition: color 0.15s ease, border-color 0.15s ease;
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: var(--dur-teinte);
  transition-timing-function: var(--ease-vif);
}
.cf-btn:hover { color: var(--accent-trait); border-color: var(--accent-trait); }
.cf-btn .fold-ico { width: 22px; height: 22px; }
.sb-title {
  margin-top: var(--space-1);
  font-size: var(--fs-00, 0.72rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: var(--space-1);
}
#search-input {
  width: 100%;
  padding: 0.58rem 2.2rem 0.58rem 0.85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background-color: color-mix(in srgb, var(--text) 7%, var(--bg));
  background-size: 16px 16px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.14);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-2);
}
body.rtl #search-input { padding: 0.58rem 2.2rem 0.58rem 0.85rem; background-position: right 0.7rem center; }
#search-input::placeholder { color: var(--text-faint); }
#search-input:focus {
  outline: none;
  border-color: var(--accent-trait);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-trait) 22%, transparent);
}
#search-input:focus-visible { outline: 2px solid var(--accent-trait); outline-offset: 0; }
#search-input::-webkit-calendar-picker-indicator {
  filter: invert(34%) sepia(35%) saturate(600%) hue-rotate(350deg) brightness(90%);
  opacity: 0.75;
  cursor: pointer;
}
.seg-full { width: 100%; }
.seg-full button { flex: 1; }
.fold-row { display: flex; gap: 0.5rem; }
.fold-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.35rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-0);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: var(--dur-teinte);
  transition-timing-function: var(--ease-vif);
}
.fold-btn:hover { border-color: var(--accent-trait); color: var(--accent-trait); }
.fold-ico {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#sources-block {
  width: 100%;
  padding: 0.55rem 0.6rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: var(--fs-0);
}
.filter-toggles, .filter-only-title { --filtre-c: var(--c-quran); --filtre-encre: var(--green-ink, var(--c-quran)); }
body[data-edition="sahabah"].sur-l-arbre .filter-toggles, body[data-edition="sahabah"].sur-l-arbre .filter-only-title,
body[data-edition="anbiya"].sur-l-arbre .filter-toggles, body[data-edition="anbiya"].sur-l-arbre .filter-only-title {
  --filtre-c: var(--accent-fond); --filtre-encre: var(--ed-accent);
}
.filter-only-title {
  font-size: var(--fs-00, 0.72rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--filtre-encre);
  margin-bottom: var(--space-1);
  font-weight: 500;
  line-height: 1.3;
  margin-top: 0;
}
.filter-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--filtre-c) 55%, transparent);
  background: color-mix(in srgb, var(--filtre-c) 10%, transparent);
}
.filter-toggles .prophets-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  line-height: 1.25;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  font-size: var(--fs-0);
}
.prophets-toggle input { accent-color: var(--filtre-c, var(--c-quran)); cursor: pointer; margin-top: 2px; width: 16px; height: 16px; }
.filter-toggles .sub-toggle { margin-inline-start: 1.5rem; font-size: 0.9em; opacity: 0.92; }
.filter-toggles .sub-toggle.indisponible { opacity: 0.42; cursor: default; }
.filter-toggles .sub-toggle.indisponible input { cursor: default; }
.filter-toggles .sub-row { display: flex; align-items: flex-start; gap: 0.35rem; }
.filter-toggles .sub-row .sub-toggle { flex: 1 1 auto; }
.qm-help {
  flex: 0 0 auto;
  margin-top: 1px;
  width: 17px; height: 17px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--c-quran) 60%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--c-quran);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.qm-help:hover { background: var(--c-quran); color: var(--panel); }
.qm-help:focus-visible { outline: 2px solid var(--c-select); outline-offset: 2px; }
@media (pointer: coarse) {
  .qm-help { width: 44px; height: 44px; border: none; font-size: var(--fs-1); }
  .qm-help:hover { background: transparent; color: var(--c-quran); }
}
.clan-boxes { pointer-events: none; }
.clan-box path {
  fill: currentColor;
  fill-opacity: 0.07;
  stroke: currentColor;
  stroke-opacity: 0.95;
  stroke-width: 3;
  stroke-dasharray: 12 7;     
  stroke-linejoin: round;
}
.clan-box.clan-enceinte path {
  fill-opacity: 0.025;
  stroke-opacity: 0.95;
  stroke-width: 2;
  stroke-dasharray: 34 16;
}
.clan-box.tag-qurashi, .clan-tag.tag-qurashi,
.clan-lien.tag-qurashi { color: var(--encadre-enceinte); }
.clan-box.tag-qurashi path { stroke: var(--tribu-trait-enceinte); }
.tag-sans_lignee  { color: var(--tag-ruin); --tag-c: var(--tag-ruin); }
.clan-box.tag-sans_lignee path {
  fill-opacity: 0.035;
  stroke-width: 2;
  stroke-dasharray: 3 6;
}
.clan-tag.tag-sans_lignee { pointer-events: none; cursor: default; }
.tag-sahaba_non_arabes { color: var(--tag-green); --tag-c: var(--tag-green); }
.clan-box.tag-sahaba_non_arabes path {
  fill-opacity: 0.035;
  stroke-width: 2;
  stroke-dasharray: 3 6;
}
.clan-tag.tag-sahaba_non_arabes { pointer-events: none; cursor: default; }
.tag-orig_perse     { color: var(--tag-perse); --tag-c: var(--tag-perse); }
.tag-orig_abyssin   { color: var(--tag-abyssin); --tag-c: var(--tag-abyssin); }
.tag-orig_israelite { color: var(--tag-tribe); --tag-c: var(--tag-tribe); }
.tag-orig_copte     { color: var(--tag-teal2); --tag-c: var(--tag-teal2); }
.clan-tag.tag-orig_perse, .clan-tag.tag-orig_abyssin,
.clan-tag.tag-orig_israelite, .clan-tag.tag-orig_copte { pointer-events: none; cursor: default; }
.clan-box.tag-tamimi path { stroke: var(--tribu-trait-tamim); }
.clan-box.tag-aws path,
.clan-box.tag-khazraj path { stroke: var(--tribu-trait-clan); }
.clan-tags { pointer-events: none; }
.clan-tag { pointer-events: auto; cursor: pointer; }
.clan-tag rect {
  fill: color-mix(in srgb, currentColor 14%, var(--bg));
  stroke: currentColor;
  stroke-opacity: 0.55;
  stroke-width: 1.5;
}
.clan-tag:hover rect { stroke-opacity: 1; }
.clan-tag.tag-on rect {
  stroke-opacity: 1;
  stroke-width: 3;
  fill: color-mix(in srgb, currentColor 34%, var(--bg));
}
.clan-lien {
  fill: none;
  stroke: currentColor;
  stroke-opacity: 0.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.clan-tag text {
  fill: currentColor;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 44px;
  font-weight: 600;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
  dominant-baseline: alphabetic;
}
.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.seg button {
  padding: 0.35rem 0.7rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-0);
  cursor: pointer;
  border-right: 1px solid var(--line);
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: var(--dur-teinte);
  transition-timing-function: var(--ease-vif);
}
.seg button:last-child { border-right: none; }
.seg button.active { background: var(--accent-fond); color: #ffffff; font-weight: 600; }
.legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.line-solid {
  width: 22px;
  border-top: 2px solid var(--c-son-link);
  display: inline-block;
  flex: none;
}
.line-dashed {
  width: 24px;
  border-top: 2px dashed var(--c-desc-link);
  display: inline-block;
  flex: none;
}
body.tight-y .line-dashed { border-top-style: dotted; border-top-width: 3px; }
.line-spouse {
  width: 26px;
  border-top: 1.6px solid var(--alliance);
  display: inline-block;
  flex: none;
}
.line-spouse.servante { border-top-style: dashed; }
#map-container {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  cursor: grab;
  border-top: 1px solid var(--line-soft);
}
#map-container:active { cursor: grabbing; }
#tree-svg { width: 100%; height: 100%; display: block; }
:root {
  --fond-trait: color-mix(in srgb, var(--line) 78%, transparent); --fond-pas: 24px;
}
body[data-fond="dots"] #map-container, body[data-fond="dots"] .rt-frame,
#bg-control button[data-bg="dots"] .bg-swatch {
  background-image: radial-gradient(circle at 1px 1px, var(--fond-trait) 1px, transparent 0);
  background-size: var(--fond-pas) var(--fond-pas);
}
body[data-fond="rosaces"] .rt-frame {
  background-image: var(--fond-rosaces-cadre);
  background-size: var(--fond-rosaces-cadre-tailles);
  background-position: var(--fond-rosaces-cadre-places);
  background-repeat: no-repeat;
}
.fond-mobile {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
#tree-svg { position: relative; z-index: 1; }
.fm-rosace {
  position: absolute;
  color: var(--c-desc-link);
  opacity: 0.22;
  animation: rosace-tourne 200s linear infinite;
}
:root.light .fm-rosace { opacity: 0.28; }
.fm-rosace.fm-inverse { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) {
  .fm-rosace, .bg-mobile { animation: none !important; }
}
.bg-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; }
.bg-grille button {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.25rem 0.25rem 0.3rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-00);
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition-property: border-color, color, box-shadow;
  transition-duration: var(--dur-teinte);
  transition-timing-function: var(--ease-vif);
}
.bg-grille button > span[data-i18n] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-grille button:hover { border-color: var(--accent-trait); color: var(--text); }
.bg-grille button.active {
  border-color: var(--accent-fond);
  box-shadow: inset 0 0 0 1px var(--accent-fond);
  color: var(--text);
  font-weight: 600;
}
.bg-grille button:focus-visible { outline: 2px solid var(--accent-trait); outline-offset: 1px; }
.bg-grille .bg-swatch {
  position: relative;
  overflow: hidden;
  width: auto;
  height: 30px;
  border-radius: 3px;
  background-color: var(--bg);
}
.bg-mobile { position: absolute; inset: 0; }
#bg-control button[data-bg="rosaces"] .bg-mobile {
  inset: -14px;
  background: var(--fond-rosace) center / contain no-repeat;
  opacity: 1;
  animation: rosace-tourne 40s linear infinite;
}
.bg-pills { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.2rem; }
.bg-pills button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.5rem 0.28rem 0.3rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.74rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.bg-pills button:hover { border-color: var(--accent-trait); color: var(--accent-trait); }
.bg-pills button.active { border-color: var(--accent-trait); color: var(--text); background: var(--bg-raised-2); }
.bg-swatch {
  --fond-pas: 8px;
  width: 18px; height: 18px;
  flex: none;
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  background-color: var(--panel);
}
.link { fill: none; stroke: var(--c-son-link); stroke-width: 1.6px; }
.link.descendant { stroke: var(--c-desc-link); stroke-width: 1.6px; stroke-dasharray: 7 5; }
body.tight-y .link.descendant { stroke-dasharray: 0 6; stroke-linecap: round; stroke-width: 2.4px; }
#link-legend {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem 1.15rem;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: var(--legend-bg);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  font-size: var(--fs-2);
  color: var(--text);
}
#link-legend .legend-item { gap: 0.6rem; }
#link-legend .line-solid, #link-legend .line-dashed { width: 34px; }
.node-wrap { width: 100%; height: 100%; padding: 16px 16px 0; }
.card {
  --cartouche:
    inset 0 0 0 3px var(--card-bg),
    inset 0 0 0 4px color-mix(in srgb, var(--cartouche-encre, var(--c-ululazm)) 26%, transparent);
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 215px;
  max-width: 430px;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  background: var(--card-bg);
  box-shadow: var(--cartouche), var(--box-shadow);
  cursor: pointer;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.card > * { grid-area: 1 / 1; }
.card-corps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px 16px;
}
.card.roomy > .card-corps { padding-bottom: 21px; }
.card.bare > .card-corps { padding-bottom: 30px; }
.card.solo > .card-corps {
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
}
.card.solo .card-fr { font-size: 25px; }
.card.solo .card-ar { font-size: 30px; }
.card.solo .encre-ar { vertical-align: 0.375em; margin: -0.375em 0; }
.card { width: 100%; }
.card:focus-visible { outline: 2px solid var(--c-select); outline-offset: 3px; }
.card:hover { box-shadow: var(--cartouche), var(--card-pressed), var(--box-shadow-pressed); }
#measure, #measure.card {
  position: absolute;
  left: 0;
  top: -99999px;
  width: auto;
  visibility: hidden;
  pointer-events: none;
  white-space: normal;
}
#measure-batch {
  position: absolute;
  left: 0;
  top: -99999px;
  width: 4000px;
  visibility: hidden;
  pointer-events: none;
  white-space: normal;
}
#measure-batch > div {
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
}
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.card-fr {
  font-family: var(--font-carte);
  font-size: 17px;
  line-height: 1.15;
  color: var(--text);
  white-space: nowrap;
}
.card-ar {
  font-family: var(--font-arabic);
  direction: rtl;
  font-size: 21px;
  line-height: 1.4;
  color: var(--c-arabic);
  white-space: nowrap;
}
.encre-ar { display: inline-block; vertical-align: 3px; margin: -3px 0; }
.card-fil {
  font-family: var(--font-carte);
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--text-muted);
  max-width: 340px;
  margin-top: 3px;
}
.card-nick {
  font-family: var(--font-carte);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--text-muted);
  max-width: 340px;
  margin-top: 3px;
  margin-bottom: 3px;
}
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
  padding-right: 18px;
}
.tag {
  font-family: var(--font-display);
  font-size: 11px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: var(--r-xs);
  border: 1px solid currentColor;
  white-space: nowrap;
}
.card .tag { font-family: var(--font-carte); }
.ism { color: var(--ism-fg); font-weight: 400; }
.ism-ar { color: color-mix(in srgb, currentColor 58%, transparent); }
.tag-prophete     { color: var(--tag-blue); --tag-c: var(--tag-blue); }
.tag-prophete_bib { color: var(--tag-plum); --tag-c: var(--tag-plum); }
.tag-ululazm      { color: var(--tag-amber); --tag-c: var(--tag-amber); }
.tag-roi          { color: var(--tag-red); --tag-c: var(--tag-red); }
.tag-tubba        { color: var(--tag-red); --tag-c: var(--tag-red); }
.tag-banu         { color: var(--tag-tribe); --tag-c: var(--tag-tribe); }
.tag-arabe        { color: var(--tag-orange); --tag-c: var(--tag-orange); }
.tag-adnaniy      { color: var(--tag-orange); --tag-c: var(--tag-orange); }
.tag-qahtaniy     { color: var(--tag-orange); --tag-c: var(--tag-orange); }
.tag-qurashi      { color: var(--tag-qurashi); --tag-c: var(--tag-qurashi); }
.tag-tamimi       { color: var(--tag-tamim); --tag-c: var(--tag-tamim); }
.tag-himyari      { color: var(--tag-himyar); --tag-c: var(--tag-himyar); }
.tag-qudaiy       { color: var(--tag-qudaa); --tag-c: var(--tag-qudaa); }
.tag-kahlani      { color: var(--tag-kahlan); --tag-c: var(--tag-kahlan); }
.tag-arab_baida   { color: var(--tag-ruin); --tag-c: var(--tag-ruin); }
.tag-aad          { color: var(--tag-ruin); --tag-c: var(--tag-ruin); }
.tag-thamud       { color: var(--tag-ruin); --tag-c: var(--tag-ruin); }
.tag-amalecite    { color: var(--tag-ruin); --tag-c: var(--tag-ruin); }
.tag-aws          { color: var(--tag-clan); --tag-c: var(--tag-clan); }
.tag-khazraj      { color: var(--tag-clan); --tag-c: var(--tag-clan); }
.tag-syriaque     { color: var(--tag-syriac); --tag-c: var(--tag-syriac); }
.tag-copte        { color: var(--tag-teal2); --tag-c: var(--tag-teal2); }
.tag-moabite      { color: var(--tag-moab); --tag-c: var(--tag-moab); }
.tag-perse        { color: var(--tag-perse); --tag-c: var(--tag-perse); }
.tag-abyssin      { color: var(--tag-abyssin); --tag-c: var(--tag-abyssin); }
.tag-sahabi       { color: var(--tag-green); --tag-c: var(--tag-green); }
.tag-ahl_bayt     { color: var(--tag-bayt); --tag-c: var(--tag-bayt); }
.tag-ahl_kisa     { color: var(--tag-bayt); --tag-c: var(--tag-bayt); }
.tag-tabii        { color: var(--tag-teal2); --tag-c: var(--tag-teal2); }
.tag-muhajirun    { color: var(--tag-hijra); --tag-c: var(--tag-hijra); }
.tag-ansar        { color: var(--tag-hijra); --tag-c: var(--tag-hijra); }
.tag-badr         { color: var(--tag-event); --tag-c: var(--tag-event); }
.tag-uhud         { color: var(--tag-event); --tag-c: var(--tag-event); }
.tag-ridwan       { color: var(--tag-event); --tag-c: var(--tag-event); }
.tag-aqabah1      { color: var(--tag-event); --tag-c: var(--tag-event); }
.tag-aqabah2      { color: var(--tag-event); --tag-c: var(--tag-event); }
.tag-khandaq      { color: var(--tag-event); --tag-c: var(--tag-event); }
.tag-khaybar      { color: var(--tag-event); --tag-c: var(--tag-event); }
.tag-habasha1     { color: var(--tag-hijra); --tag-c: var(--tag-hijra); }
.tag-habasha2     { color: var(--tag-hijra); --tag-c: var(--tag-hijra); }
.tag-sabiqun      { color: var(--tag-sabiq); --tag-c: var(--tag-sabiq); }
.tag-scribe       { color: var(--tag-scribe); --tag-c: var(--tag-scribe); }
.tag-emissaire    { color: var(--tag-emissaire); --tag-c: var(--tag-emissaire); }
.tag-poete        { color: var(--tag-poete); --tag-c: var(--tag-poete); }
.tag-chair_muallaqat { color: var(--tag-poete); --tag-c: var(--tag-poete); }
.tag-esclave      { color: var(--tag-mawla); --tag-c: var(--tag-mawla); }
.tag-affranchi    { color: var(--tag-mawla); --tag-c: var(--tag-mawla); }
.tag-femme        { color: var(--tag-pink); --tag-c: var(--tag-pink); }
.tag-mere_croyants { color: var(--tag-rose); --tag-c: var(--tag-rose); }
.tag-calife        { color: var(--tag-caliph); --tag-c: var(--tag-caliph); }
.tag-calife_rashid { color: var(--tag-caliph); --tag-c: var(--tag-caliph); }
.tag-achara        { color: var(--tag-teal); --tag-c: var(--tag-teal); }
.tag-fondateur    { color: var(--tag-crimson); --tag-c: var(--tag-crimson); }
[class*="tag-tribu_"] { color: var(--tag-tribe); --tag-c: var(--tag-tribe); }
[class*="tag-clan_"]  { color: var(--tag-clan); --tag-c: var(--tag-clan); }
.tag-clan_hashim      { color: var(--clan-hashim); --tag-c: var(--clan-hashim); }
.tag-clan_muttalib    { color: var(--clan-muttalib); --tag-c: var(--clan-muttalib); }
.tag-clan_nawfal      { color: var(--clan-nawfal); --tag-c: var(--clan-nawfal); }
.tag-clan_umayyah     { color: var(--clan-umayyah); --tag-c: var(--clan-umayyah); }
.tag-clan_abd_al_dar  { color: var(--clan-abd_al_dar); --tag-c: var(--clan-abd_al_dar); }
.tag-clan_asad_uzza   { color: var(--clan-asad_uzza); --tag-c: var(--clan-asad_uzza); }
.tag-clan_zuhrah      { color: var(--clan-zuhrah); --tag-c: var(--clan-zuhrah); }
.tag-clan_taym        { color: var(--clan-taym); --tag-c: var(--clan-taym); }
.tag-clan_makhzum     { color: var(--clan-makhzum); --tag-c: var(--clan-makhzum); }
.tag-clan_adiyy       { color: var(--clan-adiyy); --tag-c: var(--clan-adiyy); }
.tag-clan_sahm        { color: var(--clan-sahm); --tag-c: var(--clan-sahm); }
.tag-clan_jumah       { color: var(--clan-jumah); --tag-c: var(--clan-jumah); }
.tag-clan_amir_luayy  { color: var(--clan-amir_luayy); --tag-c: var(--clan-amir_luayy); }
.tag-clan_harith_fihr { color: var(--clan-harith_fihr); --tag-c: var(--clan-harith_fihr); }
.tag-chef_etat    { color: var(--tag-red); --tag-c: var(--tag-red); }
.tag {
  color: color-mix(in oklab, var(--tag-c, currentColor) 65%, var(--text));
  border-color: var(--tag-c, currentColor);
}
.tag[data-tag] { cursor: help; }
.card-head.ar-only { justify-content: flex-end; }
.card.quran {
  
  --cartouche:
    inset 0 0 0 3px var(--card-bg-prophet),
    inset 0 0 0 4px color-mix(in srgb, var(--tag-blue) 45%, transparent);
  border-color: color-mix(in srgb, var(--tag-blue) 85%, var(--card-border));
  background: var(--card-bg-prophet);
  box-shadow: var(--cartouche), var(--box-shadow), var(--glow-prophet);
}
.card.quran:hover { box-shadow: var(--cartouche), var(--card-pressed), var(--box-shadow-pressed), var(--glow-prophet); }
.card.sahabi {
  --cartouche:
    inset 0 0 0 3px var(--card-bg-sahabi),
    inset 0 0 0 4px color-mix(in srgb, var(--cartouche-encre, var(--c-ululazm)) 26%, transparent);
  background: var(--card-bg-sahabi);
  border-color: color-mix(in srgb, var(--tag-green) 32%, var(--card-border));
}
.card.quran .card-fr, .card.ululazm .card-fr, .card.muhammad .card-fr,
.card.is-prophet .card-fr { text-shadow: var(--name-glow); }
.card.quran .card-ar, .card.ululazm .card-ar, .card.muhammad .card-ar { text-shadow: var(--name-glow); }
.card.ululazm  {
  --cartouche:
    inset 0 0 0 3px var(--card-bg-ululazm),
    inset 0 0 0 4px color-mix(in srgb, var(--c-ululazm) 50%, transparent);
  border-color: var(--c-ululazm);
  border-width: 2px;
  background: var(--card-bg-ululazm);
  box-shadow: var(--cartouche), var(--box-shadow), var(--glow-ululazm);   
}
.card.ululazm:hover { box-shadow: var(--cartouche), var(--card-pressed), var(--box-shadow-pressed), var(--glow-ululazm); }
.card.muhammad {
  --cartouche: inset 0 2px 5px rgba(0, 0, 0, 0.28);
  --or-equerre: var(--c-muhammad-gold);
  border: 2px solid var(--c-muhammad-gold);
  background-color: var(--c-muhammad-bg);
  background-image:
    linear-gradient(var(--or-equerre), var(--or-equerre)),
    linear-gradient(var(--or-equerre), var(--or-equerre)),
    linear-gradient(var(--or-equerre), var(--or-equerre)),
    linear-gradient(var(--or-equerre), var(--or-equerre)),
    linear-gradient(var(--or-equerre), var(--or-equerre)),
    linear-gradient(var(--or-equerre), var(--or-equerre)),
    linear-gradient(var(--or-equerre), var(--or-equerre)),
    linear-gradient(var(--or-equerre), var(--or-equerre));
  background-repeat: no-repeat;
  background-size:
    14px 1.5px, 1.5px 14px,
    14px 1.5px, 1.5px 14px,
    14px 1.5px, 1.5px 14px,
    14px 1.5px, 1.5px 14px;
  background-position:
    left 4px top 4px, left 4px top 4px,
    right 4px top 4px, right 4px top 4px,
    left 4px bottom 4px, left 4px bottom 4px,
    right 4px bottom 4px, right 4px bottom 4px;
  box-shadow: var(--cartouche), 0 0 0 1px var(--c-muhammad-gold),
              0 0 22px 3px color-mix(in srgb, var(--c-muhammad-gold) 50%, transparent);
}
.card.muhammad .card-fr { color: #fdf6e3; }
.card.muhammad .card-ar { color: #f6e2ac; }
.card.muhammad .card-nick { color: #e8dcb8; }
.card.muhammad .tag { color: #f2e2b6; border-color: currentColor; }
.card.muhammad .ah { --ah-encre: var(--c-muhammad-gold); }
#visible-count {
  position: absolute;
  top: 10px; right: 14px;
  z-index: 6;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text-muted);
  font-size: var(--fs-00);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  pointer-events: none;
}
body.rtl #visible-count { right: auto; left: 14px; }
body.panel-open #visible-count { right: calc(var(--panel-w) + 14px); }
body.rtl.panel-open #visible-count { right: auto; left: calc(var(--panel-w) + 14px); }
#visible-count { transition: right 0.28s ease, left 0.28s ease; }
#tree-empty {
  position: absolute;
  top: 50%; left: 50%;
  z-index: 7;
  transform: translate(-50%, -50%);
  width: min(30rem, calc(100% - 3rem));
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--ombre-2);
  text-align: center;
}
#tree-empty p { margin: 0; color: var(--text); font-size: var(--fs-4); }
#tree-empty .empty-sub {
  margin-top: 0.5rem;
  color: var(--text-muted);
  font-size: var(--fs-1);
  line-height: 1.5;
}
#tree-empty button {
  margin-top: 1rem;
  padding: 0.42rem 1rem;
  border: 1px solid var(--accent-trait);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--accent-trait);
  font-family: var(--font-body);
  font-size: var(--fs-1);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
#tree-empty button:hover { background: var(--accent-fond); color: var(--bg); }
.card.tag-hi::before {
  content: "";
  grid-area: 1 / 1;                   
  margin: -4px;                      
  border: 2px solid var(--hi1);       
  border-radius: 7px;
  pointer-events: none;
}
.card.tag-hi.hi-2::before { border-color: var(--hi2) var(--hi2) var(--hi1) var(--hi1); }
.card.tag-hi.hi-3::before { border-color: var(--hi2) var(--hi3) var(--hi1) var(--hi2); }
.card.tag-hi.hi-4::before { border-color: var(--hi3) var(--hi4) var(--hi1) var(--hi2); }
.tag.tag-on {
  background: color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 3px;
  box-shadow: 0 0 0 1px currentColor;
}
.card.selected,
.card.quran.selected, .card.ululazm.selected, .card.muhammad.selected {
  box-shadow: var(--cartouche),
              0 0 0 3px color-mix(in srgb, var(--c-ululazm) 45%, transparent),
              0 8px 24px rgba(0, 0, 0, 0.28);
}
.info-btn {
  margin: auto 8px 6px auto;
  width: 22px; height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: transparent;
  color: transparent;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  line-height: 22px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
@media (hover: hover) {
  .card:hover .info-btn { background-color: var(--info-bg); color: var(--info-fg); }
}
.card.selected .info-btn { background-color: var(--info-bg); color: var(--info-fg); }
.verse-btn {
  justify-self: start;
  align-self: end;
  margin-inline-start: -16px;
  margin-bottom: calc(-0.5 * (1.3em + 6px));
  padding: 2px 9px;
  display: inline-flex; align-items: center;
  border-radius: 999px;
  background: var(--bg-raised);
  border: 1px solid var(--c-ululazm);
  color: var(--or-ink);
  font-family: var(--font-carte);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  white-space: nowrap;
  cursor: help;
  box-shadow: 0 1px 3px rgba(0,0,0,0.20);
}
.verse-btn:hover { background: var(--c-ululazm); color: var(--bg-raised); }
.verse-btn:focus-visible { outline: 2px solid var(--c-select); outline-offset: 2px; }
.toggle-btn, .up-btn, .side-btn {
  width: 36px; height: 36px;
  padding: 7px;
  border: none;
  background: none;
  color: var(--toggle-fg);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.toggle-btn > span, .up-btn > span, .side-btn > span {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 4px;
  background: var(--toggle-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.20);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.toggle-btn:hover > span, .up-btn:hover > span, .side-btn:hover > span {
  background-color: rgb(from var(--toggle-bg) calc(r * 1.12) calc(g * 1.12) calc(b * 1.12));
  color: rgb(from var(--toggle-fg) calc(r * 1.12) calc(g * 1.12) calc(b * 1.12));
}
.toggle-btn { align-self: end; justify-self: center; margin-bottom: -18px; }
.side-btn { align-self: center; justify-self: end; margin-inline-end: -18px; }
.spouse-link {
  fill: none;
  stroke: var(--alliance);
  stroke-width: 1.4px;
  stroke-linecap: round;
  opacity: 0.9;
}
.spouse-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 16px;
  pointer-events: stroke;
  cursor: help;
}
.up-btn { align-self: start; justify-self: center; margin-top: -18px; }
#detail-panel {
  --ruban-w: 22px;
  --ruban-x: 3.2rem;
  --ruban-place: calc(var(--ruban-x) + var(--ruban-w) + 0.35rem);
  --volet-pt: 1.5rem;
  --volet-px: 1.5rem;
  --volet-pb: 1.6rem;
  position: fixed;
  top: var(--banner-h, 64px);
  right: 0;
  height: calc(100vh - var(--banner-h, 64px));
  width: var(--panel-w);
  background: var(--panel);
  border-left: 1px solid var(--line);
  padding: var(--volet-pt) var(--volet-px) var(--volet-pb);
  overflow-y: auto;
  z-index: 18;
  transform: translateX(100%);
  visibility: hidden;
  box-shadow: none;
  transition: transform 0.30s ease, visibility 0s linear 0.30s, box-shadow 0.30s ease;
}
#detail-panel.open {
  transform: translateX(0);
  visibility: visible;
  box-shadow: -14px 0 36px rgba(0, 0, 0, 0.28);
  transition: transform 0.30s ease, visibility 0s linear 0s, box-shadow 0.30s ease;
}
#close-panel-btn {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: var(--fs-5);
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}
#close-panel-btn:hover { color: var(--text); }
.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.15rem 0.8rem;
  margin-bottom: 0.2rem;
  padding-right: max(2.2rem, calc(var(--ruban-place) - var(--volet-px)));
}
.ah {
  --ah-encre: var(--c-arabic);
  font-family: "Honorifics", var(--font-arabic);
  font-size: 1.15em;
  line-height: 1;
  color: color-mix(in srgb, var(--ah-encre) 92%, transparent);
  white-space: nowrap;
  margin-inline-start: 0.15em;
}
#panel-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-6);
}
#panel-name.as-arabic { font-family: var(--font-arabic); direction: rtl; font-size: 1.78rem; }
.arabic {
  margin: 0;
  color: var(--text);
  font-family: var(--font-arabic);
  direction: rtl;
  text-align: right;
  font-size: 1.62rem;
  line-height: 1.3;
}
#panel-arabic { margin-left: auto; line-height: 1.75; }
.panel-date {
  margin: 0.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.date-tiret { color: var(--text-faint); }
.date-chip {
  display: inline-block;
  font-size: var(--fs-1);
  font-variant-numeric: tabular-nums;
  padding: 0.2rem 0.65rem;
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--c-desc-link) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-desc-link) 45%, transparent);
  color: var(--text);
}
.kin { margin-bottom: 0.85rem; }
.kin-label {
  display: block;
  position: relative;
  padding-inline-start: 0.95rem;
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.4rem;
}
.kin-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.kin-cards.single { grid-template-columns: 1fr; }
.kin-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kin-card:hover {
  border-color: var(--accent-trait);
  box-shadow: inset 0 0 0 1px var(--accent-trait), var(--box-shadow);   
}
.kin-fr {
  font-family: var(--font-display); font-size: var(--fs-2); line-height: 1.2; text-align: center;
  position: relative; top: -0.32em;
}
.kin-ar {
  font-family: var(--font-arabic); direction: rtl;
  font-size: 1.16rem; color: var(--c-arabic); line-height: 1.75;
  position: relative; top: -0.375em;
}
.kin-cards.single .kin-card { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 0.55rem; text-align: left; }
.kin-akhi {
  border: 1px solid color-mix(in srgb, var(--tag-green) 55%, transparent);   
  border-radius: var(--r-sm);
  padding: 0.35rem 0.6rem;
}
.kin-card.kin-plain {
  cursor: default;
  border-style: dashed;
  background: transparent;
  color: var(--text-muted);
}
.kin-card.kin-plain:hover { border-color: var(--card-border); box-shadow: none; }
#detail-panel .kin-cards { display: block; }
#detail-panel .kin-card {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  padding: 0.24rem 0.2rem 0.24rem 0.95rem;
  border: none;
  border-radius: 0;
  background: none;
  text-align: start;
}
body.rtl #detail-panel .kin-card { padding: 0.24rem 0.95rem 0.24rem 0.2rem; }
#detail-panel .kin-card { border-bottom: 1px solid var(--line); }
.panel-divider.apres-parente { display: none; }
#detail-panel .kin-card:hover {
  background: var(--bg-raised);
  box-shadow: inset 0 0 0 1px var(--accent-trait);   
}
#detail-panel .kin-card:hover .kin-fr {
  color: var(--accent-trait);
  box-shadow: inset 0 -1px 0 0 color-mix(in srgb, var(--accent-trait) 55%, transparent);
}
#detail-panel .kin-card.kin-plain:hover { background: none; box-shadow: none; }
#detail-panel .kin-card.kin-plain:hover .kin-fr { color: inherit; box-shadow: none; }
#detail-panel .kin-fr {
  flex: 1 1 auto; min-width: 0; text-align: start; line-height: 1.35;
  flex-grow: 0; margin-inline-end: auto;
  transition: color 0.15s ease, box-shadow 0.15s ease;
}
#detail-panel .kin-ar {
  flex: 0 0 auto; max-width: 62%; text-align: end; margin-left: auto;
  font-size: 1.05rem; line-height: 1.4;
}
body.rtl #detail-panel .kin-ar { margin-left: 0; margin-right: auto; }
.panel-divider {
  height: 1px;
  background: var(--line-soft);
  margin: 1rem 0;
}
.note {
  font-size: var(--fs-1);
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.8rem;
  line-height: 1.45;
}
.panel-more-label {
  display: block;
  position: relative;
  padding-inline-start: 0.95rem;
  font-size: var(--fs-1);
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: var(--space-1);
  font-weight: 600;
  margin-top: var(--space-3);
}
.kin-label::before, .panel-more-label::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.7em;           
  width: 0.55rem;
  height: 1.5px;
  background: var(--accent-trait);
}
footer {
  padding: 1.6rem 1.5rem 2.6rem;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.78rem;
  line-height: 1.5;
  max-width: 680px;
  margin: 0 auto;
}
.sm-title {
  font-size: var(--fs-00, 0.72rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
  font-weight: 500;
  line-height: 1.3;
  margin-top: 0;
}
.sm-check {
  display: flex;
  align-items: flex-start;
  gap: 0.42rem;
  padding: 0.28rem 0;
  cursor: pointer;
  color: var(--text);
  line-height: 1.3;
  transition-property: color, background-color, border-color, box-shadow, opacity;
  transition-duration: var(--dur-teinte);
  transition-timing-function: var(--ease-vif);
  padding-block: 0.16rem;
}
.sm-check input { margin-top: 2px; cursor: pointer; accent-color: var(--accent-trait); width: 16px; height: 16px; }
.sm-check input:disabled { cursor: not-allowed; }
.sm-check input:disabled + span { color: var(--text-muted); }
.sm-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 0.35rem;
  vertical-align: middle;
}
.dot-quran { background: var(--src-quran); }
.dot-ibnkathir { background: var(--src-ibnkathir); }
.dot-tabari { background: var(--src-tabari); }
.dot-israiliyyat { background: var(--src-israiliyyat); }
.dot-nassaba { background: var(--src-nassaba); }
.dot-archeo { background: var(--src-archeo); }
.dot-unsourced { background: var(--src-unsourced); }
.panel-origin-wrap { margin-top: 1.2rem; }
.origin-line { margin: 0.3rem 0 0; }
.origin-chip {
  display: inline-block;
  font-size: var(--fs-0);
  padding: 0.24rem 0.6rem;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
}
.origin-chip.origin-unsourced { background: color-mix(in srgb, var(--text-faint) 14%, transparent); border-color: var(--text-faint); }
.origin-chip.origin-quran { background: color-mix(in srgb, var(--src-quran) 18%, transparent); border-color: var(--src-quran); }
.origin-chip.origin-ibnkathir { background: color-mix(in srgb, var(--src-ibnkathir) 18%, transparent); border-color: var(--src-ibnkathir); }
.origin-chip.origin-tabari { background: color-mix(in srgb, var(--src-tabari) 18%, transparent); border-color: var(--src-tabari); }
.origin-chip.origin-israiliyyat { background: color-mix(in srgb, var(--src-israiliyyat) 18%, transparent); border-color: var(--src-israiliyyat); }
.origin-chip.origin-nassaba { background: color-mix(in srgb, var(--src-nassaba) 18%, transparent); border-color: var(--src-nassaba); }
.origin-chip.origin-archeo { background: color-mix(in srgb, var(--src-archeo) 18%, transparent); border-color: var(--src-archeo); }
#time-axis {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--frise-w);
  z-index: 6;
  pointer-events: auto;
  cursor: ns-resize;
  touch-action: none;
}
#time-axis > * { pointer-events: none; }
#time-axis::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  background: linear-gradient(to right,
    color-mix(in srgb, var(--bg) 92%, transparent) 0%,
    color-mix(in srgb, var(--bg) 78%, transparent) 55%,
    transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 100%);
}
.axis-minor {
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  width: 8px;
  height: 0;
  border-top: 1px solid var(--line);
  opacity: 0.4;
}
.axis-tick {
  position: absolute;
  left: 0;
  z-index: 1;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
}
.axis-line {
  height: 0;
  border-top: 1.5px solid var(--c-desc-link);
  opacity: 0.7;
  flex: none;
}
.tick-s .axis-line { width: 12px; opacity: 0.5; }
.tick-c .axis-line { width: 18px; }
.tick-d .axis-line { width: 24px; }
.tick-m .axis-line { width: 30px; opacity: 0.95; }
.tick-m .axis-era { font-weight: 700; }
.axis-era {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#help-btn {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 35;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, #e7c877 55%, var(--line));
  background: color-mix(in srgb, #e7c877 82%, #fff);
  color: #5a4415;
  font-family: var(--font-display);
  font-size: var(--fs-5);
  font-weight: 400;
  cursor: pointer;
  box-shadow: var(--ombre-2);
  transition: transform 0.12s ease, right 0.30s ease;
  line-height: 1;
}
body[data-edition="sahabah"].sur-l-arbre #help-btn,
body[data-edition="anbiya"].sur-l-arbre #help-btn {
  border-color: color-mix(in srgb, var(--accent-fond) 60%, var(--line));
  background: var(--accent-fond);
  color: #fbf8ef;
}
body.panel-open #help-btn { right: calc(min(360px, 88vw) + 1rem); }
body.panel-open #help-popover { right: calc(min(360px, 88vw) + 1rem); }
body.rtl.panel-open #help-btn,
body.rtl.panel-open #help-popover { right: auto; left: calc(min(360px, 88vw) + 1rem); }
#help-btn:hover { transform: translateY(-2px); }
#help-popover {
  position: fixed;
  right: 1rem;
  bottom: 4rem;
  transition: right 0.30s ease;
  z-index: 35;
  width: min(320px, 86vw);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1rem 1.1rem;
  box-shadow: var(--ombre-3);
  font-size: var(--fs-1);
  line-height: 1.5;
  color: var(--text-muted);
  display: none;
  transition-duration: var(--dur-teinte);
  transition-timing-function: var(--ease-entree);
}
#help-popover.open { display: block; }
#help-popover h3 { margin: 0 0 0.5rem; font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: var(--fs-4); }
#help-popover p { margin: 0 0 0.5rem; }
#help-popover b { color: var(--text); }
.hp-note { font-size: var(--fs-0); font-style: italic; color: var(--text-faint); border-top: 1px solid var(--line-soft); padding-top: 0.5rem; }
.about {
  max-width: 720px;
  margin: 0 auto;
  padding: 2.4rem 1.5rem 3rem;
}
.about h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-7); margin: 0 0 1rem; }
.about h2 {
  position: relative;
  padding-inline-start: 1.15rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-5);
  line-height: 1.3;
  letter-spacing: 0.005em;
  margin: 1.8rem 0 0.8rem;
  color: var(--gold-ink);
}
.about h2::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.65em;          
  width: 0.72rem;
  height: 2px;
  background: var(--gold-ink);
}
.about p { line-height: 1.65; color: var(--text-muted); margin: 0 0 0.8rem; }
.about :lang(ar) { line-height: 1.9; }
.about ul { line-height: 1.65; color: var(--text-muted); padding-left: 1.2rem; }
.about li { margin-bottom: 0.4rem; }
.about b { color: var(--text); }
.about-warn { font-size: var(--fs-2); font-style: italic; color: var(--text-faint); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.7rem 0.9rem; }
.about-legal { font-size: var(--fs-2); line-height: 1.7; color: var(--text-muted); }
.about-editions { margin: 0 0 1.2rem; }
.about-editions summary { cursor: pointer; color: var(--text); font-weight: 600; padding: 0.3rem 0; }
.about-editions > div { font-size: var(--fs-2); }
.about-editions ul { margin: 0.2rem 0 0.8rem; }
.about-editions sup { line-height: 0; }
.lien-texte {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--gold-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.lien-texte:focus-visible { outline: 2px solid var(--accent-trait); outline-offset: 2px; border-radius: 2px; }
.contact-note { margin: 0; font-size: var(--fs-1); color: var(--text-muted); }
.contact-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.contact-champ { display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--fs-1); color: var(--text-muted); }
.contact-champ input,
.contact-champ textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--text) 7%, var(--bg));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-2);
}
.contact-champ textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
.contact-champ input:focus,
.contact-champ textarea:focus { outline: none; border-color: var(--accent-trait); }
.contact-champ input:focus-visible,
.contact-champ textarea:focus-visible { outline: 2px solid var(--accent-trait); outline-offset: 0; }
.contact-form .cta { align-self: flex-start; }
.contact-form .cta:disabled { opacity: 0.55; cursor: wait; }
.contact-piege { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.contact-etat { margin: 0; font-size: var(--fs-1); color: var(--text-muted); }
.contact-etat[hidden] { display: none; }
.contact-etat.contact-ok { color: var(--accent-trait); }
.contact-etat.contact-ko { color: var(--c-mrca); font-style: italic; }
.concept-arts { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.concept-arts > li { margin: 0; border-top: 1px solid var(--line-soft); }
.concept-arts > li:last-child { border-bottom: 1px solid var(--line-soft); }
.concept-art {
  display: block;
  width: 100%;
  padding: 0.95rem 0;
  border: 0;
  background: none;
  text-align: inherit;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-4);
  line-height: 1.35;
  color: var(--text);
  cursor: pointer;
  transition-property: color;
  transition-duration: var(--dur-teinte);
  transition-timing-function: var(--ease-vif);
}
.concept-art:hover { color: var(--gold-ink); }
.concept-art:lang(ar) { line-height: 1.9; }
.concept-back {
  display: inline-block;
  margin: 0 0 1.2rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--fs-2);
  color: var(--text-muted);
  cursor: pointer;
  transition-property: color;
  transition-duration: var(--dur-teinte);
  transition-timing-function: var(--ease-vif);
}
.concept-back:hover { color: var(--gold-ink); }
.concept-chapitres {
  margin: -0.45rem 0 0.95rem;
  padding-inline-start: 1.4rem;
  color: var(--text-muted);
  font-size: var(--fs-2);
  line-height: 1.5;
}
.concept-chapitres li { padding: 0.1rem 0; }
.concept-chapitres li::marker { color: var(--gold-ink); font-weight: 600; }
#concept-art-chapitres { margin: 0 0 1.4rem; font-family: var(--font-display); font-size: var(--fs-4); color: var(--text); }
#concept-art-chapitres[hidden] { display: none; }
.concept-groupe-titre {
  margin: 0;
  padding: 0.95rem 0 0.35rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-4);
  line-height: 1.35;
  color: var(--text-muted);
}
.concept-groupe-titre:lang(ar) { line-height: 1.9; }
.concept-sous-arts { margin: 0 0 0.6rem; padding-inline-start: 1.6rem; }
.concept-sous-arts li::marker { color: var(--gold-ink); font-family: var(--font-display); font-weight: 600; }
.concept-sous-arts .concept-art { padding: 0.4rem 0; font-size: var(--fs-3); }
#tag-tip {
  position: fixed;
  z-index: 60;
  max-width: min(260px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-md);
  border: 1.5px solid var(--tip-c, var(--line));
  background: color-mix(in srgb, var(--tip-c, var(--panel)) 12%, var(--panel));
  color: var(--tip-c, var(--text));
  box-shadow: var(--ombre-3);
  font-size: var(--fs-1);
  line-height: 1.45;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.14s ease;
  pointer-events: none;
  transition-duration: var(--dur-teinte);
  transition-timing-function: var(--ease-entree);
}
#tag-tip.show { opacity: 1; visibility: visible; pointer-events: auto; }
#tag-tip .tip-text { margin-bottom: 0.45rem; }
#tag-tip .tip-extra {
  margin-bottom: 0.45rem;
  color: var(--text-muted);
  font-size: var(--fs-0);
  line-height: 1.4;
}
#tag-tip .tip-calc {
  margin-bottom: 0.5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line-soft);   
  background: var(--card-bg);
  border-radius: 3px;
  font-size: var(--fs-0);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  text-align: start;
}
#tag-tip .tip-src {
  padding-top: 0.4rem;
  border-top: 1px solid var(--line-soft);
  color: var(--text);
  font-size: var(--fs-0);
  line-height: 1.5;
}
#tag-tip .tip-src .sm-dot { margin-right: 0.35rem; }
#tag-tip .tip-src b { font-weight: 700; }
#tag-tip .tip-cite {
  margin: 0.15rem 0 0.5rem;
  padding: 0.45rem 0.55rem;
  border-radius: 5px;
  background: color-mix(in srgb, var(--cite) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cite) 40%, transparent);   
}
.tip-cite { --cite: var(--c-quran); }
.tip-cite.cite-israiliyyat { --cite: var(--src-israiliyyat); }
.tip-cite.cite-ibnkathir   { --cite: var(--src-ibnkathir); }
.tip-cite.cite-tabari      { --cite: var(--src-tabari); }
.tip-cite.cite-nassaba     { --cite: var(--src-nassaba); }
.tip-cite.cite-archeo      { --cite: var(--src-archeo); }
.tip-cite.cite-unsourced   { --cite: var(--text-faint); }
.tip-verse b { font-weight: 700; color: var(--cite); }
.tip-trad b { font-weight: 700; }
.tip-verse.latin {
  font-family: var(--font-body) !important;
  direction: ltr !important;
  text-align: left !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  font-style: italic;
}
body.rtl .tip-verse.latin { text-align: right !important; }
#tag-tip .tip-verse {
  font-family: var(--font-arabic);
  direction: rtl;
  text-align: right;
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--text);
}
#tag-tip .tip-ref {
  margin-top: 0.25rem;
  font-size: var(--fs-0);
  font-style: italic;
  color: var(--text-muted);
}
#tag-tip .tip-trad, .concept-block .tip-trad {
  margin-top: 0.35rem;
  font-size: var(--fs-1);
  font-style: italic;
  line-height: 1.5;
  color: var(--text);
}
#tag-tip .tip-ref-solo { margin: 0.3rem 0 0.1rem; }
.concept-block .tip-cite {
  margin: 0.6rem 0 0.9rem;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--cite) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--cite) 40%, transparent);
}
.concept-block .tip-verse {
  font-family: var(--font-arabic);
  direction: rtl;
  text-align: right;
  font-size: 1.25rem;
  line-height: 1.9;
  color: var(--text);
}
.concept-block .tip-ref {
  margin-top: 0.3rem;
  font-size: var(--fs-0);
  font-style: italic;
  color: var(--text-muted);
}
.link-hit { fill: none; stroke: transparent; stroke-width: 14px; pointer-events: stroke; cursor: help; }
.info-block { display: block; margin-bottom: 0.9rem; }
.info-block:last-child { margin-bottom: 0; }
.lien-fiche {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent-trait) 55%, transparent);
  text-underline-offset: 0.2em;
  transition: color var(--dur-teinte) var(--ease-vif), text-decoration-color var(--dur-teinte) var(--ease-vif);
}
.lien-fiche:hover { color: var(--gold-ink); text-decoration-color: currentColor; }
body.rtl .lien-fiche { text-underline-offset: 0.35em; }
.para-srcs {
  display: block;
  margin-top: 0.28rem;
  font-size: var(--fs-0);
  line-height: 1.45;
  cursor: help;
}
.para-ref {
  --cite: var(--text-faint);
  color: color-mix(in srgb, var(--cite) 78%, var(--text-muted));
  border-bottom: 1px dotted color-mix(in srgb, var(--cite) 55%, transparent);
  font-style: italic;
}
.para-srcs:hover .para-ref, .para-srcs:focus-visible .para-ref { color: var(--cite); }
.para-srcs:focus-visible { outline: 2px solid var(--c-select); outline-offset: 2px; border-radius: 3px; }
.para-sep { color: var(--text-faint); margin: 0 0.35rem; }
.para-ref.cite-quran       { --cite: var(--src-quran); }
.para-ref.cite-israiliyyat { --cite: var(--src-israiliyyat); }
.para-ref.cite-ibnkathir   { --cite: var(--src-ibnkathir); }
.para-ref.cite-tabari      { --cite: var(--src-tabari); }
.para-ref.cite-nassaba     { --cite: var(--src-nassaba); }
.para-ref.cite-archeo      { --cite: var(--src-archeo); }
.date-chip.muted { color: var(--text-faint); font-style: italic; }
.date-chip.unknown { font-style: italic; letter-spacing: 0.01em; }
#tag-tip .tip-more {
  display: inline-block;
  color: var(--tip-c, var(--accent-trait));
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.concept-block {
  padding: 1.1rem 0 1.3rem;
  border-top: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  scroll-margin-top: 3.5rem;
}
.concept-block h2 { margin: 0 0 0.6rem; padding-inline-start: 0; }
.concept-block h2::before { content: none; }
.concept-block h2 .tag { font-size: 0.82rem; padding: 5px 10px; }
.tag-ancre { text-decoration: none; }
.tag-ancre:focus-visible { outline: 2px solid var(--accent-trait); outline-offset: 2px; border-radius: var(--r-sm); }
.concept-block .tag:lang(ar) { line-height: 1.9; }
.concept-block p { margin: 0 0 0.8rem; line-height: 1.6; color: var(--text-muted); }
.concept-block details { font-size: var(--fs-2); }
.concept-block summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
  padding: 0.3rem 0;
  user-select: none;
}
.concept-people {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.concept-person {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  background: var(--card-bg);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-1);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  transition-property: color, background-color, border-color, box-shadow, opacity;
  transition-duration: var(--dur-teinte);
  transition-timing-function: var(--ease-vif);
}
.concept-person:hover { border-color: var(--accent-trait); color: var(--gold-ink); }
.concept-person.trouve {
  border-color: var(--accent-trait);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-trait) 35%, transparent);
  font-weight: 700;
}
.page-back-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: -2.4rem -1.5rem 0.9rem;
  padding: 1.5rem 1.5rem 0.5rem;
  background: var(--bg);
}
.page-back-bar .page-back { margin-bottom: 0; }
.fav-btn {
  position: absolute;
  top: 0.55rem;
  inset-inline-end: var(--ruban-x, 3.2rem);
  z-index: 3;
  width: var(--ruban-w, 22px);
  height: 30px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  transition: color var(--dur-teinte) var(--ease-vif);
}
.fav-btn:hover { color: var(--gold-ink); }
.fav-btn .fav-creux {
  width: 20px; height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.fav-btn .fav-ruban { display: none; }
.fav-btn.pose {
  top: 0;
  height: 0;
  color: var(--accent-trait);
}
.fav-btn.pose .fav-creux { display: none; }
.fav-btn.pose .fav-ruban {
  display: block;
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: var(--ruban-w, 22px);
  height: 58px;
  fill: currentColor;
  stroke: none;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
}
.fav-btn.pose:hover { color: color-mix(in srgb, var(--accent-trait) 80%, #fff); }
.fav-btn:focus-visible { outline: 2px solid var(--accent-trait); outline-offset: 3px; border-radius: 3px; }
#fiche-fav { inset-inline-start: var(--ruban-x); inset-inline-end: auto; }
.banner-ico .ico-signet { stroke-width: 1.7; }
#fav-page-btn.plein .ico-signet { fill: currentColor; }
#fav-page-btn.plein { color: #ffd98a; }
#fav-page-btn.actif { border-color: transparent; background: #ffd98a; color: #2a1d08; }
.fav-liste { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 1.2rem; }
.fav-ligne { display: flex; align-items: center; gap: 0.5rem; }
.fav-ligne .concept-person { flex: 1; text-align: start; }
.fav-off {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--text-faint);
  font-size: var(--fs-4);
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-teinte) var(--ease-vif);
}
.fav-off:hover { color: var(--accent-trait); background: var(--bg-raised); }
.page-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 1rem;
  padding: 0.3rem 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-1);
  cursor: pointer;
  transition: color var(--dur-teinte) var(--ease-vif);
}
.page-back:hover { color: var(--gold-ink); text-decoration: underline; }
.page-back:focus-visible { outline: 2px solid var(--accent-trait); outline-offset: 2px; border-radius: var(--r-sm); }
body.rtl .page-back span[aria-hidden] { transform: scaleX(-1); }
.frise-page, .clans-page { max-width: 1120px; margin: 0 auto; padding: 2.6rem 1.5rem 4rem; }
.page-tete { margin-bottom: 1.8rem; }
.surtitre {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0 0 0.9rem;
  font-family: var(--font-body);
  font-size: var(--fs-00);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.surtitre::before { content: ""; width: 1.8rem; height: 1px; background: currentColor; opacity: 0.6; }
body.rtl .surtitre { letter-spacing: 0; text-transform: none; font-size: var(--fs-1); }
.page-tete h1 {
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.3rem);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--text);
}
.page-tete h1 em { font-style: normal; color: var(--gold-ink); }   
.page-tete h1 .ah { font-size: 0.62em; }
body.rtl .page-tete h1 { font-family: var(--font-arabic); line-height: 1.5; }
.page-chapo { max-width: 46rem; margin: 0; font-size: var(--fs-3); line-height: 1.65; color: var(--text-muted); }
.frise-carte {
  padding: 1rem 1.2rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  box-shadow: var(--ombre-1);
}
.frise-carte-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.frise-portee { margin: 0; }
.frise-portee-lib {
  display: block;
  font-size: var(--fs-00);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.rtl .frise-portee-lib { letter-spacing: 0; text-transform: none; }
.frise-portee-val { font-family: var(--font-display); font-size: var(--fs-5); color: var(--text); }
.frise-tout {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-muted);
  font: var(--fs-1) var(--font-body);
  cursor: pointer;
}
.frise-tout:hover { border-color: var(--accent-trait); color: var(--gold-ink); }
.frise-vue { position: relative; direction: ltr; margin-top: 0.4rem; }
.frise-svg { display: block; overflow: visible; }
.ere-1 { --ere: var(--ere-1); } .ere-2 { --ere: var(--ere-2); } .ere-3 { --ere: var(--ere-3); }
.ere-4 { --ere: var(--ere-4); } .ere-5 { --ere: var(--ere-5); } .ere-6 { --ere: var(--ere-6); }
.ere-7 { --ere: var(--ere-7); } .ere-8 { --ere: var(--ere-8); } .ere-9 { --ere: var(--ere-9); }
.frise-barre { fill: var(--ere); opacity: 0.82; cursor: pointer; transition: opacity var(--dur-teinte) var(--ease-vif); }
.frise-barre:hover { opacity: 1; }
.frise-pt { cursor: pointer; }
.frise-pt circle { fill: var(--bg-raised); stroke: var(--ere); stroke-width: 2.2; transition: fill var(--dur-teinte) var(--ease-vif); }
.frise-pt line { stroke: var(--ere); stroke-width: 3; stroke-linecap: round; opacity: 0.55; }
.frise-pt:hover circle, .frise-pt.choisi circle { fill: var(--ere); }
.frise-pt:focus { outline: none; }
.frise-pt:focus-visible circle { fill: var(--ere); stroke: var(--text); }
.frise-axe, .frise-grad { stroke: var(--line); stroke-width: 1; }
.frise-etiq { fill: var(--text-muted); font-family: var(--font-body); font-size: 11px; text-anchor: middle; }
.frise-bulle {
  position: absolute;
  z-index: 3;
  max-width: 280px;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  box-shadow: var(--ombre-2);
  pointer-events: none;
}
.frise-bulle-date { display: block; font-size: var(--fs-00); color: var(--text-muted); }
.frise-bulle-titre { font-family: var(--font-display); font-size: var(--fs-1); color: var(--text); }
.frise-eres { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1.3rem 0 0.5rem; }
.frise-puce {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  font: var(--fs-1) var(--font-body);
  cursor: pointer;
  transition: border-color var(--dur-teinte) var(--ease-vif), background-color var(--dur-teinte) var(--ease-vif);
}
.frise-puce i { width: 8px; height: 8px; border-radius: 50%; background: var(--ere, var(--text-faint)); }
.frise-puce-n { font-size: var(--fs-00); color: var(--text-faint); }
.frise-puce:hover { border-color: var(--accent-trait); }
.frise-puce.active { border-color: var(--gold-ink); background: color-mix(in srgb, var(--accent-trait) 14%, transparent); }
.frise-compte { margin: 0.4rem 0 1rem; font-size: var(--fs-1); color: var(--text-muted); }
.frise-liste { display: flex; flex-direction: column; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.frise-ev {
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--line);   
  border-radius: var(--r-md);
  background: var(--bg-raised);
  scroll-margin: 6rem;
  transition: box-shadow var(--dur-geste) var(--ease-entree);
}
.frise-ev.vise { box-shadow: 0 0 0 2px var(--ere), var(--ombre-2); }
.frise-ev-tete { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 1rem; }
.frise-ev-ere {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-00);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.frise-ev-ere i { width: 8px; height: 8px; border-radius: 50%; background: var(--ere); }
body.rtl .frise-ev-ere { letter-spacing: 0; text-transform: none; font-size: var(--fs-1); }
.frise-ev-date { font-size: var(--fs-1); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.frise-ev-titre { margin: 0.45rem 0 0.5rem; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-5); line-height: 1.3; color: var(--text); }
body.rtl .frise-ev-titre { font-family: var(--font-arabic); }
.frise-ev-texte { margin: 0; line-height: 1.65; color: var(--text); }
body.rtl .frise-ev-texte { line-height: 1.9; }
.frise-ev-gens { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; }
.frise-nom {
  padding: 0.3rem 0.6rem;
  border: 1px dashed var(--line);
  border-radius: 4px;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: var(--fs-1);
}
.frise-clan, .clan-puce {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--tag-clan) 10%, transparent);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-1);
  cursor: pointer;
}
.frise-clan:hover, .clan-puce:hover { border-color: var(--accent-trait); color: var(--gold-ink); }
.frise-ev-src { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin: 0.8rem 0 0; font-size: var(--fs-1); color: var(--text-muted); }
.frise-ev-lib { font-size: var(--fs-00); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
body.rtl .frise-ev-lib { letter-spacing: 0; text-transform: none; }
.fiche-sirah, .fiche-israil { margin: 0 0 var(--space-5); }
.fiche-frise { position: relative; direction: ltr; margin: 0.3rem 0 0.4rem; }
.frise-encadre {
  position: absolute;
  z-index: 4;
  width: max-content;
  max-width: min(17.5rem, 100%);
  padding: 0.45rem 0.7rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  box-shadow: var(--ombre-2);
  text-align: start;
}
.frise-encadre .frise-bulle-titre { display: block; }
.frise-encadre-plus {
  margin-top: 0.3rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--gold-ink);
  font: var(--fs-0) var(--font-body);
  cursor: pointer;
}
.frise-encadre-plus:hover { text-decoration: underline; }
.frise-svg.petit .frise-barre { opacity: 0.5; cursor: default; }
.frise-svg.petit .frise-barre:hover { opacity: 0.85; }
.frise-svg.petit .frise-pt circle { stroke-width: 1.5; }
.frise-marque-plage, .frise-marque-trait, .frise-marque-etiq { pointer-events: none; }
.frise-marque-plage { fill: color-mix(in srgb, var(--c-ululazm) 24%, transparent); stroke: var(--c-ululazm); stroke-width: 1; stroke-dasharray: 3 2; }
.frise-marque-trait { stroke: var(--c-ululazm); stroke-width: 2.5; }
.frise-marque-etiq rect, .frise-marque-etiq path { fill: var(--c-ululazm); }
.frise-marque-etiq text { fill: var(--bg); font-family: var(--font-body); font-weight: 600; text-anchor: middle; }
.fiche-sirah-quand { margin: 0.2rem 0 0.35rem; line-height: 1.6; }
.fiche-sirah-lib { font-weight: 600; color: var(--gold-ink); }
.fiche-sirah-date { color: var(--text-muted); white-space: nowrap; }
.fiche-sirah-lien, .clan-vers-arbre {
  margin-top: 0.4rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--gold-ink);
  font: var(--fs-1) var(--font-body);
  cursor: pointer;
}
.fiche-sirah-lien:hover, .clan-vers-arbre:hover { text-decoration: underline; }
body.rtl .fiche-sirah-lien span[aria-hidden], body.rtl .clan-vers-arbre span[aria-hidden] { display: inline-block; transform: scaleX(-1); }
.clans-verset { max-width: 48rem; margin: 0 0 1.3rem; }
.clans-verset .tip-cite {
  padding: 0.9rem 1.15rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--cite) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--cite) 40%, transparent);
}
.clans-verset .tip-verse {
  font-family: var(--font-arabic);
  direction: rtl;
  text-align: right;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  line-height: 2;
  color: var(--text);
}
.clans-verset .tip-trad { margin-top: 0.5rem; font-size: var(--fs-3); font-style: italic; line-height: 1.6; color: var(--text); }
.clans-verset .tip-ref { margin-top: 0.4rem; font-size: var(--fs-0); color: var(--text-muted); }
.clans-cadre {
  --cadre-w: min(100cqw - 2rem, 2400px);
  --marge-w: 160px;
  --deg-0: #c8962e;
  --deg-1: #c0623a;
  --deg-2: #a8486e;
  --deg-3: #5577b0;
  --deg-4: #3f8a8c;
  --deg-5: #8a6fb0;
  --deg-fond: 13%;
  --deg-marge: 24%;
  position: relative;
  width: var(--cadre-w);
  margin: 1.4rem 0 0.8rem;
  margin-inline-start: calc((100% - var(--cadre-w)) / 2);
}
:root.light .clans-cadre { --deg-fond: 10%; --deg-marge: 19%; }
.clans-marge { position: absolute; top: 0; inset-inline-start: 0; width: var(--marge-w); }
.clans-defile { overflow-x: auto; margin-inline-start: var(--marge-w); padding-bottom: 0.4rem; }
.clans-plateau { position: relative; margin-inline: auto; }
.clans-traits { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
.clans-bande { fill: color-mix(in srgb, var(--deg-c) var(--deg-fond), transparent); }
.clans-degre {
  position: absolute;
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--deg-c) 45%, transparent);   
  background: color-mix(in srgb, var(--deg-c) var(--deg-marge), transparent);
  overflow: hidden;
}
.clans-degre-nom {
  font-size: var(--fs-00);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--deg-c) 62%, var(--text));
}
.clans-degre-ar { font-family: var(--font-arabic); font-size: 1.3rem; line-height: 1.5; color: var(--text); }
.clans-degre-sens { font-size: var(--fs-1); font-style: italic; line-height: 1.35; color: var(--text-muted); }
body.rtl .clans-degre-sens { font-style: normal; }
.clans-cadre.en-liste { --marge-w: 80px; }
.en-liste .clans-degre { padding: 0.55rem 0.45rem; }
.en-liste .clans-degre-sens { display: none; }
body:not(.rtl) .en-liste .clans-degre-ar { display: none; }
.en-liste .clans-degre-nom { letter-spacing: 0.06em; }
.clan-trait { fill: none; stroke: var(--c-son-link); stroke-width: 1.6; }
.clan-trait.pointille { stroke: var(--c-desc-link); stroke-dasharray: 4 4; }
.clan-noeud {
  --ecoin: var(--clan-c, var(--deg-c, var(--line)));
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  max-width: 300px;
  padding: 0.55rem 1.05rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--ecoin) 40%, var(--card-border));
  border-radius: 2px;
  background:
    linear-gradient(135deg, var(--ecoin) 50%, transparent 50%) left 4px top 4px / 7px 7px no-repeat,
    linear-gradient(225deg, var(--ecoin) 50%, transparent 50%) right 4px top 4px / 7px 7px no-repeat,
    linear-gradient(45deg, var(--ecoin) 50%, transparent 50%) left 4px bottom 4px / 7px 7px no-repeat,
    linear-gradient(315deg, var(--ecoin) 50%, transparent 50%) right 4px bottom 4px / 7px 7px no-repeat,
    var(--card-bg);
  box-shadow:
    inset 0 0 0 3px var(--card-bg),
    inset 0 0 0 4px color-mix(in srgb, var(--ecoin) 55%, transparent),
    var(--ombre-1);
  color: var(--text);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur-teinte) var(--ease-vif), transform var(--dur-teinte) var(--ease-vif);
}
.clan-noeud:hover { border-color: var(--accent-trait); transform: translateY(-1px); }
.clan-noeud.souche { --ecoin: var(--or-ink); border-color: color-mix(in srgb, var(--or-ink) 60%, var(--card-border)); }
.clan-noeud-nom {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: var(--fs-3);
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.clan-noeud.souche .clan-noeud-nom { font-weight: 600; }
body.rtl .clan-noeud-nom { font-family: var(--font-arabic); line-height: 1.5; }
.clan-point { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--or-ink); }
.clans-note { max-width: 46rem; font-size: var(--fs-1); font-style: italic; color: var(--text-faint); }
.clans-degres { margin-top: 2.2rem; }
.clans-degres h2 { margin: 0 0 0.8rem; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-5); color: var(--gold-ink); }
.clans-degres p { max-width: 50rem; line-height: 1.7; color: var(--text); }
.clans-degres .clans-deg-regle { font-size: var(--fs-1); font-style: italic; color: var(--text-muted); }
.clan-lignage { gap: 0.45rem; text-transform: none; letter-spacing: 0; font-size: var(--fs-1); }
.clan-lignage::before { display: none; }
.clan-lien { padding: 0; border: none; background: none; color: var(--gold-ink); font: inherit; cursor: pointer; }
.clan-lien:hover { text-decoration: underline; }
.clan-titres { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 1.5rem; }
.clan-ar { margin: 0 0 1rem; font-family: var(--font-arabic); font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.6; color: var(--c-arabic); }
.clan-fondateur { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; margin: 0; color: var(--text-muted); }
.clan-fondateur .clan-vers-arbre { margin: 0; }
.clan-chiffres {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1.6rem 0;
  border-block: 1px solid var(--line);
}
.clan-chiffre { padding: 1.1rem 0.6rem; text-align: center; }
.clan-chiffre + .clan-chiffre { border-inline-start: 1px solid var(--line-soft); }
.clan-chiffre-n { display: block; font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.1; color: var(--text); }
.clan-chiffre-lib { font-size: var(--fs-00); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
body.rtl .clan-chiffre-lib { letter-spacing: 0; text-transform: none; font-size: var(--fs-1); }
.clan-section { margin-top: 1.6rem; }
.clan-section h2 { margin: 0 0 0.7rem; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-5); color: var(--gold-ink); }
.clan-section p { max-width: 50rem; line-height: 1.7; color: var(--text); }
.clan-vide { color: var(--text-faint); font-style: italic; }
.clan-puces { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.clan-arbre-section .rt-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.clan-arbre-section .rt-head h2 { margin: 0; }
.clan-arbre-aide { font-size: var(--fs-1); color: var(--text-muted); }
.clan-arbre { height: 72vh; min-height: 420px; }
@media (max-width: 700px) {
  .frise-page, .clans-page { padding: 1.6rem 1rem 3rem; }
  .clan-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clan-chiffre:nth-child(3) { border-inline-start: none; }
  .frise-ev { padding: 0.9rem 1rem; }
  .home-gens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  .gc-portrait { height: 88px; }
  .gc-ar { font-size: 1.6rem; }
  .gc-corps { padding: 0.65rem 0.7rem 0.8rem; }
  .gc-nom { font-size: var(--fs-3); }
  .hero-texte .kicker { font-size: 1.12rem; }
  .home-questions { grid-template-columns: minmax(0, 1fr); }
}
.nav-menu { position: relative; display: inline-block; }
.nav-menu .nav-btn { display: inline-flex; align-items: center; gap: 0.35rem; }
.nav-caret { font-size: 0.7em; opacity: 0.8; transition: transform 0.15s ease; transition-property: transform; transition-duration: var(--dur-teinte); transition-timing-function: var(--ease-entree); }
.nav-menu.open .nav-caret { transform: rotate(180deg); }
.nav-drop {
  position: fixed;
  z-index: 70;
  min-width: 200px;
  padding: 0.25rem;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  display: none;
}
.nav-drop.ouvert { display: block; }
.nav-drop button {
  display: block;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-2);
  text-align: start;
  cursor: pointer;
}
.nav-drop button:hover { background: var(--bg-raised); }
.nav-drop button.active { color: var(--gold-ink); font-weight: 600; }
.node-wrap:focus { outline: none; }
.node-wrap:focus-visible { outline: 2px solid var(--accent-trait); outline-offset: 1px; border-radius: 8px; }
.nav-mobile { display: none; }
.banner .nav-mobile-btn { display: inline-flex; align-items: center; gap: 0.45rem; }
.nav-mobile-ico { font-size: 1.05rem; line-height: 1; }
.nav-mobile-drop { min-width: 230px; max-height: calc(100dvh - var(--banner-h, 64px) - 1rem); overflow-y: auto; }
.nav-mobile-groupe {
  margin: 0.55rem 0.7rem 0.15rem;
  font-size: var(--fs-1);
  color: var(--text-muted);
}
.nav-mobile-drop .sous { padding-inline-start: 1.5rem; }
body[data-edition="complet"] .nav-mobile-drop .sous-complet { padding-inline-start: 1.5rem; }
@media (max-width: 700px) {
  .banner .nav > :not(.nav-mobile) { display: none; }
  .nav-mobile { display: block; }
}
.seg-wrap { flex-wrap: nowrap; gap: 0.4rem; margin-bottom: 0.6rem; border: none;
            background: none; overflow: visible; }
.seg-wrap button {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: var(--fs-1);
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}
.seg-wrap button:last-child { border-right: 1px solid var(--line); }
#tag-cats { margin: 0.6rem 0 0.9rem; }
#tags-list > .concept-block:first-child { border-top: none; padding-top: 0.2rem; }
.cross-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 1rem 0 0.5rem;
}
.cross-head .tool-btn { width: auto; padding: 0.35rem 0.8rem; font-size: var(--fs-1); }
#sub-cross { max-width: 1140px; }
.cross-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 2rem;
  align-items: start;
}
#cross-result { position: sticky; top: 1rem; }
@media (max-width: 1000px) {
  .cross-body { grid-template-columns: minmax(0, 1fr); }
  #cross-result { position: static; }
}
#cross-search { margin-bottom: 0.9rem; max-width: 320px; }
#cross-picker {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.4rem 1.8rem;
  align-items: start;
}
@media (max-width: 900px) {
  #cross-picker { grid-template-columns: minmax(0, 1fr); }
  .cross-col-wide { grid-template-columns: minmax(0, 1fr) !important; }
}
.cross-side { display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; }
.cross-col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.22rem; min-width: 0; }
.cross-col-wide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1.6rem;
  align-items: start;
}
.cross-col-wide > .cross-col-title { grid-column: 1 / -1; }
.cross-col-title {
  margin-bottom: var(--space-1);
  padding-bottom: 0.3rem;
  width: 100%;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-00, 0.72rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.3;
  margin-top: var(--space-3);
}
.cross-branch {
  --cross-ecart: 0.22rem;
  --cross-patte: 0.52rem;          
  --cross-demi: 10.5px;            
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--cross-ecart); max-width: 100%;
}
.cross-kids {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--cross-ecart); max-width: 100%; min-width: 0;
  padding-inline-start: 0.8rem;
}
.cross-node {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--cross-ecart); max-width: 100%; min-width: 0;
}
.cross-node::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1 * var(--cross-patte));
  top: calc(-1 * var(--cross-ecart));
  width: var(--cross-patte);
  height: calc(var(--cross-ecart) + var(--cross-demi));
  border-inline-start: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  border-end-start-radius: 4px;
  pointer-events: none;
}
.cross-node:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1 * var(--cross-patte));
  top: calc(-1 * var(--cross-ecart));
  bottom: 0;
  border-inline-start: 1px solid var(--line-soft);
  pointer-events: none;
}
.cross-tag { max-width: 100%; text-align: start; white-space: normal; }
.cross-expr {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
  min-height: 2.2rem;
  margin: 0.2rem 0 0.6rem;
  padding: 0.45rem 0.6rem;
  border: 1px dashed var(--line-soft);
  border-radius: 5px;
  background: var(--card-bg);
}
.cross-empty { color: var(--text-muted); font-size: var(--fs-1); }
.xtok { font-size: var(--fs-1); border-radius: var(--r-xs); }
.xop {
  padding: 0.08rem 0.4rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent-trait) 18%, transparent);
  color: var(--accent-trait);
  font-weight: 700; letter-spacing: 0.04em;
}
.cross-ops { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.cross-op {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--card-bg);
  color: var(--text);
  font-family: var(--font-body); font-size: var(--fs-0); font-weight: 600;
  cursor: pointer;
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: var(--dur-teinte);
  transition-timing-function: var(--ease-vif);
  min-height: 26px;
}
.cross-op:hover:not(:disabled) { border-color: var(--accent-trait); color: var(--accent-trait); }
.cross-op:disabled { opacity: 0.34; cursor: not-allowed; }
.cross-paren { font-family: var(--font-display); font-size: var(--fs-3); padding-inline: 0.85rem; }
.cross-tag {
  cursor: pointer;
  border-width: 1px;
  background: color-mix(in srgb, currentColor 8%, transparent);
  font-family: var(--font-body);
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
}
.cross-tag.on { box-shadow: 0 0 0 2px var(--accent-trait); font-weight: 700; }
.cross-tag.dead { opacity: 0.32; cursor: not-allowed; filter: grayscale(1); }
.cross-n { opacity: 0.65; font-size: 0.85em; }
.tool.tool-pref {
  --pref-encre: #1e1a12;
  --pref-fond: color-mix(in srgb, var(--accent-fond) 65%, var(--bg-raised));
  border: none;
  border-radius: var(--r-md);
  background: none;
  overflow: visible;
}
:root.light .tool.tool-pref { --pref-fond: color-mix(in srgb, var(--accent-fond) 60%, var(--bg-raised)); }
body[data-edition="sahabah"] .tool.tool-pref, body[data-edition="anbiya"] .tool.tool-pref {
  --pref-encre: #fbf8ef;
  --pref-fond: var(--accent-fond);
}
.tool.tool-pref > .tool-btn {
  gap: 0.6rem;
  padding: 0.68rem 0.8rem;
  border: none;
  border-radius: var(--r-md);
  background: var(--pref-fond);
  color: var(--pref-encre);
  font-weight: 600;
  box-shadow: var(--ombre-1);
  transition-property: background, box-shadow, border-radius;
  transition-duration: var(--dur-teinte);
  transition-timing-function: var(--ease-vif);
}
.tool.tool-pref > .tool-btn .tool-ico { width: 18px; height: 18px; stroke-width: 1.8; }
.tool.tool-pref > .tool-btn .tool-chev { color: inherit; opacity: 0.85; }
.tool.tool-pref > .tool-btn:hover,
.tool.tool-pref.open > .tool-btn:hover {
  background: color-mix(in srgb, var(--pref-fond) 86%, #000);
  color: var(--pref-encre);
}
.tool.tool-pref.open > .tool-btn {
  border-radius: var(--r-md) var(--r-md) 0 0;
  color: var(--pref-encre);
  box-shadow: none;
}
.tool.tool-pref.open .tool-chev { color: var(--pref-encre); }
.tool.tool-pref > .tool-body.prefs {
  gap: 0;
  padding: 0.25rem 0 0.35rem;
  border: 1px solid color-mix(in srgb, var(--accent-fond) 38%, var(--line-soft));
  border-top: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: var(--panel);
  box-shadow: var(--ombre-1);
}
.pref-rub { padding: 0.55rem 0.75rem 0.6rem; }
.pref-rub + .pref-rub { border-top: 1px solid var(--line-soft); }
.pref-titre {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.4rem;
  font-family: var(--font-body);
  font-size: var(--fs-00);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
body.rtl .pref-titre { letter-spacing: 0; text-transform: none; font-size: var(--fs-0); }
.pref-ico {
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pref-ico circle { fill: currentColor; stroke: none; }
.prefs .seg { margin-bottom: 0.25rem; }
.pref-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin: 0 -0.4rem;
  padding: 0.36rem 0.4rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-1);
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur-teinte) var(--ease-vif);
}
.pref-ligne:hover { background: color-mix(in srgb, var(--accent-trait) var(--voile-survol), transparent); }
.pref-nom { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pref-sous { font-size: var(--fs-00); font-style: italic; color: var(--text-faint); }
.pref-ligne-tete {
  margin-bottom: 0.2rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--line-soft);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  font-weight: 600;
}
.interrupteur {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  margin: 0;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--text) 24%, transparent);
  cursor: pointer;
  transition: background var(--dur-teinte) var(--ease-vif);
}
.interrupteur::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fffaf0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform var(--dur-teinte) var(--ease-entree);
}
.interrupteur:checked { background: var(--accent-fond); }
.interrupteur:checked::before { transform: translateX(14px); }
body.rtl .interrupteur::before { left: auto; right: 3px; }
body.rtl .interrupteur:checked::before { transform: translateX(-14px); }
.interrupteur:focus-visible { outline: 2px solid var(--accent-trait); outline-offset: 2px; }
.sb-sublabel {
  margin: 0.35rem 0 0.1rem;
  font-size: var(--fs-00, 0.72rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.3;
  margin-top: var(--space-3);
  margin-bottom: var(--space-1);
}
.tagpick-list {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  max-height: 168px; overflow-y: auto;
  padding-bottom: 0.2rem;
  scrollbar-width: thin;
}
.pick-tag {
  cursor: pointer;
  border-width: 1px;
  background: color-mix(in srgb, var(--tag-c, currentColor) 8%, var(--panel));
  font-family: var(--font-body);
  font-size: var(--fs-00);
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
  border-radius: var(--r-xs);
  transition-property: color, background-color, border-color, box-shadow, opacity;
  transition-duration: var(--dur-teinte);
  transition-timing-function: var(--ease-vif);
  min-height: 26px;
}
.pick-tag.on { box-shadow: 0 0 0 2px var(--accent-trait); font-weight: 700; }
.pick-tag.dead { opacity: 0.3; cursor: not-allowed; filter: grayscale(1); }
.tagpick-count { margin-top: 0.55rem; }
.tagpick-nbtn .tool-chev { transition: transform 0.2s ease; display: inline-block; }
.tagpick-nbtn .tool-chev.turned { transform: rotate(90deg); }
.tagpick-search {
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--text) 7%, var(--bg));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-0);
}
.tagpick-search:focus { outline: none; border-color: var(--accent-trait); }
.tagpick-search:focus-visible { outline: 2px solid var(--accent-trait); outline-offset: 0; }
.tagpick-hint { font-size: var(--fs-0); color: var(--text-muted); }
.tagpick-nbtn {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.4rem; width: 100%;
  padding: 0.38rem 0.55rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--card-bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-0); font-weight: 600;
  cursor: pointer;
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: var(--dur-teinte);
  transition-timing-function: var(--ease-vif);
  min-height: 26px;
}
.tagpick-nbtn:hover { border-color: var(--accent-trait); color: var(--accent-trait); }
.tagpick-people {
  display: flex; flex-direction: column; gap: 0.25rem;
  max-height: 210px; overflow-y: auto;
  margin-top: 0.4rem;
  scrollbar-width: thin;
}
.tagpick-people .concept-person { font-size: var(--fs-0); padding: 0.3rem 0.45rem; }
.tagpick-more { margin: 0.4rem 0 0; font-size: var(--fs-00); color: var(--text-faint); }
#tagpick-reset { margin-top: 0.55rem; width: 100%; }
.cross-msg { margin: 0.9rem 0 0.2rem; font-weight: 600; color: var(--text); }
#cross-result .concept-people { margin-top: 0.5rem; }
.box .nick {
  width: 100%;
  text-align: left;
  font-style: italic;
  font-size: 11.5px;
  line-height: 1.15;
  color: var(--text-faint);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.box.muhammad .nick { color: #e8dcb8; }
#time-axis { width: var(--frise-w); }
.banner-right {
  display: flex;
  align-items: center;
  flex: none;
  gap: 2px;
  margin-inline-start: auto;
  padding: 4px;
  border: 1px solid rgba(255, 236, 200, 0.16);
  border-radius: var(--r-pill);
  background: var(--gelule);
  backdrop-filter: blur(8px);
}
.panel-nick.after-wrap { margin-top: 0.55rem; }
.panel-nick {
  margin: 0.15rem 0 0;
  font-style: italic;
  font-size: var(--fs-2);
  color: var(--text-muted);
}
.untranslated { font-size: var(--fs-00); color: var(--text-faint); }
body.rtl .box .fr, body.rtl .box .nick { text-align: left; direction: ltr; }
body.rtl .about, body.rtl #detail-panel { text-align: right; }
body.rtl .about ul { padding-right: 1.2rem; padding-left: 0; }
body.rtl #detail-panel { left: 0; right: auto; border-left: none; border-right: 1px solid var(--line); transform: translateX(-100%); }
body.rtl #close-panel-btn { right: auto; left: 1.1rem; }
body.rtl .panel-head {
  padding-right: 0;
  padding-left: max(2.2rem, calc(var(--ruban-place) - var(--volet-px)));
}
body.rtl #detail-panel.open { transform: translateX(0); }
body.rtl #time-axis { left: 0; right: auto; }
body.rtl .axis-tick { direction: ltr; }
body.rtl #help-btn, body.rtl #help-popover { right: auto; left: 1rem; }
body.rtl #link-legend { left: auto; right: 1rem; }
body.rtl #view-tree.sidebar-collapsed #sidebar { margin-left: 0; margin-right: var(--sb-rentre); }
body.rtl #collapsed-fold { left: auto; right: 52px; }
body.rtl #sidebar-hide { transform: scaleX(-1); }
.panel-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.7rem 0 0; }
.panel-tags .tag { font-size: 12px; padding: 5px 9px; }
.sb-searchrow { position: relative; }
#search-sugg {
  position: fixed;
  z-index: 40;
  max-height: 300px;
  overflow-y: auto;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
  padding: 4px;
}
#search-sugg[hidden] { display: none; }
.sugg-item[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
.sugg-item[disabled]:hover { background: none; }
.sugg-off {
  margin-top: 2px;
  font-size: var(--fs-00);
  font-style: italic;
  color: var(--text-faint);
}
.sugg-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-1);
  text-align: left;
  cursor: pointer;
}
.sugg-item:hover, .sugg-item.active { background: var(--bg); }
.sugg-quran    { background: var(--card-bg-prophet); }
.sugg-ululazm  { background: var(--card-bg-ululazm); }
.sugg-sahabi   { background: var(--card-bg-sahabi); }
.sugg-muhammad { background: var(--c-muhammad-bg); color: #fdf6e3; }
.sugg-muhammad .sugg-ar, .sugg-muhammad .sugg-year { color: #f6e2ac; }
.sugg-muhammad b { color: var(--c-muhammad-gold); }
.sugg-item:not(.sugg-figure):hover, .sugg-item:not(.sugg-figure).active {
  box-shadow: inset 0 0 0 999px rgba(127, 127, 127, 0.16);
}
.sugg-item b { color: var(--gold-ink); font-weight: 700; }
.sugg-fr { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugg-ar {
  font-family: "Amiri Quran", serif;
  font-size: 1.1em;
  color: var(--text-muted);
  direction: rtl;
  white-space: nowrap;
  line-height: 1.75;
}
.sugg-main { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.sugg-year { font-size: var(--fs-00); color: var(--text-faint); direction: ltr; }
body.rtl .sugg-year { text-align: right; }
.sugg-empty { padding: 8px; font-size: var(--fs-1); color: var(--text-faint); }
.nasab {
  font-size: 0.78em;
  font-weight: 400;
  font-style: normal;
  color: var(--text-faint);
  white-space: nowrap;
}
.sugg-ar .nasab, .kin-ar .nasab, #panel-arabic .nasab, #panel-name.as-arabic .nasab {
  font-family: var(--font-arabic);
}
.kin-pair { display: contents; }
.kin-cards.single .kin-card {
  flex-wrap: nowrap;
  align-items: center;
  column-gap: 0.8rem;
  min-height: 3.1rem;
  overflow: hidden;
}
.kin-cards.single .kin-card .kin-fr { flex: 1 1 auto; min-width: 0; text-align: start; }
.kin-cards.single .kin-card .kin-ar { flex: 0 0 auto; max-width: 62%; text-align: end; margin-left: auto; }
body.rtl .kin-cards.single .kin-card .kin-ar { margin-left: 0; margin-right: auto; }
.kin-card .nasab { white-space: normal; }
.kin-cards.single .kin-fr .nasab, #detail-panel .kin-fr .nasab { white-space: nowrap; }
.gc-nom .nasab { white-space: normal; }
#panel-name .nasab { font-size: 0.5em; }
#panel-arabic .nasab { font-size: 0.6em; }
.concept-person .nasab { font-size: 0.8em; }
body.rtl .sugg-item { text-align: right; }
body.rtl .sugg-main { flex-direction: row-reverse; }
body.rtl .sugg-ar { flex: 1; min-width: 0; }
@media (max-width: 700px) {
  body.panel-open #help-btn, body.panel-open #help-popover { display: none; }
  body.fiche-open #sidebar-reopen, body.fiche-open #help-btn, body.fiche-open #help-popover { display: none; }
}
@media (max-width: 700px) {
  :root { --frise-w: 42px; }
  #time-axis { width: var(--frise-w); }
  .axis-era { font-size: 0.56rem; }
  .axis-tick { gap: 3px; }
  .axis-minor { width: 5px; }
  .tick-s .axis-line { width: 6px; }
  .tick-c .axis-line { width: 9px; }
  .tick-d .axis-line { width: 12px; }
  .tick-m .axis-line { width: 15px; }
  
  .banner { gap: 0.4rem; padding-right: 0.5rem; }
  .banner .nav { flex: 1; -webkit-overflow-scrolling: touch; }
  .nav-btn { flex: none; white-space: nowrap; }
  .banner .nav {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  body.rtl .banner .nav {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
  }
  .banner .nav::after { content: ""; flex: none; width: 20px; }
  
  :root { --sb-w: min(300px, 86vw); }
  :root { --motif-h: 56px; }
  .choix-portes { grid-template-columns: 1fr; }
  .choix-porte, .choix-porte.choix-large { min-height: 220px; }
  #sidebar {
    position: fixed;
    top: var(--banner-h, 64px);
    left: 0;
    bottom: 0;
    width: var(--sb-w);
    z-index: 30;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.32);
    transition: transform var(--dur-volet) var(--ease-entree);
  }
  #view-tree.sidebar-collapsed #sidebar { margin-left: 0; transform: translateX(-102%); }
  body.rtl #sidebar { left: auto; right: 0; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.32); }
  body.rtl #view-tree.sidebar-collapsed #sidebar { margin-right: 0; transform: translateX(102%); }
  
  #detail-panel {
    width: 100vw; max-width: 100vw;
    --volet-pt: 1.3rem; --volet-px: 1.1rem; --volet-pb: 1.5rem;
  }
  body.rtl #detail-panel { border-right: none; }
  #link-legend { display: none; }
}
#sidebar-scrim { display: none; }
@media (max-width: 700px) {
  #view-tree:not(.sidebar-collapsed) #sidebar-scrim {
    display: block;
    position: fixed;
    top: var(--banner-h, 64px);
    left: 0; right: 0; bottom: 0;
    z-index: 29;
    background: rgba(0, 0, 0, 0.45);
  }
}
.ns-opt {
  flex: 1 1 0;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  box-shadow: var(--ombre-1);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
  transition-property: color, background-color, border-color, box-shadow, opacity;
  transition-duration: var(--dur-teinte);
  transition-timing-function: var(--ease-vif);
}
.ns-opt:hover { border-color: var(--accent-trait); background: var(--bg-raised-2); }
.ns-opt:has(input:checked) { border-color: color-mix(in srgb, var(--accent-trait) 60%, var(--line)); }
.ns-opt:focus-within { outline: 2px solid var(--accent-trait); outline-offset: 2px; }
.ns-opt input { margin-top: 0.15rem; accent-color: var(--accent-trait); cursor: pointer; width: 16px; height: 16px; }
.ns-opt > span { display: flex; flex-direction: column; min-width: 0; }
.ns-main { font-size: var(--fs-2); color: var(--text); }
.ns-sub { font-size: var(--fs-00); font-style: italic; color: var(--text-faint); line-height: 1.35; }
body.rtl .ns-opt { text-align: right; }
.tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-1);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: var(--dur-teinte);
  transition-timing-function: var(--ease-vif);
}
.tool-btn:hover, .tool-btn.open { border-color: var(--accent-trait); color: var(--gold-ink); background: color-mix(in srgb, var(--accent-trait) var(--voile-survol), transparent); }
.tool-ico { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.tool-ico circle { fill: currentColor; stroke: none; }
.mrca-field { position: relative; display: flex; flex-direction: column; gap: 0.2rem; }
.mrca-lbl { font-size: var(--fs-00); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.mrca-field input {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-2);
}
.mrca-field input::placeholder { color: var(--text-faint); }
.mrca-field input:focus {
  outline: none;
  border-color: var(--accent-trait);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-trait) 22%, transparent);
}
.mrca-field input:focus-visible { outline: 2px solid var(--accent-trait); outline-offset: 0; }
.mrca-sugg {
  position: fixed;
  z-index: 60;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-raised);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
}
.mrca-sugg[hidden] { display: none; }
.mrca-sugg .sugg-item { text-align: left; }
body.rtl .mrca-sugg .sugg-item { text-align: right; }
.mrca-actions { display: flex; gap: 0.4rem; }
.mrca-go, .mrca-clear {
  flex: 1;
  padding: 0.45rem 0.5rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--accent-trait);
  font-family: var(--font-body);
  font-size: var(--fs-1);
  cursor: pointer;
}
.mrca-go { background: var(--accent-fond); color: #ffffff; transition-property: color, background-color, border-color, box-shadow, transform; transition-duration: var(--dur-teinte); transition-timing-function: var(--ease-vif); font-weight: 600; }
.mrca-clear { background: none; color: var(--text-muted); border-color: var(--line); transition-property: color, background-color, border-color, box-shadow, transform; transition-duration: var(--dur-teinte); transition-timing-function: var(--ease-vif); }
.mrca-clear:hover { border-color: var(--accent-trait); color: var(--accent-trait); }
.mrca-err { margin: 0; font-size: var(--fs-0); font-style: italic; color: var(--c-mrca); }
.mrca-err[hidden] { display: none; }
#mrca-banner {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  transition: left 0.30s ease;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: min(660px, calc(100% - 120px));
  padding: 0.6rem 0.7rem 0.6rem 1rem;
  border: 1.5px solid var(--c-mrca);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--ombre-2);
  font-size: var(--fs-2);
  color: var(--text);
}
#mrca-text { flex: 1; text-align: center; }
#mrca-text .mrca-anc { white-space: nowrap; }
#mrca-banner[hidden] { display: none; }
body.panel-open #mrca-banner { left: calc(50% - min(360px, 88vw) / 2); }
body.rtl.panel-open #mrca-banner { left: calc(50% + min(360px, 88vw) / 2); }
#mrca-banner b { font-weight: 700; color: var(--text); }
#mrca-banner-close {
  flex: none;
  width: 24px; height: 24px;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--text-muted);
  font-size: var(--fs-5);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}
#mrca-banner-close:hover { color: var(--c-mrca); }
.card.mrca {
  border-color: var(--c-mrca) !important;
  box-shadow: inset 0 0 0 2px var(--c-mrca),
              0 0 0 3px color-mix(in srgb, var(--c-mrca) 50%, transparent),
              0 0 9px 1px color-mix(in srgb, var(--c-mrca) 45%, transparent) !important;
}
.link.mrca {
  stroke: var(--c-mrca);
  stroke-width: 2.8px;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--c-mrca) 55%, transparent));
}
.tool {
  border: none;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  overflow: visible;
  transition: border-color 0.15s ease;
}
.tool:first-of-type { border-top: none; }
.tool.open {
  border-top-color: var(--line-soft);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}
.tool .tool-btn {
  width: 100%;
  padding-block: 0.62rem;
  border: none;
  border-radius: 0;
  background: none;
  justify-content: flex-start;
}
.tool .tool-btn:hover { border-color: transparent; background: color-mix(in srgb, var(--accent-trait) var(--voile-survol), transparent); }
.tool.open .tool-btn:hover {
  background: color-mix(in srgb, var(--accent-trait) var(--voile-survol-ouvert), transparent);
}
.tool.tool-pref.open { background: none; border-radius: var(--r-md); }
.tool.open .tool-btn { color: var(--gold-ink); }
.tool-btn > span[data-i18n] { flex: 1; text-align: left; }
body.rtl .tool-btn > span[data-i18n] { text-align: right; }
.tool-chev {
  flex: none;
  font-size: var(--fs-4);
  line-height: 1;
  color: var(--text-faint);
  transition: transform 0.18s ease;
  transition-property: transform;
  transition-duration: var(--dur-teinte);
  transition-timing-function: var(--ease-entree);
}
.tool.open .tool-chev { transform: rotate(90deg); color: var(--gold-ink); }
body.rtl .tool-chev { transform: rotate(180deg); }
body.rtl .tool.open .tool-chev { transform: rotate(90deg); }
.tool-body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.2rem 0.7rem 0.75rem;
  border-top: 1px solid var(--line-soft);
}
.tool-body[hidden] { display: none; }
.ns-opt.compact { flex: none; min-width: 0; padding: 0.3rem 0.5rem; }
#hint-veil {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.34);
  animation: hint-in 0.22s ease;
}
#hint-veil[hidden] { display: none; }
@keyframes hint-in { from { opacity: 0; } to { opacity: 1; } }
#hint-box {
  position: relative;
  max-width: min(460px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.5rem 1.6rem 1.3rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--ombre-3);
  text-align: start;
}
#hint-box h2 {
  margin: 0 0 0.7rem;
  padding-inline-end: 2.6rem;      
  font-size: var(--fs-4);
  color: var(--accent-trait);
}
#hint-box p { margin: 0; line-height: 1.62; color: var(--text-muted); }
#hint-close {
  position: absolute;
  top: 6px;
  inset-inline-end: 8px;
  width: 44px; height: 44px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-5);
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}
#hint-close:hover { color: var(--text); background: var(--bg-raised); }
#qm-veil {
  position: fixed;
  inset: 0;
  z-index: 82;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.34);
  animation: hint-in 0.22s ease;
}
#qm-veil[hidden] { display: none; }
#qm-box {
  position: relative;
  max-width: min(560px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.5rem 1.6rem 1.3rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--ombre-3);
  text-align: start;
}
#qm-box h2 {
  margin: 0 0 0.7rem;
  padding-inline-end: 2.6rem;      
  font-size: var(--fs-4);
  color: var(--accent-trait);
}
#qm-box h3 {
  margin: 1.1rem 0 0.3rem;
  font-size: var(--fs-1);
  color: var(--c-quran);
}
#qm-box p { margin: 0; line-height: 1.62; color: var(--text-muted); }
#qm-box .qm-lead { color: var(--text); }
#qm-exemple { margin: 0.7rem 0 0.6rem; }
#qm-close {
  position: absolute;
  top: 6px;
  inset-inline-end: 8px;
  width: 44px; height: 44px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-5);
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
#qm-close:hover { color: var(--text); background: var(--bg-raised); }
.aid-btn {
  justify-self: center;
  width: 36px; height: 36px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.aid-btn-haut { align-self: start; margin-top: -18px; }
.aid-btn-bas { align-self: end; margin-bottom: -18px; }
.aid-card {
  border-style: dashed;
  border-color: var(--c-ululazm);
  box-shadow: none;
  cursor: default;
}
g.aid-noeud { opacity: 0.96; }
.aid-card:hover { box-shadow: none; }
.aid-card .card-fr { color: var(--c-ululazm); }
.aid-link {
  fill: none;
  stroke: var(--c-ululazm);
  stroke-width: 1.2px;
  stroke-dasharray: 2 5;
  stroke-linecap: round;
  opacity: 0.75;
}
#aid-toast {
  position: fixed;
  z-index: 84;
  top: calc(var(--banner-h, 64px) + 1.2rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, calc(100vw - 2rem));
  opacity: 0;
  transition: opacity 1.5s ease, transform 1.5s ease;
  pointer-events: none;
}
#aid-toast[hidden] { display: none; }
#aid-toast.show { opacity: 1; }
.aid-toast-in {
  padding: 0.9rem 1.1rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--ombre-3);
  text-align: start;
}
.aid-toast-titre {
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-2);
  color: var(--c-ululazm);
}
#aid-trove {
  display: inline-block;
  width: 1.1em; height: 0.9em;
  margin-inline-start: 0.2em;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  vertical-align: baseline;
}
#aid-veil {
  position: fixed;
  inset: 0;
  z-index: 86;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.34);
  animation: hint-in 0.22s ease;
}
#aid-veil[hidden] { display: none; }
#aid-box {
  position: relative;
  max-width: min(560px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.5rem 1.6rem 1.3rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--ombre-3);
  text-align: start;
}
#aid-box h2 {
  margin: 0 0 0.7rem;
  padding-inline-end: 2.6rem;
  font-family: var(--font-display);
  font-size: var(--fs-4);
  color: var(--c-ululazm);
}
#aid-box .aid-lead { margin: 0; line-height: 1.62; color: var(--text-muted); }
#aid-close {
  position: absolute;
  top: 6px;
  inset-inline-end: 8px;
  width: 44px; height: 44px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-5);
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
#aid-close:hover { color: var(--text); background: var(--bg-raised); }
.aid-compte {
  margin: 1rem 0 0.2rem;
  font-size: var(--fs-00, 0.72rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.aid-item { margin-top: 1.1rem; }
.aid-item h3 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: var(--fs-2);
  font-weight: 500;
  color: var(--text);
}
.aid-item-clos h3 {
  color: var(--text-muted);
  font-style: italic;
  opacity: 0.7;
}
.date-range {
  margin-inline-start: 0.4rem;
  font-size: 0.88em;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
#histo {
  position: absolute;
  top: calc(var(--banner-h, 64px) + 5px);
  inset-inline-start: var(--sb-w);
  z-index: 26;
  display: flex;
  gap: 5px;
  padding-inline-start: 6px;
  transition: transform var(--dur-volet) var(--ease-entree);
}
#view-tree.sidebar-collapsed #histo { transform: translateX(var(--sb-glisse)); }
.histo-btn {
  position: relative;
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-raised, var(--bg));
  color: var(--text-muted);
  cursor: pointer;
  box-shadow: var(--box-shadow);
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: var(--dur-teinte);
  transition-timing-function: var(--ease-vif);
}
.histo-btn[hidden] { display: none; }
.histo-btn:hover { color: var(--accent-trait); border-color: var(--accent-trait); }
.histo-btn svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
body.rtl .histo-btn svg { transform: scaleX(-1); }
.histo-btn::after { content: ""; position: absolute; inset: -7px; }
.ctx-menu {
  position: fixed;
  z-index: 60;
  min-width: 210px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-raised, var(--bg));
  box-shadow: var(--ombre-2);
}
.ctx-menu button {
  display: block;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-1);
  text-align: left;
  cursor: pointer;
}
body.rtl .ctx-menu button { text-align: right; }
.ctx-menu button:hover { background: color-mix(in srgb, var(--accent-trait) 18%, transparent); color: var(--accent-trait); }
body.tight-y #time-axis { display: none; }
body.sans-frise #time-axis { display: none; }
#fiche-veil {
  position: absolute;
  inset: 0;
  z-index: 24;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.6rem, 2.4vh, 2rem) clamp(0.6rem, 2.4vw, 2.4rem);
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  cursor: default;
}
#fiche-modal {
  --ruban-w: 22px;
  --ruban-x: 0.55rem;
  --ruban-place: calc(var(--ruban-x) + var(--ruban-w) + 0.3rem);
  position: relative;
  width: min(1080px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.42);
  direction: ltr;
  text-align: left;
  overflow: hidden;
  animation: fiche-in 0.22s ease both;
}
body.rtl #fiche-modal { direction: rtl; text-align: right; }
@keyframes fiche-in {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}
#fiche-scroll {
  --fiche-pt: 1.6rem;
  --fiche-pb: 2rem;
  --fiche-px: max(clamp(1rem, 3vw, 2.4rem), var(--ruban-place));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--fiche-pt) var(--fiche-px) var(--fiche-pb);
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#fiche-scroll > .fiche-cols { flex: 0 0 auto; }
#fiche-close {
  position: absolute;
  top: 0.55rem;
  inset-inline-end: 0.8rem;
  z-index: 2;
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: var(--fs-5);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}
#fiche-close:hover { color: var(--text); }
#lign-veil {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.6rem, 2.4vh, 2rem) clamp(0.6rem, 2.4vw, 2.4rem);
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  cursor: default;
}
#lign-modal {
  position: relative;
  width: min(680px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.42);
  direction: ltr;
  text-align: left;
  padding: 1.5rem clamp(1rem, 3vw, 2rem) 1.2rem;
  animation: fiche-in 0.22s ease both;
}
body.rtl #lign-modal { direction: rtl; text-align: right; }
#lign-close {
  position: absolute;
  top: 0.55rem;
  inset-inline-end: 0.8rem;
  z-index: 2;
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: var(--fs-5);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}
#lign-close:hover { color: var(--text); }
#lign-title {
  margin: 0 2rem 0.2rem 0;
  font-family: var(--font-display);
  font-size: var(--fs-4);
  font-weight: 600;
  line-height: 1.25;
}
body.rtl #lign-title { margin: 0 0 0.2rem 2rem; }
.lign-sous {
  margin: 0 0 1rem;
  font-size: var(--fs-0);
  color: var(--text-muted);
}
.lign-reglages { margin-bottom: 1rem; }
.lign-reglages .sb-sublabel { margin-top: 0.7rem; }
.lign-sortie {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  flex: 1 1 auto;
  border-top: 1px solid var(--line-soft);
  padding-top: 0.9rem;
}
.lign-liste {
  margin: 0;
  padding-inline-start: 2.2rem;
  font-size: var(--fs-1);
  line-height: 1.7;
}
.lign-liste li { padding-inline-start: 0.2rem; }
.lign-liste li.saut { border-inline-start: 2px dotted var(--c-desc-link); margin-inline-start: -0.9rem; padding-inline-start: 0.7rem; }
.lign-mot {
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--fs-0);
}
.lign-liste .lign-mot { margin-inline-end: 0.35rem; }
.lign-texte {
  margin: 0;
  font-size: var(--fs-1);
  line-height: 1.9;
}
.lign-pied { margin-top: 1rem; display: flex; justify-content: flex-end; }
.lign-copie {
  font: inherit;
  font-size: var(--fs-0);
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition-property: color, background-color, border-color;
  transition-duration: var(--dur-teinte);
  transition-timing-function: var(--ease-vif);
}
.lign-copie:hover { border-color: var(--accent-trait); color: var(--accent-trait); }
.lign-copie.copie-ok { border-color: var(--accent-trait); color: var(--accent-trait); }
.tool-hint {
  margin: 0 0 0.6rem;
  font-size: var(--fs-0);
  color: var(--text-muted);
  line-height: 1.45;
}
#fiche-open-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  width: 100%;
  margin-top: 0.9rem;
  padding: 0.85rem 0.7rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--accent-trait) 42%, var(--line));
  border-radius: var(--r-sm);
  background: linear-gradient(to bottom, var(--bg-raised),
    color-mix(in srgb, var(--accent-fond) 11%, var(--bg-raised)));
  --reflet: rgba(255, 255, 255, 0.07);
  box-shadow: var(--ombre-2), inset 0 1px 0 var(--reflet);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-1);
  font-weight: 600;
  cursor: pointer;
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: var(--dur-teinte);
  transition-timing-function: var(--ease-vif);
}
#fiche-open-btn svg {
  width: 28px; height: 28px;
  flex: none;
  fill: none; stroke: var(--gold-ink); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
#fiche-open-btn:hover svg { stroke: currentColor; }
#fiche-open-btn:hover {
  border-color: var(--accent-trait);
  color: var(--accent-trait);
  box-shadow: var(--ombre-3), inset 0 1px 0 var(--reflet);
}
:root.light #fiche-open-btn { --reflet: rgba(255, 255, 255, 0.75); }
#fiche-open-btn:active { box-shadow: var(--box-shadow-pressed), var(--card-pressed); }
.fiche-head { padding-inline-end: 2rem; margin-bottom: 1.3rem; }
.fiche-titles {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.2rem 1rem;
}
.fiche-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  line-height: 1.15;
}
.fiche-head h2.as-arabic { font-family: var(--font-arabic); direction: rtl; font-size: clamp(1.68rem, 3.36vw, 2.31rem); }
.fiche-ar { margin: 0; font-size: clamp(1.57rem, 3.15vw, 2.1rem); }
.fiche-nick {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--fs-3);
}
.fiche-meta {
  display: flex; flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 0.85rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line-soft);
}
.fiche-meta-item { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.fiche-meta-src { margin-inline-start: auto; }
.fiche-tagline {
  margin: 0.7rem 0 1.2rem;
  padding-top: 0;
  border-top: none;
}
.fiche-tagline .panel-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.fiche-meta dt, .nc-label {
  flex: 0 0 auto;
  color: var(--text-faint);
  font-size: var(--fs-00);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.fiche-meta dt::after, .nc-label::after { content: " :"; }
body.rtl .fiche-meta dt::after, body.rtl .nc-label::after { content: " :"; }
.nc-label { margin: 0 0.5rem 0 0; }
.fiche-meta dd { margin: 0; min-width: 0; }
.fiche-meta .panel-tags { margin: 0; }
.fiche-cols {
  --fiche-gouttiere: clamp(1.4rem, 3vw, 2.6rem);
  display: flow-root;
}
.fiche-cols > .fiche-parente {
  float: right;
  width: calc((100% - var(--fiche-gouttiere)) / 2.65);
  margin: 0 0 var(--space-5) var(--fiche-gouttiere);
}
body.rtl .fiche-cols > .fiche-parente { float: left; margin: 0 var(--fiche-gouttiere) var(--space-5) 0; }
.fiche-cols > .fiche-nomcomplet, .fiche-cols > .fiche-noms, .fiche-cols > .fiche-verset,
.fiche-cols > .fiche-sirah, .fiche-cols > .fiche-israil, .fiche-cols > .fiche-ahadith { display: flow-root; }
.fiche-notice .fiche-isabah { clear: both; }
.fiche-nomcomplet { margin-bottom: var(--space-5); }
.nc-ligne {
  margin: 0 0 0.3rem;
  font-family: var(--font-body);
  font-size: var(--fs-3);
  line-height: 1.5;
  color: var(--text);
  text-wrap: pretty;
}
.nc-ligne.nc-ar {
  font-family: var(--font-arabic);
  direction: rtl;
  font-size: 1.07rem;
  line-height: 1.9;
  color: var(--c-arabic);
  margin-bottom: 0.7rem;
}
.nc-parts {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.28rem 0.9rem;
  font-size: var(--fs-1);
  line-height: 1.5;
}
.nc-item { display: contents; }
.nc-parts dt {
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  padding-top: 0.12em;
  white-space: nowrap;
}
.nc-parts dd { margin: 0; color: var(--text-muted); text-wrap: pretty; }
.nc-lien { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); }
.nc-lien:hover { color: var(--gold-ink); border-bottom-color: currentColor; }
.fiche-noms { margin-bottom: var(--space-5); }
.noms-mosaique {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 8.4rem;
  column-gap: 0.4rem;
}
.nom-porte {
  break-inside: avoid;
  margin-bottom: 0.4rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  padding: 0.3rem 0.5rem 0.45rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--card-bg);
  text-align: center;
}
.nom-note {
  position: absolute;
  top: 0.25rem;
  inset-inline-end: 0.4rem;
  font-size: var(--fs-00);
  line-height: 1;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.nom-ar {
  font-family: var(--font-arabic);
  direction: rtl;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--c-arabic);
}
.nom-lat {
  font-family: var(--font-display);
  font-size: var(--fs-2);
  line-height: 1.25;
  color: var(--text);
  direction: ltr;
  unicode-bidi: isolate;
}
.nom-sens {
  margin-top: 0.2rem;
  font-size: var(--fs-0);
  line-height: 1.35;
  color: var(--text-muted);
  text-wrap: pretty;
}
.noms-renvois {
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 1.4rem;
  font-size: var(--fs-0);
}
.noms-renvoi { display: flex; align-items: baseline; gap: 0.45rem; break-inside: avoid; margin-bottom: 0.2rem; }
.noms-renvoi-n { flex: none; min-width: 1.1em; color: var(--text-faint); font-variant-numeric: tabular-nums; text-align: end; }
.noms-renvoi .para-srcs { display: inline; margin-top: 0; }
@media (max-width: 560px) {
  .noms-renvois { columns: 1; }
}
.nc-plus {
  width: 17px; height: 17px;
  padding: 0;
  margin-inline-start: 0.2rem;
  vertical-align: baseline;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-faint);
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.nc-plus:hover { color: var(--gold-ink); border-color: var(--accent-trait); }
.nc-copie {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: baseline;
  width: 20px; height: 20px;
  margin-inline-start: 0.4rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: color var(--dur-teinte) var(--ease-vif);
}
.nc-copie svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.nc-copie:hover { color: var(--accent-trait); }
.nc-copie-fait { display: none; }
.nc-copie.copie-ok { color: var(--green-ink); }
.nc-copie.copie-ok .nc-copie-signe { display: none; }
.nc-copie.copie-ok .nc-copie-fait { display: inline; }
body.rtl .nc-ligne:not(.nc-ar) { direction: ltr; text-align: right; }
.fiche-parente {
  padding-inline-start: clamp(1.2rem, 2.4vw, 2rem);
  border-inline-start: 1px solid var(--line-soft);
}
.fiche-notice .info-block { display: block; margin-bottom: 1rem; }
.fiche-lieu {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--fs-1);
  color: var(--text-muted);
  cursor: help;
}
.fiche-ahadith { margin: 0 0 var(--space-5); }
.ahadith-statut {
  font-family: var(--font-body);
  font-size: var(--fs-0);
  font-weight: 400;
  color: var(--text-muted);
}
.ahadith-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
}
@media (max-width: 560px) {
  .ahadith-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ahadith-recueil {
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
}
.ahadith-recueil dt { font-size: var(--fs-0); color: var(--text-muted); }
.ahadith-recueil dd {
  margin: 0.1rem 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-4);
  line-height: 1.25;
  font-weight: 600;
  color: var(--text);
}
.ahadith-src { margin: 0.5rem 0 0; font-size: var(--fs-0); font-style: italic; color: var(--text-muted); }
.ahadith-src a { color: inherit; }
.fiche-notice { font-size: var(--fs-3); line-height: 1.62; }
.fiche-isabah {
  margin: 0 0 var(--space-5);
  padding: 0.8rem 1rem 0.4rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--src-nassaba) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--src-nassaba) 38%, transparent);
}
.isabah-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.9rem;
  margin-bottom: 0.6rem;
}
.isabah-tete .fiche-sec-title { margin: 0; }
.isabah-trad {
  font-family: var(--font-body);
  font-size: var(--fs-0);
  font-weight: 400;
  color: var(--text-muted);
}
.isabah-ref {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--fs-0);
  font-style: italic;
  color: var(--text-muted);
}
.isabah-bascule {
  font: inherit;
  font-size: var(--fs-0);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--src-nassaba) 55%, transparent);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.isabah-bascule:hover { background: color-mix(in srgb, var(--src-nassaba) 14%, transparent); }
.isabah-bascule:focus-visible { outline: 2px solid var(--accent-trait); outline-offset: 2px; }
.isabah-section { margin: 0; border-top: 1px solid color-mix(in srgb, var(--src-nassaba) 22%, transparent); }
.isabah-section p { margin: 0 0 0.85rem; }
.isabah-seule { margin: 0 0 0.6rem; }
.isabah-sous-titre {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.5rem 0;
  font-family: var(--font-display);
  font-size: var(--fs-2);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.isabah-sous-titre::-webkit-details-marker { display: none; }
.isabah-sous-titre:hover { color: var(--accent-trait); }
.isabah-sous-titre:focus-visible { outline: 2px solid var(--accent-trait); outline-offset: 2px; border-radius: 3px; }
.isabah-titre::before {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-inline-end: 0.6em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  vertical-align: 0.14em;
  transform: rotate(-45deg);
  transition: transform var(--dur-teinte) var(--ease-vif);
}
.isabah-section[open] .isabah-titre::before { transform: rotate(45deg); }
.isabah-texte[dir="rtl"] .isabah-section:not([open]) .isabah-titre::before { transform: rotate(135deg); }
.isabah-page {
  flex: none;
  font-family: var(--font-body);
  font-size: var(--fs-0);
  font-weight: 400;
  color: var(--text-muted);
}
.isabah-texte.arabic {
  font-family: var(--font-arabic);
  font-size: 1.22rem;
  line-height: 2;
  text-align: right;
}
.isabah-texte.arabic .isabah-sous-titre { font-family: var(--font-arabic); font-size: 1.15rem; line-height: 1.5; padding: 0.3rem 0; }
.fiche-verset-lbl {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: var(--fs-0);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fiche-verset .tip-cite {
  margin: 0 0 1.1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--cite) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--cite) 40%, transparent);
}
.fiche-verset .tip-verse {
  font-family: var(--font-arabic);
  direction: rtl;
  text-align: right;
  font-size: 1.3rem;
  line-height: 1.95;
  color: var(--text);
}
.fiche-verset .tip-trad {
  margin-top: 0.45rem;
  font-size: var(--fs-2);
  line-height: 1.55;
  color: var(--text);
}
.fiche-verset .tip-ref {
  margin-top: 0.35rem;
  font-size: var(--fs-0);
  font-style: italic;
  color: var(--text-muted);
}
.fiche-parente .kin { margin-bottom: 1rem; }
.fiche-sec-title {
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-4);
  letter-spacing: 0.01em;
  color: var(--text);
}
.fiche-tree {
  --rt-marge: var(--fiche-px);
  --rt-bord: 1.2rem;
  margin: 1.8rem calc(-1 * var(--rt-marge)) calc(-1 * var(--fiche-pb));
  padding: 1.1rem var(--rt-bord) var(--rt-bord);
  padding-inline-start: max(var(--rt-bord), var(--ruban-place));
  border-top: 1px solid var(--line);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  height: calc(100% + var(--fiche-pt) + var(--fiche-pb));
  box-sizing: border-box;
}
.rt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.7rem;
  padding-inline-end: 2.2rem;
}
.rt-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-4);
  letter-spacing: 0.01em;
}
.rt-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.36rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-1);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: var(--dur-teinte);
  transition-timing-function: var(--ease-vif);
}
.rt-tool-btn svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.rt-tool-btn:hover { border-color: var(--accent-trait); color: var(--accent-trait); }
.rt-frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 12rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  overflow: hidden;
}
.rt-svg {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  direction: ltr;
}
.rt-svg:active { cursor: grabbing; }
.rt-node .card { cursor: pointer; }
.rt-node .card:hover { border-color: var(--accent-trait); }
.rt-node .card.rt-moi { cursor: default; }
.rt-node .card.rt-moi:hover { border-color: var(--card-border); }
.rt-frame .spouse-link, .at-stage .spouse-link { stroke-width: 1.6px; }
.rt-frame .spouse-link.servante { stroke-dasharray: 7 5; }
.rt-legend {
  position: absolute;
  left: 0.7rem;
  bottom: 0.7rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0.7rem;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: var(--legend-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  font-size: var(--fs-1);
  color: var(--text);
  pointer-events: none;
}
.rt-legend .legend-item { gap: 0.5rem; }
.rt-none { color: var(--text-faint); font-style: italic; font-size: 0.9rem; }
#view-tools { overflow: hidden; }
#view-tools.active { display: flex; }
.at-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--space-6) 0 var(--space-5);
  min-height: 0;      
}
.at-defile {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  scrollbar-gutter: stable;
}
.at-head {
  width: min(1400px, 100%);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.at-stage {
  margin-inline: max(var(--space-5), calc((100% - 1400px) / 2 + var(--space-5)));
}
.at-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-5); }
.at-head-mots { flex: 1 1 26rem; min-width: 0; }
.at-head h1 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-6);
  color: var(--text);
}
.at-help {
  margin: 0;
  max-width: 62ch;
  color: var(--text-muted);
  font-size: var(--fs-2);
  line-height: 1.6;
  text-wrap: pretty;
}
.at-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  position: sticky;
  top: 0;
  z-index: 7;
  background: var(--bg);
  padding-block: var(--space-2);
  padding-inline: max(var(--space-5), (100% - 1400px) / 2 + var(--space-5));
}
#at-dl { margin-inline-start: auto; }
.at-search { position: relative; flex: 1 1 18rem; max-width: 26rem; }
.at-search input {
  width: 100%;
  padding: 0.55rem 0.85rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-2);
}
.at-search input:focus-visible { outline: 2px solid var(--accent-trait); outline-offset: 1px; }
#at-sugg {
  position: absolute;
  z-index: 5;
  inset-inline: 0;
  top: calc(100% + 4px);
  max-height: 17rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  box-shadow: var(--ombre-2);
}
#at-sugg button {
  display: block;
  width: 100%;
  padding: 0.45rem 0.8rem;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-2);
  text-align: start;
  cursor: pointer;
}
#at-sugg button:hover { background: var(--bg-raised); }
#at-sugg button.deja { color: var(--text-faint); }
.at-count { color: var(--text-muted); font-size: var(--fs-1); }
.at-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 2px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-2);
  cursor: pointer;
  transition: color var(--dur-teinte) var(--ease-vif), border-color var(--dur-teinte) var(--ease-vif);
}
.at-btn:hover { color: var(--text); border-color: var(--accent-trait); }
.at-btn-fort { color: var(--accent-trait); border-color: var(--accent-trait); font-weight: 600; }
.at-btn-fort:hover { background: var(--accent-fond); color: var(--bg); }
.at-btn[disabled] { opacity: 0.45; cursor: default; }
.at-btn[disabled]:hover { color: var(--text-muted); border-color: var(--line); background: transparent; }
.at-ico { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.at-pref {
  flex: 1 1 22rem;
  min-width: 0;
  max-width: 34rem;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-raised);
}
.at-pref-titre {
  margin: 0 0 var(--space-3);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line-soft, var(--line));
  font-family: var(--font-display);
  font-size: var(--fs-2);
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.01em;
}
.at-pref-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-3) var(--space-4);
  align-items: start;
}
.at-rub { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.at-rub-titre {
  margin-bottom: 0.15rem;
  font-size: var(--fs-00, 0.72rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.3;
}
.at-pref .ns-opt {
  padding: 0.3rem 0.45rem;
  border: 1px solid transparent;   
  border-radius: var(--r-sm);
  background: transparent;
  box-shadow: none;
}
.at-pref .ns-opt:hover { background: var(--bg-raised-2); border-color: transparent; }
.at-pref .ns-opt:has(input:checked) { border-color: var(--accent-trait); }
.at-pref .ns-opt:has(input:checked):hover { border-color: var(--accent-trait); }
.at-pref .seg-full { margin-bottom: 0.15rem; }
.at-pref .bg-pills { margin-bottom: 0; }
.at-frise {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 92px;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
body.rtl .at-frise { left: auto; right: 0; }
.at-frise::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  background: linear-gradient(to right, var(--panel) 58%, transparent);
}
body.rtl .at-frise::before { background: linear-gradient(to left, var(--panel) 58%, transparent); }
.at-tick {
  position: absolute;
  inset-inline-start: 0;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-00);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.at-tick span.at-tick-trait {
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}
body.rtl .at-tick { flex-direction: row-reverse; }
.at-stage[data-fond="dots"] {
  background-image: radial-gradient(circle at 1px 1px, var(--fond-trait) 1px, transparent 0);
  background-size: var(--fond-pas) var(--fond-pas);
}
.at-stage {
  position: relative;
  flex: 0 0 auto;
  height: calc(100% - var(--at-bar-h, 3.4rem) - var(--space-4));
  min-height: 22rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  overflow: hidden;
}
.at-vide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--text-faint);
  font-style: italic;
}
.at-wrap { display: flex; flex-direction: column; }
.at-outils {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  padding-top: 5px;
}
.at-b {
  width: 21px; height: 21px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.at-b:hover { color: var(--accent-trait); border-color: var(--accent-trait); }
.at-b-off:hover { color: var(--c-mrca); border-color: var(--c-mrca); }
.at-b[disabled], .at-b[disabled]:hover {
  color: color-mix(in srgb, var(--text-muted) 30%, transparent);
  border-color: color-mix(in srgb, var(--line) 30%, transparent);
  background-color: color-mix(in srgb, var(--bg-raised) 30%, transparent);
  cursor: default;
}
.at-stage .rt-legend { pointer-events: none; }
@media (max-width: 700px) {
  .at-inner { padding: var(--space-4) var(--space-3); }
  .at-search { flex: 1 1 100%; max-width: none; }
}
@media (max-width: 860px) {
  .fiche-cols { display: flex; flex-direction: column; }
  .fiche-cols > .fiche-parente, body.rtl .fiche-cols > .fiche-parente {
    float: none; width: auto; order: 1;
    margin: 1.4rem 0 0;
  }
  .fiche-parente {
    padding-inline-start: 0;
    border-inline-start: none;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line-soft);
  }
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
:focus-visible {
  outline: 2px solid var(--c-select);
  outline-offset: 2px;
  border-radius: 3px;
}
.fold-btn:focus-visible, .nav-btn:focus-visible { border-radius: var(--r-sm); }
.sb-title:first-child, .tool-body > .sb-sublabel:first-child { margin-top: 0; }
.tool-btn, .fold-btn, .cross-op, .tagpick-nbtn, .mrca-go,
.mrca-clear, .rt-tool-btn, #fiche-open-btn, .cf-btn, .cta, .seg button,
.theme-toggle, .histo-btn, .nav-btn {
  transition-property: color, background-color, border-color, box-shadow, transform;
}
.tool-btn:active, .fold-btn:active, .cross-op:active,
.tagpick-nbtn:active, .mrca-go:active, .mrca-clear:active, .rt-tool-btn:active,
#fiche-open-btn:active, .cf-btn:active, .cta:active, .seg button:active,
.theme-toggle:active, .histo-btn:active {
  transform: translateY(1px);
  transition-duration: 0.09s;
}
::selection { background: #14603a; color: #ffffff; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  #skip-link { transition: none; }
}