/*
 * Cartes : géographique (Leaflet) et relationnelle (constellation sur canvas).
 * Lié par base.html.twig, après la feuille de Leaflet.
 */

.gp-carte-cadre {
    position: relative;
    overflow: hidden;
    padding: 0;
}

.gp-carte {
    height: min(70vh, 40rem);
    min-height: 22rem;
    background: var(--gp-fond-creux);
}

.gp-carte:focus-visible {
    outline: 3px solid var(--gp-bleu-chantier);
    outline-offset: -3px;
}

/* Prescripteur : un losange (le client est un cercle) — la forme double la couleur. */
.gp-carte-losange-conteneur {
    background: none;
    border: 0;
}

.gp-carte-losange {
    display: block;
    width: 14px;
    height: 14px;
    margin: 2px;
    transform: rotate(45deg);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgb(15 23 42 / 35%);
}

.gp-carte-bulle__nom {
    display: block;
    font-weight: 700;
    font-size: 0.9375rem;
}

.gp-carte-bulle__detail {
    margin: 0.25rem 0 0;
    color: var(--gp-ardoise-600);
}

.gp-legende > li { padding: 0.25rem 0; }

.gp-legende__forme {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    vertical-align: -0.1em;
    background: var(--gp-ardoise-600);
}

.gp-legende__forme--rond { border-radius: 50%; }
.gp-legende__forme--losange { transform: rotate(45deg) scale(0.85); }

/* Carte relationnelle : une constellation, toujours de nuit (le ciel ne suit
   pas le thème), en plein écran sous le menu. */
body:has(.gp-main--plein) {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
}

.gp-main--plein {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    padding: 0;
}

