/* ============================================================
   ASTRA GENESIS, 09-TECH-TREE.CSS
   v0.62.2, arbre technologique (modale partagée, js/14-tech-tree.js),
   bouton d'ouverture des en-têtes Usines/Bâtiments, et surbrillance de
   la cible sélectionnée depuis l'arbre (carte Bâtiments, nœud Usines).
   DA v0.14 : contrôles restylés, chiffres en JetBrains Mono, aucune
   barre de défilement visible.
   ============================================================ */

/* ---------- bouton d'ouverture (en-têtes) ---------- */
.tt-open-btn{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  font-family:var(--font-head);font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);
  background:var(--glass-dark);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--line-strong);border-radius:20px;
  padding:calc(6px*var(--scale)) calc(12px*var(--scale));cursor:pointer;
  transition:color .15s, border-color .15s, box-shadow .15s;
}
.tt-open-btn svg{width:14px;height:14px;color:var(--cyan);flex:none;}
.tt-open-btn:hover{color:var(--ink-1);border-color:var(--cyan);box-shadow:0 0 12px rgba(45,212,191,.3);}
.tt-open-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}

/* ---------- modale ---------- */
#modal:has(.tt-wrap) .sp-body{scrollbar-width:none;}
#modal:has(.tt-wrap) .sp-body::-webkit-scrollbar{display:none;}
.tt-wrap{display:flex;flex-direction:column;gap:16px;}
.tt-toolbar{
  position:sticky;top:0;z-index:4;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:6px 0 10px;background:var(--panel-solid);border-bottom:1px solid var(--line);
}
.tt-select{
  background:#121C2B;border:1px solid #1E2E40;border-radius:8px;color:#E6EDF5;
  font-family:var(--font-head);font-size:.78rem;padding:6px 10px;cursor:pointer;transition:border-color .15s;
}
.tt-select:hover{border-color:rgba(45,212,191,.5);}
.tt-select:focus{outline:none;border-color:#2DD4BF;}
.tt-select option{background:#121C2B;color:#E6EDF5;}
.tt-search{position:relative;display:block;flex:1 1 180px;min-width:150px;}
.tt-search svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--ink-3);pointer-events:none;}
.tt-search input{
  width:100%;background:#121C2B;border:1px solid #1E2E40;border-radius:8px;color:#E6EDF5;
  font-size:.8rem;padding:7px 10px 7px 30px;
}
.tt-search input:focus{outline:none;border-color:#2DD4BF;}
.tt-count{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-3);margin-left:auto;}

.tt-groups{display:flex;flex-direction:column;gap:18px;}
.tt-group{display:flex;flex-direction:column;gap:10px;}
.tt-group-head{
  display:flex;align-items:center;gap:8px;padding-bottom:5px;border-bottom:1px solid var(--line);
  font-family:var(--font-head);font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-1);
}
.tt-group-head i{width:9px;height:9px;border-radius:3px;background:var(--tt-cat);box-shadow:0 0 8px var(--tt-cat);flex:none;}
.tt-group-count{margin-left:auto;font-family:var(--font-mono);font-size:.7rem;color:var(--ink-3);}
.tt-tier-block{display:flex;flex-direction:column;gap:6px;}
.tt-tier-label{font-family:var(--font-mono);font-size:.64rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;}
.tt-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(168px, 1fr));gap:8px;}

/* ---------- carte compacte ---------- */
.tt-card{
  display:flex;flex-direction:column;min-width:0;padding:0;text-align:left;color:inherit;font:inherit;
  background:rgba(5,10,18,.6);border:1px solid var(--line);border-left:3px solid var(--tt-cat);
  border-radius:10px;overflow:hidden;cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.tt-card:hover{transform:translateY(-2px);border-color:var(--tt-cat);box-shadow:0 0 14px color-mix(in srgb, var(--tt-cat) 35%, transparent);}
.tt-card:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;}
.tt-art{position:relative;display:block;height:66px;overflow:hidden;background:var(--panel-soft);}
/* v0.65.1 : vignette = composant partagé .ag-art (css/03-components.css) */
.tt-art .ag-art{--art-tint:var(--tt-cat);--art-ph-size:1.3rem;}
.tt-lock{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:rgba(4,10,18,.45);color:var(--ink-2);}
.tt-lock svg{width:18px;height:18px;}
.tt-card.state-locked .ag-art{filter:grayscale(.85) brightness(.7);}
/* id dans un cercle, en haut à droite de l'image */
.tt-id{
  position:absolute;top:5px;right:5px;z-index:3;min-width:22px;height:22px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
  font-family:var(--font-mono);font-size:.64rem;font-weight:700;color:var(--ink-1);
  background:rgba(5,10,18,.85);border:1.5px solid var(--tt-cat);
}
.tt-body{display:flex;flex-direction:column;gap:4px;padding:7px 9px 8px;min-width:0;}
.tt-name{display:block;font-family:var(--font-head);font-size:.82rem;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tt-meta{display:flex;align-items:center;gap:6px;min-width:0;}
.tt-tier{
  flex:none;font-family:var(--font-mono);font-size:.6rem;padding:1px 6px;border-radius:6px;color:var(--tt-cat);
  border:1px solid color-mix(in srgb, var(--tt-cat) 50%, transparent);background:color-mix(in srgb, var(--tt-cat) 12%, transparent);
}
.tt-state{font-size:.64rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.tt-card.state-unlocked .tt-state{color:var(--lime);}
.tt-card.state-locked .tt-state{color:var(--amber);}
.tt-card.state-quest .tt-state{color:var(--violet);}
.tt-req{display:flex;flex-wrap:wrap;align-items:center;gap:4px;}
.tt-req-label{font-size:.6rem;color:var(--ink-3);}
.tt-req-chip{font-family:var(--font-mono);font-size:.6rem;color:var(--ink-2);border:1px solid var(--line-strong);border-radius:999px;padding:0 6px;}
.tt-empty{color:var(--ink-3);text-align:center;padding:30px 0;margin:0;}

/* ---------- cible sélectionnée depuis l'arbre ---------- */
.bld-card.focus{border-color:var(--cyan);box-shadow:var(--shadow-deep), 0 0 0 2px var(--cyan), 0 0 22px rgba(45,212,191,.35);}
.fg-node-card.fg-node-flash{animation:ttNodeFlash .9s ease-in-out 2;}
@keyframes ttNodeFlash{0%,100%{box-shadow:var(--shadow-deep);}50%{box-shadow:var(--shadow-deep), 0 0 0 2px var(--cyan), 0 0 22px rgba(45,212,191,.6);}}

@media (prefers-reduced-motion: reduce){
  .tt-card, .fg-node-card.fg-node-flash{animation:none !important;transition:none !important;}
}