/* /Feature/Documentation/View/DocumentationView.razor.rz.scp.css */
.doc-container[b-god1pml4zr] {
    width: 100%;
    padding: 3rem 2rem;
    box-sizing: border-box;
    overflow-y: auto;
}

.doc-content[b-god1pml4zr] {
    max-width: 720px;
    width: 100%;
}

.doc-content[b-god1pml4zr]  .doc-title {
    font-weight: 300;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.doc-content[b-god1pml4zr]  .doc-subtitle {
    color: var(--mud-palette-text-secondary);
    margin-bottom: 2rem;
}

.doc-toc[b-god1pml4zr] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 3rem;
}

.doc-toc ul[b-god1pml4zr] {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    line-height: 1.9;
}

.doc-toc ul ul[b-god1pml4zr] {
    margin: 0;
    padding-left: 1.25rem;
}

.doc-toc a[b-god1pml4zr] {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.doc-toc a:hover[b-god1pml4zr] {
    text-decoration: underline;
}

.doc-toc-chapter[b-god1pml4zr] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.doc-chapter[b-god1pml4zr] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding-bottom: 0.5rem;
    margin-bottom: 2rem;
}

.doc-section[b-god1pml4zr] {
    margin-bottom: 2.5rem;
    /* Les ancres du sommaire ne collent pas le titre au bord haut du conteneur scrollable. */
    scroll-margin-top: 1rem;
}

.doc-section-header[b-god1pml4zr] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0.5rem;
}

/* Chemin « où cliquer » : un seul bloc contenant toutes les étapes. */
.doc-path[b-god1pml4zr] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-action-default-hover);
    padding: 3px 10px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}

.doc-path[b-god1pml4zr]  .doc-path-step {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

/* « Touches » : éléments d'interface cités dans le corps de texte (`terme`).
   Injectées via MarkupString, donc hors scope CSS : ciblées en ::deep depuis un parent scopé. */
.doc-content[b-god1pml4zr]  .doc-ui {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: baseline;
    padding: 0 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
    font-size: 0.85em;
    line-height: 1.5;
    white-space: nowrap;
}

.doc-content[b-god1pml4zr]  .doc-ui-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    fill: currentColor;
}

/* Accents (touches du corps de texte uniquement, pas les étapes de chemin) :
   primaire pour les actions de création, erreur pour la suppression. */
