/* =========================================================
   Beyond Lightspeed — Rubrique Technologies (refonte du 2026-10-04)
   Même gabarit que les rubriques Systèmes, Flottes, Commerce et Plans, dont
   elle reprend les classes communes : onglets .gtabs (components.css),
   encarts .ovp, surfaces .ovs, tuiles .sch-tile, jauges .sch-meter
   (systems.css), bandeau .fdh, boutons .fac-btn (fleets.css), boutons
   .sor-btn (systems.css), compteurs .gtab__count (commerce.css).
   Les classes tech-workspace, tech-tree-frame et tech-sidebar de
   responsive.css portent les dimensions et le passage en colonne.
   Préfixes propres : tk- (page, arbre, cartes), tkb- (budget), tkr-
   (recherches en cours), tkh- et tkd- (fiche), tkm- (encart Recherche de la fiche).
   ========================================================= */

.page-header.tk-page-header { margin-bottom: 12px; }
.gtabs.tk-tabs { margin-bottom: 14px; }

/* ── Arbre : encart, cadre déplaçable, canevas zoomé ── */
.tk-tree-panel .ovp__body { padding: 0; gap: 0; min-height: 0; }
.form-input.tk-search { width: 220px; max-width: 100%; padding-top: 4px; padding-bottom: 4px; font-size: var(--text-xs); }
.tk-zoom {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 6px;
    overflow: hidden;
}
.tk-zoom__btn {
    display: grid;
    place-items: center;
    width: 28px;
    height: 26px;
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}
.tk-zoom__btn + .tk-zoom__btn,
.tk-zoom__value + .tk-zoom__btn { border-left: 1px solid rgba(0, 229, 255, 0.2); }
.tk-zoom__btn:hover:not(:disabled),
.tk-zoom__btn:focus-visible { background: rgba(0, 229, 255, 0.12); color: var(--color-accent-cyan); }
.tk-zoom__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.tk-zoom__value {
    min-width: 48px;
    padding: 0 6px;
    border-left: 1px solid rgba(0, 229, 255, 0.2);
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-align: center;
}

/* Tout le mouvement passe par le transform du canevas : le cadre ne défile
   pas, et le navigateur ne doit confisquer ni le glissement ni le pincement
   (touch-action). Au doigt, un glisser déplace donc l'arbre, pas la page :
   voir plus bas la hauteur bornée qui laisse de la page autour. */
.tk-tree-frame {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    touch-action: none;
    background:
        radial-gradient(circle at 20% 10%, rgba(0, 229, 255, 0.05), transparent 45%),
        rgba(4, 8, 16, 0.6);
}
.tk-tree-frame:active { cursor: grabbing; }
/* Écran tactile. Le doigt garde le déplacement de l'arbre (geste principal,
   dans les deux axes) plutôt qu'un touch-action: pan-y qui rendrait le
   défilement vertical à la page : le navigateur annulerait alors le geste à
   la moindre composante verticale (pointercancel), l'arbre ne se déplacerait
   plus que de biais et le pincement deviendrait aléatoire. La page se fait
   donc défiler hors de l'arbre, dont l'encart est borné en hauteur pour en
   laisser toujours une bande visible (60vh sous 900 px dans responsive.css ;
   ici aussi sur tablette, où l'atelier fait 660 px). Les boutons de zoom
   passent à 40 px, taille d'une cible au doigt. */
@media (pointer: coarse) {
    .tk-tree-panel { max-height: 70vh; }
    .tk-zoom__btn { width: 40px; height: 40px; }
}
.tk-tree-canvas {
    position: relative;
    width: max-content;
    padding: 22px 28px;
    transform-origin: 0 0;
}
.tk-links {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}
.tk-link {
    stroke: rgba(0, 229, 255, 0.3);
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
    transition: stroke 0.15s ease, stroke-width 0.15s ease;
}
.tk-link.is-active { stroke: var(--color-accent-cyan); stroke-width: 3; stroke-dasharray: none; filter: drop-shadow(0 0 4px var(--color-accent-cyan)); }
.tk-tree-empty { width: 280px; margin: 0; padding: 40px; color: var(--color-text-muted); text-align: center; }
.tk-tree-rows { position: relative; z-index: 2; display: flex; flex-direction: column; width: max-content; }
.tk-level-head {
    display: flex;
    gap: 44px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.12);
}
.tk-level-label {
    width: 244px;
    flex-shrink: 0;
    color: #5c7a99;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;
}
.tk-family-row { display: flex; gap: 44px; align-items: flex-start; min-height: 88px; margin-bottom: 16px; }
.tk-cell { width: 244px; flex-shrink: 0; }

/* ── Carte d'une technologie ──
   `--tk-accent` porte l'état : liseré, pourcentage, bouton d'allocation. */
