/*
 * Panel Myriade — la palette du zaap.
 *
 * Les couleurs viennent du theme MudBlazor (ThemeMyriade.cs), exposees en
 * variables --mud-palette-*. Ce fichier ne porte que la typographie des
 * titres, la mise en page des fiches et le trajet des zaaps.
 *
 * Des gris de pierre ; la lueur du portail (primary) sert a agir ; le bleu
 * des runes (secondary) a tout ce qui touche aux zaaps et aux trajets ; le
 * rouge (error) a ce qui detruit.
 *
 * Le zaap lui-meme est un sprite (wwwroot/img, scripts/dessiner-zaap.py) : il
 * ne reste net qu'a une echelle entiere, le grand en multiples de 48 px de
 * large, le petit en multiples de 16 px.
 */

:root {
    --titre: "Spectral", Georgia, serif;
    --mono: "IBM Plex Mono", ui-monospace, monospace;
    --encre: var(--mud-palette-text-primary);
    --encre-douce: var(--mud-palette-text-secondary);
    --trait: var(--mud-palette-lines-default);
    --surface: var(--mud-palette-surface);
    --fond: var(--mud-palette-background);
    --action: var(--mud-palette-primary);
    --portail: var(--mud-palette-secondary);
    --danger: var(--mud-palette-error);
    --alerte: var(--mud-palette-warning);
    --succes: var(--mud-palette-success);
    --rayon: 10px;
    --rayon-grand: 16px;
}

body {
    background: var(--fond);
    color: var(--encre);
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 3px;
}

a:hover {
    color: var(--action);
    text-decoration-color: currentColor;
}

:focus-visible {
    outline: 2px solid var(--action);
    outline-offset: 2px;
    border-radius: 4px;
}

/* FocusOnNavigate place le focus sur le titre a chaque page, pour les
   lecteurs d'ecran : inutile de l'encadrer a l'ecran. */
h1:focus {
    outline: none;
}

h1, h2, h3 {
    font-family: var(--titre);
    color: var(--encre);
    margin: 0;
}

.page {
    padding-top: 28px;
    padding-bottom: 64px;
}

/* ---------- barre haute ---------- */

.barre-haute.mud-appbar {
    border-bottom: 1px solid var(--trait);
    backdrop-filter: blur(10px);
    background: color-mix(in srgb, var(--mud-palette-appbar-background) 88%, transparent);
}

.aller-a {
    width: min(420px, 48vw);
    margin-left: 8px;
}

.aller-a .mud-input-outlined-border {
    border-radius: 999px;
}

.aller-a .mud-input {
    background: var(--surface);
    border-radius: 999px;
}

.bandeau-identite {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}

.identite {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px 4px 4px;
    border: 1px solid var(--trait);
    border-radius: 999px;
    background: var(--surface);
    color: var(--encre);
    font: inherit;
    cursor: pointer;
}

.identite:hover {
    border-color: var(--action);
}

.identite-texte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}

.identite-nom {
    font-weight: 600;
}

.identite-mode {
    font-size: 0.75rem;
    color: var(--encre-douce);
}

.menu-identite {
    padding: 12px 16px 8px;
    max-width: 280px;
    border-bottom: 1px solid var(--trait);
    margin-bottom: 4px;
}

.menu-identite-uuid {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--encre-douce);
    margin: 0;
    word-break: break-all;
}

.menu-identite-note {
    font-size: 0.8rem;
    color: var(--encre-douce);
    margin: 6px 0 0;
}

.bouton-deconnexion {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px 0 12px;
    border: 1px solid var(--trait);
    border-radius: 999px;
    background: var(--surface);
    color: var(--encre-douce);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.bouton-deconnexion:hover {
    border-color: var(--action);
    color: var(--encre);
}

.menu-deconnexion button {
    width: 100%;
    display: flex;
    align-items: center;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

@media (max-width: 700px) {
    .identite-texte { display: none; }
    .identite { padding: 3px; }
    .bouton-deconnexion-texte { display: none; }
    .bouton-deconnexion { width: 40px; padding: 0; justify-content: center; }
    .aller-a { width: auto; flex: 1; }
    /* La barre est comptee : le guide reste au menu et au bouton « Aide » des pages. */
    .bouton-guide { display: none; }
}

/* ---------- navigation ---------- */

.navigation.mud-drawer {
    border-right: 0;
}

.marque {
    padding: 20px 20px 18px;
}

.marque-lien {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #F2F4F8;
    font-family: var(--titre);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
}

.marque-lien:hover {
    color: #FFFFFF;
}

.marque-portail {
    display: block;
    width: 32px;
    height: 32px;
    flex: none;
}

.marque-portail.grand {
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
}

.menu {
    padding: 0 10px;
}

.menu-groupe {
    margin: 18px 14px 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #7F8BA8;
}

.navigation .mud-nav-link {
    color: #C9D1E3;
    border-radius: var(--rayon);
}

.navigation .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background: rgba(255, 255, 255, 0.05);
    color: #FFFFFF;
}

.navigation .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: #A9CBFF;
    background: rgba(125, 182, 255, 0.12);
    font-weight: 600;
}

.navigation .mud-nav-link.active .mud-nav-link-icon {
    color: #A9CBFF;
}

