.scroll-container {
    overflow-y: auto; /* enables vertical scroll if needed */
    max-height: calc(100vh - 150px);
}

.stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

.step-container {
    display: flex;
    align-items: center;
}

.step-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--mud-palette-gray-default);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: white;
}

    .step-circle.active {
        background-color: var(--mud-palette-primary); /* couleur active */
    }

.step-line {
    width: 50px;
    height: 4px;
    background-color: var(--mud-palette-gray-default);
    margin: 0 8px;
}

    .step-line.active {
        background-color: var(--mud-palette-primary); /* couleur active */
    }

.yellow-border {
    border: 2px solid var(--mud-palette-warning); /* encadrement jaune */
    border-radius: 4px; /* arrondir les coins si tu veux */ 
}
.info-border {
    border: 2px solid var(--mud-palette-info); /* encadrement jaune */
    border-radius: 4px; /* arrondir les coins si tu veux */
}

.legend-card {
    position: relative;
    display: inline-block; /* shrink-to-fit propre */
    margin-top:-16px; /* espace vertical */
}

    /* Réserve la largeur du label même s'il est en absolu */
    .legend-card::before {
        content: attr(data-label);
        display: block;
        visibility: hidden;
        white-space: nowrap;
        font-size: 0.95rem; /* = label */
        padding: 0 18px; /* = label */
    }

/* Label centré + chevauchement garanti */
.legend {
    position: absolute;
    top: 7px; /* ajuste: -10 à -16 selon police/bordure */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    padding: 0 8px;
    background: var(--mud-palette-surface);
    font-size: 0.95rem;
    color: var(--mud-palette-primary);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    white-space: nowrap;
    pointer-events: none; /* optionnel */
}

.legend-body {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    box-shadow: var(--mud-elevation-2);
    padding: 8px;
    overflow: visible; /* sécurité si thème clippe */
}

.currency-field {
    position: relative;
    display: inline-block;
    width: 100%;
}

    /* icône posée dans le champ */
    .currency-field .currency-field__icon {
        position: absolute;
        left: 12px; /* ajuste si besoin */
        top: 25px;
        transform: translateY(-0%);
        pointer-events: none;
        z-index: 1;
    }


.dz-line {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    background-color: var(--mud-palette-surface);
    padding: 10px;
    border-bottom: 1px solid var(--mud-palette-divider) !important;
}

.dz-scroll {
    max-height: 480px; /* ajuste la valeur à ton layout (px, vh, etc.) */
    overflow-y: auto;
    overflow-x: hidden;
}

.tint {
    /* Ajuste la quantité de teinte et l’aspect général */
    filter: sepia(var(--sep, 1)) saturate(var(--sat, 400%)) hue-rotate(var(--hue, 0deg)) brightness(var(--bri, 0.9)) contrast(var(--con, 1));
}