.tk-card {
    --tk-accent: var(--color-accent-cyan);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    height: 88px;
    box-sizing: border-box;
    padding: 9px 10px 9px 13px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--tk-accent) 26%, rgba(255, 255, 255, 0.06));
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--tk-accent) 12%, transparent), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.35));
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.tk-card::before {
    content: '';
    position: absolute;
    inset: 10px auto 10px 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--tk-accent);
    box-shadow: 0 0 10px var(--tk-accent);
}
.tk-card--researched { --tk-accent: var(--color-accent-green); }
.tk-card--researching { --tk-accent: var(--color-accent-purple); }
.tk-card--suspended { --tk-accent: var(--color-accent-amber); }
.tk-card--available { --tk-accent: var(--color-accent-cyan); }
.tk-card--locked { --tk-accent: #3a4a63; opacity: 0.6; }
.tk-card--available:hover,
.tk-card--researching:hover,
.tk-card--suspended:hover,
.tk-card--researched:hover {
    border-color: color-mix(in srgb, var(--tk-accent) 60%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--tk-accent) 22%, transparent);
    transform: translateY(-1px);
}
.tk-card.is-obsolete { opacity: 0.55; }
.tk-card__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--tk-accent) 30%, transparent);
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tk-accent) 18%, transparent), rgba(0, 0, 0, 0.35) 70%);
}
.tk-card__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; height: 100%; }
.tk-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.btn-reset.tk-card__name {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-text-bright);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.tk-card--locked .btn-reset.tk-card__name { color: var(--color-text-secondary); }
.btn-reset.tk-card__name:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: 2px; border-radius: 3px; }
.tk-card__state { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.tk-card__done { color: var(--color-accent-green); filter: drop-shadow(0 0 4px rgba(0, 230, 118, 0.5)); }
.tk-card__paused { color: var(--color-accent-amber); }
.tk-card__pct { color: var(--tk-accent); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; }
.tk-card__btn {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--tk-accent) 45%, transparent);
    background: color-mix(in srgb, var(--tk-accent) 14%, transparent);
    color: var(--tk-accent);
    cursor: pointer;
}
.tk-card__btn:hover,
.tk-card__btn:focus-visible { background: color-mix(in srgb, var(--tk-accent) 30%, transparent); }
.tk-card__btn--start { width: 28px; height: 28px; border-color: rgba(0, 229, 255, 0.6); box-shadow: 0 0 10px rgba(0, 229, 255, 0.25); }
.tk-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 9px; margin-top: auto; color: var(--color-text-secondary); font-size: var(--text-xs); }
.tk-cost { display: inline-flex; align-items: center; gap: 3px; }
.tk-cost__value { font-family: var(--font-mono); color: var(--color-text-primary); }
.tk-cost--pr .tk-cost__value { color: var(--color-accent-cyan); }
.tk-tag {
    padding: 0 6px;
    border-radius: 9px;
    border: 1px solid currentColor;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.tk-tag--obsolete { color: var(--color-accent-amber); background: rgba(255, 179, 0, 0.1); }
.tk-card__meter,
.tkr-item__meter {
    width: 100%;
    height: 5px;
    border: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
}
.tk-card__meter::-webkit-meter-bar,
.tkr-item__meter::-webkit-meter-bar { background: rgba(255, 255, 255, 0.08); border: 0; border-radius: 3px; height: 5px; }
.tk-card__meter::-webkit-meter-optimum-value,
.tkr-item__meter::-webkit-meter-optimum-value { background: linear-gradient(90deg, var(--color-accent-purple), var(--color-accent-cyan)); border-radius: 3px; }
.tk-card__meter::-moz-meter-bar,
.tkr-item__meter::-moz-meter-bar { background: linear-gradient(90deg, var(--color-accent-purple), var(--color-accent-cyan)); }
.tk-card--suspended .tk-card__meter::-webkit-meter-optimum-value,
.is-suspended .tkr-item__meter::-webkit-meter-optimum-value { background: var(--color-accent-amber); }
.tk-card--suspended .tk-card__meter::-moz-meter-bar,
.is-suspended .tkr-item__meter::-moz-meter-bar { background: var(--color-accent-amber); }

/* ── Ronds de liaison (prérequis à gauche, débloquées à droite) ── */
.tk-node {
    position: absolute;
    top: calc(50% - 7px);
    z-index: 10;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--color-accent-cyan);
    background: #070b16;
    cursor: crosshair;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.tk-node--left { left: -7px; }
.tk-node--right { right: -7px; }
.tk-node.is-highlighted { background: var(--color-accent-cyan); box-shadow: 0 0 8px var(--color-accent-cyan); }
.tk-node.is-locked { border: 2.5px solid var(--color-accent-amber); }
.tk-node:focus-visible { outline: 2px solid var(--color-accent-cyan); outline-offset: 2px; }
.tk-tooltip {
    position: absolute;
    bottom: 100%;
    z-index: var(--z-dropdown);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid rgba(0, 229, 255, 0.5);
    background: rgba(5, 10, 20, 0.97);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
    color: var(--color-text-primary);
    font-size: var(--text-xs);
    white-space: nowrap;
    pointer-events: none;
}
.tk-tooltip--left { left: 50%; transform: translate(-50%, -8px); }
.tk-tooltip--right { right: 50%; transform: translate(50%, -8px); }
.tk-tooltip__title { color: var(--color-text-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.tk-tooltip__item { display: flex; align-items: center; gap: 6px; }
.tk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent-cyan); flex-shrink: 0; }
/* Débloquée par cette seule technologie (vert) ou avec d'autres (ambre). */
.tk-dot--only { background: var(--color-accent-green); }
.tk-dot--shared { background: var(--color-accent-amber); }

/* ── Colonne de droite : budget et recherches en cours ── */
.tech-sidebar.tk-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.tk-side .ovp { flex-shrink: 0; }
/* Chiffres du budget en lignes : libellé et valeur côte à côte, la valeur
   passe sous le libellé quand la colonne est trop étroite ; rien ne sort du
   cadre, même avec des stocks à six chiffres. */
.tkb-stats { display: grid; gap: 8px; }
.ovs.tkb-stat { display: grid; gap: 3px; min-width: 0; padding: 9px 10px 9px 13px; }
.ovs.tkb-stat--stock { --ovs-accent: var(--color-accent-green); }
.ovs.tkb-stat--next { --ovs-accent: var(--color-accent-cyan); }
.tkb-stat__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; min-width: 0; }
.tkb-stat__value {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    color: var(--color-text-bright);
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 700;
    white-space: nowrap;
}
.tkb-stat__value .game-icon { align-self: center; }
.ovs.tkb-alloc { display: grid; gap: 6px; --ovs-accent: var(--color-accent-amber); }
.tkb-alloc__head { display: flex; align-items: baseline; justify-content: space-between; }
.tkb-alloc__head strong { color: var(--color-text-bright); font-family: var(--font-mono); font-size: 1.1rem; }

