/* Carte en étoile de l'accueil, façon écran de contrôle */

.star-hud {
    --hud-line: rgba(196, 160, 255, 0.22);
    --hud-text: #d9ccff;
    position: relative;
    display: grid;
    gap: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--hud-line);
    background:
        linear-gradient(rgba(196, 160, 255, 0.045) 1px, transparent 1px) 0 0 / 100% 32px,
        linear-gradient(90deg, rgba(196, 160, 255, 0.045) 1px, transparent 1px) 0 0 / 32px 100%,
        radial-gradient(70% 90% at 50% 50%, #170a33 0%, #07030f 75%);
    box-shadow: 0 30px 80px -40px rgba(166, 77, 255, 0.5), inset 0 0 120px rgba(0, 0, 0, 0.55);
    color: var(--hud-text);
    font-family: var(--mono);
}

.star-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 18px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--hud-line);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.star-bar-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 700;
}

.star-bar-emblem {
    width: 22px;
    height: 22px;
}

.star-bar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    color: #9d8cc8;
}

.star-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.star-stage {
    position: relative;
    min-width: 0;
}

.star-map {
    display: block;
    width: 100%;
    height: auto;
    font-family: var(--mono);
}

.star-map.is-portrait {
    display: none;
}

/* Décor */
.sm-frame {
    fill: none;
    stroke: rgba(196, 160, 255, 0.45);
    stroke-width: 1.5;
}

.sm-rings ellipse {
    fill: none;
    stroke: rgba(196, 160, 255, 0.12);
    stroke-width: 1;
    stroke-dasharray: 2 6;
}

.sm-ticks {
    stroke: rgba(196, 160, 255, 0.35);
    stroke-width: 1;
}

.sm-mesh {
    fill: none;
    stroke: rgba(230, 220, 255, 0.11);
    stroke-width: 0.8;
}

.sm-points circle {
    fill: rgba(230, 220, 255, 0.45);
}