.gp-plein {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.gp-constellation {
    position: relative;
    flex: 1;
    min-height: 22rem;
    overflow: hidden;
    color: #e2e8f0;
    background: radial-gradient(ellipse at 50% 42%, #121a3d 0%, #080d22 50%, #02030a 100%);
}

.gp-relations {
    position: absolute;
    inset: 0;
}

.gp-constellation__toile {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    /* Les gestes (glisser, pincer) appartiennent à la carte. */
    touch-action: none;
}

.gp-constellation__toile--prise { cursor: grabbing; }

/* Le panneau de l'étoile choisie : un tiroir à droite, une feuille en bas au téléphone. */
.gp-relations__panneau {
    position: absolute;
    z-index: 4;
    top: calc(var(--gp-barre-h, 3.5rem) + 1.5rem);
    right: 0.75rem;
    bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: min(23rem, 46%);
    padding: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: #e2e8f0;
    background: rgb(10 16 40 / 82%);
    border: 1px solid rgb(148 163 184 / 26%);
    border-radius: var(--gp-radius);
    box-shadow: 0 0 0 1px rgb(56 189 248 / 8%), 0 16px 48px rgb(0 0 0 / 55%), 0 0 36px rgb(56 189 248 / 10%);
    backdrop-filter: blur(12px);
    scrollbar-color: rgb(148 163 184 / 40%) transparent;
    animation: gp-tiroir 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gp-relations__panneau[hidden] { display: none; }

@media (max-width: 639.98px) {
    .gp-relations__panneau {
        top: auto;
        left: 0.5rem;
        right: 0.5rem;
        bottom: 0.5rem;
        width: auto;
        max-height: 58%;
        animation-name: gp-feuille;
    }
}

.gp-relations__entete {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.gp-relations__entete .gp-etape { margin-top: 0.15rem; }

.gp-relations__identite {
    flex: 1;
    min-width: 0;
}

.gp-relations__nom {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: #f8fafc;
}

.gp-relations__detail {
    margin: 0.15rem 0 0;
    font-size: 0.8125rem;
    color: #b6c2d6;
}

.gp-relations__fermer {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: -0.625rem -0.625rem 0 0;
    color: #cbd5e1;
    background: none;
    border: 0;
    border-radius: 50%;
}

.gp-relations__fermer:hover,
.gp-relations__fermer:focus-visible {
    color: #fff;
    background: rgb(148 163 184 / 16%);
}

.gp-relations__faits {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2rem 0.75rem;
    margin: 0;
    font-size: 0.8125rem;
}

.gp-relations__faits dt {
    font-weight: 500;
    color: #94a3b8;
}

.gp-relations__faits dd {
    margin: 0;
    color: #e2e8f0;
}

.gp-relations__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gp-relations__soustitre {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.gp-relations__nb {
    padding: 0 0.4rem;
    font-size: 0.6875rem;
    color: #e2e8f0;
    background: rgb(148 163 184 / 18%);
    border-radius: 999px;
}

.gp-relations__voisins {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gp-relations__voisin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    padding: 0.25rem 0.375rem;
    border-radius: 0.5rem;
    transition: background-color 0.15s;
}

.gp-relations__voisin:hover { background: rgb(148 163 184 / 9%); }

.gp-relations__voisin--actif {
    background: rgb(56 189 248 / 14%);
    box-shadow: inset 2px 0 0 #38bdf8;
}

.gp-relations__voisin-nom {
    display: inline-flex;
    flex: 1 1 10rem;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    min-height: 2.25rem;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
    color: #f1f5f9;
    background: none;
    border: 0;
}

.gp-relations__voisin-nom:hover span:last-child { text-decoration: underline; }

.gp-relations__lettre {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #fff;
    background: var(--gp-etape);
    border-radius: 50%;
    box-shadow: 0 0 10px color-mix(in srgb, var(--gp-etape) 70%, transparent);
}

.gp-relations__origines {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.gp-relations__etiquette {
    padding: 0.1rem 0.45rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
    border-radius: 999px;
}

.gp-relations__etiquette--mention { color: #dbeafe; background: rgb(191 219 254 / 12%); border-color: rgb(191 219 254 / 30%); }
.gp-relations__etiquette--prescription { color: #a5f3fc; background: rgb(103 232 249 / 12%); }
.gp-relations__etiquette--manuel { color: #ddd6fe; background: rgb(196 181 253 / 14%); }

.gp-relations__etiquette--action { cursor: pointer; }

.gp-relations__etiquette--action:hover,
.gp-relations__etiquette--action:focus-visible {
    color: #0b1026;
    background: #bfdbfe;
}

/* Les notes, chargées par le serveur. */
.gp-relations__notes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

turbo-frame[aria-busy="true"] .gp-relations__notes { opacity: 0.5; transition: opacity 0.2s; }

.gp-relations-note {
    padding: 0.625rem 0.75rem;
    background: rgb(148 163 184 / 8%);
    border: 1px solid rgb(148 163 184 / 14%);
    border-radius: 0.5rem;
    animation: gp-apparition 0.25s ease-out;
}

.gp-relations-note__titre {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: #f1f5f9;
}

.gp-relations-note__titre .bi { margin-right: 0.25rem; color: #7dd3fc; }

.gp-relations-note__meta {
    margin: 0.1rem 0 0.4rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

.gp-relations-note__texte {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #cbd5e1;
    white-space: pre-line;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
}

.gp-relations__notes a { color: #7dd3fc; }

/* Les mentions, de nuit : la même distinction client / prescripteur que de jour. */
.gp-relations-note__texte .gp-mention {
    padding: 0 0.2rem;
    color: #7dd3fc;
    background: rgb(56 189 248 / 12%);
}

.gp-relations-note__texte .gp-mention--prescripteur {
    color: #c4b5fd;
    background: rgb(167 139 250 / 14%);
}

.gp-relations-note__texte .gp-mention--orpheline {
    color: #94a3b8;
    background: rgb(148 163 184 / 12%);
}

.gp-relations-note__lire,
.gp-relations__toutes {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.gp-relations__vide {
    margin: 0;
    font-size: 0.8125rem;
    color: #b6c2d6;
}

.gp-relations__rien {
    position: absolute;
    inset: 45% 1rem auto;
    margin: 0;
    text-align: center;
    color: #cbd5e1;
    pointer-events: none;
}

@keyframes gp-tiroir {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: none; }
}

@keyframes gp-feuille {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}

@keyframes gp-apparition {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .gp-relations__panneau,
    .gp-relations-note { animation: none; }
}

/* Étapes SPANCO et origines des liens : une barre segmentée (les étapes dans
   l'ordre du pipeline). Pastille pleine = montrée, anneau vide = masquée : la
   forme double la couleur. */
.gp-segments {
    display: flex;
    width: 100%;
    max-width: 22rem;
    background: var(--gp-surface);
    border: 1px solid var(--gp-trait-fort);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}

.gp-segment {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.375rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--gp-ardoise-500);
    border-left: 1px solid var(--gp-trait);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s, color 0.15s;
}

.gp-segment:first-of-type { border-left: 0; }

.gp-segment::before {
    width: 0.5rem;
    height: 0.5rem;
    content: "";
    border: 2px solid var(--gp-etape);
    border-radius: 50%;
    transition: background-color 0.15s, box-shadow 0.15s;
}

.gp-segment:hover { background: var(--gp-fond); }

.btn-check:checked + .gp-segment {
    color: var(--gp-ardoise-900);
    background: color-mix(in srgb, var(--gp-etape) 9%, var(--gp-surface));
    box-shadow: inset 0 -2px 0 var(--gp-etape);
}

.btn-check:checked + .gp-segment::before {
    background: var(--gp-etape);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gp-etape) 22%, transparent);
}

.btn-check:focus-visible + .gp-segment {
    position: relative;
    z-index: 1;
    outline: 3px solid var(--gp-bleu-chantier);
    outline-offset: -3px;
}

/* Les liens : le fil de la carte tient lieu de pastille. */
.gp-segment--mention { --gp-etape: #475569; }
.gp-segment--prescription { --gp-etape: #0e7490; }
.gp-segment--manuel { --gp-etape: #7c3aed; }

.gp-segment--mention::before,
.gp-segment--prescription::before,
.gp-segment--manuel::before { display: none; }

.gp-segment .gp-legende__fil {
    width: 1.5rem;
    height: 0.75rem;
    margin-right: 0;
    transition: opacity 0.15s;
}

.btn-check:not(:checked) + .gp-segment .gp-legende__fil { opacity: 0.35; }

.gp-segments:has(.gp-segment--mention) { max-width: 26rem; }

/* Libellés de longueurs inégales : chaque segment prend la largeur du sien. */
.gp-segments:has(.gp-segment--mention) .gp-segment { flex: 1 1 auto; }

.gp-segment { padding: 0 0.375rem; white-space: nowrap; }

/* Téléphone : trois libellés dans 22 rem, la pastille remplace le fil. */
@media (max-width: 575.98px) {
    .gp-segment .gp-legende__fil { display: none; }

    .gp-segment--mention::before,
    .gp-segment--prescription::before,
    .gp-segment--manuel::before { display: block; }

    .gp-segment--manuel::before { border-style: dashed; }

    .gp-segments:has(.gp-segment--mention) .gp-segment {
        flex: 1 1 auto;
        gap: 0.3rem;
        font-size: 0.8125rem;
    }
}

@media (pointer: coarse) {
    .gp-segment { min-height: 2.75rem; }
}

/* Légende : un petit morceau de ciel pour chaque fil et chaque étoile. */
.gp-legende__fil {
    display: inline-block;
    flex: none;
    width: 2rem;
    height: 0.875rem;
    margin-right: 0.375rem;
    vertical-align: middle;
    color: #bfdbfe;
    border-radius: 999px;
    background:
        linear-gradient(currentColor, currentColor) center / 76% 1.5px no-repeat,
        linear-gradient(rgb(191 219 254 / 22%), rgb(191 219 254 / 22%)) center / 76% 5px no-repeat,
        #0b1026;
}

.gp-legende__fil--prescription {
    color: #67e8f9;
    background:
        linear-gradient(currentColor, currentColor) center / 76% 1.5px no-repeat,
        linear-gradient(rgb(103 232 249 / 22%), rgb(103 232 249 / 22%)) center / 76% 5px no-repeat,
        #0b1026;
}

.gp-legende__fil--manuel {
    color: #c4b5fd;
    background:
        repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px) center / 76% 1.5px no-repeat,
        #0b1026;
}

.gp-legende__astre {
    position: relative;
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.25rem;
    vertical-align: -0.3em;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(125 211 252 / 55%) 0, rgb(125 211 252 / 0%) 70%), #0b1026;
}

.gp-legende__astre::after {
    position: absolute;
    inset: 0;
    margin: auto;
    content: "";
}

.gp-legende__astre--client::after {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px #fff;
}

.gp-legende__astre--prescripteur::after {
    width: 0.8rem;
    height: 0.8rem;
    background: #fff;
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

/* La barre de filtres, posée en haut de la carte. */
.gp-barre {
    position: absolute;
    z-index: 5;
    top: 0.75rem;
    left: 50%;
    width: min(82rem, calc(100% - 1.5rem));
    padding: 0.5rem;
    background: rgb(10 16 40 / 78%);
    border: 1px solid rgb(148 163 184 / 24%);
    border-radius: 0.875rem;
    box-shadow: 0 12px 36px rgb(0 0 0 / 45%), 0 0 30px rgb(56 189 248 / 8%);
    transform: translateX(-50%);
    backdrop-filter: blur(12px);
}

.gp-barre__ligne {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gp-barre__recherche {
    position: relative;
    flex: 1 1 11rem;
    min-width: 9rem;
}

.gp-barre__recherche > .bi {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    color: #94a3b8;
    transform: translateY(-50%);
    pointer-events: none;
}

.gp-barre__recherche .form-control { padding-left: 2.25rem; }

.gp-barre__champs {
    display: flex;
    flex: 3 1 auto;
    gap: 0.5rem;
    min-width: 0;
}

.gp-barre__champ {
    flex: 1 1 10rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.gp-barre__champ--large { flex: 1.4 1 13rem; }

/* Assez larges pour lire « Voisinage direct » et « Clients et prescripteurs ». */
.gp-barre__champ--voisinage { flex: 0 0 12rem; }
.gp-barre__champ--nature { flex: 0 0 15.5rem; }

@media (max-width: 991.98px) {
    .gp-barre__champ--voisinage { flex: 0 1 12rem; }
    .gp-barre__champ--nature { flex: 0 1 15.5rem; }
}

/* Les barres segmentées s'adaptent à leur colonne : trop étroite, la
   pastille remplace le petit fil des liens. */
.gp-barre__champ--segments { container-type: inline-size; }

@container (max-width: 28rem) {
    .gp-segment .gp-legende__fil { display: none; }

    .gp-segment--mention::before,
    .gp-segment--prescription::before,
    .gp-segment--manuel::before { display: block; }

    .gp-segment--manuel::before { border-style: dashed; }
}

.gp-barre__bouton {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 2.375rem;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    text-decoration: none;
    background: rgb(148 163 184 / 10%);
    border: 1px solid rgb(148 163 184 / 28%);
    border-radius: var(--bs-border-radius);
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.gp-barre__bouton:hover,
.gp-barre__bouton:focus-visible {
    color: #fff;
    background: rgb(148 163 184 / 20%);
    border-color: rgb(148 163 184 / 50%);
}

.gp-barre__bouton:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

.gp-barre__bouton--icone {
    width: 2.375rem;
    padding: 0;
}

.gp-barre__bouton[aria-expanded="true"] {
    color: #e0f2fe;
    background: rgb(56 189 248 / 18%);
    border-color: rgb(56 189 248 / 60%);
}

.gp-barre__pastille {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #0b1026;
    background: #7dd3fc;
    border-radius: 999px;
}

.gp-barre__pastille[hidden] { display: none; }

.gp-barre__compte {
    padding: 0 0.25rem;
    font-size: 0.8125rem;
    color: #b6c2d6;
    white-space: nowrap;
}

.gp-barre__plus {
    display: grid;
    grid-template-columns: repeat(3, minmax(9rem, 1fr)) minmax(16.5rem, 1fr) minmax(17rem, 1.4fr);
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding: 0.625rem 0.125rem 0.125rem;
    border-top: 1px solid rgb(148 163 184 / 18%);
}

.gp-barre__plus[hidden] { display: none; }

.gp-barre__etiquette {
    display: block;
    float: none;
    width: auto;
    margin: 0 0 0.3rem;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #b6c2d6;
}

@media (max-width: 1199.98px) {
    .gp-barre__plus { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
    .gp-barre__compte { display: none; }
}

/* De nuit : champs, listes de choix et barres segmentées de la barre. */
.gp-barre .form-control,
.gp-barre .gp-selecteur__bouton {
    color: #e2e8f0;
    background: rgb(15 23 42 / 70%);
    border-color: rgb(148 163 184 / 30%);
}

.gp-barre .form-control::placeholder { color: #94a3b8; }

.gp-barre .form-control:focus,
.gp-barre .gp-selecteur__bouton:focus-visible,
.gp-barre .gp-selecteur--ouvert .gp-selecteur__bouton {
    color: #fff;
    background: rgb(15 23 42 / 88%);
    border-color: #38bdf8;
    box-shadow: 0 0 0 0.2rem rgb(56 189 248 / 25%);
}

.gp-barre .gp-selecteur__bouton:hover { border-color: rgb(148 163 184 / 55%); }

.gp-barre .gp-selecteur__bouton--pose {
    color: #e0f2fe;
    background: rgb(56 189 248 / 16%);
    border-color: rgb(56 189 248 / 55%);
}

.gp-barre .gp-selecteur__chevron { color: #94a3b8; }

.gp-barre .gp-selecteur__volet {
    background: #0d1430;
    border-color: rgb(148 163 184 / 26%);
    box-shadow: 0 16px 40px rgb(0 0 0 / 55%);
}

.gp-barre .gp-selecteur__recherche {
    color: #94a3b8;
    background: rgb(148 163 184 / 10%);
    border-color: rgb(148 163 184 / 22%);
}

.gp-barre .gp-selecteur__recherche:focus-within { border-color: #38bdf8; }
.gp-barre .gp-selecteur__champ { color: #f1f5f9; }
.gp-barre .gp-selecteur__option { color: #e2e8f0; }
.gp-barre .gp-selecteur__option--active { background: rgb(148 163 184 / 14%); }
.gp-barre .gp-selecteur__option--choisie,
.gp-barre .gp-selecteur__coche { color: #7dd3fc; }

.gp-barre .gp-selecteur__groupe,
.gp-barre .gp-selecteur__detail,
.gp-barre .gp-selecteur__vide { color: #94a3b8; }

.gp-barre .gp-segments {
    max-width: none;
    background: rgb(15 23 42 / 70%);
    border-color: rgb(148 163 184 / 30%);
}

.gp-barre .gp-segment {
    font-size: 0.8125rem;
    color: #94a3b8;
    border-left-color: rgb(148 163 184 / 18%);
}

.gp-barre .gp-segment:hover { background: rgb(148 163 184 / 10%); }

.gp-barre .btn-check:checked + .gp-segment {
    color: #f8fafc;
    background: color-mix(in srgb, var(--gp-etape) 24%, transparent);
}

.gp-barre .gp-segment--mention { --gp-etape: #94a3b8; }
.gp-barre .gp-segment--prescription { --gp-etape: #22d3ee; }
.gp-barre .gp-segment--manuel { --gp-etape: #a78bfa; }

/* Téléphone : la recherche et le bouton « Filtres » ; le reste se déplie. */
@media (max-width: 767.98px) {
    .gp-barre {
        top: 0.5rem;
        width: calc(100% - 1rem);
        padding: 0.375rem;
    }

    .gp-barre__ligne { flex-wrap: wrap; }
    .gp-barre__recherche { flex: 1 1 7rem; min-width: 0; }

    .gp-barre__champs {
        display: none;
        flex: 1 1 100%;
        flex-direction: column;
        order: 5;
    }

    .gp-barre--ouverte .gp-barre__champs { display: flex; }
    .gp-barre__champ,
    .gp-barre__champ--voisinage,
    .gp-barre__champ--nature { flex: none; }
}

/* La légende flottante, en bas à gauche. */
.gp-legende-flottante {
    position: absolute;
    z-index: 3;
    left: 0.75rem;
    bottom: 0.75rem;
    max-width: min(34rem, calc(100% - 5rem));
    font-size: 0.75rem;
    color: #cbd5e1;
    background: rgb(10 16 40 / 72%);
    border: 1px solid rgb(148 163 184 / 22%);
    border-radius: 0.75rem;
    backdrop-filter: blur(10px);
}

.gp-legende-flottante summary {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.25rem;
    padding: 0 0.75rem;
    font-weight: 600;
    color: #e2e8f0;
    list-style: none;
    cursor: pointer;
}

.gp-legende-flottante summary::-webkit-details-marker { display: none; }

.gp-legende-flottante__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    margin: 0;
    padding: 0 0.75rem 0.6rem;
    list-style: none;
}

.gp-legende-flottante__liste > li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.gp-legende-flottante .gp-legende__fil {
    width: 1.5rem;
    height: 0.75rem;
    margin: 0;
}

.gp-legende-flottante .gp-legende__astre { margin: 0; }

.gp-legende-flottante__note {
    flex-basis: 100%;
    color: #94a3b8;
}

/* Zoom et « tout voir », en bas à droite ; à gauche du panneau quand il est ouvert. */
.gp-relations__commandes {
    position: absolute;
    z-index: 3;
    right: 0.75rem;
    bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.gp-relations__commandes .gp-barre__bouton {
    background: rgb(10 16 40 / 72%);
    backdrop-filter: blur(8px);
}

.gp-constellation:has(.gp-relations__panneau:not([hidden])) .gp-relations__commandes {
    right: calc(min(23rem, 46%) + 1.5rem);
}

@media (max-width: 639.98px) {
    .gp-constellation:has(.gp-relations__panneau:not([hidden])) .gp-relations__commandes,
    .gp-constellation:has(.gp-relations__panneau:not([hidden])) .gp-legende-flottante { display: none; }
}