:root{color-scheme:dark;--gold:#d7b57c;--purple:#a68ce9;--red:#e16b78}*{box-sizing:border-box}body{margin:0;background:#0b0d14;color:#f1edf0;font:14px system-ui,Arial}header{padding:46px 5%;background:linear-gradient(115deg,#2a171e,#101522);border-bottom:1px solid #55413e}.eyebrow{color:var(--gold);font-size:11px;letter-spacing:3px;font-weight:700}h1,h2,h3{font-family:Georgia,serif}h1{font-size:clamp(30px,4vw,52px);margin:15px 0}h1 em{color:var(--gold);font-style:normal}header p,.intro p{color:#b0a9b4}#count{color:var(--gold);margin-top:22px}.toolbar{position:sticky;top:0;z-index:10;background:#10131df5;border-bottom:1px solid #39333e;padding:14px 5%;backdrop-filter:blur(10px)}.tools,#tabs{display:flex;gap:9px;flex-wrap:wrap}#tabs{margin-top:13px}input,select,button{background:#1e202e;color:#eee;border:1px solid #514653;border-radius:8px;padding:11px;font:inherit}button{cursor:pointer}button:hover{border-color:var(--gold)}input{flex:1;min-width:220px}#tabs button{border-radius:30px;padding:9px 15px;font-size:12px}#tabs button.active{border-color:var(--gold);color:var(--gold);background:#55412e66}main{max-width:1900px;margin:auto;padding:34px 4% 80px}.intro{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:28px}.intro h2{font-size:29px;margin:10px 0}.legend{display:flex;gap:18px;color:#b8b0ba;font-size:12px}.category{border:1px solid #3c343f;border-radius:14px;margin-bottom:28px;overflow:hidden;background:linear-gradient(135deg,#1c1b27,#11131c)}.cathead{padding:22px 25px;border-bottom:1px solid #3d343e;display:flex;align-items:center;justify-content:space-between}.cathead h3{font-size:24px;margin:7px 0}.cathead small{color:#b5a5ae}.catindex{color:var(--gold);letter-spacing:2px;font-size:11px}.map-scroll{overflow:auto;padding:20px;scrollbar-color:#574854 transparent}.map-inner{position:relative}.grade-head{position:absolute;top:0;text-align:center;color:#afa3ad;font-size:10px;text-transform:uppercase;border-bottom:1px solid #574958;padding-bottom:13px}.grade-column{position:absolute;top:38px;bottom:0;border-left:1px dashed #393540}.edges{position:absolute;inset:0;pointer-events:none;overflow:visible}.power{position:absolute;width:190px;min-height:65px;text-align:left;border:1px solid #715c9b;border-left:4px solid var(--purple);border-radius:9px;background:#292239;padding:10px 12px;z-index:2;box-shadow:0 8px 18px #0007}.power.sith{border-color:#904954;border-left-color:var(--red);background:#342129}.power strong{display:block;font-size:12px;line-height:1.35}.power small{display:block;color:#b7aebe;font-size:10px;margin-top:7px}.power:hover{filter:brightness(1.35)}.power.dim{opacity:.15}.power.active,.power.match{outline:2px solid var(--gold)}.empty{padding:45px;text-align:center;color:#b9aebb}#details{position:fixed;z-index:30;right:0;top:0;bottom:0;width:min(450px,100vw);overflow:auto;padding:30px;background:#1b1c29;border-left:1px solid #765860;box-shadow:-20px 0 70px #000c}#details h2{font-size:27px}#details p{color:#c2b9c7;line-height:1.7}#details h4{color:var(--gold);letter-spacing:2px;font-size:11px;margin-top:29px}.close{float:right;font-size:22px}.pill{display:inline-block;border:1px solid #625467;border-radius:30px;padding:8px;margin:4px;font-size:11px}.linkpower{display:block;width:100%;text-align:left;margin:8px 0;padding:12px}#backdrop{position:fixed;inset:0;background:#000a;z-index:20}footer{text-align:center;padding:28px;color:#928894;border-top:1px solid #39313a;font-size:11px}@media(max-width:700px){header{padding:30px 5%}.legend{flex-wrap:wrap}}

/* Identité visuelle — archives impériales */
body{background:radial-gradient(ellipse at 85% 0%,#291a23 0,transparent 42%),#090c12}
header{background:linear-gradient(110deg,#21131b,#101521 72%);border-bottom:1px solid #634445}
.topnav,.home-nav{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:11px;letter-spacing:2px;color:#d9b77a}
.topnav{margin-bottom:24px}.topnav a,.home-nav a{color:#d9b77a;text-decoration:none}
.home-nav{padding:24px 6%;border-bottom:1px solid #50383c;background:#0d1018}
.home-hero{padding:100px 8% 85px;min-height:610px;background:radial-gradient(ellipse at 82% 50%,#682b333c,transparent 47%),linear-gradient(135deg,#1b1119,#0d111a 70%);border-bottom:1px solid #50383c}
.home-hero .ornament{margin:26px 0;color:#b18b59;letter-spacing:9px;font-size:12px}
.home-hero h1{font-family:Georgia,serif;font-size:clamp(42px,6vw,85px);line-height:1.1;font-weight:400;max-width:920px;margin:0}
.home-hero h1 em{color:#d7b780}.home-hero p{max-width:650px;font-size:17px;color:#bdb5b9;line-height:1.8;margin:30px 0}
.cta{display:inline-flex;align-items:center;gap:35px;padding:20px 27px;border:1px solid #b28c59;color:#f5dfb7;background:#76502e25;text-decoration:none;font-size:12px;font-weight:bold;letter-spacing:1.5px}.cta:hover{background:#76502e55}
.home-metrics{display:flex;flex-wrap:wrap;gap:60px;margin-top:75px}.home-metrics div{display:flex;flex-direction:column;gap:8px}.home-metrics b{font:35px Georgia,serif;color:#e4c49a}.home-metrics small{color:#9c8f91;letter-spacing:2px;font-size:10px}
.home-content{padding:75px 7% 100px;max-width:1700px;margin:auto}.home-content h2{font:38px Georgia,serif}.home-content>p{color:#a9a1ac;max-width:650px;line-height:1.7}
.home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:35px}.discipline{display:flex;flex-direction:column;gap:18px;min-height:165px;padding:26px;background:linear-gradient(145deg,#201b27,#151820);border:1px solid #483941;color:#eee;text-decoration:none}.discipline:hover{border-color:#b28c59;transform:translateY(-2px)}.discipline span{color:#b99263;font-size:10px;letter-spacing:1.5px}.discipline strong{font:24px Georgia,serif}.discipline small{color:#aaa0ae}
@media(max-width:600px){.home-hero{padding:65px 7%}.home-metrics{gap:25px}.home-nav{font-size:9px}}

.foundation{margin:20px 0 34px;padding:35px 22px;text-align:center;background:radial-gradient(ellipse at center,#3c224b 0%,#17121f 75%);border:1px solid #79518d;border-radius:14px}.foundation button{display:block;margin:16px auto;background:#422252;border:1px solid #ba85e1;color:#f6e8ff;padding:16px 48px;font:22px Georgia,serif;cursor:pointer;box-shadow:0 0 24px #8e4db344}.foundation p{color:#bbaac8}

.learning-days{font-weight:700;color:#d9b7ff;font-size:1.1rem}

/* Liens lisibles : explorateur de ramifications au clic */
#details{width:min(690px,100vw)}
.relation-panel{border:1px solid #70528b;border-radius:12px;background:#20182b;padding:16px;margin-top:22px}
#details .relation-panel h4{margin:4px 0 12px}
#details .relation-hint{font-size:12px;line-height:1.5;color:#c7b8d7;margin:10px 0}
.relation-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(100px,1fr) minmax(0,1fr);gap:12px;align-items:center}
.relation-side{display:flex;flex-direction:column;gap:8px;min-width:0}
.relation-caption{font-size:10px;letter-spacing:1.5px;color:#bba2dc}
.relation-mid{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:0}
.relation-arrow{font-size:30px;line-height:1;color:#dbb6ff}
.relation-current{background:#48235d;border:1px solid #b68de4;border-radius:8px;padding:13px 8px;font-weight:700;overflow-wrap:anywhere;width:100%}
.relation-tile{width:100%;text-align:left;padding:10px 9px;background:#30233d;border:1px solid #72588a;border-radius:8px;overflow-wrap:anywhere}
.relation-tile span,.relation-tile small{display:block}
.relation-tile small{font-size:10px;color:#c3b1ce;margin-top:5px}
.relation-tile:hover{background:#55376c;border-color:#caa5ef}
.relation-empty{font-size:12px;color:#9f93aa}
@media(max-width:500px){.relation-grid{grid-template-columns:1fr}.relation-mid{flex-direction:row}.relation-arrow{transform:rotate(90deg)}}

/* Carte unique ascendante, plus vaste et aérée */
main{max-width:none;padding-left:2.5%;padding-right:2.5%}
.tree-global{width:100%}
.tree-scroll{height:min(80vh,950px);min-height:620px;overflow:auto;padding:14px;background:radial-gradient(ellipse at 50% 100%,#261832 0%,#12131c 70%)}
.tree-global .map-inner{position:relative}
.tree-global .tree-lane{position:absolute;top:70px;border:1px solid #47354f;border-radius:14px;background:linear-gradient(180deg,#30213a30,#1b17262b);pointer-events:none}
.tree-global .tree-lane-title{position:absolute;top:24px;text-align:center;color:#e3c9f5;font-size:15px;font-weight:750;letter-spacing:1.2px;white-space:nowrap}
.tree-global .power{width:218px;min-height:78px;padding:12px 14px;box-shadow:0 8px 20px #0007}
.tree-global .power strong{font-size:13px}
.tree-global .power.dim{opacity:.17}
.tree-global .power.tree-root{border:2px solid #d1a4ff;background:#432751;box-shadow:0 0 32px #b273d777}
.tree-global .edges{z-index:1}
.tree-global .power{z-index:2}

.tree-global .tree-level{position:absolute;left:25px;right:25px;border-bottom:1px dashed #72587d;font-size:12px;color:#a998b9;letter-spacing:1px;padding:0 0 8px;pointer-events:none;text-transform:uppercase}
.tree-global .tree-external{border-style:dashed;border-color:#d3a96b;background:#332b32}
.tree-global .external-label{position:absolute;left:0;width:100%;text-align:center;color:#d8b986;font-size:12px;letter-spacing:2px}
#tabs{gap:12px}
#tabs button{padding:12px 18px}

/* Navigation libre et sélection des catégories */
.tree-scroll{cursor:grab;touch-action:pan-x pan-y;overscroll-behavior:contain;user-select:none;-webkit-user-select:none}
.tree-scroll.is-dragging{cursor:grabbing}
.tree-scroll .power{cursor:pointer;user-select:none}
.category-label{font-size:10px;letter-spacing:2.2px;color:var(--gold);font-weight:800;margin-top:14px}
#tabs{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:3px}
#tabs button{border:1px solid #655073;background:#241d32;color:#d9c7e6;border-radius:8px;font-weight:650;font-size:13px;padding:13px 19px;transition:background .15s,border-color .15s}
#tabs button:hover{background:#3d2c52;border-color:#b18ed4}
#tabs button.active{background:#4a2b60;border:1px solid #d2a9ed;color:#fff;box-shadow:inset 0 0 0 1px #a77bc455,0 0 16px #7b3ba32c}
.pan-tip{margin:0 0 12px;padding:12px 17px;border:1px solid #4b3b59;background:#1d1928;color:#d5c6dd;border-radius:10px;font-size:13px}
@media(max-width:600px){#tabs button{padding:11px 12px;font-size:12px}.pan-tip{font-size:12px}}

/* INTRODUCTION PLEIN ÉCRAN — avant l'accès aux arbres, même en accès direct */
#intro-gate[hidden]{display:none!important}
body.intro-active{overflow:hidden}
.intro-gate{position:fixed;inset:0;z-index:9999;overflow:auto;display:flex;justify-content:center;align-items:flex-start;color:#f4edf9;background:radial-gradient(ellipse at 50% 10%,#4b244b 0%,#211324 38%,#0b0b12 85%);isolation:isolate}
.intro-gate:before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent 139px,#d4a4e00a 140px),repeating-linear-gradient(0deg,transparent 0,transparent 139px,#d4a4e00a 140px);pointer-events:none;z-index:-1}
.gate-content{width:min(1120px,94%);padding:clamp(45px,6vh,90px) 0 70px;text-align:center;position:relative}
.gate-eyebrow{color:#caa7de;letter-spacing:3px;font-size:11px;font-weight:700}.gate-eyebrow span{padding:0 12px;color:#ddbb86}
.gate-sigil{color:#b48cce;font-size:32px;letter-spacing:24px;margin:23px auto 10px}.gate-sigil span{color:#e3c08d}
.intro-gate h1{font:400 clamp(43px,6.5vw,88px)/1.12 Georgia,'Times New Roman',serif;margin:0 auto 25px;letter-spacing:-1px}
.intro-gate h1 em{color:#e0bc85;font-style:normal}
.gate-lead{max-width:720px;margin:0 auto 30px;line-height:1.85;font-size:16px;color:#d1c2d7}
.gate-enter{border:1px solid #dbb77c;color:#1d111c;background:linear-gradient(120deg,#f0d5a4,#bd9b6a);padding:18px 36px;font-weight:800;letter-spacing:2px;cursor:pointer;font-size:12px;box-shadow:0 0 38px #bd83be35}
.gate-enter span{padding-left:15px}.gate-enter:hover{filter:brightness(1.13);transform:translateY(-2px)}
.gate-rule{display:flex;gap:22px;align-items:center;justify-content:center;margin:48px auto 26px;color:#a995b4;letter-spacing:2px;font-size:11px}.gate-rule span{height:1px;background:#735a75;flex:1;max-width:230px}
.gate-categories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;text-align:left}
.gate-category{border:1px solid #6c4b70;background:linear-gradient(145deg,#33223b,#1a1723);min-height:135px;color:#f4e8f8;padding:19px;display:flex;flex-direction:column;align-items:flex-start;gap:13px;cursor:pointer;text-align:left}
.gate-category small{font-size:10px;letter-spacing:1.5px;color:#c1a2d0}.gate-category strong{font:23px Georgia,serif;line-height:1.15}.gate-category span{font-size:10px;color:#dfbb8b;letter-spacing:1px;margin-top:auto}
.gate-category:hover{border-color:#e0ba8e;background:#402c48;transform:translateY(-2px)}
.gate-bottom{margin-top:42px;font-size:10px;letter-spacing:2px;color:#ac99b5}.gate-bottom b{color:#dbbb87;padding:0 16px}
.nav-intro{background:transparent;color:#dcb9ef;border:1px solid #6f567a;padding:7px 10px;cursor:pointer}
@media(max-width:780px){.gate-categories{grid-template-columns:repeat(2,minmax(0,1fr))}.gate-content{padding-top:35px}.gate-category{min-height:110px}.gate-category strong{font-size:19px}}
@media(max-width:440px){.gate-categories{grid-template-columns:1fr 1fr;gap:8px}.gate-category{padding:12px}.gate-category strong{font-size:16px}.gate-lead{font-size:14px}}

/* Catégories à droite de l'arbre, dans l'espace libre */
.codex-workspace{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:20px;align-items:start}
.codex-tree-column{min-width:0}
.codex-category-sidebar{position:sticky;top:18px;align-self:start;padding:22px 16px;background:linear-gradient(155deg,#261b32,#16131f);border:1px solid #655074;border-radius:14px;box-shadow:0 14px 35px #0004}
.codex-category-sidebar .sidebar-eyebrow{color:#cba5e5;font-size:10px;letter-spacing:2.2px;font-weight:800}
.codex-category-sidebar h3{font-size:23px;margin:12px 0 8px}
.codex-category-sidebar p{font-size:12px;color:#bbaac9;line-height:1.5;margin:0 0 18px}
.codex-category-sidebar #tabs{display:flex;flex-direction:column;flex-wrap:nowrap;gap:9px;margin:0}
.codex-category-sidebar #tabs button{width:100%;text-align:left;border-radius:8px;padding:13px 12px;font-size:13px;white-space:normal;line-height:1.35}
.codex-category-sidebar .sidebar-help{margin-top:22px;padding-top:16px;border-top:1px solid #51405f;color:#bda9c9;font-size:12px;line-height:1.6}
.codex-workspace .tree-scroll{height:min(75vh,900px)}
@media(max-width:950px){.codex-workspace{grid-template-columns:minmax(0,1fr) 195px;gap:12px}.codex-category-sidebar{padding:17px 11px}}
@media(max-width:680px){.codex-workspace{grid-template-columns:1fr}.codex-category-sidebar{position:static;grid-row:1}.codex-category-sidebar #tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.codex-category-sidebar h3{margin:8px 0}.codex-category-sidebar .sidebar-help{display:none}.codex-workspace .tree-scroll{height:68vh}}

/* Rectangles de navigation plus grands et plus lisibles */
@media(min-width:951px){.codex-workspace{grid-template-columns:minmax(0,1fr) 325px}}
@media(min-width:681px) and (max-width:950px){.codex-workspace{grid-template-columns:minmax(0,1fr) 255px}}
.codex-category-sidebar{padding:26px 20px}
.codex-category-sidebar #tabs{gap:13px}
.codex-category-sidebar #tabs button{min-height:76px;padding:20px 18px;font-size:16px;font-weight:750;display:flex;align-items:center;line-height:1.4;border-radius:11px}
@media(max-width:680px){.codex-category-sidebar{padding:17px 12px}.codex-category-sidebar #tabs button{min-height:68px;padding:13px 12px;font-size:14px}}