.sm-points .sm-twinkle {
    fill: #fff;
    animation: sm-twinkle 4s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

.sm-cross {
    stroke: rgba(196, 160, 255, 0.08);
    stroke-width: 1;
}

/* Branches : un segment lumineux circule du centre vers les nœuds */
.sm-edge {
    fill: none;
    stroke: var(--c);
    stroke-width: 1.2;
    stroke-opacity: 0.45;
    stroke-dasharray: 3 7;
    animation: sm-flow 2.6s linear infinite;
    transition: stroke-opacity 0.25s var(--ease), stroke-width 0.25s var(--ease);
}

.sm-edge-main {
    stroke-width: 2;
    stroke-opacity: 0.6;
    stroke-dasharray: none;
    animation: none;
}

.sm-edge.is-lit {
    stroke-opacity: 1;
    stroke-width: 2.4;
    filter: drop-shadow(0 0 4px var(--c));
}

.star-hud.has-focus .sm-edge:not(.is-lit) {
    stroke-opacity: 0.15;
}

/* Nœuds */
.sm-node {
    cursor: pointer;
    outline: none;
}

.sm-halo {
    fill: var(--c);
    fill-opacity: 0.12;
    transition: fill-opacity 0.25s var(--ease);
}

.sm-dot {
    fill: var(--c);
    filter: drop-shadow(0 0 6px var(--c));
}

.sm-leaf.is-private .sm-dot {
    fill: #0b0618;
    stroke: var(--c);
    stroke-width: 2;
}

.sm-ring {
    fill: none;
    stroke: var(--c);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
    animation: sm-spin 14s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
}

.sm-label {
    fill: #efe8ff;
    font-family: var(--font);
    font-weight: 600;
    paint-order: stroke;
    stroke: #07030f;
    stroke-width: 4px;
    stroke-linejoin: round;
}

.sm-code {
    fill: var(--c);
    letter-spacing: 0.08em;
    paint-order: stroke;
    stroke: #07030f;
    stroke-width: 3px;
}

.sm-group-label {
    fill: var(--c);
    font-weight: 700;
    letter-spacing: 0.16em;
    paint-order: stroke;
    stroke: #07030f;
    stroke-width: 4px;
}

.sm-node:hover .sm-halo,
.sm-node:focus-visible .sm-halo,
.sm-node.is-lit .sm-halo {
    fill-opacity: 0.35;
}

.sm-node:focus-visible .sm-halo {
    stroke: #fff;
    stroke-width: 1.5;
}

.star-hud.has-focus .sm-leaf:not(.is-lit) {
    opacity: 0.45;
}

/* Centre */
.sm-core-halo {
    fill: none;
    stroke: rgba(166, 77, 255, 0.45);
    stroke-width: 1;
    stroke-dasharray: 2 4;
    animation: sm-spin 40s linear infinite reverse;
    transform-box: fill-box;
    transform-origin: center;
}

.sm-core {
    stroke: rgba(255, 46, 147, 0.6);
    stroke-width: 1.5;
    filter: drop-shadow(0 0 18px rgba(166, 77, 255, 0.7));
}

.sm-center-label {
    fill: #fff;
    font-family: var(--font);
    font-weight: 700;
    letter-spacing: 0.3em;
}

/* Index (gauche) et fiche (droite) */
.star-index,
.star-info {
    display: none;
}

.star-index {
    align-content: start;
    gap: 4px;
    padding: 14px 12px;
    border-right: 1px solid var(--hud-line);
    font-size: 0.74rem;
}

.star-index-group {
    margin: 10px 0 2px;
    color: var(--c);
    font-weight: 700;
    letter-spacing: 0.1em;
}

.star-index-group:first-child {
    margin-top: 0;
}

.star-index ul {
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.star-index a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 6px;
    border-radius: 5px;
    color: var(--hud-text);
    text-decoration: none;
}

.star-index a:hover,
.star-index a:focus-visible,
.star-index a.is-lit {
    color: #fff;
    background: rgba(196, 160, 255, 0.12);
}

.star-code {
    flex: none;
    color: #8b7ab8;
}

.star-lock {
    width: 12px;
    height: 12px;
    color: #ff2e93;
}

.star-info {
    align-content: start;
    gap: 10px;
    padding: 18px 16px;
    border-left: 1px solid var(--hud-line);
}

.star-info-code {
    margin: 0;
    color: #ff2e93;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
}

.star-info-title {
    margin: 0;
    color: #fff;
    font-family: var(--font);
    font-size: 1.3rem;
    line-height: 1.2;
}

.star-info-text {
    margin: 0;
    color: #d9ccff;
    font-family: var(--font);
    font-size: 0.92rem;
    line-height: 1.5;
}

.star-info-acces {
    margin: 0;
    color: #9d8cc8;
    font-size: 0.74rem;
}

.star-info-acces:empty {
    display: none;
}

.star-info-link {
    justify-self: start;
    font-family: var(--font);
}

.star-info-help {
    margin-top: auto;
    font-family: var(--font);
}

@keyframes sm-flow {
    to { stroke-dashoffset: -20; }
}

@keyframes sm-spin {
    to { transform: rotate(360deg); }
}

@keyframes sm-twinkle {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
}

/* Grand écran : index et fiche de part et d'autre de la carte */
@media (min-width: 1200px) {
    .star-body {
        grid-template-columns: 220px minmax(0, 1fr) 260px;
    }

    .star-index,
    .star-info {
        display: grid;
    }
}

/* Téléphone : carte en hauteur */
@media (max-width: 640px) {
    .star-map.is-wide {
        display: none;
    }

    .star-map.is-portrait {
        display: block;
    }

    .star-bar-meta span:nth-child(n + 3) {
        display: none;
    }
}

/* La carte reste sombre dans le thème clair (écran de contrôle) */
html[data-theme="light"] .star-hud {
    box-shadow: 0 30px 70px -36px rgba(90, 40, 160, 0.55);
}

.star-bar-emblem {
    color: #fff;
}

html[data-theme="light"] .star-hud {
    --text: #f4effe;
    --text-2: #c8bce4;
    --muted: #9a8dbd;
    --surface-3: rgba(255, 255, 255, 0.065);
    --line: rgba(196, 160, 255, 0.15);
    --line-strong: rgba(196, 160, 255, 0.28);
    color-scheme: dark;
}