.lien-avec-compte {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.pastille {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #E3AE55;
    color: #1B2233;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- bandeau d'etat ---------- */

.bandeau-etat.mud-alert {
    border-radius: 0;
}

.bandeau-etat .mud-alert-message {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: baseline;
}

/* ---------- en-tete de page ---------- */

.entete {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 28px;
}

.entete-texte {
    min-width: 0;
    max-width: 72ch;
}

.entete h1 {
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.entete-parent {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    color: var(--encre-douce);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
}

.sous-titre {
    margin: 8px 0 0;
    color: var(--encre-douce);
    font-size: 1rem;
}

.entete-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pastilles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 12px;
}

/* ---------- fiches ---------- */

.grille-fiche {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 24px;
    align-items: start;
}

.colonne-principale,
.colonne-laterale {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

@media (max-width: 1100px) {
    .grille-fiche { grid-template-columns: minmax(0, 1fr); }
}

.section {
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-grand);
    padding: 20px 22px 22px;
}

/* La colonne laterale porte les reglages : plus discrete que le contenu. */
.colonne-laterale .section {
    background: transparent;
    border-style: dashed;
}

.section-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-bottom: 12px;
}

.section h2 {
    font-size: 1.15rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.section-compte {
    font-family: var(--titre);
    font-weight: 500;
    color: var(--encre-douce);
}

.section-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.section-description {
    margin: -4px 0 14px;
    color: var(--encre-douce);
    font-size: 0.875rem;
    max-width: 70ch;
}

/* Une section pliable : tout son titre l'ouvre et la ferme. Pliee, elle ne
   garde que son titre et une ligne de resume, et se fait plus discrete. */
.section-bascule {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border-radius: 6px;
    padding: 2px 6px 2px 0;
}

.section-bascule:focus-visible {
    outline: 2px solid var(--action);
    outline-offset: 3px;
}

.section-bascule:hover .section-titre {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/* Le chevron, en pixels comme les runes. */
.section-chevron {
    width: 10px;
    height: 10px;
    flex: none;
    background: currentColor;
    color: var(--encre-douce);
    clip-path: polygon(0 20%, 20% 20%, 20% 40%, 40% 40%, 40% 60%, 60% 60%, 60% 40%, 80% 40%, 80% 20%, 100% 20%, 100% 40%, 80% 40%, 80% 60%, 60% 60%, 60% 80%, 40% 80%, 40% 60%, 20% 60%, 20% 40%, 0 40%);
    transition: transform 0.15s ease;
}

.section.pliee .section-chevron { transform: rotate(-90deg); }

.section.pliee {
    padding-bottom: 16px;
}

.section.pliee .section-entete { margin-bottom: 4px; }

/* Un cas concret, sous la description : un filet de lueur, comme une note en marge. */
.section-exemple {
    margin: -6px 0 14px;
    padding: 2px 0 2px 12px;
    border-left: 2px solid var(--portail);
    color: var(--encre-douce);
    font-size: 0.875rem;
    max-width: 70ch;
}

.section-exemple-lead {
    color: var(--encre);
    font-weight: 600;
}

.section-resume {
    margin: 0;
    color: var(--encre-douce);
    font-size: 0.875rem;
}

.visuellement-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .section-chevron { transition: none; }
}

.sous-section {
    font-size: 1rem;
    font-weight: 600;
    margin: 24px 0 10px;
    padding-top: 18px;
    border-top: 1px solid var(--trait);
}

/* Une demarche ouverte a la demande (inviter, demander a rejoindre) : un
   cadre a part, pour qu'elle ne se confonde pas avec ce que la fiche montre. */
.panneau-action {
    margin-top: 16px;
    padding: 14px 16px 16px;
    border: 1px solid color-mix(in srgb, var(--action) 45%, var(--trait));
    border-radius: var(--rayon);
    background: color-mix(in srgb, var(--action) 5%, var(--surface));
}

.panneau-action-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.panneau-action-entete h3 {
    font-size: 1rem;
    font-weight: 600;
}

.extrait-config {
    margin: 10px 0 12px;
    padding: 12px 14px;
    overflow-x: auto;
    border-radius: var(--rayon);
    background: var(--fond);
    font-family: var(--mono);
    font-size: 0.8rem;
    line-height: 1.6;
    user-select: all;
}

.panneau-action code {
    font-family: var(--mono);
    font-size: 0.85em;
}

.etat-plugin {
    margin: 0 0 8px;
}

.etat-plugin.relie {
    color: var(--succes);
    font-weight: 600;
}

.lecture-seule {
    margin-bottom: 16px;
}

.personne-verrou {
    color: var(--encre-douce);
}

.horodatage {
    margin: 0;
    padding: 0 4px;
    font-size: 0.8rem;
    color: var(--encre-douce);
}

.vide {
    margin: 0;
    color: var(--encre-douce);
}

/* La ou il n'y a encore aucun zaap : le grand, eteint, x2. */
.zaap-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 0 8px;
    text-align: center;
}

.zaap-vide img {
    display: block;
    width: 96px;
    height: 82px;
}

.muet {
    color: var(--encre-douce);
}

.mention {
    color: var(--encre-douce);
    font-size: 0.85rem;
}

p.mention {
    margin: 4px 0 0;
}

.liste-simple {
    list-style: none;
    margin: 0;
    padding: 0;
}

.liste-simple li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--trait);
}

.liste-simple li:last-child {
    border-bottom: 0;
}

.liste-simple a {
    font-weight: 600;
    text-decoration: none;
}

.paires {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px 20px;
    margin: 0 0 16px;
}

.paires dt {
    color: var(--encre-douce);
}

.paires dd {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    min-width: 0;
}

@media (max-width: 600px) {
    .paires { grid-template-columns: 1fr; gap: 2px; }
    .paires dd { margin-bottom: 10px; }
}

.actions-secondaires {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--trait);
}

/* ---------- donnees techniques ---------- */

.adresse,
.uuid,
.identifiant,
.coordonnee,
.trace {
    font-family: var(--mono);
    font-size: 0.82em;
}

.uuid {
    color: var(--encre-douce);
    overflow-wrap: anywhere;
}

.identifiant {
    display: block;
    margin: 0 0 8px;
    overflow-wrap: anywhere;
}

.trace {
    white-space: pre-wrap;
    background: var(--fond);
    padding: 12px;
    border-radius: var(--rayon);
}

.marque-bedrock {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--encre-douce);
    border: 1px solid var(--trait);
}

/* ---------- tableaux ---------- */

.tableau.mud-table {
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-grand);
    overflow: hidden;
}

.tableau .mud-table-toolbar {
    height: auto;
    padding: 14px 16px;
    border-bottom: 1px solid var(--trait);
}

.tableau .mud-table-head .mud-table-cell,
.tableau-simple thead th {
    font-weight: 600;
    color: var(--encre-douce);
    font-size: 0.8rem;
}

.tableau-simple.mud-simple-table {
    background: transparent;
    margin: 0 -8px;
}

.ligne-cliquable {
    cursor: pointer;
}

.ligne-courante {
    background: color-mix(in srgb, var(--action) 7%, transparent);
}

.nom-ligne {
    font-weight: 600;
    text-decoration: none;
}

.cellule-action {
    text-align: right;
    white-space: nowrap;
}

