/*
 * 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). */
.gp-relations-cadre {
    background: #02030a;
    border-color: #1e293b;
}

.gp-relations {
    height: min(74vh, 44rem);
    min-height: 26rem;
    background: radial-gradient(ellipse at 50% 42%, #121a3d 0%, #080d22 50%, #02030a 100%);
}

.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; }

.gp-relations__panneau {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    max-width: min(22rem, calc(100% - 1.5rem));
    padding: 0.75rem 0.875rem;
    color: #e2e8f0;
    background: rgb(10 16 40 / 78%);
    border: 1px solid rgb(148 163 184 / 28%);
    border-radius: var(--gp-radius);
    box-shadow: 0 0 0 1px rgb(56 189 248 / 8%), 0 12px 40px rgb(0 0 0 / 55%), 0 0 30px rgb(56 189 248 / 12%);
    backdrop-filter: blur(10px);
    animation: gp-apparition 0.25s ease-out;
}

.gp-relations__nom {
    margin: 0;
    font-weight: 700;
    color: #f8fafc;
}

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

.gp-relations__ajuster {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    color: #e2e8f0;
    background: rgb(10 16 40 / 72%);
    border: 1px solid rgb(148 163 184 / 35%);
    backdrop-filter: blur(6px);
}

.gp-relations__ajuster:hover,
.gp-relations__ajuster:focus-visible {
    color: #fff;
    background: rgb(30 41 82 / 85%);
    border-color: rgb(125 211 252 / 60%);
}

.gp-relations__aide {
    position: absolute;
    top: 0.95rem;
    left: 0.875rem;
    margin: 0;
    font-size: 0.75rem;
    color: #94a3b8;
    pointer-events: none;
}

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

.gp-relations__aide--etroit { display: none; }

@media (max-width: 575.98px) {
    .gp-relations__aide { right: 7.5rem; }
    .gp-relations__aide--large { display: none; }
    .gp-relations__aide--etroit { display: inline; }
}

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

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

/* Un groupe de cases porte une légende de champ, pas un titre. */
.gp-constellation-filtres legend.form-label {
    float: none;
    width: auto;
    font-size: inherit;
    line-height: inherit;
}

/* É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; }

.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%);
}

/* Liste des liens : une carte par relation, du plus fort au plus faible. */
.gp-liens-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin-bottom: 0.75rem;
}

.gp-liens {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: 0.5rem;
}

.gp-lien {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.625rem 0.75rem;
    background: var(--gp-surface);
    border: 1px solid var(--gp-trait);
    border-radius: var(--gp-radius);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.gp-lien:hover {
    border-color: var(--gp-trait-fort);
    box-shadow: 0 2px 10px rgb(15 23 42 / 7%);
}

.gp-lien--montre {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgb(56 189 248 / 20%);
}

/* Les deux fiches l'une sous l'autre, reliées par leur fil : les noms
   s'écrivent en entier. */
.gp-lien__paire {
    display: flex;
    flex-direction: column;
}

.gp-lien__fiche {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--gp-ardoise-900);
    text-decoration: none;
}

.gp-lien__fiche:hover .gp-lien__nom { text-decoration: underline; }
.gp-lien__fiche .gp-etape { flex: none; }

/* Le fil, à la couleur et au trait de la carte, d'une lettre SPANCO à l'autre. */
.gp-lien__fil {
    width: 2px;
    height: 0.75rem;
    margin: -0.375rem 0 -0.375rem calc(0.75rem - 1px);
    background: var(--gp-fil);
    border-radius: 2px;
}

.gp-lien__fil--mention { --gp-fil: #94a3b8; }
.gp-lien__fil--prescription { --gp-fil: #0e7490; }

.gp-lien__fil--manuel {
    --gp-fil: #7c3aed;
    background: repeating-linear-gradient(180deg, var(--gp-fil) 0 3px, transparent 3px 5px);
}

.gp-lien__pied {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--gp-trait);
}

.gp-lien__origines {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    gap: 0.3rem;
    min-width: 0;
}

.gp-lien__origine {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    border-radius: 0.75rem;
}

.gp-lien__origine--mention { color: #334155; background: #eef2f7; }
.gp-lien__origine--prescription { color: #155e75; background: #e0f7fb; }
.gp-lien__origine--manuel { color: #5b21b6; background: #f1ebfe; }

.gp-lien__voir {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: -0.5rem -0.5rem -0.5rem 0;
    color: var(--gp-ardoise-600);
    background: none;
    border: 0;
    border-radius: 50%;
    transition: color 0.15s, background-color 0.15s;
}

.gp-lien__voir:hover,
.gp-lien__voir:focus-visible {
    color: #0b1026;
    background: #e0f2fe;
}

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