/* =========================================================
   Carte galactique — gabarit de la rubrique Systèmes (2026-10-08)
   pages/Galaxy.jsx et components/galaxy/.
   Préfixes : gx- (page, fiches, panneaux), gxg- (pictogrammes de la légende).
   Les couleurs d'appartenance reprennent les jetons --color-owner-* et
   --color-course-* que la carte (canvas) résout de son côté.
   ========================================================= */

/* ── Appartenance : une classe par camp, jamais de couleur en ligne ── */
.gx-owner--self,
.gx-card--self { --gx-tone: var(--color-owner-self, #22c55e); }
.gx-owner--ally,
.gx-card--ally { --gx-tone: var(--color-owner-ally, #3b82f6); }
.gx-owner--enemy,
.gx-card--enemy { --gx-tone: var(--color-owner-enemy, #f97316); }
.gx-owner--neutral,
.gx-card--neutral { --gx-tone: var(--color-text-label, #8b99b8); }
.gx-card--split { --gx-tone: var(--color-course-split, #facc15); }
.gx-card--intra { --gx-tone: var(--color-accent-amber); }
.gx-card--inter { --gx-tone: var(--color-accent-purple); }
.gx-owner { color: var(--gx-tone); font-weight: 600; }
.gx-muted { color: var(--color-text-muted); }
.gx-num { font-family: var(--font-mono); }

/* ── En-tête : titre, galaxie, quatre outils ── */
.page-header.gx-header {
    padding: 12px var(--space-8);
    gap: 10px 20px;
}
.gx-header .page-subtitle { margin-top: 4px; }
.gx-galaxy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.gx-galaxy__label {
    color: var(--color-text-label);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.gx-galaxy__name { color: var(--color-accent-cyan); font-family: var(--font-mono); font-weight: 700; }
.gx-galaxy__select {
    min-height: 28px;
    padding: 2px 28px 2px 10px;
    border-radius: 14px;
    border: 1px solid rgba(0, 229, 255, 0.35);
    background: rgba(0, 0, 0, 0.45);
    color: var(--color-accent-cyan);
    font: inherit;
    font-family: var(--font-mono);
    font-weight: 700;
    cursor: pointer;
}
.gx-galaxy__select:focus-visible { outline: 2px solid var(--color-accent-cyan); outline-offset: 2px; }
.gx-galaxy__select option { background: #0a0f1d; color: var(--color-text-bright); }
.gx-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ── Zone de la carte ── */
/* La hauteur de l'en-tête compact (titre et sélecteur de galaxie). */
.gx-map-page { position: relative; height: calc(100vh - 88px); padding: 0; }
.gx-map { position: relative; height: 100%; }
.gx-map-loading { height: 100%; display: flex; align-items: center; justify-content: center; }
.gx-map-controls {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 15;
    display: flex;
    gap: 6px;
}
.gx-map-controls .map-tag { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55); }

/* ── Panneaux flottants (recherche, catégories) ── */
.gx-float {
    position: absolute;
    top: 10px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    max-height: calc(100% - 64px);
    border-radius: 12px;
    border: 1px solid rgba(0, 229, 255, 0.28);
    background: linear-gradient(180deg, rgba(12, 18, 34, 0.95), rgba(5, 8, 16, 0.96));
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(4px);
    overflow: hidden;
}
.gx-float--search { left: 10px; width: min(340px, calc(100% - 20px)); }
.gx-float--categories { right: 10px; width: min(260px, calc(100% - 20px)); }
.gx-float__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.12), transparent 75%);
}
.gx-float__head::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--color-accent-cyan), rgba(0, 229, 255, 0.2) 60%, transparent);
}
.gx-float__icon { display: inline-flex; color: var(--color-accent-cyan); }
.gx-float__title {
    flex: 1;
    margin: 0;
    color: var(--color-text-bright);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.gx-float__title:focus { outline: none; }
.gx-float__title:focus-visible { outline: 2px solid var(--color-accent-cyan); outline-offset: 3px; }
.gx-float__close { margin-left: auto; padding: 2px 6px; }
.gx-float__input {
    flex: 1;
    min-width: 0;
    padding: 6px 9px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.5);
    color: var(--color-text-bright);
    font: inherit;
    font-size: var(--text-xs);
}
.gx-float__input:focus { outline: none; border-color: rgba(0, 229, 255, 0.55); }
.gx-float__filters { display: grid; gap: 6px; padding: 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.gx-float__pills { display: flex; flex-wrap: wrap; gap: 5px; }
.gx-float__pills--pad { padding: 10px; }
.gx-float__row { display: flex; gap: 6px; padding: 0 10px 8px; }
.gx-float__row .btn { flex: 1; }
.gx-float__results { overflow-y: auto; padding: 4px 0; }
.gx-float__empty { margin: 1.2rem 0; color: var(--color-text-muted); font-size: var(--text-xs); text-align: center; }
.gx-float__foot {
    margin: 0;
    padding: 6px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.45;
}
.gx-float__warn {
    display: grid;
    gap: 6px;
    margin: 10px 10px 0;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 179, 0, 0.4);
    background: rgba(255, 179, 0, 0.08);
    color: var(--color-accent-amber);
    font-size: var(--text-xs);
    line-height: 1.4;
}
.gx-float__warn .map-tag { justify-self: start; --tag-accent: var(--color-accent-amber); }
.gx-float__close.map-tag { padding: 2px 6px; }

/* Groupes d'appartenance de la recherche : pastille et liseré des résultats.
   Doublés de .map-tag : assets.css, injecté après cette feuille, y remet
   l'accent cyan par défaut. */
.gx-group--mine,
.map-tag.gx-group--mine { --tag-accent: var(--color-owner-self, #22c55e); --gx-tone: var(--color-owner-self, #22c55e); }
.gx-group--ally,
.map-tag.gx-group--ally { --tag-accent: var(--color-owner-ally, #3b82f6); --gx-tone: var(--color-owner-ally, #3b82f6); }
.gx-group--tagged,
.map-tag.gx-group--tagged { --tag-accent: #eab308; --gx-tone: #eab308; }
.gx-group--other,
.map-tag.gx-group--other { --tag-accent: var(--color-owner-enemy, #f97316); --gx-tone: var(--color-owner-enemy, #f97316); }
.gx-group--neutral,
.map-tag.gx-group--neutral { --tag-accent: var(--color-text-label, #8b99b8); --gx-tone: var(--color-text-label, #8b99b8); }
.map-tag.gx-group { padding-left: 9px; }

.gx-hit {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 10px;
    border: 0;
    border-left: 3px solid var(--gx-tone);
    background: none;
    color: var(--color-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.gx-hit:hover,
.gx-hit:focus-visible { background: rgba(255, 255, 255, 0.05); outline: none; }
.gx-hit__body { flex: 1; min-width: 0; }
.gx-hit__name,
.gx-hit__detail { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-hit__name { color: var(--gx-tone); font-size: var(--text-xs); font-weight: 700; }
.gx-hit__detail { color: var(--color-text-secondary); font-size: var(--text-xs); }
.gx-hit__pos { flex-shrink: 0; color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.gx-ui-icon { flex-shrink: 0; }
.gx-ui-icon--split { color: var(--color-course-split, #facc15); }
.gx-ui-icon--inter { color: var(--color-accent-purple); }

/* ── Modales : grilles d'encarts ── */
.gx-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 14px;
    align-items: start;
}
.gx-panels--stack { grid-template-columns: 1fr; }
.gx-intro { margin: 0 0 12px; color: var(--color-text-secondary); font-size: var(--text-sm); line-height: 1.5; }
.gx-cell .fdh { margin-bottom: 14px; }
.gx-hint { flex-basis: 100%; color: var(--color-text-muted); font-size: var(--text-xs); text-align: right; }

/* Fiches de la case : une carte par système, flotte, portail ou débris. */
.ovs.gx-card { --ovs-accent: var(--gx-tone, var(--ovp-accent)); display: grid; gap: 8px; }
.ovs.gx-card.is-memory { opacity: 0.75; }
.gx-card__head { display: flex; align-items: center; gap: 10px; }
.gx-card__art {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--gx-tone, var(--color-accent-cyan)) 30%, transparent);
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--gx-tone, var(--color-accent-cyan)) 22%, transparent), rgba(0, 0, 0, 0.35) 70%);
}
.gx-card__id { display: grid; gap: 3px; flex: 1; min-width: 0; }
.gx-card__name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    color: var(--gx-tone, var(--color-text-bright));
    font-size: var(--text-sm);
    font-weight: 800;
    overflow-wrap: anywhere;
}
.gx-card__code { color: var(--color-text-label); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; }
.gx-card__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.fac-btn.gx-card__action { flex-shrink: 0; padding: 4px 10px; }

.gx-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(0, 0, 0, 0.35);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: 700;
}
.gx-badge--green { color: var(--color-accent-green); border-color: rgba(0, 230, 118, 0.4); }
.gx-badge--cyan { color: var(--color-accent-cyan); border-color: rgba(0, 229, 255, 0.4); }
.gx-badge--purple { color: var(--color-accent-purple); border-color: rgba(180, 124, 255, 0.45); }
.gx-badge--amber { color: var(--color-accent-amber); border-color: rgba(255, 179, 0, 0.45); background: rgba(255, 179, 0, 0.08); }
.gx-badge--muted { color: var(--color-text-muted); }

.gx-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr));
    gap: 6px 14px;
    margin: 0;
}
.gx-facts > div { min-width: 0; }
.gx-facts dt {
    color: var(--color-text-label);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.gx-facts dd { margin: 1px 0 0; color: var(--color-text-bright); font-size: var(--text-xs); overflow-wrap: anywhere; }
.gx-facts > div:first-child:not(:only-child) { grid-column: 1 / -1; }

.gx-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 9px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
}
.gx-note strong { color: var(--color-text-bright); }
.gx-note--purple { border: 1px solid rgba(180, 124, 255, 0.35); }
.gx-note--purple strong { color: var(--color-accent-purple); }
.gx-note--cyan { border: 1px solid rgba(0, 229, 255, 0.28); }
.gx-note--amber { border: 1px solid rgba(255, 179, 0, 0.4); color: var(--color-accent-amber); }


/* ── Tags ── */
.gx-swatch {
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.5);
    background: var(--gx-swatch);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.gx-swatch:hover,
.gx-swatch:focus-visible { transform: scale(1.15); outline: none; box-shadow: 0 0 0 2px var(--gx-swatch); }
.gx-swatch.is-active { box-shadow: 0 0 0 2px var(--color-text-bright), 0 0 10px var(--gx-swatch); }
.gx-swatch.is-static { display: inline-block; width: 14px; height: 14px; cursor: default; }
.gx-swatch.is-static:hover { transform: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.gx-swatch--rouge { --gx-swatch: #ef4444; }
.gx-swatch--violet { --gx-swatch: #a855f7; }
.gx-swatch--jaune { --gx-swatch: #eab308; }
.gx-swatch--cyan { --gx-swatch: #06b6d4; }
.gx-swatch--turquoise { --gx-swatch: #14b8a6; }
.gx-swatch--rose { --gx-swatch: #ec4899; }

.gx-tagpick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.gx-tagpick__label { color: var(--color-text-secondary); font-size: var(--text-xs); }
.gx-tagpick__label strong { color: var(--color-text-primary); }
.gx-tagpick__swatches { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.gx-tagpick__clear {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--text-xs);
    cursor: pointer;
}
.gx-tagpick__clear:hover,
.gx-tagpick__clear:focus-visible { color: var(--color-text-bright); border-color: rgba(255, 255, 255, 0.35); }

.ovs.gx-tags-intro { margin-bottom: 14px; }
.gx-tags-intro p { margin: 0 0 8px; color: var(--color-text-secondary); font-size: var(--text-sm); line-height: 1.5; }
.gx-palette { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.gx-palette li { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-secondary); font-size: var(--text-xs); }
.gx-search-field { position: relative; display: block; margin-bottom: 14px; }
.gx-search-field svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); }
.gx-search-field .form-input { padding-left: 30px; }
.gx-tagrows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ovs.gx-tagrow {
    --ovs-accent: var(--gx-tone);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 14px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.ovs.gx-tagrow.is-tagged { --ovs-accent: var(--gx-swatch); }
.gx-tagrow--rouge { --gx-swatch: #ef4444; }
.gx-tagrow--violet { --gx-swatch: #a855f7; }
.gx-tagrow--jaune { --gx-swatch: #eab308; }
.gx-tagrow--cyan { --gx-swatch: #06b6d4; }
.gx-tagrow--turquoise { --gx-swatch: #14b8a6; }
.gx-tagrow--rose { --gx-swatch: #ec4899; }
.gx-tagrow__id { display: grid; gap: 1px; min-width: 0; }
.gx-tagrow__name { font-size: var(--text-sm); font-weight: 700; overflow-wrap: anywhere; }
.gx-tagrow__rel { color: var(--color-text-label); font-size: var(--text-xs); }

/* ── Choix d'une flotte (dépôt de mines) ── */
.gx-picks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ovs.gx-pick {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    color: var(--color-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.ovs.gx-pick--red { --ovs-accent: rgba(255, 61, 90, 0.55); }
.ovs.gx-pick:hover,
.ovs.gx-pick:focus-visible { border-color: rgba(255, 61, 90, 0.5); transform: translateY(-1px); outline: none; }
.ovs.gx-pick.is-selected {
    --ovs-accent: var(--color-accent-red);
    border-color: rgba(255, 61, 90, 0.65);
    background: linear-gradient(110deg, rgba(255, 61, 90, 0.16), rgba(0, 0, 0, 0.3));
}
.gx-pick__art {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    border: 1px solid rgba(255, 61, 90, 0.3);
    background: radial-gradient(circle at 50% 40%, rgba(255, 61, 90, 0.2), rgba(0, 0, 0, 0.35) 70%);
}
.gx-pick__body { display: grid; gap: 3px; min-width: 0; }
.gx-pick__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; color: var(--color-text-bright); font-weight: 700; }
.gx-pick__meta { color: var(--color-text-secondary); font-size: var(--text-xs); }
.gx-pick__meta strong { color: #ff8f9a; font-family: var(--font-mono); }

/* ── Légende : panneau latéral, sans voile ──
   Posé à droite de la carte, au-dessus du bouton Recentrer ; le filtre des
   catégories se décale à sa gauche quand les deux sont ouverts. */
.gx-float--legend {
    top: 10px;
    right: 10px;
    bottom: 56px;
    z-index: 21;
    width: min(400px, calc(100% - 20px));
    max-height: none;
}
.gx-map-page.has-legend .gx-float--categories { right: calc(min(400px, 100% - 20px) + 20px); }
.gx-legend-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
    padding: 12px;
    overflow-y: auto;
}
/* Les encarts (overflow: hidden) se laisseraient écraser par le défilement. */
.gx-legend-body > * { flex-shrink: 0; }
.gx-layers {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.ovs.gx-layer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    color: var(--color-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}
.ovs.gx-layer:hover,
.ovs.gx-layer:focus-visible { transform: translateY(-1px); border-color: rgba(0, 229, 255, 0.5); outline: none; }
.ovs.gx-layer.is-on { --ovs-accent: var(--color-accent-cyan); }
.ovs.gx-layer.is-off { --ovs-accent: var(--color-text-muted); }
.ovs.gx-layer.is-off .gx-layer__icon { filter: grayscale(1); opacity: 0.5; }
.ovs.gx-layer.is-changed { border-color: rgba(255, 179, 0, 0.45); }
.gx-layer__icon { flex-shrink: 0; display: inline-flex; color: var(--color-accent-cyan); }
.gx-layer__body { display: grid; gap: 3px; min-width: 0; }
.gx-layer__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gx-layer__name { color: var(--color-text-bright); font-size: var(--text-sm); font-weight: 800; }
.gx-layer__state {
    padding: 0 8px;
    border-radius: 10px;
    border: 1px solid currentColor;
    color: var(--color-accent-cyan);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.gx-layer.is-off .gx-layer__state { color: var(--color-text-muted); }
.gx-layer.is-changed .gx-layer__state { color: var(--color-accent-amber); }
.gx-layer__detail { color: var(--color-text-secondary); font-size: var(--text-xs); line-height: 1.4; }

.gx-keys { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.gx-key { display: flex; align-items: flex-start; gap: 10px; }
.gx-key__glyph {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 52px;
    height: 34px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: radial-gradient(circle at 40% 30%, rgba(30, 50, 90, 0.55), rgba(3, 6, 14, 0.95) 75%);
}
.gx-key__text { display: grid; gap: 1px; min-width: 0; }
.gx-key__label { color: var(--color-text-bright); font-size: var(--text-xs); font-weight: 700; }
.gx-key__detail { color: var(--color-text-secondary); font-size: var(--text-xs); line-height: 1.4; }
.gx-gestures {
    display: grid;
    gap: 4px;
    margin: 4px 0 0;
    padding: 8px 0 0 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    line-height: 1.4;
}

/* Pictogrammes de la légende (LegendGlyph) */
.gxg { display: block; overflow: visible; }
.gxg-fill--self { fill: var(--color-owner-self, #22c55e); }
.gxg-fill--ally { fill: var(--color-owner-ally, #3b82f6); }
.gxg-fill--enemy { fill: var(--color-owner-enemy, #f97316); }
.gxg-fill--neutral { fill: #6b7280; }
.gxg-fill--split { fill: var(--color-course-split, #facc15); }
.gxg-halo { opacity: 0.16; }
.gxg-faded { opacity: 0.45; }
.gxg-ring { fill: none; stroke-width: 2; }
.gxg-ring--tag { stroke: #a855f7; }
.gxg-ring--mission { stroke: #c4b5fd; stroke-width: 1.5; stroke-dasharray: 3 3; }
.gxg-link { stroke: rgba(0, 229, 255, 0.35); stroke-width: 1; }
.gxg-split-box { fill: none; stroke: var(--color-course-split, #facc15); stroke-width: 1; stroke-dasharray: 2 2; }
.gxg-split-letter { fill: #fff7c2; font: 700 8px var(--font-primary, sans-serif); }
.gxg-course line { stroke-width: 1.8; }
.gxg-course polygon,
.gxg-course__origin { stroke: none; }
.gxg-course--move { color: var(--color-course-move, #22d3ee); }
.gxg-course--track { color: var(--color-course-track, #ff33ff); }
.gxg-course--routine { color: var(--color-accent-purple); }
.gxg-course--split { color: var(--color-course-split, #facc15); }
.gxg-course line { stroke: currentColor; }
.gxg-course polygon { fill: currentColor; }
.gxg-course__origin { fill: currentColor; opacity: 0.55; }
.gxg-cycle polyline { fill: none; stroke: var(--color-accent-purple); stroke-width: 1.2; opacity: 0.6; }
.gxg-cycle circle { fill: var(--color-accent-purple); opacity: 0.8; }
.gxg-portal--intra .gxg-portal__body { fill: #1c1000; stroke: #f59e0b; stroke-width: 1.4; }
.gxg-portal--intra .gxg-portal__core { fill: #f59e0b; opacity: 0.85; }
.gxg-portal-link { stroke: #f59e0b; stroke-width: 1; opacity: 0.3; }
.gxg-portal--inter .gxg-halo { fill: #b47cff; }
.gxg-portal--inter .gxg-portal__ring { fill: none; stroke: #b47cff; stroke-width: 1.4; opacity: 0.7; }
.gxg-portal--inter .gxg-portal__body { fill: #1a0030; }
.gxg-portal--inter .gxg-portal__core { fill: #b47cff; }
.gxg-portal--inter .gxg-portal__spoke { stroke: #b47cff; stroke-width: 1; opacity: 0.6; }
.gxg-fog { fill: rgba(2, 4, 10, 0.95); }
.gxg-covered { fill: #0a1830; }
.gxg-frontier { fill: none; stroke: var(--color-accent-cyan); stroke-width: 1.6; filter: drop-shadow(0 0 3px var(--color-accent-cyan)); }
.gxg-detector { fill: rgba(0, 100, 255, 0.1); stroke: rgba(0, 255, 255, 0.55); stroke-width: 1.2; stroke-dasharray: 4 3; }
.gxg-cell { fill: none; }
.gxg-cell--hover { stroke: rgba(0, 229, 255, 0.45); stroke-width: 1.5; }
.gxg-cell--selected { stroke: rgba(0, 229, 255, 0.9); stroke-width: 2; stroke-dasharray: 5 3; }

@media (max-width: 768px) {
    .page-header.gx-header { padding: 10px 14px; }
    .gx-float--categories { top: auto; bottom: 58px; }
    /* Sur mobile, la légende prend la moitié basse : la carte reste visible au-dessus. */
    .gx-float--legend { top: auto; height: 55%; }
    .gx-map-page.has-legend .gx-float--categories { right: 10px; }
    .gx-panels { grid-template-columns: 1fr; }
    .gx-hint { text-align: left; }
}