.barre-outils {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.barre-outils .recherche {
    flex: 1 1 260px;
    max-width: 420px;
}

/* MudSelect pose la classe sur un element interne : c'est son enveloppe
   .mud-select qui prend place dans la barre. */
.barre-outils > .filtre,
.barre-outils > .mud-select {
    flex: 0 1 230px;
    min-width: 170px;
}

.barre-outils .mud-input-control {
    margin-top: 0;
}

.filtre-compact {
    min-width: 170px;
}

.filtre-compact.mud-input-control {
    margin-top: 0;
}

.remplissage-cellule {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 260px;
}

.remplissage-entete {
    max-width: 420px;
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ---------- etat d'un zaap ---------- */

.etat-zaap {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    white-space: nowrap;
}

.etat-zaap img {
    display: block;
    width: 16px;
    height: 16px;
    flex: none;
}

.etat-zaap.eteint {
    color: var(--encre-douce);
}

.vers::before {
    content: "vers ";
    color: var(--encre-douce);
}

/* ---------- trajet d'un zaap ---------- */

/* Tout s'aligne sur l'axe des anneaux : le centre de l'anneau source est a
   31px du haut, les traits et les autres colonnes s'y calent. */
.trajet {
    --axe: 41px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1.1fr) 72px minmax(0, 1fr);
    align-items: start;
    margin: 0 0 28px;
    padding: 28px;
    border-radius: var(--rayon-grand);
    background:
        radial-gradient(ellipse 40% 90% at 50% 50%, color-mix(in srgb, var(--portail) 14%, transparent), transparent 70%),
        var(--surface);
    border: 1px solid color-mix(in srgb, var(--portail) 30%, var(--trait));
}

.trajet-colonne {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.trajet-source {
    align-items: center;
    text-align: center;
}

.trajet-destination {
    align-items: flex-start;
    padding-top: calc(var(--axe) - 21px);
    padding-left: 14px;
}

.trajet-entrants {
    align-items: flex-end;
    text-align: right;
    gap: 10px;
    padding-top: calc(var(--axe) - 20px);
    padding-right: 14px;
}

.trajet-entrants > .trajet-rien:only-child {
    padding-top: 10px;
}

.trajet-entrant {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: row-reverse;
    text-decoration: none;
}

.trajet-entrant > span:last-child {
    display: flex;
    flex-direction: column;
}

.trajet-nom {
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.trajet-source .trajet-nom {
    font-size: 1.4rem;
}

.trajet-nom.muet {
    color: var(--encre-douce);
}

.trajet-lieu {
    color: var(--encre-douce);
    font-size: 0.85rem;
}

.trajet-rien {
    color: var(--encre-douce);
    font-size: 0.85rem;
}

/* Le zaap dessine : le grand pour celui de la fiche, le petit autour. Les
   marges calent le centre du petit sur celui des anneaux (21 px). */
.trajet-zaap {
    display: block;
    flex: none;
    width: 32px;
    height: 32px;
    margin: 5px 0 11px;
}

.trajet-zaap.source {
    width: 96px;
    height: 82px;
    margin: 0 0 6px;
}

.trajet.ouvert .trajet-zaap.source {
    filter: drop-shadow(0 0 22px color-mix(in srgb, var(--action) 35%, transparent));
}

.trajet-zaap.petit {
    width: 16px;
    height: 16px;
    margin: 0;
}

/* Sans zaap au bout : un serveur entier, ou nulle part. */
.trajet-anneau {
    width: 30px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid var(--portail);
    box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--portail) 16%, transparent);
    margin-bottom: 6px;
}

.trajet-anneau.serveur {
    margin-top: 6px;
    border-radius: 8px;
    width: 38px;
    height: 30px;
    border-color: var(--action);
    box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--action) 14%, transparent);
}

.trajet-anneau.vide {
    border-style: dashed;
    border-color: var(--trait);
    box-shadow: none;
}

.trajet-lien {
    margin-top: calc(var(--axe) - 1px);
    height: 3px;
    border-radius: 2px;
    background-image: linear-gradient(90deg, var(--portail) 50%, transparent 50%);
    background-size: 14px 3px;
    opacity: 0.9;
}

.trajet-lien.vide {
    background-image: linear-gradient(90deg, var(--trait) 50%, transparent 50%);
}

.trajet.ferme .trajet-lien.sortant {
    background-image: linear-gradient(90deg, var(--encre-douce) 50%, transparent 50%);
    opacity: 0.45;
}

/* Le seul mouvement du panel : le passage est ouvert, le trait avance. */
.trajet.ouvert .trajet-lien:not(.vide) {
    animation: flux 1.1s linear infinite;
}