.doc-content[b-god1pml4zr]  .doc-ui.doc-ui-primary {
    color: var(--mud-palette-primary);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.doc-content[b-god1pml4zr]  .doc-ui.doc-ui-danger {
    color: var(--mud-palette-error);
    border-color: color-mix(in srgb, var(--mud-palette-error) 45%, transparent);
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
}

/* Sortes de règles : mêmes teintes que les badges de l'app (TypeRuleCard / frule-badge). */
.doc-content[b-god1pml4zr]  .doc-ui.doc-ui-constraint {
    color: #64B5F6;
    border-color: rgba(100, 181, 246, 0.4);
    background: rgba(100, 181, 246, 0.12);
}

.doc-content[b-god1pml4zr]  .doc-ui.doc-ui-uniqueness {
    color: #A68E44;
    border-color: rgba(166, 142, 68, 0.4);
    background: rgba(166, 142, 68, 0.15);
}

.doc-content[b-god1pml4zr]  .doc-ui.doc-ui-blocker {
    color: var(--mud-palette-error);
    border-color: color-mix(in srgb, var(--mud-palette-error) 45%, transparent);
    background: var(--mud-palette-error-hover);
}

.doc-content[b-god1pml4zr]  .doc-ui.doc-ui-action {
    color: var(--mud-palette-info);
    border-color: color-mix(in srgb, var(--mud-palette-info) 45%, transparent);
    background: var(--mud-palette-info-hover);
}

.doc-path[b-god1pml4zr]  .doc-path-sep {
    padding: 0 2px;
    color: var(--mud-palette-text-disabled);
}

.doc-section[b-god1pml4zr]  p {
    color: var(--mud-palette-text-secondary);
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.doc-list[b-god1pml4zr] {
    color: var(--mud-palette-text-secondary);
    line-height: 1.7;
    margin: 0 0 0.75rem;
    padding-left: 1.5rem;
}

.doc-list li[b-god1pml4zr] {
    margin-bottom: 0.25rem;
}
/* /Feature/Home/View/Component/EmptyStateCard.razor.rz.scp.css */
.empty-state-card[b-3x8m4kbbjw] {
    background: var(--mud-palette-surface);
    border: 0.5px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.empty-state-watermark[b-3x8m4kbbjw] {
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 80px;
    opacity: 0.08;
    pointer-events: none;
}

.empty-state-body[b-3x8m4kbbjw] {
    position: relative;
}

.empty-state-title[b-3x8m4kbbjw] {
    color: var(--mud-palette-text-primary, #EBE7E0);
    font-size: 17px;
    font-weight: 400;
    margin: 0 0 6px;
}

.empty-state-subtitle[b-3x8m4kbbjw] {
    color: var(--mud-palette-text-disabled, #8a847a);
    font-size: 13px;
    font-weight: 300;
    margin: 0 0 1.5rem;
    line-height: 1.6;
}

[b-3x8m4kbbjw] .empty-state-button {
    text-transform: none;
    border-radius: 8px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
}

.empty-state-button-icon[b-3x8m4kbbjw] {
    font-size: 16px;
    margin-right: 6px;
}
/* /Feature/Home/View/Component/PopulatedStateActions.razor.rz.scp.css */
.action-section-label[b-9zgdrld7y3] {
    color: var(--mud-palette-text-disabled, #8a847a);
    font-size: 12px;
    font-weight: 400;
    margin: 0 0 1rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.action-grid[b-9zgdrld7y3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

[b-9zgdrld7y3] .action-menu-wrapper {
    display: block;
    width: 100%;
}

[b-9zgdrld7y3] .action-card {
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 1.5rem;
    border-radius: 12px;
    background: var(--mud-palette-surface);
    border: 0.5px solid var(--mud-palette-lines-default);
    color: inherit;
    font-family: inherit;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.15s, background-color 0.15s;
}

[b-9zgdrld7y3] .action-card:hover {
    border-color: var(--mud-palette-primary, #4E54B4);
    transform: translateY(-1px);
    background: var(--mud-palette-action-default-hover);
}

[b-9zgdrld7y3] .action-card .mud-button-label {
    display: block;
    width: 100%;
}


.action-body[b-9zgdrld7y3] {
    position: relative;
}

[b-9zgdrld7y3] .action-icon {
    width: 28px;
    height: 28px;
    font-size: 28px;
    margin-bottom: 12px;
    color: var(--mud-palette-primary, #4E54B4);
}

.action-title[b-9zgdrld7y3] {
    color: var(--mud-palette-text-primary, #EBE7E0);
    font-size: 15px;
    font-weight: 400;
    margin: 0 0 4px;
}

.action-subtitle[b-9zgdrld7y3] {
    color: var(--mud-palette-text-disabled, #8a847a);
    font-size: 12px;
    font-weight: 300;
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .action-grid[b-9zgdrld7y3] {
        grid-template-columns: 1fr;
    }
}
/* /Feature/Home/View/HomeView.razor.rz.scp.css */
.home-container[b-n6ymmf9523] {
    width: 100%;
    padding: 3rem 2rem;
    box-sizing: border-box;
    overflow-y: auto;
}

.home-content[b-n6ymmf9523] {
    max-width: 560px;
    width: 100%;
}

.home-date[b-n6ymmf9523] {
    color: var(--mud-palette-text-disabled, #8a847a);
    font-size: 13px;
    margin: 0 0 8px;
    letter-spacing: 0.3px;
}

.home-greeting[b-n6ymmf9523] {
    color: var(--mud-palette-text-primary, #EBE7E0);
    font-size: 32px;
    font-weight: 300;
    margin: 0 0 12px;
    letter-spacing: -0.5px;
}

.home-wave[b-n6ymmf9523] {
    display: inline-block;
    transform-origin: 70% 70%;
    animation: home-wave-b-n6ymmf9523 2.5s ease-in-out 0.4s 1 forwards;
}

@keyframes home-wave-b-n6ymmf9523 {
    0%   { transform: rotate(0deg); }
    15%  { transform: rotate(14deg); }
    30%  { transform: rotate(-8deg); }
    45%  { transform: rotate(14deg); }
    60%  { transform: rotate(-4deg); }
    75%  { transform: rotate(10deg); }
    100% { transform: rotate(-8deg); }
}

.home-quote[b-n6ymmf9523] {
    color: var(--mud-palette-text-secondary, #b8b1a4);
    font-size: 15px;
    font-weight: 300;
    margin: 0 0 3rem;
    line-height: 1.6;
}

.home-skeleton[b-n6ymmf9523] {
    height: 180px;
    border-radius: 12px;
    background: linear-gradient(90deg,
        var(--mud-palette-action-default-hover) 25%,
        color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent) 50%,
        var(--mud-palette-action-default-hover) 75%);
    background-size: 200% 100%;
    animation: home-skeleton-loading-b-n6ymmf9523 1.5s ease-in-out infinite;
}

@keyframes home-skeleton-loading-b-n6ymmf9523 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* /Feature/Instance/View/Field/ImageFieldValueView.razor.rz.scp.css */
/* Vignette cliquable (image non sensible) : cadre fixe 84px + overlay loupe au survol. */
.ru-thumb[b-hqzmxa7lpu] {
    position: relative;
    width: 84px;
    height: 84px;
    overflow: hidden;
    cursor: pointer;
}

.ru-thumb-overlay[b-hqzmxa7lpu] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.ru-thumb:hover .ru-thumb-overlay[b-hqzmxa7lpu],
.ru-thumb:focus-visible .ru-thumb-overlay[b-hqzmxa7lpu] {
    opacity: 1;
}
/* /Feature/Type/RelationType/View/RelationCardinalityEditor.razor.rz.scp.css */
/* RelationCardinalityEditor — styles isolés (tokens du design handoff). Les tokens de texte/surface
   suivent la palette MudBlazor pour s'adapter au thème clair/sombre ; seules les couleurs de marque
   (primary/accent) restent fixes. */

.rce[b-9geu049z2l] {
    /* Les phrases sont des <p>/<span> bruts (pas des MudText) : on hérite explicitement la police Inter
       du thème, sinon elles retombent sur la police par défaut du navigateur. */
    font-family: var(--mud-typography-default-family, "Inter", system-ui, -apple-system, "Segoe UI", "Roboto", sans-serif);

    --rce-text: var(--mud-palette-text-primary);
    --rce-text-dim: var(--mud-palette-text-secondary);
    --rce-text-faint: var(--mud-palette-text-disabled);
    --rce-primary: #445CA6;
    --rce-accent: #A68E44;
    --rce-line: var(--mud-palette-lines-default);
    --rce-surface: var(--mud-palette-surface);
}

.card-label[b-9geu049z2l] {
    font-size: 12px;
    color: var(--rce-text-dim);
    margin: 8px 0 12px;
}

.sentences[b-9geu049z2l] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sentence[b-9geu049z2l] {
    margin: 0;
    font-size: 17px;
    line-height: 1.85;
    letter-spacing: -0.005em;
    color: var(--rce-text);
}

/* verbe « doit » (obligatoire) */
.verb-must[b-9geu049z2l] {
    color: var(--rce-accent);
    font-weight: 600;
}

/* groupe de référence (sujet/complément) survolable → pont vers la colonne DE/VERS */
.labels[b-9geu049z2l] {
    border-radius: 7px;
    padding: 1px 3px;
    margin: -1px -3px;
    transition: background .15s;
}

.labels.bridge[b-9geu049z2l] {
    cursor: pointer;
}

.labels.bridge:hover[b-9geu049z2l] {
    background: var(--mud-palette-action-default-hover);
}

/* nom de type concret (couleur posée en inline-style, éclaircie) */
.tname[b-9geu049z2l] {
    font-weight: 600;
    white-space: nowrap;
}

/* séparateur de liste « , » / « ou » */
.tsep[b-9geu049z2l] {
    color: var(--rce-text-faint);
}

/* joker (côté vide) — atténué (couleur du design), sans italique */
.joker[b-9geu049z2l] {
    color: var(--rce-text-dim);
}

/* compteur du résumé */
.count-n[b-9geu049z2l] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* grappe de pastilles couleur (résumé Counter) */
.cluster[b-9geu049z2l] {
    display: inline-flex;
    vertical-align: -1px;
    margin-left: 5px;
}

.dot[b-9geu049z2l] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    vertical-align: 0.04em;
    box-shadow: 0 0 0 1.5px var(--rce-surface);
}

.cluster .dot[b-9geu049z2l] {
    margin-left: -4px;
}

.cluster .dot:first-child[b-9geu049z2l] {
    margin-left: 0;
}

/* emplacement inline des pastilles (MudToggleGroup) dans le flux de la phrase : verbe « peut / doit »
   et multiplicité « un seul / plusieurs ». Sans inline-flex, le MudToggleGroup reprend sa largeur
   pleine par défaut et casse le flux de la phrase. */
.mult-slot[b-9geu049z2l],
.verb-slot[b-9geu049z2l] {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin: 0 6px;
}

@media (max-width: 720px) {
    .sentence[b-9geu049z2l] {
        font-size: 15.5px;
    }
}
/* /View/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-ll0htf1z95] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-ll0htf1z95] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-ll0htf1z95] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-ll0htf1z95] {
    font-size: 1.1rem;
}

.bi[b-ll0htf1z95] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-ll0htf1z95] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-ll0htf1z95] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-ll0htf1z95] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-ll0htf1z95] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-ll0htf1z95] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-ll0htf1z95] {
        padding-bottom: 1rem;
    }

    .nav-item[b-ll0htf1z95]  .nav-link {
        color: var(--mud-palette-text-primary);
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-ll0htf1z95]  a.active {
    background-color: var(--mud-palette-action-selected);
    color: var(--mud-palette-primary);
}

.nav-item[b-ll0htf1z95]  .nav-link:hover {
    background-color: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.nav-scrollable[b-ll0htf1z95] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-ll0htf1z95] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-ll0htf1z95] {
        display: none;
    }

    .nav-scrollable[b-ll0htf1z95] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /View/ReconnectModal.razor.rz.scp.css */
/* RadioUtility — ReconnectModal styles (palette login + signal radio SVG, taille fixe).
   Note : variables CSS sur #components-reconnect-modal et non :root, car en scoped CSS
   Blazor n'ajoute pas l'attribut [b-...] à <html>. */

.components-reconnect-first-attempt-visible[b-a7d15ig5ob],
.components-reconnect-repeated-attempt-visible[b-a7d15ig5ob],
.components-reconnect-failed-visible[b-a7d15ig5ob],
.components-pause-visible[b-a7d15ig5ob],
.components-resume-failed-visible[b-a7d15ig5ob] {
    display: none;
}

/* Le framework accumule les classes (show + retrying + failed), on désambigüise avec :not().
   Priorité : resume-failed > paused > failed > (retrying superpose son countdown au titre initial) > show. */
#components-reconnect-modal.components-reconnect-show:not(.components-reconnect-failed):not(.components-reconnect-paused):not(.components-reconnect-resume-failed) .components-reconnect-first-attempt-visible[b-a7d15ig5ob],
#components-reconnect-modal.components-reconnect-retrying:not(.components-reconnect-failed):not(.components-reconnect-paused):not(.components-reconnect-resume-failed) .components-reconnect-repeated-attempt-visible[b-a7d15ig5ob],
#components-reconnect-modal.components-reconnect-failed:not(.components-reconnect-paused):not(.components-reconnect-resume-failed) .components-reconnect-failed-visible[b-a7d15ig5ob],
#components-reconnect-modal.components-reconnect-paused:not(.components-reconnect-resume-failed) .components-pause-visible[b-a7d15ig5ob],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-a7d15ig5ob] {
    display: block;
}

/* --- Overlay ---
   Le <dialog> est ouvert en show() (non-modal) : showModal() le placerait dans le top layer du
   navigateur, au-dessus de tout z-index possible — y compris le chat Crisp, qui doit rester
   accessible pendant une déconnexion (sa connexion est indépendante du circuit Blazor). Le dialog
   fait donc lui-même office d'overlay plein écran (l'équivalent du ::backdrop, qui n'existe qu'en
   modal), et le chat Crisp (z-index ~1 000 000 par défaut) passe naturellement devant. */
#components-reconnect-modal[b-a7d15ig5ob] {
    /* Adossé aux tokens MudBlazor pour suivre le thème clair/sombre : fond ET texte viennent
       ainsi toujours de la même palette, donc restent lisibles ensemble. Les valeurs sombres
       d'origine servent de fallback, car ce modal peut s'afficher avant que MudThemeProvider
       n'ait injecté ses variables (perte de connexion au tout premier chargement). */
    --ru-rm-bg: var(--mud-palette-surface, #262624);
    --ru-rm-text: var(--mud-palette-text-primary, #FFFFFF);
    --ru-rm-text-muted: var(--mud-palette-text-secondary, #B8B5B1);
    --ru-rm-brand: var(--mud-palette-primary, #445CA6);
    --ru-rm-brand-hover: var(--mud-palette-secondary, #5570BD);
    --ru-rm-danger: var(--mud-palette-error, #D14B4B);
    --ru-rm-warning: var(--mud-palette-warning, #C89B3A);

    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: none;
    /* !important requis : MudBlazor.min.css pose `#components-reconnect-modal { z-index: 9999
       !important; background-color: var(--mud-palette-background) !important; }` — un fond beige
       OPAQUE qui, depuis que le dialog est l'overlay plein écran, masquait toute l'app derrière.
       Nos déclarations !important gagnent par spécificité (l'attribut de scope [b-...] s'ajoute). */
    z-index: 10000 !important;
    background: rgba(15, 13, 11, 0.55) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--ru-rm-text);
    animation: backdropFadeIn-b-a7d15ig5ob 0.3s ease-out;
    outline: none;
}

/* dialog[open] vaut display: block côté UA — on centre la carte en flex. */
#components-reconnect-modal[open][b-a7d15ig5ob] {
    display: flex;
    align-items: center;
    justify-content: center;
}

#components-reconnect-modal:focus[b-a7d15ig5ob],
#components-reconnect-modal:focus-visible[b-a7d15ig5ob] { outline: none; }

/* --- Carte (taille fixe pour éviter les sauts entre états) --- */
.components-reconnect-container[b-a7d15ig5ob] {
    width: 380px;
    min-height: 340px;
    box-sizing: border-box;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--ru-rm-text);
    border: 1px solid var(--mud-palette-lines-default, rgba(255, 255, 255, 0.06));
    border-radius: 16px;
    background: var(--ru-rm-bg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.35);
    animation: modalSlideIn-b-a7d15ig5ob 0.3s ease-out;
}

/* --- Signal radio (SVG) ---
   3 arcs concentriques + 1 point source.
   Les arcs pulsent en cascade pour évoquer une onde émise. */
.ru-reconnect__visual[b-a7d15ig5ob] {
    width: 120px;
    height: 96px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ru-reconnect__signal[b-a7d15ig5ob] {
    width: 100%;
    height: 100%;
}

.ru-signal__dot[b-a7d15ig5ob] {
    fill: var(--ru-rm-brand);
}

.ru-signal__arc[b-a7d15ig5ob] {
    fill: none;
    stroke: var(--ru-rm-brand);
    stroke-width: 4;
    stroke-linecap: round;
    transform-origin: 50px 62px;
    animation: ru-signal-pulse-b-a7d15ig5ob 1.8s ease-out infinite;
}

.ru-signal__arc-1[b-a7d15ig5ob] { animation-delay: 0s;    }
.ru-signal__arc-2[b-a7d15ig5ob] { animation-delay: 0.25s; }
.ru-signal__arc-3[b-a7d15ig5ob] { animation-delay: 0.50s; }

@keyframes ru-signal-pulse-b-a7d15ig5ob {
    0%   { opacity: 0;    transform: scale(0.6); }
    35%  { opacity: 0.95; }
    100% { opacity: 0;    transform: scale(1.1); }
}

/* Variations selon l'état du framework Blazor */
#components-reconnect-modal.components-reconnect-failed .ru-signal__dot[b-a7d15ig5ob],
#components-reconnect-modal.components-reconnect-resume-failed .ru-signal__dot[b-a7d15ig5ob] {
    fill: var(--ru-rm-danger);
}
#components-reconnect-modal.components-reconnect-failed .ru-signal__arc[b-a7d15ig5ob],
#components-reconnect-modal.components-reconnect-resume-failed .ru-signal__arc[b-a7d15ig5ob] {
    stroke: var(--ru-rm-danger);
    animation: none;
    opacity: 0.55;
}

#components-reconnect-modal.components-reconnect-paused .ru-signal__dot[b-a7d15ig5ob] {
    fill: var(--ru-rm-warning);
}
#components-reconnect-modal.components-reconnect-paused .ru-signal__arc[b-a7d15ig5ob] {
    stroke: var(--ru-rm-warning);
    animation: none;
    opacity: 0.55;
}

/* --- Typo --- */
.components-reconnect-container p[b-a7d15ig5ob] {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ru-rm-text-muted);
}

p.components-reconnect-first-attempt-visible[b-a7d15ig5ob],
p.components-reconnect-failed-visible[b-a7d15ig5ob],
p.components-pause-visible[b-a7d15ig5ob],
p.components-resume-failed-visible[b-a7d15ig5ob] {
    font-size: 17px;
    font-weight: 500;
    color: var(--ru-rm-text);
    line-height: 1.5;
}

/* Sous-texte explicatif (sous le titre) — typo plus petite et muted. */
p.reconnect-hint[b-a7d15ig5ob] {
    font-size: 13.5px;
    font-weight: 400;
    color: var(--ru-rm-text-muted);
    line-height: 1.55;
    margin-top: -2px;
    max-width: 28ch;
}

#components-seconds-to-next-attempt[b-a7d15ig5ob] {
    display: inline-block;
    min-width: 22px;
    padding: 0 4px;
    font-weight: 600;
    color: var(--ru-rm-brand-hover);
    font-variant-numeric: tabular-nums;
}

/* --- Boutons --- */
#components-reconnect-button[b-a7d15ig5ob],
#components-resume-button[b-a7d15ig5ob] {
    margin-top: 20px;
    padding: 12px 28px;
    background: var(--ru-rm-brand);
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

#components-reconnect-button:hover[b-a7d15ig5ob],
#components-resume-button:hover[b-a7d15ig5ob] { background: var(--ru-rm-brand-hover); }

#components-reconnect-button:active[b-a7d15ig5ob],
#components-resume-button:active[b-a7d15ig5ob] { transform: scale(0.98); }

#components-reconnect-button:focus-visible[b-a7d15ig5ob],
#components-resume-button:focus-visible[b-a7d15ig5ob] {
    outline: 2px solid var(--ru-rm-brand-hover);
    outline-offset: 2px;
}

button[b-a7d15ig5ob]::before,
button[b-a7d15ig5ob]::after { content: none !important; }

/* --- Bouton d'aide (Crisp) ---
   Lien discret sous le contenu de la carte, visible dans tous les états. Les !important contrent
   `#components-reconnect-modal button { margin: 40px auto !important; ... }` de MudBlazor.min.css
   (notre sélecteur plus spécifique gagne à !important égal). */
#components-reconnect-modal #components-reconnect-help[b-a7d15ig5ob] {
    display: block;
    margin: 16px auto 0 !important;
    padding: 6px 12px;
    background: none;
    border: none;
    color: var(--ru-rm-text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.15s ease;
}

#components-reconnect-modal #components-reconnect-help:hover[b-a7d15ig5ob] {
    color: var(--ru-rm-text);
    background: none;
}

/* --- Animations --- */
@keyframes modalSlideIn-b-a7d15ig5ob {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

@keyframes backdropFadeIn-b-a7d15ig5ob {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal[b-a7d15ig5ob],
    .components-reconnect-container[b-a7d15ig5ob] { animation: none; }
    .ru-signal__arc[b-a7d15ig5ob] { animation: none; opacity: 0.7; }
}

@media (max-width: 480px) {
    .components-reconnect-container[b-a7d15ig5ob] {
        width: calc(100vw - 40px);
        max-width: 380px;
        padding: 28px 24px;
    }
}