.tkr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ovs.tkr-item { --ovs-accent: var(--color-accent-purple); display: grid; gap: 7px; }
.ovs.tkr-item.is-suspended { --ovs-accent: var(--color-accent-amber); }
.tkr-item__head { display: flex; align-items: center; gap: 8px; }
.btn-reset.tkr-item__name {
    flex: 1;
    min-width: 0;
    color: var(--color-text-bright);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.btn-reset.tkr-item__name:hover,
.btn-reset.tkr-item__name:focus-visible { color: var(--color-accent-cyan); text-decoration: underline; }
.tkr-item__pct { color: var(--ovs-accent); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.tkr-item__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; }
.tkr-item__facts div { display: grid; gap: 1px; }
.tkr-item__facts dt { color: var(--color-text-label); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.tkr-item__facts dd { margin: 0; color: var(--color-text-primary); font-family: var(--font-mono); font-size: var(--text-xs); }
.tkr-item__projection { margin: 0; color: var(--color-text-secondary); font-size: var(--text-xs); line-height: 1.35; }
.tkr-item__projection.is-done { color: var(--color-accent-green); }
.tkr-item__actions { display: flex; flex-wrap: wrap; gap: 5px; }
.tkr-item__actions .btn.sor-btn { display: inline-flex; align-items: center; gap: 4px; }
.btn.sor-btn.tkr-btn--green { color: var(--color-accent-green); border-color: rgba(0, 230, 118, 0.35); }
.btn.sor-btn.tkr-btn--amber { color: var(--color-accent-amber); border-color: rgba(255, 179, 0, 0.35); }

/* ── Légende ── */
.tk-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 20px; padding: 0; color: var(--color-text-secondary); font-size: var(--text-xs); }
.tk-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.tk-legend__item::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--legend); box-shadow: 0 0 6px var(--legend); }
.tk-legend__item--researched { --legend: var(--color-accent-green); }
.tk-legend__item--researching { --legend: var(--color-accent-purple); }
.tk-legend__item--suspended { --legend: var(--color-accent-amber); }
.tk-legend__item--available { --legend: var(--color-accent-cyan); }
.tk-legend__item--locked { --legend: #3a4a63; color: var(--color-text-muted); }

/* ── Fiche d'une technologie ── */
.tkd-body { display: grid; grid-auto-rows: max-content; gap: 14px; }
.fdh.tkh { flex-shrink: 0; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; min-height: 150px; margin-bottom: 0; padding-right: clamp(20px, 32%, 300px); }
.fdh.tkh.has-art::after { right: 3%; width: min(30%, 220px); opacity: 0.75; }
.tkh-kicker { color: var(--color-accent-cyan); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.tkh .fdh-id { flex: 0 0 auto; }
.tkh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tkh-actions .fac-btn { padding: 6px 12px; }
.tkh-hint { flex: 1 1 220px; margin: 0; color: var(--color-text-label); font-size: var(--text-xs); line-height: 1.35; }
.fdh-chip--purple { color: var(--color-accent-purple); border-color: rgba(180, 124, 255, 0.45); }
@container sheet (max-width: 600px) {
    .fdh.tkh { padding-right: 20px; }
    .fdh.tkh.has-art::after { opacity: 0.25; }
}
.tkd-panels { display: grid; gap: 14px; }
.tkd-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.ovs.tkd-tile { --sch-accent: var(--color-accent-cyan); }
.tkd-tile .sch-tile__value { font-size: 1.3rem; }
.tkd-meter { height: 8px; }
.tkd-desc { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); line-height: 1.5; }
.tkd-filiation { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.tkd-filiation__col { display: grid; gap: 6px; align-content: start; }
.tkd-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tkd-link {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 8px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    color: var(--color-text-primary);
    font: inherit;
    font-size: var(--text-sm);
    text-align: left;
}
.btn-reset.tkd-link { cursor: pointer; }
.btn-reset.tkd-link:hover,
.btn-reset.tkd-link:focus-visible { border-color: rgba(0, 229, 255, 0.45); background: rgba(0, 229, 255, 0.06); }
.tkd-link--locked { color: var(--color-text-muted); }
.tkd-link__done { margin-left: auto; color: var(--color-accent-green); }

/* ── Encart « Recherche » de la fiche : lancement et allocation ── */
.tkm-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ovs.tkm-split__part { display: grid; gap: 2px; --ovs-accent: var(--color-text-muted); }
.ovs.tkm-split__part--free { --ovs-accent: var(--color-accent-amber); }
.tkm-split__part strong { color: var(--color-text-bright); font-family: var(--font-mono); font-size: 1.15rem; }
.ovs.tkm-warn { --ovs-accent: var(--color-accent-amber); display: flex; gap: 8px; margin: 0; color: var(--color-accent-amber); font-size: var(--text-sm); }
.tkm-field { margin: 0; }
.tkm-input { display: flex; align-items: center; gap: 10px; }
.tkm-input input[type="range"] { flex: 1; accent-color: var(--color-accent-cyan); }
.tkm-input .form-input { width: 80px; font-family: var(--font-mono); text-align: center; }
.tkm-eta { color: var(--color-text-secondary); }
.tkm-eta strong { color: var(--color-accent-cyan); }
.tkd-tile--text .sch-tile__value { font-family: var(--font-primary); font-size: var(--text-sm); line-height: 1.3; }
.tkm-actions { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.tkm-actions .fac-btn { padding: 6px 12px; }
.ovs.tkm-warn--locked { --ovs-accent: var(--color-text-muted); color: var(--color-text-secondary); }

/* ── Encart « Défense planétaire » d'un bâtiment défensif ── */
.ovs.tkd-tile--shots { --sch-accent: var(--color-accent-purple); --ovs-accent: var(--color-accent-purple); }
.ovs.tkd-tile--shield { --sch-accent: var(--color-accent-cyan); --ovs-accent: var(--color-accent-cyan); }
.ovs.tkd-tile--hull { --sch-accent: var(--color-accent-red); --ovs-accent: var(--color-accent-red); }
.ovs.tkd-tile--power { --sch-accent: var(--color-accent-amber); --ovs-accent: var(--color-accent-amber); }
.ovs.tkd-tile--reliability { --sch-accent: var(--color-accent-green); --ovs-accent: var(--color-accent-green); }
.ovs.tkd-tile--structure { --sch-accent: #4fc3f7; --ovs-accent: #4fc3f7; }
.tkd-desc strong { color: var(--color-text-bright); }
.tkd-weapon { display: flex; align-items: center; gap: 10px; }
.tkd-weapon > div { display: grid; gap: 2px; }
.tkd-weapon__name { color: var(--color-text-bright); font-size: var(--text-sm); }
.tkd-chances { display: grid; gap: 6px; }
.tkd-chances__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 56px), 1fr)); gap: 5px; }
.tkd-chance {
    display: grid;
    justify-items: center;
    gap: 1px;
    padding: 4px 2px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}
.tkd-chance__size { color: var(--color-text-label); font-family: var(--font-mono); font-size: var(--text-xs); }
.tkd-chance__value { color: var(--color-text-bright); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; }