@keyframes flux {
    to { background-position: 14px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .trajet.ouvert .trajet-lien:not(.vide) { animation: none; }
}

@media (max-width: 860px) {
    .trajet {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 6px;
        padding: 22px 18px;
    }

    .trajet-colonne,
    .trajet-entrants,
    .trajet-destination {
        align-items: center;
        text-align: center;
    }

    .trajet-entrant { flex-direction: row; }

    .trajet-destination,
    .trajet-entrants {
        padding: 0;
    }

    .trajet-lien {
        margin-top: 0;
        width: 3px;
        height: 36px;
        background-image: linear-gradient(180deg, var(--portail) 50%, transparent 50%);
        background-size: 3px 14px;
    }

    .trajet-lien.vide {
        background-image: linear-gradient(180deg, var(--trait) 50%, transparent 50%);
    }

    @keyframes flux {
        to { background-position: 0 14px; }
    }
}

/* ---------- personnes ---------- */

.tete-joueur {
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border-radius: 6px;
    background: var(--fond);
    flex: none;
}

.tete-joueur img {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.tete-silhouette {
    display: none;
    width: 72%;
    height: 72%;
    fill: var(--encre-douce);
}

.tete-joueur.sans-visage img { display: none; }
.tete-joueur.sans-visage .tete-silhouette { display: block; }

.personnes {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.personne {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
        "tete nom etat action"
        "tete uuid etat action";
    align-items: center;
    column-gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--trait);
}

.personne:last-child {
    border-bottom: 0;
}

.personne .tete-joueur { grid-area: tete; }
.personne-nom { grid-area: nom; font-weight: 600; text-decoration: none; }
.personne .uuid { grid-area: uuid; font-size: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.personne-moi {
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--action);
    background: color-mix(in srgb, var(--action) 12%, transparent);
}

.personne-ligne {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.ajout-personne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ajout-personne .mud-input-control {
    flex: 1 1 180px;
    margin-top: 0;
}

.option-personne,
.option-serveur {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.option-personne .uuid {
    margin-left: auto;
    font-size: 0.7rem;
}

.option-serveur {
    justify-content: space-between;
}

.apercu-joueur {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ---------- adhesions ----------
   Classes « dossier », jamais « adhesion » : les bloqueurs de pub cachent
   .adhesion (regle generique d'EasyList). */

.dossiers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dossier {
    padding: 14px 16px;
    border-radius: var(--rayon);
    border: 1px solid var(--trait);
    border-left: 4px solid var(--trait);
    background: var(--surface);
}

.dossier.en_attente { border-left-color: var(--alerte); }
.dossier.acceptee { border-left-color: var(--succes); }
.dossier.refusee { border-left-color: var(--danger); }
.dossier.annulee { opacity: 0.75; }

.dossier-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
}

.dossier-couple {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    font-weight: 650;
    font-size: 1.05rem;
}

.dossier-couple a {
    text-decoration: none;
}

.dossier-fleche {
    color: var(--portail);
    font-weight: 400;
}

.dossier-contexte {
    margin: 4px 0 0;
    color: var(--encre-douce);
    font-size: 0.875rem;
}

.dossier-message {
    margin: 10px 0 0;
    padding: 8px 12px;
    border-left: 2px solid var(--trait);
    font-style: italic;
    max-width: 70ch;
}

.dossier-motif {
    margin: 8px 0 0;
    font-size: 0.875rem;
}

.actions-dossier {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--trait);
}

.actions-dossier .mud-input-control {
    margin-top: 0;
}

/* Chaque choix prend la largeur de son libelle, avec de l'air autour : en
   colonnes egales (le style en ligne de MudBlazor) et avec les 3 px de sa
   bascule contouree, « Mes serveurs » touchait ses bords. */
.bascule.mud-toggle-group {
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: auto;
}

.bascule.mud-toggle-group .mud-toggle-item.mud-toggle-item {
    padding: 6px 14px;
    white-space: nowrap;
}

.boite-reception {
    max-width: 900px;
}

/* ---------- formulaires ---------- */

.formulaire,
.formulaire-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.formulaire-page {
    max-width: 680px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-grand);
}

.formulaire-page.large {
    max-width: none;
}

.formulaire .mud-input-control,
.formulaire-page .mud-input-control {
    margin-top: 0;
}

.formulaire-rangee {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.formulaire-rangee > * {
    flex: 1 1 140px;
}

.formulaire-rangee > .champ-large {
    flex: 3 1 220px;
}

.formulaire-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.saisie-uuid input,
.saisie-lot textarea {
    font-family: var(--mono);
    font-size: 0.9rem;
}

.choix-entree {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.choix p {
    margin: 6px 0 0;
}

.geometrie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px 28px;
}

.geometrie-bloc {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.geometrie-bloc h3 {
    font-size: 0.95rem;
    font-weight: 600;
}

.geometrie-bloc .mention {
    margin: -6px 0 0;
}

.geometrie-erreur {
    grid-column: 1 / -1;
}

.coordonnees {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.coordonnees .mud-input-control {
    margin-top: 0;
    min-width: 0;
}

.coin {
    flex: none;
    width: 52px;
    font-size: 0.8rem;
    color: var(--encre-douce);
}

.resultats-lot {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 560px;
    overflow: auto;
}

.resultats-lot li {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    padding: 7px 0 7px 12px;
    border-left: 3px solid var(--succes);
    margin-bottom: 4px;
}

.resultats-lot li.echoue {
    border-left-color: var(--danger);
}

.resultat-ligne {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--encre-douce);
    min-width: 58px;
}

.resultat-erreur {
    flex-basis: 100%;
    font-size: 0.8rem;
    color: var(--danger);
}

/* ---------- confirmation ---------- */

.confirmation {
    padding: 12px 14px;
    border-radius: var(--rayon);
    border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
    background: color-mix(in srgb, var(--danger) 7%, var(--surface));
    max-width: 440px;
    text-align: left;
}

.confirmation .question {
    margin: 0 0 10px;
    font-weight: 600;
}

.confirmation .consequence {
    display: block;
    margin-top: 4px;
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--encre-douce);
}

.confirmation-boutons {
    display: flex;
    gap: 8px;
}

/* ---------- erreurs ---------- */

.erreur-api {
    margin-bottom: 16px;
}

.erreur-api .message {
    margin: 0;
    font-weight: 600;
}

.erreur-api .champs {
    margin: 6px 0 0;
    padding-left: 18px;
}

/* ---------- vue d'ensemble ---------- */

.topologie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin: -8px 0 28px;
    font-size: 1.05rem;
}

.topologie-element {
    text-decoration: none;
    color: var(--encre-douce);
}

.topologie-element strong {
    font-family: var(--titre);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--encre);
    margin-right: 2px;
}

.topologie-sep {
    width: 22px;
    height: 2px;
    background-image: linear-gradient(90deg, var(--portail) 50%, transparent 50%);
    background-size: 6px 2px;
}

.remplissages {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.remplissage-ligne {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.remplissage-ligne a {
    font-weight: 600;
    text-decoration: none;
}

/* ---------- presence ---------- */

.presence {
    list-style: none;
    margin: 0;
    padding: 0;
}

.presence-serveur {
    padding: 12px 0;
    border-bottom: 1px solid var(--trait);
}

.presence-serveur:first-child {
    padding-top: 0;
}

.presence-serveur:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.presence-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

.presence-voyant {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
}

.voyant-en-ligne {
    background: var(--succes);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--succes) 22%, transparent);
}

.voyant-transition {
    background: var(--alerte);
}

.voyant-hors-ligne {
    background: transparent;
    border: 1.5px solid var(--encre-douce);
}

.presence-statut {
    color: var(--encre-douce);
    font-size: 0.875rem;
}

.presence-compte {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--encre-douce);
}

.presence-joueurs {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.presence-joueur {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 3px 10px 3px 3px;
    border: 1px solid var(--trait);
    border-radius: 999px;
    background: var(--fond);
}

.presence-joueur .tete-joueur {
    border-radius: 50%;
}

.presence-joueur.cherche {
    border-color: var(--action);
    box-shadow: 0 0 0 1px var(--action);
}

.presence-pseudo {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.presence-monde {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--encre-douce);
}

.liste-simple.joueurs-trouves li {
    align-items: center;
}

.liste-simple .presence-joueur {
    border: 0;
    padding: 0;
    background: none;
}

.presence-erreur {
    color: var(--alerte);
}

.groupes-presence {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
    gap: 24px;
    margin-bottom: 16px;
}

@media (prefers-reduced-motion: no-preference) {
    .voyant-en-ligne {
        animation: pouls-presence 2.4s ease-in-out infinite;
    }
}

@keyframes pouls-presence {
    50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--succes) 8%, transparent); }
}

/* ---------- etat de l'API ---------- */

.voyants {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.voyant-etat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 18px 20px;
    border-radius: var(--rayon-grand);
    background: var(--surface);
    border: 1px solid var(--trait);
    border-top: 4px solid var(--trait);
}

.voyant-etat.bon { border-top-color: var(--succes); }
.voyant-etat.mauvais { border-top-color: var(--danger); }

.voyant-titre {
    color: var(--encre-douce);
    font-size: 0.85rem;
}

.voyant-valeur {
    font-family: var(--titre);
    font-size: 1.5rem;
    font-weight: 700;
}

.voyant-detail {
    color: var(--encre-douce);
    font-size: 0.8rem;
}

/* ---------- connexion et erreur ---------- */

.panel-connexion {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    background:
        radial-gradient(ellipse 50% 40% at 50% 30%, rgba(65, 102, 226, 0.22), transparent 70%),
        #11151F;
}

