/* Le thème MudBlazor porte les couleurs et la typographie. Ce fichier ne couvre que ce qu'un
   thème ne sait pas exprimer : la marque, le fil des étapes, les pastilles d'état et la chasse fixe. */

/* --- Marque : carré noir, « E » blanc, repris de l'icône de l'application EGER. --- */
.eger-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 7px;
    background: #0A0A0A;
    color: #FFF;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1;
}

.eger-mark--inverse {
    background: #FFF;
    color: #0A0A0A;
}

.eger-wordmark {
    font-weight: 700;
    letter-spacing: .22em;
    font-size: .875rem;
}

/* --- Fil des étapes : trois pastilles reliées, l'état se lit sans légende. --- */
.eger-steps {
    display: flex;
    align-items: flex-start;
}

.eger-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    gap: .4rem;
}

/* Le trait relie une pastille à la précédente, jamais avant la première. */
.eger-step:not(:first-child)::before {
    content: "";
    position: absolute;
    top: .84rem;
    right: 50%;
    left: -50%;
    height: 1px;
    background: #E4E4E7;
}

.eger-step--done:not(:first-child)::before,
.eger-step--current:not(:first-child)::before {
    background: #0A0A0A;
}

.eger-step__dot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 1px solid #E4E4E7;
    background: #FFF;
    color: #9A9A9A;
    font-size: .8125rem;
    font-weight: 600;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.eger-step--current .eger-step__dot,
.eger-step--done .eger-step__dot {
    background: #0A0A0A;
    border-color: #0A0A0A;
    color: #FFF;
}

.eger-step__label {
    font-size: .75rem;
    letter-spacing: .02em;
    color: #9A9A9A;
    text-align: center;
}

.eger-step--current .eger-step__label,
.eger-step--done .eger-step__label {
    color: #0A0A0A;
}

/* --- Tuile de profil : le choix se lit à la bordure, pas à un aplat. --- */
.eger-tile {
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.eger-tile:hover:not(.eger-tile--off) {
    border-color: #9A9A9A;
}

.eger-tile--on {
    border-color: #0A0A0A !important;
    box-shadow: inset 0 0 0 1px #0A0A0A;
}

.eger-tile--off {
    cursor: not-allowed;
    opacity: .5;
}

/* --- Console : pastille d'état et identifiants en chasse fixe. --- */
.eger-dot {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    margin-right: .4rem;
    vertical-align: baseline;
    background: currentColor;
}

.eger-mono {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .8125rem;
}

/* --- Apparition des étapes : un glissement court, jamais une animation décorative. --- */
.eger-enter {
    animation: eger-enter .22s ease both;
}

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

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