:root{
  --bg:#05080f; --bg2:#080d18; --panel:#0a1018; --panel2:#0d1726; --panel3:#0f1f30;
  --border:#00d4c82e; --border2:#00d4c855; --border3:#00d4c888;
  --cyan:#00d4c8; --cyan-d:#021018; --amber:#ffd35b; --amber-d:#3a2400;
  --txt:#cfeefa; --txt2:#9fd3e6; --muted:#6f93a6; --faint:#4a6679;
  --green:#3ff2a0; --red:#ff5d7d; --purple:#7b61ff; --pink:#ff7ad0;
  --bevel:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  --bevel-sm:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  --glow:0 0 14px #00d4c833; --radius:3px;
  --tier0:#7f97a6; --tier1:#3ff2a0; --tier2:#00d4c8; --tier3:#7b61ff; --tier4:#ffd35b; --tier5:#ff5d7d;
  --mono:ui-monospace,'Cascadia Code','JetBrains Mono',Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    linear-gradient(#0b162600 0,#0b162600 1px,transparent 1px) 0 0/100% 28px,
    linear-gradient(90deg,#0b162633 1px,transparent 1px) 0 0/28px 100%,
    radial-gradient(900px 500px at 85% -10%, #0c2233 0%, transparent 60%),
    var(--bg);
  color:var(--txt); font-family:'Inter',system-ui,Segoe UI,Roboto,sans-serif;
  font-size:15px; line-height:1.5; min-height:100vh; letter-spacing:.01em;
}
a{color:var(--cyan);text-decoration:none}
a:hover{text-shadow:0 0 8px #00d4c866}
strong{color:#eafdff;font-weight:600}
h1,h2,h3{line-height:1.18;margin:.2em 0 .5em;font-weight:700}
h1{font-size:1.8rem;letter-spacing:.02em} h2{font-size:1.3rem} h3{font-size:1.02rem}
.mono{font-family:var(--mono)}
::selection{background:var(--cyan);color:var(--cyan-d)}

/* scrollbar */
*::-webkit-scrollbar{height:10px;width:10px}
*::-webkit-scrollbar-thumb{background:#00d4c844;border-radius:0}
*::-webkit-scrollbar-track{background:#081019}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;
  padding:9px 18px;background:rgba(6,10,18,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border2);box-shadow:0 1px 0 #00d4c822,0 6px 24px #0008;
}
.brand{display:flex;align-items:center;gap:9px;color:var(--txt);font-weight:700;white-space:nowrap;letter-spacing:.05em;text-transform:uppercase;font-size:.95rem}
.brand:hover{text-decoration:none}
.brand-logo{font-size:1.3rem;filter:drop-shadow(0 0 6px #00d4c888)}
.brand-name{color:#eafdff;text-shadow:0 0 10px #00d4c844}
.brand-name strong{color:var(--cyan)}
.brand-tld{color:var(--amber);font-style:normal;font-size:.72em;opacity:.85;letter-spacing:.02em}
.search-wrap{position:relative;flex:1;max-width:430px}
#globalSearch{
  width:100%;padding:9px 14px 9px 32px;border:1px solid var(--border2);
  background:var(--panel2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2316e0ff' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M15 15l-4-4'/%3E%3C/svg%3E") no-repeat 10px center;
  color:var(--txt);font-size:.92rem;outline:none;font-family:var(--mono);clip-path:var(--bevel-sm);
}
#globalSearch::placeholder{color:var(--faint);text-transform:uppercase;letter-spacing:.08em;font-size:.82rem}
#globalSearch:focus{border-color:var(--cyan);box-shadow:var(--glow)}
.search-results{
  position:absolute;top:46px;left:0;right:0;max-height:64vh;overflow:auto;
  background:var(--panel2);border:1px solid var(--border2);
  box-shadow:0 12px 40px #000a,var(--glow);padding:6px;z-index:60;clip-path:var(--bevel);
}
.sr-group{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--amber);padding:9px 10px 3px;font-weight:700}
.search-results a{display:flex;justify-content:space-between;gap:10px;padding:7px 10px;color:var(--txt)}
.search-results a:hover{background:var(--panel3)}
.sr-sub{color:var(--muted);font-size:.8rem;font-family:var(--mono)}
.search-results .empty{padding:16px;color:var(--muted)}

.mainnav{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.mainnav a{padding:7px 11px;color:var(--muted);font-size:.82rem;font-weight:600;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em;border:1px solid transparent}
.mainnav a:hover{color:var(--txt);text-shadow:none;background:var(--panel2)}
.mainnav a.active{color:var(--cyan);border-color:var(--border2);background:var(--panel2);box-shadow:inset 0 -2px 0 var(--cyan)}
/* --- Menu premium (déroulants) --- */
.mainnav .nav-item{position:relative}
.mainnav .nav-link{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;color:var(--muted);font-size:.82rem;font-weight:600;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em;border:1px solid transparent;background:transparent;cursor:pointer;font-family:inherit;line-height:1.6}
.mainnav .nav-link:hover{color:var(--txt);background:var(--panel2)}
.mainnav .nav-item.active>.nav-link{color:var(--cyan);border-color:var(--border2);background:var(--panel2)}
.mainnav .caret{font-size:.6rem;opacity:.65;transition:.15s}
.mainnav .nav-item:hover .caret,.mainnav .nav-item.open-drop .caret{color:var(--cyan);opacity:1}
.mainnav .nav-drop{position:absolute;top:100%;left:0;min-width:210px;background:var(--panel2);border:1px solid var(--border2);box-shadow:0 16px 36px #000c,var(--glow);padding:6px;display:none;z-index:70;clip-path:var(--bevel)}
.mainnav .nav-item>.nav-link{position:relative;z-index:71}
.mainnav .nav-item:hover .nav-drop,.mainnav .nav-item.open-drop .nav-drop{display:block}
.mainnav .nav-sub{display:flex;align-items:center;gap:10px;padding:9px 13px;color:var(--txt);font-size:.85rem;text-transform:none;letter-spacing:0;font-weight:500;border:0;white-space:nowrap;box-shadow:none}
.mainnav .nav-sub:hover{background:var(--panel3);color:var(--cyan)}
.mainnav .nav-sub.active{color:var(--cyan);box-shadow:none;background:var(--panel3)}
.mainnav .nav-guides{clip-path:var(--bevel-sm);color:var(--cyan);border:1px solid var(--cyan);text-shadow:0 0 8px #00d4c855;letter-spacing:.06em}
.mainnav .nav-guides:hover{background:rgba(22,224,255,.12);color:#eafdff}
.mainnav .nav-guides.active{background:rgba(22,224,255,.16);color:#eafdff;box-shadow:0 0 12px #00d4c840}
/* --- Logo --- */
.brand-img{height:42px;width:auto;display:block;filter:drop-shadow(0 0 9px #3a63ff77)}
.hero-brand{margin:12px auto 16px;position:relative;display:inline-block;padding:16px;border-radius:20px;background:rgba(18,30,52,.34);backdrop-filter:blur(11px) saturate(135%);-webkit-backdrop-filter:blur(11px) saturate(135%);border:1px solid rgba(120,180,255,.20);box-shadow:0 12px 44px rgba(0,0,0,.45);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,border-color .4s ease;cursor:pointer}
.hero-brand:hover{transform:translateY(-5px);border-color:rgba(22,224,255,.55);box-shadow:0 22px 70px rgba(0,0,0,.55),0 0 46px rgba(22,224,255,.28)}
.hero-logo{display:block;margin:0 auto;width:min(300px,72vw);height:auto;border-radius:12px;filter:drop-shadow(0 0 26px #3a63ff40);transition:filter .4s ease}
.hero-brand:hover .hero-logo{filter:drop-shadow(0 0 40px rgba(95,150,255,.6)) saturate(1.12) brightness(1.05)}
.hero-text-brand{font-size:2.8rem}

.lang-toggle{display:flex;border:1px solid var(--border2);overflow:hidden;clip-path:var(--bevel-sm)}
.lang-toggle button{background:transparent;border:0;color:var(--muted);padding:6px 11px;cursor:pointer;font-weight:700;font-size:.78rem;font-family:var(--mono)}
.lang-toggle button.active{background:var(--cyan);color:var(--cyan-d);box-shadow:0 0 12px #00d4c877}
.burger{display:none;background:var(--panel2);border:1px solid var(--border2);color:var(--cyan);font-size:1.1rem;padding:5px 10px;cursor:pointer}

/* ---------- Layout ---------- */
#app{max-width:1200px;margin:0 auto;padding:24px 18px 60px;min-height:60vh}
.loader{padding:60px;text-align:center;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em}
.page-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.page-head h1{display:flex;align-items:center;gap:10px}
.page-head .count{color:var(--amber);font-size:.82rem;font-family:var(--mono);letter-spacing:.05em}
.sub{color:var(--muted);font-size:.8rem;font-family:var(--mono)}
.intro{color:var(--muted);margin-bottom:14px;font-size:.92rem;max-width:760px}

/* ---------- Home ---------- */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 16px 8px}
.hero h1{font-size:2.2rem;text-shadow:0 0 18px #00d4c844;margin-bottom:6px}
.hero .tag{color:var(--amber);font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;font-size:.78rem}
.hero p{color:var(--muted);max-width:600px;margin:10px auto 18px}
.hero-search{max-width:540px;margin:0 auto;position:relative}
.hero-search input{width:100%;padding:14px 18px 14px 42px;border:1px solid var(--border2);background:var(--panel2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2316e0ff' stroke-width='2'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M17 17l-5-5'/%3E%3C/svg%3E") no-repeat 14px center;color:var(--txt);font-size:1rem;font-family:var(--mono);clip-path:var(--bevel)}
.hero-search input:focus{outline:none;border-color:var(--cyan);box-shadow:var(--glow)}
.stats{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin:18px 0 4px;color:var(--muted);font-size:.82rem;font-family:var(--mono)}
.stats b{color:var(--cyan);font-size:1.05rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:13px;margin-top:24px}
.card{display:block;padding:16px;background:var(--panel);border:1px solid var(--border);transition:.14s;color:var(--txt);clip-path:var(--bevel);position:relative}
.card:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:var(--glow);text-decoration:none}
.card .ic{font-size:1.5rem;filter:drop-shadow(0 0 6px #00d4c855)}
.card .ct{font-weight:700;margin-top:9px;text-transform:uppercase;letter-spacing:.04em;font-size:.92rem;color:#eafdff}
.card .cn{color:var(--amber);font-size:.78rem;margin-top:3px;font-family:var(--mono)}
.card.feat{border-color:var(--border2);background:linear-gradient(150deg,#0c1a26,#0b1320)}
.card.feat .ct{color:var(--cyan)}

/* ---------- Bannière Guides (mise en avant accueil) ---------- */
.guides-banner{display:flex;align-items:center;gap:20px;margin:4px 0 30px;padding:22px 26px;color:var(--txt);
  background:linear-gradient(100deg,#0c1a26 0%,#101a30 55%,#1a1334 100%);border:1px solid var(--border2);
  clip-path:var(--bevel);position:relative;overflow:hidden;transition:.16s}
.guides-banner::after{content:"";position:absolute;top:0;right:0;width:40%;height:100%;
  background:radial-gradient(120% 100% at 100% 0,rgba(22,224,255,.10),transparent 70%);pointer-events:none}
.guides-banner:hover{border-color:var(--cyan);box-shadow:var(--glow);transform:translateY(-2px);text-decoration:none}
.guides-banner .gb-ic{font-size:2.7rem;flex:none;filter:drop-shadow(0 0 12px #00d4c866)}
.gb-txt{flex:1;min-width:0}
.gb-t{font-size:1.5rem;font-weight:800;color:#eafdff;letter-spacing:.05em;text-transform:uppercase;text-shadow:0 0 16px #00d4c844;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.gb-badge{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;padding:3px 9px;background:var(--cyan);color:var(--cyan-d);clip-path:var(--bevel-sm);text-shadow:none}
.gb-s{color:var(--amber);font-family:var(--mono);font-size:.92rem;margin-top:6px}
.gb-cta{flex:none;display:flex;align-items:center;gap:8px;color:var(--cyan);font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.82rem;border:1px solid var(--cyan);padding:10px 16px;clip-path:var(--bevel-sm)}
.guides-banner:hover .gb-cta{background:var(--cyan);color:var(--cyan-d)}
.gb-arrow{font-size:1.1rem}
.nav-guides{color:var(--cyan)!important;text-shadow:0 0 8px #00d4c855}

/* ---------- Groupes de familles (accueil) ---------- */
.home-group{margin:0 0 22px}
.group-title{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:var(--amber);font-family:var(--mono);
  margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px;font-weight:700}

/* ---------- Page Guides ---------- */
.guides-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;margin-top:14px}
.guide-card{display:block;background:var(--panel);border:1px solid var(--border);clip-path:var(--bevel);overflow:hidden;transition:.15s;color:var(--txt)}
.guide-card:hover{border-color:var(--cyan);box-shadow:var(--glow);transform:translateY(-3px);text-decoration:none}
.guide-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--bg2)}
.guide-cap{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;font-weight:600;color:#eafdff;border-top:1px solid var(--border);font-size:.92rem}
.guide-cap .gc-arrow{color:var(--cyan);flex:none}
.guide-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.guide-actions{display:flex;gap:10px;flex-wrap:wrap}
.guide-embed{margin-top:14px;border:1px solid var(--border2);clip-path:var(--bevel);overflow:hidden;background:#05080f;box-shadow:var(--glow)}
.guide-embed iframe{display:block;width:100%;height:80vh;min-height:560px;border:0}
/* guide en PLEIN ÉCRAN (iframe full page sous la barre du haut) */
#app.fullbleed{max-width:none;padding:0}
.guide-frame{display:block;width:100%;height:calc(100vh - 60px);border:0;background:#05080f}
.guide-back{position:fixed;top:70px;left:16px;z-index:45;background:rgba(14,28,48,.92);border:1px solid var(--border2);color:var(--cyan);padding:8px 14px;clip-path:var(--bevel-sm);font-family:var(--mono);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;box-shadow:0 6px 20px #0009}
.guide-back:hover{background:var(--cyan);color:var(--cyan-d);text-decoration:none;box-shadow:0 0 14px #00d4c866}
.guide-share{position:fixed;top:70px;right:16px;z-index:45;background:rgba(14,28,48,.92);border:1px solid var(--border2);color:var(--cyan);padding:8px 14px;clip-path:var(--bevel-sm);font-family:var(--mono);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;box-shadow:0 6px 20px #0009;cursor:pointer;transition:background .2s,box-shadow .2s,color .2s}
.guide-share:hover{background:var(--cyan);color:var(--cyan-d);box-shadow:0 0 14px #00d4c866}
.guide-share.ok{background:var(--cyan);color:var(--cyan-d);border-color:var(--cyan)}

/* ---------- Accueil : sélecteur de disposition + 3 versions ---------- */
.layout-switch{display:flex;align-items:center;gap:8px;margin:18px 0 14px;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.layout-switch>span{color:var(--amber)}
.layout-switch button{width:30px;height:30px;background:var(--panel2);border:1px solid var(--border2);color:var(--muted);cursor:pointer;font-family:var(--mono);font-weight:700;clip-path:var(--bevel-sm)}
.layout-switch button:hover{color:var(--txt);border-color:var(--cyan)}
.layout-switch button.on{background:var(--cyan);color:var(--cyan-d);border-color:var(--cyan);box-shadow:0 0 10px #00d4c855}
.layout-switch em{font-style:normal;color:var(--faint);text-transform:none;letter-spacing:0}
/* V1 — tuiles épurées */
.home-tiles{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
/* V2 — colonnes control panel */
.home-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:16px}
.hc-col{background:var(--panel);border:1px solid var(--border);clip-path:var(--bevel);padding:5px}
.hc-h{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--amber);padding:12px 13px 9px;border-bottom:1px solid var(--border)}
.hc-link{display:flex;align-items:center;gap:11px;padding:11px 13px;color:var(--txt);border-bottom:1px solid #10202e;transition:.12s}
.hc-link:last-child{border-bottom:0}
.hc-link:hover{background:var(--panel3);color:var(--cyan);text-decoration:none;padding-left:18px}
.hc-ic{font-size:1.05rem;flex:none}
.hc-n{flex:1;font-weight:600;font-size:.9rem}
.hc-c{font-family:var(--mono);font-size:.8rem;color:var(--amber)}
/* V3 — bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;gap:14px}
.bento-t{display:flex;flex-direction:column;justify-content:flex-end;gap:5px;min-height:118px;padding:16px;background:var(--panel);border:1px solid var(--border);clip-path:var(--bevel);transition:.15s;color:var(--txt);overflow:hidden}
.bento-t:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:var(--glow);text-decoration:none}
.bento-t .bt-ic{font-size:1.7rem;filter:drop-shadow(0 0 6px #00d4c844)}
.bento-t .bt-n{font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.9rem;color:#eafdff}
.bento-t .bt-c{font-family:var(--mono);font-size:.78rem;color:var(--amber)}
.bento-t .bt-c.outil{color:var(--cyan)}
.bento-t.feat{background:linear-gradient(150deg,#0c1a26,#0b1320);border-color:var(--border2)}
.bento-t.feat .bt-n{color:var(--cyan)}
.bento-t.big{grid-column:span 2;grid-row:span 2;min-height:198px}
.bento-t.big .bt-ic{font-size:2.5rem}
.bento-t.big .bt-n{font-size:1.25rem}
.bento-t.wide{grid-column:span 2}
@media(max-width:760px){.bento{grid-template-columns:repeat(2,1fr)}.bento-t.big,.bento-t.wide{grid-column:span 2}.bento-t.big{grid-row:auto;min-height:140px}}

/* ---------- Controls ---------- */
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0}
.controls input[type=search],.controls select{padding:8px 12px;border:1px solid var(--border2);background:var(--panel2);color:var(--txt);font-size:.86rem;outline:none;font-family:var(--mono)}
.controls input[type=search]{min-width:210px;flex:1;max-width:340px}
.controls input:focus,.controls select:focus{border-color:var(--cyan);box-shadow:var(--glow)}
.controls select{text-transform:uppercase;letter-spacing:.03em;font-size:.78rem;cursor:pointer}

/* ---------- Table ---------- */
.table-wrap{border:1px solid var(--border);background:var(--panel)}
table.data{width:100%;border-collapse:collapse;font-size:.88rem}
table.data th,table.data td{padding:9px 12px;text-align:left;border-bottom:1px solid #10222e}
table.data th{background:var(--panel2);color:var(--amber);font-weight:700;position:sticky;top:56px;z-index:6;cursor:pointer;white-space:nowrap;user-select:none;text-transform:uppercase;letter-spacing:.05em;font-size:.72rem;border-bottom:1px solid var(--border2)}
table.data th:hover{color:var(--cyan)}
table.data th .ar{opacity:.5;font-size:.7rem}
table.data tbody tr{cursor:pointer;transition:.1s}
table.data tbody tr:hover{background:#0e2030;box-shadow:inset 2px 0 0 var(--cyan)}
table.data td{color:var(--txt2)}
table.data td .nm{color:#eafdff;font-weight:600}
table.data td.num{text-align:right;font-family:var(--mono);color:var(--txt)}
.cell-sub{color:var(--faint);font-size:.76rem;font-family:var(--mono)}
.empty-row{padding:26px;text-align:center;color:var(--muted);font-family:var(--mono)}

.badge{display:inline-block;padding:2px 9px;font-size:.72rem;font-weight:700;border:1px solid var(--border2);background:var(--panel2);color:var(--txt2);font-family:var(--mono);letter-spacing:.03em}
.tier{color:#04130f;border:0;clip-path:var(--bevel-sm)}
.tier0{background:var(--tier0)} .tier1{background:var(--tier1)} .tier2{background:var(--tier2)}
.tier3{background:var(--tier3);color:#1a0a33} .tier4{background:var(--tier4);color:var(--amber-d)} .tier5{background:var(--tier5);color:#2c0010}
.tag{display:inline-block;padding:1px 8px;margin:1px;background:var(--panel3);border:1px solid var(--border);font-size:.74rem;color:var(--txt2);font-family:var(--mono)}
.tag.amber{color:var(--amber);border-color:#ffd35b44}
.yes{color:var(--green)} .no{color:var(--faint)}
.gold{color:var(--amber);font-family:var(--mono)}

/* ---------- Modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(2,5,11,.78);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:42px 16px;overflow:auto}
.modal{background:var(--panel);border:1px solid var(--border2);max-width:700px;width:100%;box-shadow:0 0 0 1px #00d4c822,0 20px 60px #000c,var(--glow);clip-path:var(--bevel);animation:pop .14s ease}
@keyframes pop{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px 22px;border-bottom:1px solid var(--border2);background:var(--panel2)}
.modal-head h2{margin:0;color:#eafdff;text-shadow:0 0 10px #00d4c833}
.modal-head .mh-sub{color:var(--amber);font-size:.8rem;margin-top:4px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em}
.modal-close{background:var(--panel3);border:1px solid var(--border2);color:var(--cyan);width:32px;height:32px;cursor:pointer;font-size:1rem;flex:none}
.modal-close:hover{background:var(--cyan);color:var(--cyan-d)}
.modal-body{padding:18px 22px}
.kv{display:grid;grid-template-columns:160px 1fr;gap:7px 14px;margin:0}
.kv dt{color:var(--amber);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;font-family:var(--mono);padding-top:2px}
.kv dd{margin:0;color:var(--txt)}
.section-t{margin:18px 0 8px;color:var(--cyan);font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;font-family:var(--mono);border-bottom:1px solid var(--border);padding-bottom:5px}
.recipe-line{padding:7px 11px;background:var(--panel2);margin:4px 0;border-left:2px solid var(--cyan);font-family:var(--mono);font-size:.84rem}
.rel-list{display:flex;flex-wrap:wrap;gap:5px}
.linkish{cursor:pointer;color:var(--cyan)}
.linkish:hover{text-shadow:0 0 8px #00d4c866}
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;background:transparent;color:var(--cyan);border:1px solid var(--cyan);cursor:pointer;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;font-family:var(--mono);clip-path:var(--bevel-sm);box-shadow:inset 0 0 0 #00d4c8,0 0 0 #00d4c8;transition:.14s}
.btn:hover{background:var(--cyan);color:var(--cyan-d);box-shadow:0 0 16px #00d4c866;text-decoration:none}
.btn.amber{color:var(--amber);border-color:var(--amber)}
.btn.amber:hover{background:var(--amber);color:var(--amber-d);box-shadow:0 0 16px #ffd35b66}

/* ---------- Calculator ---------- */
.panel{background:var(--panel);border:1px solid var(--border);padding:16px 18px;clip-path:var(--bevel);margin-bottom:16px}
.panel h3{color:var(--cyan);text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;margin-bottom:12px}
.calc-pick{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.calc-pick input{padding:11px 14px;border:1px solid var(--border2);background:var(--panel2);color:var(--txt);font-family:var(--mono);font-size:.95rem;outline:none;clip-path:var(--bevel-sm)}
.calc-pick input#calcProduct{flex:1;min-width:240px}
.calc-pick input#calcQty{width:90px;text-align:center}
.calc-pick input:focus{border-color:var(--cyan);box-shadow:var(--glow)}
.calc-pick label{color:var(--amber);font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
.mats{display:flex;flex-wrap:wrap;gap:8px}
.mat{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--border2);padding:8px 13px;clip-path:var(--bevel-sm)}
.mat .q{color:var(--amber);font-weight:700;font-family:var(--mono)}
.mat .n{color:var(--txt)}
.workshops{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.tree{font-family:var(--mono);font-size:.85rem;white-space:pre;overflow-x:auto;line-height:1.6;color:var(--txt);padding:6px 2px}
.tree .wk{color:var(--cyan)}
.tree .raw{color:var(--amber)}
.tree .br{color:var(--faint)}
.calc-empty{color:var(--muted);font-family:var(--mono);padding:10px 0}

/* ---------- Skill tree ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 16px}
.tabs button{background:var(--panel2);border:1px solid var(--border2);color:var(--muted);padding:8px 14px;cursor:pointer;font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;font-family:var(--mono);clip-path:var(--bevel-sm)}
.tabs button:hover{color:var(--txt)}
.tabs button.active{color:var(--cyan-d);background:var(--cyan);box-shadow:0 0 14px #00d4c855}
.tree-board{position:relative;overflow:auto;border:1px solid var(--border);background:
  linear-gradient(#0b1626 1px,transparent 1px) 0 0/100% 70px,
  linear-gradient(90deg,#0b1626 1px,transparent 1px) 0 0/150px 100%,
  var(--bg2);padding:14px}
.tree-inner{position:relative}
.node{position:absolute;width:132px;padding:9px 11px;background:var(--panel);border:1px solid var(--border2);cursor:pointer;transition:.12s;clip-path:var(--bevel-sm);z-index:2}
.node:hover{border-color:var(--cyan);box-shadow:var(--glow);z-index:5}
.node .nn{font-weight:700;display:block;color:#eafdff;line-height:1.2;font-size:.8rem}
.node .nc{color:var(--amber);font-size:.72rem;margin-top:3px;font-family:var(--mono)}
.node.hl{border-color:var(--cyan);box-shadow:0 0 0 2px #00d4c8,0 0 18px #00d4c866}
.node.req{border-color:var(--purple);box-shadow:0 0 0 2px #7b61ff99}
svg.links{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:1}
svg.links line{stroke:#00d4c833;stroke-width:1.5}
svg.links line.on{stroke:var(--cyan);stroke-width:2.5;filter:drop-shadow(0 0 4px #00d4c8)}
.unpos{margin-top:14px}
.unpos .rel-list{margin-top:8px}

.note{color:var(--muted);font-size:.85rem;background:var(--panel);border-left:2px solid var(--amber);padding:10px 14px;margin:10px 0;font-family:var(--mono)}

/* ---------- Popup choix de langue ---------- */
.lang-modal-bg{position:fixed;inset:0;background:rgba(3,6,12,.94);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;animation:pop .2s ease}
.lang-modal{background:var(--panel);border:1px solid var(--border2);box-shadow:0 0 0 1px #00d4c822,0 24px 70px #000d,var(--glow);clip-path:var(--bevel);padding:36px 40px;text-align:center;max-width:440px;width:100%}
.lm-logo{font-size:1.7rem;font-weight:700;letter-spacing:.04em;color:#eafdff;text-shadow:0 0 14px #00d4c844}
.lm-logo strong{color:var(--cyan)}
.lm-q{margin:16px 0 24px;color:var(--amber);font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:.9rem;line-height:1.8}
.lm-q span{color:var(--muted);font-size:.78rem}
.lm-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.lm-btns button{flex:1;min-width:150px;display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 18px;background:var(--panel2);border:1px solid var(--border2);color:var(--txt);cursor:pointer;font-weight:700;font-size:1rem;font-family:var(--mono);clip-path:var(--bevel-sm);transition:.14s}
.lm-btns button:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:var(--glow);background:var(--panel3)}
.lm-btns .fl{font-size:1.3rem}

/* ---------- Footer ---------- */
.footer{max-width:1200px;margin:0 auto;padding:18px;color:var(--faint);font-size:.78rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;border-top:1px solid var(--border);font-family:var(--mono)}
.foot-credit{color:var(--cyan);opacity:.9;letter-spacing:.04em;text-shadow:0 0 8px #00d4c833}
/* contenu pré-rendu SEO (remplacé par le SPA au chargement) */
.seo-pre{max-width:1100px;margin:0 auto;padding:28px 20px;color:var(--txt)}
.seo-pre h1{font-size:1.8rem;color:#eafdff;text-shadow:0 0 16px #00d4c833;margin-bottom:10px}
.seo-pre>p{color:var(--muted);max-width:760px;margin:0 0 16px}
.seo-pre a{color:var(--cyan)}
.seo-list{list-style:none;padding:0;margin:14px 0;columns:3;column-gap:26px;font-size:.86rem;font-family:var(--mono);color:var(--muted)}
.seo-list li{padding:2px 0;break-inside:avoid}
@media(max-width:700px){.seo-list{columns:1}}
/* ---------- Newsletter (accueil, bas droite) ---------- */
.newsletter{margin:36px 0 8px;display:flex;justify-content:flex-end}
.nl-card{position:relative;width:min(540px,100%);background:linear-gradient(160deg,rgba(22,224,255,.06),rgba(120,150,255,.04));border:1px solid rgba(120,180,255,.22);padding:20px 22px;box-shadow:0 12px 40px #0007;backdrop-filter:blur(9px) saturate(120%);-webkit-backdrop-filter:blur(9px) saturate(120%);clip-path:var(--bevel)}
.nl-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.nl-ic{font-size:1.6rem;filter:drop-shadow(0 0 8px #00d4c866)}
.nl-t{font-weight:800;color:#eafdff;letter-spacing:.02em}
.nl-sub{color:var(--muted);font-size:.85rem;margin-top:2px}
.nl-row{display:flex;gap:8px}
.nl-row input{flex:1;min-width:0;padding:11px 14px;border:1px solid var(--border2);background:var(--panel2);color:var(--txt);font-family:var(--mono);font-size:.92rem;clip-path:var(--bevel-sm)}
.nl-row input:focus{outline:none;border-color:var(--cyan);box-shadow:var(--glow)}
.nl-row button{flex:none;padding:11px 18px;border:1px solid var(--cyan);background:rgba(22,224,255,.12);color:var(--cyan);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.8rem;cursor:pointer;clip-path:var(--bevel-sm);transition:background .2s,color .2s}
.nl-row button:hover{background:var(--cyan);color:var(--cyan-d)}
.nl-row button:disabled{opacity:.6;cursor:default}
.nl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nl-consent{display:flex;gap:8px;align-items:flex-start;margin-top:10px;color:var(--muted);font-size:.78rem;line-height:1.4;cursor:pointer}
.nl-consent input{margin-top:2px;accent-color:var(--cyan)}
.nl-status{margin:10px 0 0;font-size:.82rem;color:var(--muted);font-family:var(--mono);min-height:1.1em}
.nl-status.ok{color:var(--cyan)}
@media(max-width:640px){.newsletter{justify-content:stretch}.nl-row{flex-wrap:wrap}.nl-row button{width:100%}}
#footStats b{color:var(--muted)}

/* ============ Premium polish — glass + micro-interactions (ciblé) ============ */
.topbar{background:linear-gradient(180deg,rgba(6,10,18,.85),rgba(6,10,18,.6));backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
.search-results{background:#0e1c30;backdrop-filter:none;-webkit-backdrop-filter:none}
.mainnav .nav-drop{background:#0e1c30;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 18px 40px #000d}
.modal{background:rgba(10,16,26,.84);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
.modal-head{background:rgba(13,23,38,.55)}
.lang-modal-bg{background:rgba(3,6,12,.72);backdrop-filter:blur(12px) saturate(130%);-webkit-backdrop-filter:blur(12px) saturate(130%)}
.lang-modal{background:rgba(12,20,34,.8);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%)}

/* fondu de page au changement de route */
#app.page-anim{animation:pageIn .3s ease}
@keyframes pageIn{from{opacity:0}to{opacity:1}}

/* cartes de guides : zoom image + flèche au survol */
.guide-card img{transition:transform .45s cubic-bezier(.2,.6,.2,1),filter .3s}
.guide-card:hover img{transform:scale(1.06);filter:saturate(1.12) brightness(1.05)}
.guide-card .gc-arrow{transition:transform .2s}
.guide-card:hover .gc-arrow{transform:translateX(5px)}
.guide-card:hover .guide-cap{background:rgba(22,224,255,.06)}

/* liseré cyan discret en haut des cartes au survol */
.card{position:relative}
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan) 50%,transparent);opacity:0;transition:opacity .25s}
.card:hover::after{opacity:.9}

/* header : logo gauche · menus + recherche groupés à droite · FR/EN à l'extrême droite */
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.brand{grid-column:1;justify-self:start}
.topbar-center{grid-column:2;justify-self:center;display:flex;align-items:center;gap:14px;min-width:0}
.topbar-right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:12px}
.search-wrap{flex:none;width:210px;max-width:210px}
.mainnav{margin-left:0;flex-wrap:nowrap}

@media(max-width:860px){
  .topbar{display:flex;flex-wrap:wrap;gap:10px}
  .topbar-center{order:3;flex-basis:100%;justify-self:auto}
  .topbar-right{margin-left:auto}
  .search-wrap{width:100%;max-width:none;flex:1}
  .mainnav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--panel2);flex-direction:column;padding:8px;border-bottom:1px solid var(--border2)}
  .mainnav.open{display:flex}
  .mainnav .nav-item{display:block}
  .mainnav .nav-link{width:100%;justify-content:flex-start}
  .mainnav .nav-drop{position:static;display:block;border:0;box-shadow:none;clip-path:none;background:transparent;padding:0 0 6px 18px}
  .mainnav .caret{display:none}
  .burger{display:block}
  .search-wrap{max-width:none}
  .table-wrap{overflow-x:auto}
  table.data th{position:static}
  .kv{grid-template-columns:1fr;gap:2px}
  .kv dt{margin-top:9px}
}

/* ---------- Carte galactique (Haredorb) ---------- */
.map-toolbar{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.2rem 0 .7rem}
.map-toolbar input,.map-toolbar select{background:rgba(8,14,26,.85);border:1px solid rgba(0,212,200,.3);color:#cfe;border-radius:6px;padding:.45rem .6rem;font:inherit}
.map-toolbar input{min-width:220px;flex:1 1 220px}
.map-toolbar button{background:rgba(0,212,200,.12);border:1px solid rgba(0,212,200,.4);color:#7fffea;border-radius:6px;padding:.45rem .7rem;cursor:pointer}
.map-toolbar button:hover{background:rgba(0,212,200,.22)}
.map-count{margin-left:auto;color:#8fa6bd;font-size:.85rem;white-space:nowrap}
.map-stage{position:relative;border:1px solid rgba(0,212,200,.18);border-radius:10px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#0a1322,#05080f 70%)}
#mapSvg{display:block;width:100%;height:72vh;touch-action:none;cursor:grab}
#mapSvg:active{cursor:grabbing}
.sec-poly{opacity:.08;stroke:currentColor;stroke-width:4;vector-effect:non-scaling-stroke;transition:opacity .2s}
.sec-poly.sec-active{opacity:.2}
.sec-lbl{font-size:90px;font-weight:700;opacity:.22;text-anchor:middle;pointer-events:none}
.sys-dot{cursor:pointer;stroke:#02060d;stroke-width:1;vector-effect:non-scaling-stroke;transition:opacity .15s}
.sys-dot:hover{stroke:#fff;stroke-width:2}
.sys-dot.sel{stroke:#00d4c8;stroke-width:3}
.sys-dot.dim{opacity:.07;pointer-events:none}
.map-panel{position:absolute;top:0;right:0;width:min(340px,86%);height:100%;overflow:auto;background:rgba(6,11,20,.96);border-left:1px solid rgba(0,212,200,.3);padding:1rem;backdrop-filter:blur(4px)}
.mp-close{position:absolute;top:.5rem;right:.6rem;background:none;border:none;color:#8fa6bd;font-size:1.1rem;cursor:pointer;line-height:1}
.map-panel h3{margin:.2rem 0 .55rem;color:#eaf6ff}
.map-panel h3 small{color:#8fa6bd;font-weight:400;font-size:.7em}
.mp-meta{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.6rem}
.mp-badge{font-size:.72rem;background:rgba(0,212,200,.1);border:1px solid rgba(0,212,200,.3);color:#9ff;border-radius:20px;padding:.15rem .55rem;white-space:nowrap}
.mp-planet{border-top:1px solid rgba(255,255,255,.07);padding:.45rem 0}
.mp-pn{font-weight:600;color:#cfe3f5;margin-bottom:.25rem;font-size:.9rem}
.mp-res{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem}
.mp-res li{font-size:.73rem;background:rgba(255,255,255,.05);border-radius:5px;padding:.12rem .42rem;color:#bcd}
.mp-res li b{color:#ffd35b;font-weight:600}
.mp-empty{font-size:.73rem;color:#6f8298;font-style:italic}
.map-legend{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.6rem}
.leg-item{display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:.2rem .6rem;color:#bcd;font-size:.73rem;cursor:pointer}
.leg-item:hover{border-color:rgba(0,212,200,.5)}
.leg-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.leg-item em{color:#8fa6bd;font-style:normal}
@media(max-width:640px){#mapSvg{height:62vh}.sec-lbl{font-size:130px}.map-count{margin-left:0}}

/* ---------- Fiches individuelles ---------- */
.crumb{font-size:.8rem;color:#7e93a8;margin:.2rem 0 .6rem;display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
.crumb a{color:#7fd9d0;text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb span{color:#aebfce}
.detail-page{max-width:760px}
.detail-page .kv{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;margin:.2rem 0 .8rem}
.detail-page .kv dt{color:#8fa6bd;font-size:.85rem}
.detail-page .section-t{margin:.9rem 0 .4rem;font-weight:600;color:#cfe3f5;border-top:1px solid rgba(255,255,255,.07);padding-top:.6rem}
.detail-page .recipe-line{font-size:.85rem;color:#cdd9e6;padding:.12rem 0}
.detail-page .rel-list{display:flex;flex-wrap:wrap;gap:.3rem}

/* ---------- Icônes du jeu ---------- */
.ico{display:inline-block;vertical-align:middle;object-fit:contain}
.ico-sm{width:20px;height:20px;margin-right:.35rem;vertical-align:-5px}
.ico-lg{width:40px;height:40px;margin-right:.5rem;vertical-align:-9px}
.mp-res li .ico{width:16px;height:16px;margin-right:.2rem;vertical-align:-3px}
td .ico{flex:0 0 auto}

/* ---------- Carte néon (galaxie + système) ---------- */
.neb{fill-opacity:.07;stroke-opacity:.20;stroke-width:1;vector-effect:non-scaling-stroke;transition:fill-opacity .2s}
.neb.sec-active{fill-opacity:.16;stroke-opacity:.42}
.links line{stroke:#8a6bff;stroke-opacity:.20;stroke-width:1;vector-effect:non-scaling-stroke}
.sec-lbl{font-size:90px;font-weight:500;fill-opacity:.12;text-anchor:middle;pointer-events:none}
.sys{cursor:pointer}
.sys-nm{fill:#fff;stroke:#060512;stroke-width:3.5px;stroke-linejoin:round;paint-order:stroke;font-size:13px;font-weight:500;pointer-events:none}
.sys-tag{fill:#8aa0c0;stroke:#060512;stroke-width:3px;stroke-linejoin:round;paint-order:stroke;font-size:11px;pointer-events:none}
.sys.nolabel .sys-nm,.sys.nolabel .sys-tag{display:none}
.sys.dim{opacity:.16}
.sys.dim .sys-nm,.sys.dim .sys-tag{display:none}
.sys:hover .sys-nm{fill:#7fffea}
.orbit{fill:none;stroke:#9a7cf0;stroke-opacity:.22;stroke-width:1;vector-effect:non-scaling-stroke}
.planet{cursor:pointer}
.pl-nm{fill:#eafffb;stroke:#060512;stroke-width:3.5px;stroke-linejoin:round;paint-order:stroke;font-size:13px;font-weight:500;pointer-events:none}
.planet:hover .pl-nm{fill:#7fffea}
.sys-central{pointer-events:none}

/* ---------- Étiquettes carte v2 (chip + lisibilité + fondu) ---------- */
.sys .lbl{transition:opacity .18s ease}
.sys.nolabel .lbl{opacity:0;pointer-events:none}
.sys.nolabel .sys-nm,.sys.nolabel .sys-tag{display:initial}
.lbl-bg{fill:#070b16;fill-opacity:.66;stroke:#9fb4d8;stroke-opacity:.16;stroke-width:1;vector-effect:non-scaling-stroke}
.sys-nm{fill:#eef4fc;stroke:none;font-size:12.5px;font-weight:500;letter-spacing:.1px;pointer-events:none}
.sys-tag{fill:#8ea6c6;stroke:none;font-size:10.5px;font-weight:400;letter-spacing:.5px;pointer-events:none}
.sys:hover{ }
.sys:hover .lbl{opacity:1}
.sys:hover .lbl-bg{fill-opacity:.85;stroke:#00d4c8;stroke-opacity:.55}
.sys:hover .sys-nm{fill:#7fffea}

/* Nébuleuses : voile léger en galaxie, estompées au zoom (évite le débordement des secteurs voisins) */
.neb{fill-opacity:.05;transition:fill-opacity .25s ease,stroke-opacity .25s ease}
#mapSvg.nebfade .neb{fill-opacity:.012;stroke-opacity:.05}
#mapSvg.nebfade .neb.sec-active{fill-opacity:.10;stroke-opacity:.24}

/* Empêche la sélection native (texte/chips) au cliquer-glisser sur la carte */
#mapSvg{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
#mapSvg text, #mapSvg rect, #mapSvg .lbl{ -webkit-user-select:none; user-select:none; }
#mapSvg ::selection{ background:transparent; }

/* ====================== Refonte UI/UX : glass + hovers + animations ====================== */

/* Glassmorphism — barre d'outils, panneau, légende */
.map-toolbar{ background:rgba(10,17,30,.5); backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%); border:1px solid rgba(0,212,200,.14); border-radius:12px; padding:.55rem .65rem; }
.map-panel{ background:rgba(8,13,24,.6)!important; backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); }
.map-legend{ background:rgba(10,17,30,.4); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:.55rem .65rem; }
.leg-item{ transition:transform .15s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.leg-item:hover{ transform:translateY(-2px); border-color:rgba(0,212,200,.5); box-shadow:0 4px 14px rgba(0,212,200,.18); }

/* Boutons toolbar : toggle désignations + plein écran */
.map-toggle{ display:inline-flex; align-items:center; gap:.4rem; }
.map-toggle .mt-dot{ width:9px; height:9px; border-radius:50%; background:#3a4759; transition:background .2s, box-shadow .2s; }
.map-toggle.is-on .mt-dot{ background:#00d4c8; box-shadow:0 0 8px #00d4c8; }
.map-toggle.is-on{ border-color:rgba(0,212,200,.5)!important; color:#7fffea!important; }
.map-iconbtn{ font-size:1rem; line-height:1; padding:.45rem .62rem; }

/* Liens de constellation surlignés au survol d'un système */
.links line{ transition:stroke-opacity .2s, stroke .2s; }
.links line.lit{ stroke:#7fffea!important; stroke-opacity:.8!important; }

/* Survol étoile : halo pulsant + label agrandi/glow ; apparition animée des labels */
.sys .lbl{ transform-box:fill-box; transform-origin:left center; transition:opacity .22s ease, transform .2s ease; }
.sys.nolabel .lbl{ opacity:0; transform:scale(.9); pointer-events:none; }
.sys:hover .lbl{ transform:scale(1.14); }
.sys:hover .lbl-bg{ filter:drop-shadow(0 0 6px rgba(0,212,200,.6)); }
.sys:hover .sys-nm{ fill:#7fffea; }
.sys:hover .si > circle:first-child{ animation:cf-halo 1.1s ease-in-out infinite; }
@keyframes cf-halo{ 0%,100%{ opacity:.13; } 50%{ opacity:.5; } }
.planet:hover .pl-nm{ fill:#7fffea; }
.planet:hover .si > circle:first-child{ animation:cf-halo 1.1s ease-in-out infinite; }

/* Plein écran */
.map-stage:fullscreen, .map-stage:-webkit-full-screen{ width:100vw; height:100vh; border-radius:0; }
.map-stage:fullscreen #mapSvg, .map-stage:-webkit-full-screen #mapSvg{ height:100vh; }

/* Bandeau carte (accueil) */
.map-banner{ position:relative; display:flex; align-items:center; gap:1rem; margin:0 0 1rem; padding:1rem 1.25rem; border-radius:14px; overflow:hidden; text-decoration:none;
  background:linear-gradient(120deg, rgba(12,20,42,.7), rgba(8,14,26,.5)); backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%);
  border:1px solid rgba(123,108,255,.28); transition:transform .2s ease, box-shadow .25s ease, border-color .25s ease; }
.map-banner:hover{ transform:translateY(-3px); border-color:rgba(0,212,200,.45); box-shadow:0 12px 36px rgba(0,212,200,.2); }
.map-banner .mb-glow{ position:absolute; top:-60%; right:-10%; width:55%; height:220%; background:radial-gradient(closest-side, rgba(0,212,200,.2), transparent); pointer-events:none; opacity:.65; transition:opacity .3s; }
.map-banner:hover .mb-glow{ opacity:1; }
.mb-ic{ font-size:2rem; filter:drop-shadow(0 0 10px rgba(0,212,200,.5)); }
.mb-txt{ flex:1; min-width:0; }
.mb-t{ font-weight:600; font-size:1.05rem; color:#eaf6ff; display:flex; align-items:center; gap:.5rem; }
.mb-badge{ font-size:.7rem; background:rgba(0,212,200,.16); color:#7fffea; border:1px solid rgba(0,212,200,.4); border-radius:20px; padding:.1rem .55rem; }
.mb-s{ font-size:.85rem; color:#9fb2c8; margin-top:.2rem; }
.mb-cta{ white-space:nowrap; color:#7fffea; font-weight:500; font-size:.9rem; display:flex; align-items:center; gap:.4rem; }
.gb-arrow{ display:inline-block; transition:transform .2s ease; }
.map-banner:hover .gb-arrow, .guides-banner:hover .gb-arrow{ transform:translateX(4px); }

/* Glass + hovers sur la navigation */
.nav-drop{ backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%); }
.nav-link, .nav-sub, .nav-dropbtn{ transition:color .18s ease, background .18s ease, transform .15s ease; }
.nav-sub:hover{ transform:translateX(3px); }

/* Glass + hovers sur cartes/boutons du site */
.card, .bento-t, .nl-card, .hc-col{ transition:transform .2s ease, box-shadow .25s ease, border-color .25s ease; }
.card:hover, .bento-t:hover{ transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,212,200,.16); border-color:rgba(0,212,200,.4); }
.hc-link{ transition:transform .15s ease, color .18s ease, background .18s ease; }
.hc-link:hover{ transform:translateX(4px); color:#7fffea; }
button, .btn{ transition:transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
button:active, .btn:active{ transform:scale(.97); }

/* Fond étoilé d'ambiance */
.starfield{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.starfield::before, .starfield::after{ content:''; position:absolute; inset:-50%;
  background-image:radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 120px 80px, rgba(180,200,255,.4), transparent), radial-gradient(1.5px 1.5px at 200px 160px, rgba(255,255,255,.35), transparent), radial-gradient(1px 1px at 300px 50px, rgba(160,180,255,.4), transparent);
  background-repeat:repeat; background-size:280px 280px; animation:cf-drift 130s linear infinite; opacity:.5; }
.starfield::after{ background-size:440px 440px; animation-duration:220s; opacity:.28; }
@keyframes cf-drift{ from{ transform:translateY(0); } to{ transform:translateY(-280px); } }
@media (prefers-reduced-motion: reduce){ .starfield::before,.starfield::after,.sys:hover .si>circle:first-child,.planet:hover .si>circle:first-child{ animation:none!important; } }

/* ====================== Page système (/systeme/<slug>) ====================== */
.sys-head{ display:flex; align-items:flex-start; gap:1rem; margin:.2rem 0 1rem; }
.sys-star{ width:34px; height:34px; border-radius:50%; flex:0 0 auto; margin-top:4px; box-shadow:0 0 16px currentColor; filter:saturate(1.2); }
.sys-htxt h1{ margin:0 0 .35rem; color:#eaf6ff; }
.sys-htxt h1 small{ color:#8fa6bd; font-weight:400; font-size:.6em; }
.sys-coord{ margin-top:.5rem; font-size:.85rem; color:#9fb2c8; }
.sys-coord b{ color:#cfe3f5; font-variant-numeric:tabular-nums; }
.sys-grid{ display:grid; grid-template-columns:minmax(0,520px) 1fr; gap:1.2rem; align-items:start; }
.sys-mini{ background:rgba(8,13,24,.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(0,212,200,.16); border-radius:14px; padding:.5rem; position:sticky; top:1rem; }
.sysmap{ display:block; width:100%; height:auto; aspect-ratio:1/1; background:radial-gradient(circle at 50% 45%,#0a1322,#05080f 72%); border-radius:10px; }
.sys-list{ display:flex; flex-direction:column; gap:.6rem; }
.sp-card{ background:rgba(10,17,30,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:.7rem .85rem; transition:border-color .2s ease, transform .15s ease, box-shadow .2s ease; }
.sp-card:hover{ border-color:rgba(0,212,200,.4); transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,212,200,.14); }
.sp-h{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; flex-wrap:wrap; margin-bottom:.5rem; }
.sp-n{ font-weight:600; color:#eaf6ff; }
.sp-co{ font-size:.74rem; color:#8fa6bd; font-variant-numeric:tabular-nums; white-space:nowrap; }
.sp-res{ display:flex; flex-wrap:wrap; gap:.35rem; }
.sp-chip{ display:inline-flex; align-items:center; font-size:.74rem; background:rgba(255,255,255,.05); border-radius:6px; padding:.16rem .45rem; color:#bcd; }
.sp-chip b{ color:#ffd35b; margin-left:.15rem; }
.sp-chip .ico{ width:16px; height:16px; margin-right:.25rem; vertical-align:-3px; }
@media(max-width:760px){ .sys-grid{ grid-template-columns:1fr; } .sys-mini{ position:static; } }

/* Agrandir la fenêtre planètes (page système) */
.sys-grid{ grid-template-columns:minmax(0,680px) 1fr; }
.sys-mini{ padding:.7rem; }
@media(max-width:980px){ .sys-grid{ grid-template-columns:1fr; } }

/* ============================ Refonte accueil : Hero + sidebar ============================ */
body{ margin:0; padding:0; }
.app-shell{ display:flex; align-items:flex-start; min-height:100vh; }
.sidebar{ position:sticky; top:0; height:100vh; width:214px; flex:0 0 214px; box-sizing:border-box; display:flex; flex-direction:column; gap:14px; padding:18px 14px; background:rgba(11,18,32,.72); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-right:1px solid rgba(0,212,200,.12); overflow-y:auto; z-index:50; }
.app-main{ flex:1 1 auto; min-width:0; box-sizing:border-box; padding:24px 28px 40px; display:flex; flex-direction:column; min-height:100vh; }
.app-main > #app{ flex:1 0 auto; }

.sidebar .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.sidebar .brand-img{ width:38px; height:38px; border-radius:9px; object-fit:cover; box-shadow:0 0 14px rgba(0,212,200,.25); }
.sidebar .brand-name{ color:#eaf6ff; font-weight:600; font-size:17px; }
.sidebar .brand-name strong{ color:#7fffea; font-weight:600; }
.sidebar .brand-logo-fallback{ font-size:24px; }

.sidebar .search-wrap{ position:relative; }
.sidebar #globalSearch{ width:100%; box-sizing:border-box; background:rgba(8,14,26,.8); border:1px solid rgba(0,212,200,.22); border-radius:9px; padding:9px 11px; color:#cfe3f5; font:inherit; font-size:13px; }
.sidebar .search-results{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:60; max-height:60vh; overflow:auto; }

.sidebar .mainnav{ display:flex; flex-direction:column; gap:3px; }
.sidebar .nav-link{ display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:9px; color:#aebfce; font-size:13px; text-decoration:none; cursor:pointer; transition:background .15s,color .15s; width:100%; box-sizing:border-box; }
.sidebar .nav-link:hover{ background:rgba(255,255,255,.05); color:#eaf6ff; }
.sidebar .nav-link.active{ background:rgba(0,212,200,.14); border:1px solid rgba(0,212,200,.4); color:#7fffea; }
.sidebar .nav-carte{ color:#bcd0ff; }
.sidebar .nav-item{ display:flex; flex-direction:column; }
.sidebar .nav-dropbtn{ background:none; border:none; justify-content:space-between; text-align:left; }
.sidebar .nav-dropbtn .caret{ transition:transform .2s; font-size:11px; opacity:.7; }
.sidebar .nav-item.open-drop .nav-dropbtn .caret{ transform:rotate(180deg); }
.sidebar .nav-drop{ display:none; flex-direction:column; gap:1px; padding:2px 0 4px; margin:0 0 0 8px; border-left:1px solid rgba(255,255,255,.08); }
.sidebar .nav-item.open-drop .nav-drop{ display:flex; }
.sidebar .nav-sub{ display:flex; align-items:center; gap:7px; padding:7px 10px; border-radius:7px; color:#9fb2c8; font-size:12.5px; text-decoration:none; transition:background .15s,color .15s,transform .15s; }
.sidebar .nav-sub:hover{ background:rgba(255,255,255,.05); color:#7fffea; transform:translateX(2px); }
.sidebar .nav-sub.active{ color:#7fffea; }
.sidebar-foot{ margin-top:auto; }
.sidebar .lang-toggle{ display:flex; gap:6px; }
.sidebar .lang-toggle button{ flex:1; padding:7px; border-radius:7px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:#7e93a8; font-size:12px; cursor:pointer; transition:background .15s,color .15s,border-color .15s; }
.sidebar .lang-toggle button.active{ background:rgba(0,212,200,.16); border-color:rgba(0,212,200,.4); color:#7fffea; }

.burger{ display:none; position:fixed; top:12px; left:12px; z-index:70; width:42px; height:42px; border-radius:10px; background:rgba(11,18,32,.85); backdrop-filter:blur(10px); border:1px solid rgba(0,212,200,.25); color:#7fffea; font-size:18px; cursor:pointer; }
.sidebar-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:40; }
@media(max-width:900px){
  .burger{ display:block; }
  .sidebar{ position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .25s ease; box-shadow:0 0 40px rgba(0,0,0,.55); }
  .sidebar.open{ transform:none; }
  .app-main{ padding:64px 16px 40px; }
}

.map-hero{ position:relative; display:block; height:300px; border-radius:16px; overflow:hidden; text-decoration:none; border:1px solid rgba(123,108,255,.28); background:radial-gradient(circle at 62% 38%,#0d1730,#05080f 78%); margin-bottom:1rem; transition:transform .2s,box-shadow .25s,border-color .25s; }
.map-hero:hover{ transform:translateY(-3px); border-color:rgba(0,212,200,.45); box-shadow:0 16px 46px rgba(0,212,200,.2); }
.mh-bg{ position:absolute; inset:0; width:100%; height:100%; }
.mh-overlay{ position:absolute; left:24px; bottom:22px; right:24px; }
.mh-tag{ font-size:12px; color:#7fffea; letter-spacing:.6px; margin-bottom:6px; }
.mh-t{ font-size:24px; font-weight:600; color:#eaf6ff; }
.mh-s{ font-size:13.5px; color:#9fb2c8; margin-top:4px; max-width:640px; }
.mh-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:13px; padding:10px 18px; border-radius:11px; background:rgba(0,212,200,.16); border:1px solid rgba(0,212,200,.45); color:#7fffea; font-size:13.5px; font-weight:500; }
.map-hero:hover .gb-arrow{ transform:translateX(4px); }
.home-statrow{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:1rem; }
.home-statrow span{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:9px; padding:7px 12px; font-size:12.5px; color:#cfe3f5; }
.home-statrow b{ color:#7fffea; }
.app-main .footer{ margin-top:auto; padding-top:1.4rem; }
.foot-credit{ color:#7e93a8; }

/* ============================ Premium polish (refonte v2) ============================ */
/* Fix accordéon sidebar : annule le position:absolute de l'ancien menu horizontal */
.sidebar .nav-drop{ position:static; min-width:0; background:transparent; border:0; box-shadow:none; clip-path:none; z-index:auto; padding:2px 0 4px; margin:0 0 0 8px; border-left:1px solid rgba(255,255,255,.08); }
.sidebar .nav-item.open-drop .nav-drop{ display:flex; }

/* Transitions / hover généralisés */
.sidebar .nav-link,.sidebar .nav-sub,.sidebar .lang-toggle button,.hc-link,.hc-col,.guides-banner,.map-hero,.sp-card,.nl-row button{ transition:transform .18s ease,box-shadow .22s ease,border-color .22s ease,background .18s ease,color .18s ease; }
.sidebar .nav-link:hover{ transform:translateX(2px); }
.sidebar .lang-toggle button:hover{ border-color:rgba(0,212,200,.3); color:#cfe3f5; }
.hc-col{ background:rgba(10,17,30,.5); backdrop-filter:blur(10px) saturate(130%); -webkit-backdrop-filter:blur(10px) saturate(130%); border:1px solid rgba(255,255,255,.08); border-radius:14px; }
.hc-col:hover{ border-color:rgba(0,212,200,.3); box-shadow:0 12px 32px rgba(0,0,0,.32); transform:translateY(-2px); }
.hc-link:hover{ background:rgba(0,212,200,.09); transform:translateX(3px); }
.guides-banner:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,212,200,.12); }
.nl-row button{ cursor:pointer; }
.nl-row button:hover{ box-shadow:0 0 0 3px rgba(0,212,200,.18); transform:translateY(-1px); }

/* Map hero premium (qui claque) */
.map-hero{ height:340px; }
.mh-t{ font-size:27px; }
.mh-glow{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(440px 300px at 30% 34%,rgba(123,108,255,.20),transparent 70%),radial-gradient(380px 250px at 76% 62%,rgba(0,212,200,.13),transparent 70%); animation:mhPulse 7s ease-in-out infinite; }
@keyframes mhPulse{ 0%,100%{opacity:.7} 50%{opacity:1} }
.mh-halo{ opacity:.16; }
.mh-star{ animation:twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{opacity:1} 50%{opacity:.42} }
.mh-links line{ stroke-opacity:.26; stroke-dasharray:6 8; animation:flow 16s linear infinite; }
@keyframes flow{ to{ stroke-dashoffset:-300 } }
.map-hero:hover{ transform:translateY(-4px); box-shadow:0 24px 60px rgba(0,212,200,.22); border-color:rgba(0,212,200,.5); }

/* Bas de page centré : 3 colonnes + newsletter + footer */
.home-cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; max-width:1000px; margin:1.2rem auto 0; }
@media(max-width:820px){ .home-cols{ grid-template-columns:1fr; max-width:460px; } }
.newsletter{ max-width:700px; margin:1.5rem auto 0; }
.footer{ text-align:center; display:flex; flex-direction:column; gap:7px; align-items:center; padding:1.8rem 1rem .4rem; }
.foot-credit{ color:#cfe3f5; font-size:13.5px; }
.foot-credit a{ color:#7fffea; text-decoration:none; border-bottom:1px solid rgba(0,212,200,.4); }
.foot-credit a:hover{ color:#aefff4; }
.foot-sub{ color:#7e93a8; font-size:12px; }
.foot-stats{ color:#6f8298; font-size:11.5px; line-height:1.7; }
.foot-stats b{ color:#9fb2c8; }

/* ============================ Corrections v3 (centrage + lisibilité + couleur) ============================ */
/* Footer crédit : accent subtil mais démarquable */
.foot-credit{ font-size:14px; color:#9bdfd4; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .foot-credit{ background:linear-gradient(90deg,#8fe9dd,#b6a8ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  .foot-credit a{ -webkit-text-fill-color:#7fffea; }
}
.foot-credit a{ color:#7fffea; }

/* Hero : lisibilité (scrim + ombre) + tout centré */
.mh-bg,.mh-glow{ z-index:0; }
.mh-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(ellipse 62% 72% at 50% 54%, rgba(5,8,15,.64) 0%, rgba(5,8,15,.30) 45%, transparent 76%); }
.mh-overlay{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 26px; }
.mh-tag{ margin-bottom:8px; }
.mh-t{ font-size:30px; text-shadow:0 2px 20px rgba(5,8,15,.9),0 0 3px rgba(5,8,15,.95); }
.mh-s{ margin:6px auto 0; text-shadow:0 2px 12px rgba(5,8,15,.85); }
.mh-cta{ margin-top:16px; }

/* Centrage global de l'accueil */
.home-statrow{ justify-content:center; }
.guides-banner{ flex-direction:column; align-items:center; text-align:center; gap:10px; max-width:760px; margin:0 auto 1rem; }
.guides-banner .gb-txt{ text-align:center; }
.home-cols .hc-h{ text-align:center; justify-content:center; }
.newsletter .nl-card{ text-align:center; }
.newsletter .nl-head{ flex-direction:column; align-items:center; gap:8px; text-align:center; }
.newsletter .nl-row{ justify-content:center; }
.newsletter .nl-consent{ justify-content:center; }

/* Responsive renforcé */
@media(max-width:640px){
  .map-hero{ height:280px; }
  .mh-t{ font-size:22px; }
  .mh-s{ font-size:12.5px; }
  .guides-banner{ padding:14px; }
  .home-statrow{ gap:6px; }
}

/* Override robuste ouverture sidebar mobile */
@media(max-width:900px){
  #sidebar{ transform:translateX(-100%); }
  #sidebar.open{ transform:translateX(0)!important; }
}

/* Fix parsing !important (espace requis) */
@media (max-width:900px){ #sidebar.open{ transform:translateX(0) !important; } }

/* Off-canvas sidebar via left (évite le transform) */
@media (max-width:900px){
  #sidebar{ transform:none !important; left:-240px; transition:left .26s ease; }
  body.nav-open #sidebar{ left:0; }
}

/* ============================ Hero — 5 animations ============================ */
.mh-bg,.mh-glow{ transition:transform .25s ease; }                 /* (3) parallaxe au survol */
.mh-field{ animation:mhDrift 26s ease-in-out infinite alternate, mhReveal .9s ease both; transform-origin:50% 50%; }  /* (5) carte vivante : dérive + reveal */
@keyframes mhDrift{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(-14px,8px) scale(1.03); } }
@keyframes mhReveal{ from{ opacity:0; } to{ opacity:1; } }
.map-hero .mh-overlay{ animation:mhRise .6s ease both; }
@keyframes mhRise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
.mh-comet{ opacity:0; }                                            /* (4) étoile filante */
@keyframes mhComet{ 0%{ opacity:0; transform:translate(-80px,-40px); } 4%{ opacity:.95; } 16%{ opacity:.95; transform:translate(900px,250px); } 17%,100%{ opacity:0; transform:translate(900px,250px); } }
.mh-comet{ animation:mhComet 9s ease-in infinite; }
@media (prefers-reduced-motion: reduce){ .mh-field,.mh-comet,.mh-star,.mh-glow,.mh-links line{ animation:none !important; } }

/* ============================ Resource Finder (/ouminer) ============================ */
.rf-bar{ display:flex; align-items:center; gap:.5rem; margin:.4rem 0 .8rem; }
.rf-bar input{ flex:1; min-width:220px; background:rgba(8,14,26,.8); border:1px solid rgba(0,212,200,.3); color:#cfe3f5; border-radius:9px; padding:.55rem .7rem; font:inherit; }
.rf-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:9px; }
.rf-chip{ display:flex; align-items:center; gap:.5rem; background:rgba(10,17,30,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.08); border-radius:11px; padding:.55rem .7rem; color:#cfe3f5; font:inherit; font-size:13px; cursor:pointer; text-align:left; transition:transform .15s,border-color .2s,box-shadow .2s,background .15s; }
.rf-chip:hover{ transform:translateY(-2px); border-color:rgba(0,212,200,.45); box-shadow:0 8px 22px rgba(0,212,200,.14); background:rgba(0,212,200,.07); }
.rf-chip .ico{ width:22px; height:22px; flex:0 0 auto; }
.rf-chip .rf-n{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rf-chip .rf-c{ font-size:11.5px; color:#7fffea; background:rgba(0,212,200,.12); border-radius:20px; padding:.1rem .5rem; }
.rf-back{ background:none; border:none; color:#7fd9d0; cursor:pointer; font:inherit; font-size:13px; margin-bottom:.6rem; }
.rf-back:hover{ color:#aefff4; }
.rf-rhead{ display:flex; align-items:center; gap:.8rem; background:rgba(10,17,30,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(0,212,200,.2); border-radius:12px; padding:.8rem 1rem; margin-bottom:.8rem; }
.rf-rhead .ico{ width:36px; height:36px; }
.rf-rhtxt{ flex:1; min-width:0; }
.rf-rt{ font-size:18px; font-weight:600; color:#eaf6ff; }
.rf-rs{ font-size:12.5px; color:#9fb2c8; }
.rf-mapbtn{ background:rgba(0,212,200,.14); border:1px solid rgba(0,212,200,.4); color:#7fffea; border-radius:9px; padding:.5rem .8rem; cursor:pointer; font:inherit; font-size:13px; white-space:nowrap; transition:background .15s,transform .15s; }
.rf-mapbtn:hover{ background:rgba(0,212,200,.24); transform:translateY(-1px); }
.rf-list{ display:flex; flex-direction:column; gap:5px; }
.rf-row{ display:grid; grid-template-columns:1.4fr 1fr 1fr auto; gap:.6rem; align-items:center; background:rgba(10,17,30,.45); border:1px solid rgba(255,255,255,.06); border-radius:9px; padding:.5rem .75rem; text-decoration:none; transition:border-color .18s,background .15s,transform .12s; }
.rf-row:hover{ border-color:rgba(0,212,200,.35); background:rgba(0,212,200,.06); transform:translateX(2px); }
.rf-rn{ color:#eaf6ff; font-weight:500; }
.rf-rn small{ color:#7e93a8; font-weight:400; }
.rf-rsec{ color:#9fb2c8; font-size:12.5px; }
.rf-rpl{ color:#bcd; font-size:12.5px; }
.rf-rq{ color:#ffd35b; font-variant-numeric:tabular-nums; text-align:right; }
@media(max-width:640px){ .rf-row{ grid-template-columns:1fr auto; } .rf-rsec,.rf-rpl{ display:none; } }

/* ============================ Planificateur de route ============================ */
.route-line{ stroke:#00d4c8; stroke-width:2.5; vector-effect:non-scaling-stroke; stroke-dasharray:7 6; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 4px rgba(0,212,200,.7)); animation:rtflow 1s linear infinite; opacity:.95; }
@keyframes rtflow{ to{ stroke-dashoffset:-13; } }
.route-wp{ fill:none; stroke:#00d4c8; stroke-width:2.5; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 5px rgba(0,212,200,.85)); }
.map-panel .rt-hint{ font-size:11.5px; color:#8fa3b8; margin:.2rem 0 .55rem; }
.rt-total{ font-size:13px; color:#cfe3f5; margin-bottom:.5rem; }
.rt-total b{ color:#7fffea; font-size:15px; }
.rt-actions{ display:flex; gap:.4rem; margin-bottom:.6rem; }
.rt-actions button{ flex:1; background:rgba(0,212,200,.12); border:1px solid rgba(0,212,200,.35); color:#7fffea; border-radius:8px; padding:.42rem; font:inherit; font-size:12px; cursor:pointer; transition:background .15s; }
.rt-actions button:hover{ background:rgba(0,212,200,.24); }
.rt-list{ display:flex; flex-direction:column; gap:4px; max-height:46vh; overflow:auto; }
.rt-stop{ display:flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:8px; padding:.35rem .5rem; }
.rt-num{ flex:0 0 auto; width:20px; height:20px; display:flex; align-items:center; justify-content:center; background:rgba(0,212,200,.18); color:#7fffea; border-radius:50%; font-size:11px; font-weight:600; }
.rt-n{ flex:1; min-width:0; color:#eaf6ff; text-decoration:none; font-size:12.5px; display:flex; flex-direction:column; line-height:1.15; overflow:hidden; }
.rt-n small{ color:#8090a4; font-size:10.5px; }
.rt-n:hover{ color:#7fffea; }
.rt-d{ color:#ffd35b; font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rt-rm{ flex:0 0 auto; background:none; border:none; color:#7e93a8; cursor:pointer; font-size:13px; padding:0 .2rem; }
.rt-rm:hover{ color:#ff6b6b; }

/* ============================ Tracker de progression ============================ */
.pg-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:.6rem 0 1.4rem; }
.pg-card{ background:rgba(10,17,30,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.08); border-radius:13px; padding:.8rem .9rem; }
.pg-cn{ font-size:24px; font-weight:700; color:#eaf6ff; line-height:1; }
.pg-cn small{ font-size:13px; color:#8090a4; font-weight:500; }
.pg-ct{ font-size:12px; color:#9fb2c8; margin:.3rem 0 .5rem; }
.pg-bar{ height:7px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; }
.pg-bar>span{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#00d4c8,#2D5BFF); transition:width .35s ease; }
.pg-section{ margin:1.4rem 0; }
.pg-section h2{ font-size:16px; color:#eaf6ff; margin:0 0 .5rem; }
.pg-hint{ font-size:12px; color:#8fa3b8; margin-bottom:.6rem; }
.pg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:7px; max-height:50vh; overflow:auto; padding:2px; }
.pg-chip{ display:flex; align-items:center; gap:.5rem; background:rgba(10,17,30,.5); border:1px solid rgba(255,255,255,.08); border-radius:9px; padding:.45rem .6rem; color:#cfe3f5; font:inherit; font-size:12.5px; cursor:pointer; text-align:left; transition:border-color .18s,background .15s; }
.pg-chip:hover{ border-color:rgba(0,212,200,.4); }
.pg-chip.on{ border-color:rgba(0,212,200,.55); background:rgba(0,212,200,.1); }
.pg-ck{ flex:0 0 auto; width:18px; height:18px; display:flex; align-items:center; justify-content:center; border:1.5px solid rgba(255,255,255,.25); border-radius:5px; font-size:11px; color:#06251f; font-weight:700; }
.pg-chip.on .pg-ck{ background:#00d4c8; border-color:#00d4c8; }
.pg-pn{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pg-pc{ flex:0 0 auto; color:#ffd35b; font-size:11px; font-variant-numeric:tabular-nums; }
.pg-secs{ display:flex; flex-direction:column; gap:6px; }
.pg-sec{ display:grid; grid-template-columns:1fr 2fr auto; gap:.7rem; align-items:center; }
.pg-secn{ color:#cfe3f5; font-size:12.5px; }
.pg-secn small{ color:#7e93a8; }
.pg-secv{ color:#9fb2c8; font-size:12px; font-variant-numeric:tabular-nums; text-align:right; }
.pg-footer{ margin-top:1.4rem; }
.pg-reset{ background:rgba(255,107,107,.1); border:1px solid rgba(255,107,107,.35); color:#ff9b9b; border-radius:9px; padding:.5rem .9rem; font:inherit; font-size:12.5px; cursor:pointer; transition:background .15s; }
.pg-reset:hover{ background:rgba(255,107,107,.2); }
.sys-head{ position:relative; }
.sp-explored{ align-self:flex-start; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); color:#cfe3f5; border-radius:9px; padding:.5rem .8rem; font:inherit; font-size:12.5px; cursor:pointer; white-space:nowrap; transition:background .15s,border-color .15s,color .15s; }
.sp-explored:hover{ border-color:rgba(0,212,200,.4); }
.sp-explored.on{ background:rgba(0,212,200,.14); border-color:rgba(0,212,200,.5); color:#7fffea; }
.exp-ring{ fill:none; stroke:#00d4c8; stroke-width:1.6; vector-effect:non-scaling-stroke; opacity:.6; }
@media(max-width:600px){ .pg-sec{ grid-template-columns:1fr auto; } .pg-sec .pg-bar{ display:none; } }

/* ============================ Atelier de vaisseau ============================ */
.al-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
@media(max-width:860px){ .al-wrap{ grid-template-columns:1fr; } .al-sum{ position:static; } }
.al-grid{ display:flex; flex-direction:column; gap:5px; max-height:64vh; overflow:auto; padding:2px; }
.al-mod{ display:flex; align-items:center; gap:.5rem; background:rgba(10,17,30,.5); border:1px solid rgba(255,255,255,.08); border-radius:9px; padding:.45rem .6rem; color:#cfe3f5; font:inherit; font-size:12.5px; cursor:pointer; text-align:left; transition:border-color .15s,background .15s; }
.al-mod:hover{ border-color:rgba(0,212,200,.4); }
.al-mod.in{ border-color:rgba(0,212,200,.5); background:rgba(0,212,200,.08); }
.al-mn{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.al-mmeta{ flex:0 0 auto; color:#8fa3b8; font-size:11px; }
.al-mmeta b{ color:#7fffea; }
.al-addic{ flex:0 0 auto; width:20px; height:20px; display:flex; align-items:center; justify-content:center; border-radius:6px; background:rgba(0,212,200,.14); color:#7fffea; font-weight:700; }
.al-sum{ background:rgba(10,17,30,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:1rem 1.1rem; position:sticky; top:14px; }
.al-empty{ color:#8fa3b8; font-size:13px; text-align:center; padding:2rem 1rem; }
.al-sumhead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem; }
.al-sumhead h2{ font-size:16px; color:#eaf6ff; margin:0; }
.al-clear{ background:rgba(255,107,107,.1); border:1px solid rgba(255,107,107,.3); color:#ff9b9b; border-radius:8px; padding:.35rem .6rem; font:inherit; font-size:11.5px; cursor:pointer; }
.al-clear:hover{ background:rgba(255,107,107,.2); }
.al-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:.9rem; }
.al-stat{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:10px; padding:.6rem; text-align:center; }
.al-sn{ font-size:20px; font-weight:700; color:#eaf6ff; }
.al-sl{ font-size:10.5px; color:#9fb2c8; margin-top:.2rem; }
.al-block{ margin-top:.9rem; }
.al-bt{ font-size:12px; color:#9fb2c8; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.45rem; }
.al-bt small{ color:#7e93a8; }
.al-chips{ display:flex; flex-wrap:wrap; gap:5px; }
.al-chip{ display:inline-flex; align-items:center; gap:.3rem; background:rgba(0,212,200,.1); border:1px solid rgba(0,212,200,.3); color:#cfe3f5; border-radius:20px; padding:.25rem .6rem; font-size:11.5px; text-decoration:none; }
a.al-chip:hover{ background:rgba(0,212,200,.2); }
.al-dim{ color:#7e93a8; }
.al-raws{ display:flex; flex-direction:column; gap:3px; max-height:34vh; overflow:auto; }
.al-raw{ display:flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.03); border-radius:7px; padding:.3rem .5rem; font-size:12.5px; color:#dceaf7; }
.al-raw .ico{ width:18px; height:18px; flex:0 0 auto; }
.al-noic{ width:18px; height:18px; flex:0 0 auto; border-radius:50%; background:rgba(255,255,255,.06); }
.al-rn{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.al-rq{ color:#ffd35b; font-variant-numeric:tabular-nums; }
.al-mods{ display:flex; flex-direction:column; gap:4px; }
.al-row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; background:rgba(255,255,255,.03); border-radius:7px; padding:.3rem .5rem; font-size:12.5px; color:#dceaf7; }
.al-rname{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.al-qty{ display:flex; align-items:center; gap:.5rem; flex:0 0 auto; }
.al-qty b{ min-width:18px; text-align:center; color:#7fffea; }
.al-q{ width:22px; height:22px; border-radius:6px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#cfe3f5; cursor:pointer; font-size:14px; line-height:1; }
.al-q:hover{ background:rgba(0,212,200,.18); }

/* ============================ Assistant de craft inversé ============================ */
.iv-h{ font-size:15px; color:#eaf6ff; margin:0 0 .5rem; }
.iv-clist{ display:flex; flex-direction:column; gap:5px; max-height:56vh; overflow:auto; }
.iv-craft{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:9px; padding:.45rem .6rem; }
.iv-craft.best{ border-color:rgba(255,211,91,.5); background:rgba(255,211,91,.08); }
.iv-cl{ display:flex; align-items:center; gap:.45rem; min-width:0; flex:1; }
.iv-cl .ico{ width:20px; height:20px; flex:0 0 auto; }
.iv-cn{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#eaf6ff; font-size:12.5px; }
.iv-badge{ flex:0 0 auto; font-size:10px; background:rgba(255,211,91,.18); color:#ffd35b; border-radius:20px; padding:.1rem .4rem; white-space:nowrap; }
.iv-cr{ display:flex; align-items:center; gap:.7rem; flex:0 0 auto; }
.iv-mk{ color:#7fffea; font-size:12px; white-space:nowrap; }
.iv-val{ color:#ffd35b; font-size:12px; font-variant-numeric:tabular-nums; }
.iv-q{ width:22px; height:22px; border-radius:6px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#cfe3f5; cursor:pointer; font-size:14px; line-height:1; }
.iv-q:hover{ background:rgba(0,212,200,.18); }
.iv-target{ margin-top:1.6rem; }
.iv-tbar{ display:flex; gap:.5rem; margin-bottom:.7rem; flex-wrap:wrap; }
.iv-tbar input[list]{ flex:1; min-width:200px; }
.iv-tbar input{ background:rgba(8,14,26,.8); border:1px solid rgba(0,212,200,.3); color:#cfe3f5; border-radius:9px; padding:.5rem .7rem; font:inherit; }
.iv-tbar input[type=number]{ width:80px; flex:0 0 auto; }
.iv-tbar button{ background:rgba(0,212,200,.16); border:1px solid rgba(0,212,200,.45); color:#7fffea; border-radius:9px; padding:.5rem 1rem; font:inherit; cursor:pointer; }
.iv-tbar button:hover{ background:rgba(0,212,200,.28); }
.iv-misshead{ font-size:13px; color:#ff9b9b; margin-bottom:.5rem; }
.iv-cost{ margin-top:.6rem; font-size:13px; color:#cfe3f5; }
.iv-cost b{ color:#ffd35b; }
.iv-ok{ background:rgba(0,212,200,.1); border:1px solid rgba(0,212,200,.35); color:#7fffea; border-radius:10px; padding:.8rem 1rem; font-size:13.5px; }
.iv-tgthead{ font-size:12.5px; color:#cfe3f5; margin-bottom:.5rem; }
.iv-tgthead b{ color:#eaf6ff; }
.al-estnote{ font-size:10.5px; color:#7e93a8; margin:-.25rem 0 .4rem; font-style:italic; }

/* ============ Centrage GUIDES + Newsletter (override final) ============ */
.guides-banner .gb-t{ justify-content:center; }       /* titre + badge centrés */
.guides-banner .gb-ic{ display:flex; justify-content:center; filter:drop-shadow(0 0 14px rgba(0,212,200,.45)) drop-shadow(0 0 26px rgba(123,97,255,.25)); }
.newsletter{ justify-content:center; }                 /* la carte n'est plus poussée à droite */
.newsletter .nl-card{ margin:0 auto; }

/* ================= Icônes SVG premium des menus ================= */
.mic{ vertical-align:-.16em; flex:none; }
.nav-link .mic, .nav-sub .mic{ width:1.12em; height:1.12em; margin-right:.12em; opacity:.92; transition:filter .18s ease, opacity .18s ease; }
.nav-link:hover .mic, .nav-sub:hover .mic{ opacity:1; }
.nav-link.active .mic, .nav-sub.active .mic{ opacity:1; filter:drop-shadow(0 0 5px rgba(0,212,200,.6)); }
.hc-ic .mic, .bt-ic .mic, .card .ic .mic{ color:#7fd9d0; }
.hc-h .mic{ color:#7fd9d0; vertical-align:-.18em; margin-right:.2em; }
.page-head h1 .mic{ vertical-align:-.12em; opacity:.92; margin-right:.1em; }

/* ================= Logo + nom tout en haut de l'accueil ================= */
.home-brand{ display:flex; align-items:center; justify-content:center; gap:14px; margin:.2rem 0 1.2rem; }
.home-brand .hb-logo{ width:54px; height:54px; object-fit:contain; filter:drop-shadow(0 0 16px rgba(0,212,200,.5)); }
.home-brand .hb-fallback{ font-size:2.3rem; filter:drop-shadow(0 0 12px rgba(0,212,200,.5)); }
.home-brand .hb-name{ font-size:2.1rem; font-weight:800; letter-spacing:.04em; color:#eafdff; text-shadow:0 0 20px rgba(0,212,200,.32); }
.home-brand .hb-name strong{ background:linear-gradient(90deg,#00d4c8,#7b61ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
@media(max-width:600px){ .home-brand{ gap:10px; } .home-brand .hb-name{ font-size:1.55rem; } .home-brand .hb-logo{ width:42px; height:42px; } }

/* ================= Crédit footer MIS EN AVANT (lisible, sans animation) ================= */
.app-main .footer .foot-credit{
  -webkit-text-fill-color:#eafffb; color:#eafffb;
  -webkit-background-clip:border-box; background-clip:border-box;
  font-size:14.5px; font-weight:600; letter-spacing:.01em; line-height:1.5;
  background:linear-gradient(180deg, rgba(0,212,200,.12), rgba(123,97,255,.08));
  border:1px solid rgba(0,212,200,.32); border-radius:14px;
  padding:.85rem 1.25rem; max-width:780px;
  box-shadow:0 8px 26px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.03);
  text-shadow:0 0 12px rgba(0,212,200,.22);
}
.app-main .footer .foot-credit a{ -webkit-text-fill-color:#7fffea; color:#7fffea; font-weight:700; border-bottom:1px solid rgba(0,212,200,.55); }
.app-main .footer .foot-credit a:hover{ -webkit-text-fill-color:#aefff4; color:#aefff4; }

/* ============================ Sidebar PREMIUM (menu qui claque) ============================ */
#sidebar{ overflow-y:auto; }
.sidebar-lang{ display:flex; gap:6px; margin:2px 0 16px; padding:5px; background:rgba(10,17,30,.55); border:1px solid rgba(255,255,255,.08); border-radius:12px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.sidebar-lang button{ flex:1; padding:.5rem 0; border:none; border-radius:8px; background:transparent; color:#9fb2c8; font-family:var(--mono,monospace); font-weight:700; font-size:.82rem; letter-spacing:.1em; cursor:pointer; transition:color .18s ease, background .18s ease, box-shadow .18s ease; }
.sidebar-lang button:hover{ color:#cfe3f5; }
.sidebar-lang button.active{ background:linear-gradient(135deg,#00d4c8,#2D5BFF); color:#04121a; box-shadow:0 4px 14px rgba(0,212,200,.35); }

.mainnav{ display:flex; flex-direction:column; gap:18px; }
.nav-group{ display:flex; flex-direction:column; gap:2px; }
.nav-gh{ display:flex; align-items:center; gap:.5rem; font-family:var(--mono,monospace); font-size:.7rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:#7e93a8; padding:.15rem .55rem .5rem; }
.nav-gh .mic{ color:#00d4c8; width:1.25em; height:1.25em; filter:drop-shadow(0 0 6px rgba(0,212,200,.5)); }
.nav-gh span{ background:linear-gradient(90deg,#cfe3f5,#8398ab); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.nav-sub{ display:flex; align-items:center; gap:.6rem; padding:.5rem .6rem; border-radius:10px; color:#b9c8da; text-decoration:none; font-size:.93rem; border:1px solid transparent; transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; position:relative; }
.nav-sub .mic{ width:1.2em; height:1.2em; color:#8fb6c8; transition:color .16s ease, filter .16s ease; }
.nav-sub .ns-t{ line-height:1; }
.nav-sub:hover{ background:rgba(0,212,200,.07); border-color:rgba(0,212,200,.22); color:#eafdff; transform:translateX(3px); }
.nav-sub:hover .mic{ color:#00d4c8; filter:drop-shadow(0 0 6px rgba(0,212,200,.55)); }
.nav-sub.active{ background:linear-gradient(90deg,rgba(0,212,200,.16),rgba(45,91,255,.05)); border-color:rgba(0,212,200,.4); color:#eafffb; box-shadow:0 2px 14px rgba(0,212,200,.14); }
.nav-sub.active .mic{ color:#00d4c8; filter:drop-shadow(0 0 7px rgba(0,212,200,.65)); }
.nav-sub.active::before{ content:""; position:absolute; left:-2px; top:22%; bottom:22%; width:3px; border-radius:3px; background:linear-gradient(#00d4c8,#7b61ff); box-shadow:0 0 8px rgba(0,212,200,.7); }

/* ============ En-tête carte centré + stat-row ============ */
.map-head{ justify-content:center; text-align:center; }
.map-head h1{ justify-content:center; }
.map-intro{ text-align:center; max-width:780px; margin-left:auto; margin-right:auto; }
.home-statrow{ flex-wrap:wrap; justify-content:center; }

/* ====== Brand persistant cliquable (retour accueil sur toutes les pages) ====== */
a.home-brand{ text-decoration:none; cursor:pointer; transition:transform .18s ease; }
a.home-brand:hover{ transform:translateY(-1px); }
a.home-brand:hover .hb-logo{ filter:drop-shadow(0 0 22px rgba(0,212,200,.7)); }
a.home-brand:hover .hb-name{ color:#fff; }

/* ============================ Centrage global du texte (demande Patron) ============================ */
.app-main{ text-align:center; }
.app-main .crumb{ justify-content:center; flex-wrap:wrap; }
.app-main table.data th, .app-main table.data td, .app-main table.data td.num{ text-align:center; }
.app-main table.data td .nm, .app-main table.data td .cell-sub{ display:block; text-align:center; }
.app-main .kv{ justify-content:center; }
.app-main .kv dt, .app-main .kv dd{ text-align:center; }
.app-main .recipe-line{ text-align:center; border-left:none; border-top:2px solid var(--cyan); }
.app-main .rel-list{ justify-content:center; }
.app-main .seo-pre, .app-main .seo-list{ text-align:center; }
.app-main .search-results a{ justify-content:center; }
.app-main .sys-head{ justify-content:center; text-align:center; }
.app-main .sys-htxt{ align-items:center; }
.app-main .sp-h{ justify-content:center; }
.app-main .page-head{ justify-content:center; text-align:center; }
.app-main .page-head h1{ justify-content:center; }

/* ============================ En-têtes de groupes du menu — mis en évidence PREMIUM ============================ */
.sidebar .nav-group{ margin-bottom:3px; }
.sidebar .nav-gh{
  position:relative;
  font-size:.74rem; font-weight:700; letter-spacing:.16em;
  padding:.6rem .55rem .55rem; margin-top:8px;
  filter:drop-shadow(0 0 6px rgba(0,212,200,.45));
}
.sidebar .nav-gh span{
  background:linear-gradient(90deg,#aafff2 0%,#7fe6ff 45%,#9d8bff 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.sidebar .nav-gh .mic{
  color:#00d4c8; width:1.32em; height:1.32em;
  filter:drop-shadow(0 0 9px rgba(0,212,200,.85)) drop-shadow(0 0 16px rgba(0,212,200,.35));
}
.sidebar .nav-gh::after{
  content:""; position:absolute; left:.55rem; right:.8rem; bottom:.12rem; height:1px;
  background:linear-gradient(90deg, rgba(0,212,200,.6), rgba(123,97,255,.3) 55%, transparent);
}

/* ============================ Stations de ravitaillement (carte) ============================ */
#stationLayer{ pointer-events:none; }
.st-halo{ fill:#ffd35b; opacity:.12; animation:stPulse 2.4s ease-in-out infinite; }
@keyframes stPulse{ 0%,100%{ opacity:.10; } 50%{ opacity:.30; } }
.st-ring{ fill:none; stroke:#ffd35b; stroke-width:3; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 5px rgba(255,211,91,.85)); }
.st-core{ fill:#fff3cf; }
.st-lbl{ fill:#ffe49a; stroke:#3a2a00; stroke-width:3px; paint-order:stroke; stroke-linejoin:round; font-size:15px; font-weight:700; letter-spacing:.3px; }
.map-toggle.st-toggle.is-on{ border-color:rgba(255,211,91,.5)!important; color:#ffe49a!important; }
.map-toggle.st-toggle.is-on .mt-dot{ background:#ffd35b!important; box-shadow:0 0 8px #ffd35b; }
.map-leg-st{ display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,211,91,.1); border:1px solid rgba(255,211,91,.35); color:#ffe49a; border-radius:20px; padding:.3rem .85rem; font-size:12.5px; }

/* station — ping radar + ajustements taille */
.st-ping{ fill:none; stroke:#ffd35b; stroke-width:1.6; vector-effect:non-scaling-stroke; transform-box:fill-box; transform-origin:center; animation:stPing 2.4s ease-out infinite; }
@keyframes stPing{ 0%{ transform:scale(.45); opacity:.65; } 80%,100%{ transform:scale(1.5); opacity:0; } }
.st-ring{ stroke-width:3.5; }
.st-lbl{ font-size:16px; }

/* ===== Panneau latéral des stations ===== */
.st-list{ display:flex; flex-direction:column; gap:6px; margin-top:.3rem; }
.st-row{ display:flex; align-items:center; gap:.6rem; background:rgba(255,211,91,.06); border:1px solid rgba(255,211,91,.25); border-radius:10px; padding:.5rem .55rem; cursor:pointer; transition:background .15s, border-color .15s; }
.st-row:hover{ background:rgba(255,211,91,.14); border-color:rgba(255,211,91,.5); }
.st-rdot{ flex:none; width:10px; height:10px; border-radius:50%; background:#ffd35b; box-shadow:0 0 8px #ffd35b; }
.st-rtxt{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; text-align:left; }
.st-rtxt b{ color:#ffe49a; font-size:13px; }
.st-rtxt small{ color:#9fb2c8; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.st-rgo{ flex:none; color:#ffd35b; text-decoration:none; font-size:19px; font-weight:700; width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:7px; }
.st-rgo:hover{ background:rgba(255,211,91,.2); color:#fff3cf; }