.carte-connexion {
    width: min(440px, 100%);
    padding: 36px 32px;
    border-radius: 20px;
    background: #181E2B;
    border: 1px solid #262E40;
    color: #E4E8F2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}

.carte-connexion h1 {
    color: #FFFFFF;
    font-size: 1.8rem;
    letter-spacing: -0.02em;
}

.carte-connexion p {
    margin: 0;
    color: #B7C0D6;
}

.carte-connexion .mention {
    color: #7F8BA8;
}

.zaap-arret {
    display: block;
    width: 96px;
    height: 82px;
    margin-bottom: 4px;
}

/* ---------- accueil public ---------- */

.bienvenue {
    width: min(1120px, 100%);
    display: flex;
    flex-direction: column;
    gap: 56px;
    color: #E4E8F2;
}

.bienvenue-marque {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #F2F4F8;
    font-family: var(--titre);
    font-weight: 700;
    font-size: 1.35rem;
    text-decoration: none;
}

.bienvenue-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
}

.bienvenue h1 {
    color: #FFFFFF;
    font-size: clamp(2.4rem, 5.2vw, 4.25rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    max-width: 16ch;
    text-wrap: balance;
}

.bienvenue-intro {
    margin: 22px 0 0;
    max-width: 52ch;
    color: #B7C0D6;
    font-size: 1.125rem;
    line-height: 1.6;
}

.bienvenue-action {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.bienvenue-action .mention {
    margin: 0;
    color: #7F8BA8;
    font-size: 0.875rem;
}

/* Le zaap du logo, x7 (x3 sur mobile) : le seul element anime de la page,
   une fois, a l'ouverture. L'animation vit dans le SVG. */
.zaap-pixels {
    display: block;
    justify-self: center;
    width: 336px;
    height: auto;
    filter: drop-shadow(0 0 48px rgba(94, 140, 255, 0.35));
}

.bienvenue-etapes {
    padding-top: 32px;
    border-top: 1px solid #262E40;
}

.bienvenue-etapes h2 {
    color: #FFFFFF;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}

.bienvenue-etapes ol {
    list-style: none;
    counter-reset: etape;
    margin: 20px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.bienvenue-etapes li {
    counter-increment: etape;
}

.bienvenue-etapes li::before {
    content: counter(etape);
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-bottom: 12px;
    border-radius: 6px;
    background: rgba(125, 182, 255, 0.14);
    color: #A9CBFF;
    font-family: var(--titre);
    font-weight: 700;
}

.bienvenue-etapes h3 {
    color: #F2F4F8;
    font-size: 1.05rem;
}

.bienvenue-etapes p {
    margin: 6px 0 0;
    max-width: 38ch;
    color: #B7C0D6;
    line-height: 1.55;
}

@media (max-width: 860px) {
    .bienvenue { gap: 40px; }
    .bienvenue-hero { grid-template-columns: 1fr; gap: 28px; }
    .zaap-pixels { order: -1; justify-self: start; width: 144px; }
    .bienvenue-etapes ol { grid-template-columns: 1fr; gap: 22px; }
}

/* ---------- divers ---------- */

.chargement {
    max-width: 900px;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 20px;
    background: var(--danger);
    color: #FFFFFF;
    z-index: 2000;
}

#blazor-error-ui .recharger {
    margin-left: 10px;
    color: inherit;
    font-weight: 600;
}

/* ---------- canaux ---------- */

/* Le tchat du jeu : toujours sombre, comme en jeu, quel que soit le theme. */
.apercu-tchat {
    padding: 10px 12px;
    border-radius: var(--rayon);
    background: #1b1b1f;
    color: #ffffff;
    font-family: var(--mono);
    font-size: 0.85rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    text-shadow: 1px 1px 0 #3f3f3f;
}

.apercu-tchat .brouille {
    filter: blur(3px);
}

.choix-serveurs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 6px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.choix-serveurs li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 8px;
}

.champ-format input {
    font-family: var(--mono);
    font-size: 0.9rem;
}

.champ-delai {
    max-width: 320px;
}

.erreur-champ {
    margin: 0;
    color: var(--danger);
    font-size: 0.8rem;
}

.alerte {
    color: var(--alerte);
    font-weight: 600;
}

/* Des lignes a copier, mais lisibles sur un telephone sans defiler. */
.extrait-config.replie {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.liste-simple code.permission {
    flex-basis: 100%;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--encre-douce);
}

.champ-types input {
    font-family: var(--mono);
    font-size: 0.9rem;
}

/* ---------- les iles, la carte, les runes ----------
 *
 * Les iles sont des images de nuit, dans les deux themes : le pixel art est
 * dessine pour ce fond. Le moteur (wwwroot/js/iles) les calcule dans le
 * navigateur ; elles restent a l'echelle entiere, sinon elles bavent.
 */

.scene-ile {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 380px;
    padding: 12px 8px 16px;
    overflow: hidden;
    border-radius: var(--rayon-grand);
    border: 1px solid var(--trait);
    background: radial-gradient(110% 75% at 50% 32%, #1A1640 0%, #110E26 45%, #0B0E16 100%);
}

.scene-ile .etoiles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ile-canvas,
.constellation,
.scene-ile .etoiles {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.ile-canvas {
    position: relative;
    display: block;
    max-width: 100%;
    transition: filter 0.6s ease, opacity 0.4s ease;
}

/* Tant qu'elle se calcule, une ile ne montre pas un canvas vide. */
.ile-canvas.ile-en-calcul {
    opacity: 0;
}

.fiche-ile {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fiche-ile-legende {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    font-size: 0.9rem;
}

.etat-ile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.apercu-ile {
    color: var(--alerte);
}

/* L'accueil des voyageurs, sous la legende de l'ile : une ligne, et le remede
   pour ses administrateurs quand il refuse. */
.accueil-voyageurs > p,
p.accueil-voyageurs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.9rem;
}

.accueil-voyageurs.refuse strong {
    color: var(--alerte);
}

.accueil-etapes {
    margin: 0 0 10px;
    padding-left: 20px;
}

.accueil-etapes li {
    margin: 4px 0;
}

.accueil-constat {
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.nom-avec-vignette {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.vignette-ile {
    display: grid;
    place-items: end center;
    width: 56px;
    height: 64px;
    flex: none;
    overflow: hidden;
    border-radius: 8px;
    background: radial-gradient(90% 80% at 50% 40%, #1A1640 0%, #0B0E16 100%);
}

.vignette-ile .ile-canvas {
    image-rendering: auto;
}

.constellation {
    width: 64px;
    height: 64px;
    flex: none;
    border-radius: 8px;
    background: #0B0E16;
}

/* La carte d'un reseau : le cadre appartient au JavaScript. */
.carte-cadre {
    position: relative;
    height: min(520px, 70vh);
    overflow: hidden;
    border-radius: var(--rayon-grand);
    border: 1px solid var(--trait);
    background: radial-gradient(120% 90% at 50% 35%, #15123A 0%, #0E0C22 50%, #0B0E16 100%);
    touch-action: none;
}

.carte-cadre.tire { cursor: grabbing; }

.carte-canvas {
    display: block;
    outline: none;
}

.carte-canvas:focus-visible {
    outline: 2px solid var(--action);
    outline-offset: -2px;
}

.carte-barre {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.carte-paliers {
    display: inline-flex;
    padding: 2px;
    border-radius: 9px;
    background: rgba(11, 14, 22, 0.8);
    border: 1px solid #262E40;
}

.carte-barre button {
    font: 500 0.78rem/1 "IBM Plex Sans", system-ui, sans-serif;
    color: #C9D1E6;
    background: transparent;
    border: 0;
    border-radius: 7px;
    padding: 6px 9px;
    cursor: pointer;
}

.carte-barre button[aria-pressed="true"] {
    color: #FFFFFF;
    background: #3A196C;
}

.carte-barre .carte-tout {
    background: rgba(11, 14, 22, 0.8);
    border: 1px solid #262E40;
}

.carte-mini {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 140px;
    height: 90px;
    border-radius: 8px;
    border: 1px solid #262E40;
    background: rgba(11, 14, 22, 0.85);
    cursor: pointer;
}

.carte-bulle {
    position: absolute;
    transform: translate(-50%, calc(-100% - 12px));
    display: grid;
    gap: 2px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(11, 14, 22, 0.92);
    border: 1px solid #3A196C;
    color: #FFFFFF;
    font-size: 0.8rem;
    pointer-events: none;
    white-space: nowrap;
}

.carte-bulle .en-ligne { color: #FFC862; font-family: var(--mono); font-size: 0.72rem; }
.carte-bulle .eteint { color: #7F8BA8; font-family: var(--mono); font-size: 0.72rem; }

.legende-carte {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.78rem;
    color: var(--encre-douce);
}

.legende-carte li { display: inline-flex; align-items: center; gap: 8px; }
.legende-carte i { display: inline-block; width: 22px; height: 0; }
.legende-carte .trait-vif { border-top: 2px dashed #9763D3; }
.legende-carte .trait-gris { border-top: 2px dotted #5A6483; }
.legende-carte .cadre-vue { height: 10px; width: 14px; border: 1px solid currentColor; }

@media (max-width: 600px) {
    .carte-mini { display: none; }
    .scene-ile { min-height: 260px; }
}

/* Les runes : tracees pixel par pixel en apparaissant, elles respirent, et une
   etincelle passe de temps en temps. Tout s'arrete si le systeme demande moins
   de mouvement. */
.rune {
    display: inline-block;
    flex: none;
    vertical-align: middle;
    --halo: rgba(124, 156, 244, 0.75);
}

.rune svg { display: block; width: 100%; height: 100%; }
.rune-violet { --halo: rgba(151, 99, 211, 0.8); }
.rune-or { --halo: rgba(230, 199, 126, 0.6); }
.rune-rouge { --halo: rgba(180, 101, 63, 0.7); }
.rune-vert { --halo: rgba(79, 139, 76, 0.7); }
.rune-bleu { --halo: rgba(68, 134, 222, 0.75); }
.rune-neige { --halo: rgba(221, 228, 242, 0.7); }
.rune.anime svg { filter: drop-shadow(0 0 3px var(--halo)); }

@media (prefers-reduced-motion: no-preference) {
    .rune.anime .px {
        animation: rune-trace 0.16s steps(1, end) both;
        animation-delay: calc(var(--i) * 55ms + 120ms);
    }

    .rune.anime svg {
        animation: rune-souffle 3.2s steps(6, end) 1.8s infinite;
    }

    /* Des etincelles a des rythmes premiers entre eux : elles ne reviennent jamais ensemble. */
    .rune.anime .px:nth-child(7n + 3) {
        animation: rune-trace 0.16s steps(1, end) both, rune-eclat 7.3s steps(1, end) 2.5s infinite;
        animation-delay: calc(var(--i) * 55ms + 120ms), 2.5s;
    }

    .rune.anime .px:nth-child(11n + 5) {
        animation: rune-trace 0.16s steps(1, end) both, rune-eclat 11.9s steps(1, end) 4.1s infinite;
        animation-delay: calc(var(--i) * 55ms + 120ms), 4.1s;
    }
}

@keyframes rune-trace {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes rune-souffle {
    0%, 100% { filter: drop-shadow(0 0 2px var(--halo)); }
    50% { filter: drop-shadow(0 0 8px var(--halo)); }
}

@keyframes rune-eclat {
    0%, 96% { fill-opacity: 1; filter: none; }
    97%, 99% { fill: #FFFFFF; }
}

.titre-rune {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Pendant un chargement, les runes du zaap s'allument l'une apres l'autre. */
.chargement-runes {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

@media (prefers-reduced-motion: no-preference) {
    .chargement-runes .rune { animation: rune-attente 1.5s steps(1, end) infinite; }
    .chargement-runes .rune:nth-child(2) { animation-delay: 0.5s; }
    .chargement-runes .rune:nth-child(3) { animation-delay: 1s; }
}

@keyframes rune-attente {
    0%, 33% { opacity: 1; }
    34%, 100% { opacity: 0.35; }
}

/* L'apparence d'une ile et l'embleme d'un reseau */
.modeles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.modele {
    font: 500 0.8rem "IBM Plex Sans", system-ui, sans-serif;
    color: var(--encre);
    background: transparent;
    border: 1px solid var(--trait);
    border-radius: 999px;
    padding: 5px 12px;
    cursor: pointer;
}

.modele.actif {
    color: var(--mud-palette-primary-text);
    background: var(--action);
    border-color: var(--action);
}

.reglages-apparence {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 4px 12px;
}

.etiquette-champ {
    font-size: 0.8rem;
    color: var(--encre-douce);
}

.couleurs-embleme {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.couleur-embleme {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 2px solid var(--trait);
    background: var(--teinte);
    cursor: pointer;
}

.couleur-embleme.actif {
    border-color: var(--encre);
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--teinte);
}

.runes-embleme {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    gap: 6px;
}

.rune-choix {
    display: grid;
    place-items: center;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.rune-choix.actif {
    border-color: var(--portail);
    background: color-mix(in srgb, var(--portail) 12%, transparent);
}

.embleme-lu {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

/* ---------- les runes partout : le menu et les titres de section ----------
 *
 * Chaque rubrique a sa rune, la meme dans le menu, en tete de ses pages et
 * devant les sections qui en parlent. Dans le menu, seule celle de la rubrique
 * ouverte s'allume : elle se trace quand on y entre, puis respire. Devant un
 * titre de section, une rune se trace en apparaissant et se tient tranquille :
 * une page ne respire qu'une fois, par son titre.
 */

.section h2 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-rune {
    margin-right: 2px;
}

.sous-section.titre-rune {
    gap: 10px;
}

.menu-lien {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.menu-lien.lien-avec-compte {
    justify-content: flex-start;
}

.menu-lien .pastille {
    margin-left: auto;
}

.menu-rune {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.navigation .mud-nav-link:hover .menu-rune {
    opacity: 0.85;
}

.navigation .mud-nav-link.active .menu-rune {
    opacity: 1;
}

.menu-rune.anime svg {
    filter: none;
}

.navigation .mud-nav-link.active .menu-rune.anime svg,
.rune.anime.calme svg {
    filter: drop-shadow(0 0 2px var(--halo));
}

@media (prefers-reduced-motion: no-preference) {
    .menu-rune.anime svg,
    .menu-rune.anime .px:nth-child(n),
    .rune.anime.calme svg {
        animation: none;
    }

    .navigation .mud-nav-link.active .menu-rune.anime .px:nth-child(n),
    .rune.anime.calme .px:nth-child(n) {
        animation: rune-trace 0.16s steps(1, end) both;
        animation-delay: calc(var(--i) * 55ms + 60ms);
    }

    .navigation .mud-nav-link.active .menu-rune.anime svg {
        animation: rune-souffle 3.2s steps(6, end) 1.4s infinite;
    }
}

/* En theme clair, le reflet d'une rune se perdrait dans le blanc : il prend la
   couleur du coeur. Le menu et les scenes de nuit restent sombres, eux. */
.theme-clair .contenu .rune-allume .px[data-reflet] { fill: #7C9CF4; }
.theme-clair .contenu .rune-violet .px[data-reflet] { fill: #9763D3; }
.theme-clair .contenu .rune-or .px[data-reflet] { fill: #C9A04E; }
.theme-clair .contenu .rune-rouge .px[data-reflet] { fill: #B4653F; }
.theme-clair .contenu .rune-vert .px[data-reflet] { fill: #4F8B4C; }
.theme-clair .contenu .rune-bleu .px[data-reflet] { fill: #4486DE; }
/* La neige sur fond blanc : le reflet prend un gris bleute pour garder la forme. */
.theme-clair .contenu .rune-neige .px[data-reflet] { fill: #B8C3D9; }
.theme-clair .contenu .rune.anime svg { filter: none; }

/* ---------- le guide ----------
   Un sommaire qui reste en vue, puis un chapitre par ecran. Les boutons
   cites portent le cadre de la lueur du portail : on les reconnait a
   l'ecran. */

.guide {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.guide-sommaire {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}

.guide-sommaire-titre {
    margin: 0 0 6px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--encre-douce);
}

.guide-sommaire ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.guide-sommaire a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    border-radius: var(--rayon);
    color: var(--encre-douce);
    font-size: 0.9rem;
    text-decoration: none;
}

.guide-sommaire a:hover {
    color: var(--encre);
    background: color-mix(in srgb, var(--action) 9%, transparent);
}

.guide-corps {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* La barre haute est fixe : un chapitre atteint ne doit pas passer dessous. */
.guide-corps .section {
    scroll-margin-top: 88px;
}

.guide-corps p,
.guide-corps li,
.guide-corps dd {
    line-height: 1.6;
}

.guide-corps p {
    max-width: 78ch;
    margin: 0 0 10px;
}

.guide-corps code,
.guide-corps kbd {
    font-family: var(--mono);
    font-size: 0.86em;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--fond);
    overflow-wrap: anywhere;
}

.guide-corps kbd {
    border: 1px solid var(--trait);
    border-bottom-width: 2px;
}

.guide-corps .extrait-config {
    user-select: text;
    white-space: pre;
}

.guide-chapeau {
    font-size: 1.02rem;
}

.guide-h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 26px 0 12px;
    padding-top: 18px;
    border-top: 1px solid var(--trait);
}

.section-corps > .guide-h3:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.bouton-cite {
    padding: 1px 7px;
    border: 1px solid color-mix(in srgb, var(--action) 45%, var(--trait));
    border-radius: 6px;
    background: color-mix(in srgb, var(--action) 8%, var(--surface));
    color: var(--encre);
    font-size: 0.86em;
    font-weight: 600;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.bouton-cite.icone {
    display: inline-flex;
    align-items: center;
    padding: 2px 4px;
}

.chemin {
    font-weight: 600;
    color: var(--encre);
}

.guide-boutons,
.guide-mots {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 12px 22px;
    margin: 0 0 8px;
}

.guide-boutons dt,
.guide-mots dt {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    line-height: 1.6;
}

.guide-mots dt {
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.guide-boutons dd,
.guide-mots dd {
    margin: 0;
    min-width: 0;
}

.guide-boutons dd .guide-liste {
    margin: 6px 0;
}

.guide-liste {
    margin: 0 0 10px;
    padding-left: 20px;
}

.guide-liste li + li {
    margin-top: 4px;
}

/* Les etapes se numerotent sur une plaque de rune. */
.guide-etapes {
    list-style: none;
    counter-reset: etape;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 20px;
}

.guide-etapes > li {
    counter-increment: etape;
    position: relative;
    padding-left: 48px;
}

.guide-etapes > li::before {
    content: counter(etape);
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 2px solid color-mix(in srgb, var(--portail) 60%, transparent);
    border-radius: 3px;
    background: color-mix(in srgb, var(--portail) 12%, transparent);
    color: var(--portail);
    font-family: var(--mono);
    font-weight: 600;
}

.guide-etapes h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 3px 0 6px;
}

.guide-astuce {
    padding: 10px 14px;
    border-left: 3px solid var(--portail);
    border-radius: 0 var(--rayon) var(--rayon) 0;
    background: color-mix(in srgb, var(--portail) 8%, transparent);
}

.guide-runes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px 18px;
}

.guide-runes li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.guide-runes li > span:last-child {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.guide-tableau {
    overflow-x: auto;
}

.guide-tableau table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.guide-tableau th {
    text-align: left;
    font-weight: 600;
    color: var(--encre-douce);
    padding: 0 14px 8px 0;
    border-bottom: 1px solid var(--trait);
}

.guide-tableau td {
    padding: 9px 14px 9px 0;
    border-bottom: 1px solid var(--trait);
    vertical-align: top;
    line-height: 1.5;
}

.guide-tableau tr:last-child td {
    border-bottom: 0;
}

.guide-tableau td code {
    white-space: nowrap;
}

.guide-pannes {
    margin: 0;
}

.guide-pannes dt {
    font-weight: 600;
    margin-top: 16px;
}

.guide-pannes dt:first-child {
    margin-top: 0;
}

.guide-pannes dd {
    margin: 3px 0 0;
    color: var(--encre-douce);
}

@media (max-width: 1100px) {
    .guide { grid-template-columns: minmax(0, 1fr); }
    .guide-sommaire { position: static; max-height: none; overflow: visible; }
    .guide-sommaire ol { display: flex; flex-wrap: wrap; gap: 6px; }
    .guide-sommaire a { border: 1px solid var(--trait); padding: 3px 10px; font-size: 0.85rem; }
}

@media (max-width: 700px) {
    .guide-boutons,
    .guide-mots { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .guide-boutons dd,
    .guide-mots dd { margin-bottom: 12px; }
    .guide-etapes > li { padding-left: 42px; }
}

/* ---------------- Douane ---------------- */

.choix-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0 16px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.edition-douane .choix-serveurs li {
    grid-template-columns: minmax(0, 1fr);
}

.etat-douane {
    margin: 0 0 12px;
}

.colis-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-bottom: 8px;
}

.colis-joueur {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.etat-colis {
    font-weight: 600;
}

.etat-colis-remis { color: var(--succes); }
.etat-colis-en_remise { color: var(--portail); }
.etat-colis-bloque { color: var(--danger); }

.tableau-colis td {
    vertical-align: middle;
}

/* Sur un telephone, l'etat compte plus que la taille et la date. */
@media (max-width: 700px) {
    .tableau-colis th:nth-child(3),
    .tableau-colis td:nth-child(3),
    .tableau-colis th:nth-child(5),
    .tableau-colis td:nth-child(5) { display: none; }
}

.colis-entete .filtre-compact {
    max-width: 220px;
}

.defilement-colis {
    overflow-x: auto;
}

.tableau-colis .ligne-confirmation td {
    padding-top: 4px;
    padding-bottom: 12px;
}

.tableau-colis .ligne-confirmation .confirmation {
    max-width: 640px;
}

/* ---------- adresses de connexion ---------- */

/* Sous le nom d'un zaap, dans la liste des zaaps d'un serveur. */
.adresses-du-zaap {
    display: block;
    font-family: var(--mono);
    font-size: 0.78em;
    color: var(--encre-douce);
    overflow-wrap: anywhere;
}

.liste-adresses .adresse,
.adresses-vues .adresse {
    font-size: 0.9em;
    overflow-wrap: anywhere;
}

.adresse-zaap-etat {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
}

.etat-adresse {
    font-size: 0.85rem;
}

.etat-adresse.marche {
    color: var(--succes);
    font-weight: 600;
}

.etat-adresse.attente {
    color: var(--encre-douce);
}

.adresses-verifications {
    margin: 8px 0 12px;
    padding-left: 20px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.adresses-verifications li + li {
    margin-top: 4px;
}

.adresse-nouvelle {
    margin-top: 14px;
}

.lignes-proxy .extrait-config {
    user-select: all;
}

.nom-dans-le-proxy {
    margin-top: 14px;
}

/* --- Effets des zaaps et tourbillon ------------------------------------- */
.edition-effets .exemple {
    padding: 10px 14px;
    border-left: 3px solid var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    margin: 0 0 8px;
}

.reglages-tourbillon {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 24px;
    align-items: start;
    margin: 8px 0;
}

@media (max-width: 900px) {
    .reglages-tourbillon {
        grid-template-columns: minmax(0, 1fr);
    }
}

.reglages-tourbillon .champs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.reglages-tourbillon .curseur {
    padding: 0 6px;
}

.apercu-tourbillon {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.apercu-tourbillon canvas {
    width: 100%;
    max-width: 504px;
    height: auto;
    image-rendering: pixelated;
    border-radius: 4px;
    border: 1px solid var(--mud-palette-lines-default);
}

.pastille {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border-radius: 2px;
    background: var(--teinte);
    vertical-align: -1px;
}

.couleur-libre {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 0.875rem;
}

.couleur-libre input[type="color"] {
    width: 44px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--mud-palette-lines-default);
    background: none;
    cursor: pointer;
}

.relecture-reglages {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

/* ---------- les runes du quotidien ----------
 * Generees depuis l'alphabet des runes (Apparences.Runes) : la veille devant
 * une liste vide, le trident au milieu d'un separateur. Dessinees en masque,
 * elles prennent la couleur du texte, en clair comme en sombre. */
:root {
    --rune-veille: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h1v1h-1zM2 0h1v1h-1zM0 1h1v1h-1zM0 2h1v1h-1zM0 3h1v1h-1zM1 4h1v1h-1zM2 4h1v1h-1z'/%3E%3C/svg%3E");
    --rune-trident: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h1v1h-1zM3 0h1v1h-1zM4 0h1v1h-1zM2 1h1v1h-1zM0 2h1v1h-1zM1 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM2 3h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1z'/%3E%3C/svg%3E");
}

.vide:not(.lecture)::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    vertical-align: -1px;
    background: currentColor;
    opacity: 0.55;
    -webkit-mask: var(--rune-veille) center / contain no-repeat;
    mask: var(--rune-veille) center / contain no-repeat;
}

/* Le trait au-dessus des actions secondaires porte un trident en son milieu. */
.actions-secondaires {
    position: relative;
}

.actions-secondaires::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 11px;
    height: 11px;
    margin-left: -5px;
    background: var(--encre-douce);
    box-shadow: 0 0 0 4px var(--surface);
    -webkit-mask: var(--rune-trident) center / contain no-repeat;
    mask: var(--rune-trident) center / contain no-repeat;
}

.colonne-laterale .actions-secondaires::before {
    box-shadow: 0 0 0 4px var(--fond);
}

/* Une rune sur un bouton scintille quand on le survole, comme celles du zaap. */
.icone-rune {
    transform-origin: 12px 12px;
}

@media (prefers-reduced-motion: no-preference) {
    .mud-button-root:hover .icone-rune,
    .mud-button-root:focus-visible .icone-rune {
        animation: icone-rune-scintille 0.9s steps(3, end) 1;
        filter: drop-shadow(0 0 2px currentColor);
    }
}

@keyframes icone-rune-scintille {
    0% { opacity: 0.35; }
    40% { opacity: 1; }
    70% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* La garde devant une confirmation : ce qui suit ne se defait pas. */
.confirmation .question .rune {
    margin-right: 8px;
    vertical-align: -2px;
}

/* Ce que les administrateurs disent au public, sous le titre d'une fiche. */
.description-publique {
    margin: -8px 0 20px;
    max-width: 75ch;
    white-space: pre-line;
    font-family: var(--titre);
    font-size: 1.05rem;
    font-style: italic;
    color: var(--encre-douce);
}