/* ============================== */
/* Caid CSS Variables */
:root {
    --by-primary: #0a4251;
    --by-secondary: #d23400;
    --by-background: #f7f7f7;
    --by-border-radius-md: 5em;
    --by-border-radius-sm: .75rem;
}


/* ============================== */
/* Radzen CSS Variables Overrides */
:root, .rz-standard {
    /* TEXTS */
    --rz-text-font-family: Roboto, sans-serif;
    /* COLORS */
    --rz-primary: var(--by-primary);
    --rz-primary-light: #13809d;
    --rz-primary-lighter: color-mix(in srgb, var(--by-primary), transparent 84%);
    --rz-primary-dark: #03181d;
    --rz-primary-darker: #000000;
    --rz-on-primary: var(--rz-white);
    --rz-on-primary-light: var(--rz-white);
    --rz-on-primary-lighter: var(--by-primary);
    --rz-on-primary-dark: var(--rz-white);
    --rz-on-primary-darker: var(--rz-white);
    --rz-secondary: var(--by-secondary);
    --rz-secondary-light: #ff3f00;
    --rz-secondary-lighter: color-mix(in srgb, var(--by-secondary), transparent 84%);
    --rz-secondary-dark: #9f2700;
    --rz-secondary-darker: #6c1a00;
    --rz-on-secondary: var(--rz-white);
    --rz-on-secondary-light: var(--rz-white);
    --rz-on-secondary-lighter: var(--by-secondary);
    --rz-on-secondary-dark: var(--rz-white);
    --rz-on-secondary-darker: var(--rz-white);
    --rz-on-warning-lighter: #8d5f07;
    --rz-link-color: var(--by-primary);
    --rz-link-hover-color: var(--by-primary);
    --rz-text-h1-color: var(--by-primary);
    --rz-text-h2-color: var(--by-primary);
    --rz-text-h3-color: var(--by-primary);
    --rz-text-h4-color: var(--by-primary);
    --rz-text-h5-color: var(--by-primary);
    --rz-text-h6-color: var(--by-primary);
    --rz-body-background-color: var(--by-background);
    /* CARDS */
    --rz-card-border-radius: 1rem;
    --rz-card-padding: 1.5rem;
    /* TABS */
    --rz-tabs-border-radius: 0;
    --rz-tabs-padding: .5rem;
    /* BUTTONS */
    --rz-button-border-radius: var(--by-border-radius-md);
    --rz-selectbar-border-radius: var(--by-border-radius-md);
    --rz-link-hover-text-decoration: none;
    /* DIALOGS */
    --rz-dialog-border-radius: 1rem;
    /* TABLES */
    --rz-grid-border-radius: var(--by-border-radius-sm);
    /* FIELDSETS */
    --rz-fieldset-padding: .5rem;
}

/* ============================== */
/* Styles for basic HTML tags */
html {
    font-family: var(--rz-text-font-family);
}

body {
    background: none;
    background-color: var(--rz-body-background-color);
}

h1:focus {
    outline: none;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0 !important;
}

ul {
    margin: 0;
    margin-top: 0.5rem;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--rz-base);
    width: 100%;
    margin: 0;
}

#app {
    width: 100vw;
    height: 100vh;
    background-color: var(--rz-body-background-color);
}


/* ============================== */
/* Styles for Blazor loading and debug error banner */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: var(--by-primary);
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--by-secondary);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }


/* ============================== */
/* Utility classes */

/* Required input's label */
.required label::after {
    content: " (requis)";
    color: var(--rz-text-secondary-color);
    font-size: 0.75rem;
}


/* ============================== */
/* Styles shared between features */

/* Styling app title in the topbar */
.by-app-title {
    font-size: 24px;
    color: var(--by-primary);
}

/* Center the children */
.by-center {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The user's profile picture */
.by-avatar {
    border-radius: 100%;
    background-color: var(--rz-secondary-lighter);
    color: var(--rz-on-secondary-lighter);
    height: 36px;
    width: 36px;
    text-align: center;
    align-content: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The Microsoft login button */
.by-sso-button .rz-button-text {
    margin-top: 4px;
    margin-left: 8px;
}


/* ============================== */
/* Radzen classes overrides */

/* Use filled Material icons */
.rzi {
    font-variation-settings: 'FILL' 1;
}

/* Fix buttons font size and border radius */
.rz-button-xs.rz-button-icon-only,
.rz-button-sm.rz-button-icon-only {
    border-radius: 4px !important;
}

.rz-button-icon-only:not(.rz-splitbutton-menubutton) {
    border-radius: var(--rz-grid-border-radius);
}

.rz-button-lg {
    font-size: 1.75rem;
}

/* Set the position of notifications on the bottom-right corner */
.rz-notification {
    inset-block-start: unset;
    inset-block-end: 0;
}

/* Set the numeric inputs text on the right and imrpove padding when there are no arrows */
.rz-numeric-input {
    text-align: right;
}

    .rz-numeric-input:last-child {
        padding-inline: .5rem !important;
    }

/* Improve the fieldsets appearence when collapsed */
.rz-fieldset-legend-text {
    font-weight: bold;
    text-transform: uppercase;
    color: var(--rz-primary);
}

.rz-fieldset {
    min-height: 36px;
    border-color: var(--rz-primary);
}

    .rz-fieldset .rz-fieldset-content-wrapper {
        height: 100%;
    }

    .rz-fieldset .rz-fieldset-content {
        padding-top: .75rem;
    }

/* Restore the margin bottom of confirm messages (p elements don't have margin anymore) */
.rz-dialog-confirm-message {
    margin-block-end: 1.5rem !important;
}

/* Hide overflowing data from cards */
.rz-card {
    overflow: hidden;
}

/* Set all dropdowns with a pointer similar to buttons */
.rz-dropdown,
.rz-dropdown-item {
    cursor: pointer !important;
}

/* Make dialogs content wrappers take as much space as possible */
.rz-dialog-content {
    height: 100%;
    flex-grow: 1;
}

/* Fixed tooltips position */
.rz-tooltip {
    position: fixed !important;
}

/* Differientiate values from label by putting the value in bold */
.rz-form-field-content input,
.rz-form-field-content .rz-inputtext {
    font-weight: bold !important;
}

/* Gray background on disabled form fields */
.rz-form-field.rz-state-disabled .rz-form-field-content,
.rz-form-field.rz-state-disabled :not(.rz-button).rz-state-disabled,
.rz-form-field.rz-state-disabled :not(.rz-button):disabled {
    background-color: var(--rz-input-disabled-background-color);
}

/* Make form field helper text show messages in a flex column */
.rz-form-field-helper {
    display: flex;
    flex-direction: column;
}

    .rz-form-field-helper .rz-message {
        padding-top: 4px;
    }

.rz-messages-info {
    display: inline-block;
    color: var(--rz-text-disabled-color);
    font-size: var(--rz-form-error-font-size);
    padding: var(--rz-validator-text-padding);
}

/* Make DataGrid loading indicator and backdrop visible */
.rz-datatable-loading, .rz-datatable-loading-content {
    z-index: 4;
}

/* Make DataGrid header take all the width for SpaceBetween */
.rz-data-grid .rz-custom-header {
    width: 100%;
}

/* Make the user profile menu component generic */
ul.rz-profile-menu {
    border-inline-start: unset;
    background-color: transparent;
    z-index: unset;
    padding-inline: 0;
    margin-block: -0.625rem;
}

    ul.rz-profile-menu .rz-navigation-item-icon-children {
        margin-left: .25rem;
    }

    ul.rz-profile-menu .item-text {
        margin-right: .25rem;
    }

    ul.rz-profile-menu > li.rz-navigation-item > .rz-navigation-item-wrapper {
        cursor: pointer;
        padding: 8px;
        border-radius: var(--rz-button-border-radius);
    }

    /* Menu text variant */
    ul.rz-profile-menu.variant-text > li.rz-navigation-item > .rz-navigation-item-wrapper:hover {
        background-color: var(--rz-base-lighter);
        color: var(--rz-on-base-lighter);
    }

    /* Menu outlined variant */
    ul.rz-profile-menu.variant-outlined > li.rz-navigation-item > .rz-navigation-item-wrapper {
        border: var(--rz-input-border);
        padding: 7px;
    }

        ul.rz-profile-menu.variant-outlined > li.rz-navigation-item > .rz-navigation-item-wrapper:hover {
            border: var(--rz-input-hover-border);
        }

    /* Menu filled variant */
    ul.rz-profile-menu.variant-filled > li.rz-navigation-item > .rz-navigation-item-wrapper {
        background-color: var(--rz-primary);
        padding-inline: 16px;
    }

        ul.rz-profile-menu.variant-filled > li.rz-navigation-item > .rz-navigation-item-wrapper * {
            color: var(--rz-on-primary);
            font-weight: bold;
        }

        ul.rz-profile-menu.variant-filled > li.rz-navigation-item > .rz-navigation-item-wrapper:hover {
            text-decoration: none;
            background-image: var(--rz-button-hover-gradient);
            background-size: var(--rz-button-hover-background-size);
            box-shadow: var(--rz-button-hover-shadow);
        }


/* Allow text wrapping and add ellipsis in tables */
.rz-grid-table thead th .rz-column-title-content {
    display: inline-block;
    white-space: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rz-datatable-data td .rz-cell-data, .rz-grid-table td .rz-cell-data {
    color: var(--rz-grid-cell-color);
    font-size: var(--rz-grid-cell-font-size);
    line-height: var(--rz-grid-cell-line-height);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: wrap;
}

/* Fix icon size inside a link */
.rz-link .rzi {
    font-size: var(--rz-icon-size);
}


/* ============================== */
/* Radzen classes overrides */
/* Apps.razor.css */
.by-app-link * {
    text-decoration: none !important;
    transition: 0.25s;
}

.by-app-card {
    min-height: 20rem;
    height: 1px; /* Set the height so that the children can use "height: 100%;" */
    border: 1px solid var(--rz-primary);
}

    .by-app-card h3 {
        color: var(--rz-secondary);
    }

.by-app-link:hover .by-app-card {
    box-shadow: var(--rz-shadow-8);
    transform: translateY(-0.5rem);
}

.by-app-action {
    transform: translateX(-1rem);
}

.by-app-link:hover .by-app-action {
    transform: translateX(0);
}

.by-app-action * {
    color: var(--rz-primary);
    font-weight: bold;
}

.by-app-logo-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.by-app-logo {
    max-height: 3rem;
    max-width: 100%;
}

img.logo {
    height: 3rem;
}



/* La barre de navigation administrateur */
#adminNav {
    width: fit-content;
    top: 0;
    padding: 0px 9px 0px 9px;
    justify-self: center;
    border-radius: var(--rz-card-border-radius);
}

/* Le bouton permettant de revenir en haut de la page */
#backToTop {
    width: 70px;
    height: 70px;
    bottom: 20px;
    left: 100vw;
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
    #backToTop.show {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    #backToTop i {
        font-size: 3.5rem;
    }

/* Cartes "Taux de charge" */
.admin-card {
    display: flex;
    gap: 1rem;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Colle un élément. 
    /!\ : Ne pas oublier de définir une des positions (top, right, bottom, left) */
.sticky {
    position: sticky;
    z-index: 100;
}

/* Boutons "Enregistrer" et "Annuler" d'un formulaire */
.form-actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--rz-base-background-color);
}

/* Page "SimpleParameters" */
/* Empêche l'affichage de l'icône "Lien vers table des matières" */
h2 a.rz-link {
    display: none;
}

.content-container {
    display: flex;
    flex-direction: row;
    height: 100%;
    gap: 1rem;
}

.content-aside {
/*    width: 330px;*/
    max-width: 200px;
    flex-shrink: 0;
}

.content-main {
    flex-grow: 1;
}

.content-aside,
.content-main {
    height: 100%;
    overflow: auto;
    padding: 2px;
}

/* Navigation */
.nav {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: .5rem;
    gap: .5rem;
}
    .nav .nav-item {
        flex: 1 1 0;
        text-align: center;
    }
        .nav .nav-item .nav-link {
            border-radius: var(--rz-button-border-radius);
            /*    border-radius: var(--rz-card-border-radius);*/
            display: block;
            padding: 0.5rem;
            text-decoration: none;
        }

.nav-link:hover {
    color: var(--rz-on-secondary-lighter);
    background-color: var(--rz-secondary-lighter);
}
    .nav-link:hover * {
        color: var(--rz-on-secondary-lighter);
    }

.nav-link.active, .nav-link.active * {
    font-weight: bold;
    color: var(--rz-on-secondary);
    background-color: var(--rz-secondary);
}

.nav-pill {
    padding: .5rem 1rem;
    background-color: var(--by-background);
    border-radius: var(--rz-grid-border-radius);
}
    .nav-pill:hover {
        background-color: var(--rz-base-200);
    }

/* Édition d'une cellule d'un tableau */
.table-cell-edited {
    position: relative;
}
    .table-cell-edited::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        border-top: 10px solid red;
        border-left: 10px solid transparent;
    }

/* Animation pour les notifications */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Impression (déclenchée par le bouton « Imprimer » → printElement ajoute .printing-card au <body>). */
@media print {
    /* 1. Tout masquer par défaut. Générique : attrape les overlays rendus HORS de .print-area (infobulle
          « Imprimer la page », notifications, dialogues…). visibility n'affecte pas la mise en page,
          donc cela ne réintroduit aucun espace (le vide d'avant venait du position:absolute, supprimé). */
    body.printing-card * {
        visibility: hidden;
    }

    body.printing-card .print-area,
    body.printing-card .print-area * {
        visibility: visible;
    }

    /* 2. Supprimer en plus l'ESPACE occupé par la chrome volumineuse (display:none, sinon grand vide en haut). */
    body.printing-card .rz-header,      /* les 2 en-têtes (Topbar + menu admin) */
    body.printing-card .content-aside,  /* « Accès rapide » */
    body.printing-card #backToTop {     /* bouton « retour en haut » */
        display: none !important;
    }

    /* 3. Dérouler la chaîne de conteneurs à hauteur fixe / défilement interne, et repasser la carte en flux
          normal : sinon le contenu est rogné à un écran (pas de page 2) et reste positionné en absolu. */
    body.printing-card .rz-layout,
    body.printing-card .rz-body,
    body.printing-card main,
    body.printing-card .content-container,
    body.printing-card .print-area,
    body.printing-card .print-area .rz-card,
    body.printing-card .print-area .rz-card-body,
    body.printing-card #simpleParamForm {
        position: static !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* 4. Masquer les boutons (Imprimer, Enregistrer, Annuler) */
    body.printing-card .print-area button {
        display: none !important;
    }

    /* 4bis. Aplatir la carte au maximum (padding / marge / bordure / ombre / fond) pour gagner de la place à
            l'impression — même approche que la page d'accueil. « .print-area » cible la carte elle-même
            (Card Class="print-area" → .rz-card.print-area), plus son en-tête et son corps. */
    body.printing-card .print-area,
    body.printing-card .print-area .rz-card,
    body.printing-card .print-area .rz-card-header,
    body.printing-card .print-area .rz-card-body {
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* 5. Bascule écran → impression : masquer les grilles, afficher les 2 colonnes lecture seule. */
    body.printing-card .screen-only {
        display: none !important;
    }

    /* 6. 2 colonnes, chaque section restant intacte (break-inside: avoid → une section qui ne tient pas
          passe à la colonne suivante au lieu d'être coupée, divisée seulement si, seule, elle dépasse
          une colonne entière).
          NB : column-fill = balance (et NON auto). « auto » remplit bien la gauche en premier mais
          déclenche sous Chrome des PAGES BLANCHES en fin d'impression (hauteur sur-réservée). « balance »
          dimensionne les 2 colonnes au contenu et tient sur une seule page, sans ce défaut. */
    body.printing-card .print-two-col {
        display: block !important;
        column-count: 2;
        column-gap: 1.5rem;
        column-fill: balance;
    }

    body.printing-card .print-section {
        break-inside: avoid;
        margin-bottom: 0.4rem;
    }

    body.printing-card .print-section-title {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--rz-primary, #1b6ec2);
        margin: 0 0 0.15rem 0;
    }

    body.printing-card .sp-print-table tr {
        break-inside: avoid;         /* ne pas couper une seule ligne en deux */
    }

    body.printing-card .sp-print-table td {
        font-size: 0.62rem;
        padding: 1px 5px;
    }
}



/* Texte à droite du champ "Base" pour "Paramètre Simple" */
.simple-parameter-unit {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Vue d'impression « 2 colonnes » : cachée à l'écran, affichée seulement à l'impression. */
.print-two-col {
    display: none;
}

.sp-print-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.75rem;
}

    .sp-print-table td {
        border: 1px solid #999;
        padding: 4px 10px;
        font-size: 0.85rem;
        vertical-align: top;
    }

    .sp-print-table .sp-print-label {
        width: 70%;
    }

    .sp-print-table .sp-print-value {
        width: 30%;
        text-align: right;
        font-weight: 600;
        white-space: nowrap;
    }

/* Sous-lignes "Par année supplémentaire" / "Plafond" des tableaux d'indemnités */
.compensation-subrow {
    background-color: var(--rz-base-200, #f1f1f1);
    font-weight: 600;
}
    /* Seule la première sous-ligne ("Par année") porte le trait de séparation. */
    .compensation-subrow-top td {
        border-top: 2px solid var(--rz-text-disabled-color, #9e9e9e);
    }

/* ============================================================
   Page d'accueil — dossier de simulation (Home.razor)
   ============================================================ */
.home-floating-toolbar {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
    padding: 0.5rem;
    border-radius: var(--rz-card-border-radius);
    background-color: color-mix(in srgb, #d9d9d9, transparent 50%);
}

.sim-page {
    height: 100%;
    overflow: auto;
/*    padding: 1rem 0.15rem 1rem 1rem;*/
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

#simArea {
    position: relative;
    z-index: 1;
}
    #simArea .rz-card {
        overflow: visible;
    }
    #simArea .rz-alert {
        margin: 0;
    }
    #simArea .rz-fieldset-toggler {
        background-color: color-mix(in srgb, #e9eaed, transparent 50%);
        border-radius: 5px;
    }
    #simArea .rz-tabview-panels {
        border-radius: 0 var(--by-border-radius-sm) var(--by-border-radius-sm) var(--by-border-radius-sm);
    }
    /* Coins supérieurs arrondis des onglets extrêmes (1er et dernier), comme les tableaux de résultats.
       Cible le <li> ET son contenu (le lien) pour rogner aussi le fond de l'onglet. */
    #simArea .rz-tabview-nav li:first-child,
    #simArea .rz-tabview-nav li:first-child > * {
        border-top-left-radius: var(--by-border-radius-sm);
    }
    #simArea .rz-tabview-nav li:last-child,
    #simArea .rz-tabview-nav li:last-child > * {
        border-top-right-radius: var(--by-border-radius-sm);
    }
    #simArea .rz-accordion-header {
        border: 1px solid #d9d9d9;
    }
    /* Uniformise les tailles de police dans les accordéons */
    #simArea .rz-stack > .rz-text-body1 {
        font-size: inherit;
    }
    /* L'espacement vertical entre rangées vient désormais du "row-gap" de .sim-grid (voir plus bas),
       plus de la marge interne des champs : on retire donc le "margin-top" de TOUS les
       "rz-form-field-content" d'une grille → 1ʳᵉ rangée affleurante et rangées régulières. */
    #simArea .sim-grid .rz-form-field-content {
        margin-top: 0;
    }

/* Les champs dont on souhaite retirer le "margin-top" */
#assuranceDuration .rz-form-field-content,
#complementaryRetirement .rz-form-field-content,
#previousYearSalary .rz-form-field-content,
#lastGlobalSalary .rz-form-field-content {
    margin-top: 0;
}

/* Mise en page en 3 colonnes : les cartes « fieldset » se répartissent dans 3 colonnes (style « masonry »). */
.sim-fieldsets {
    column-count: 3;
    column-gap: 1rem;
}

    /* Chaque carte reste insécable et garde un espacement vertical au sein d'une colonne. */
    .sim-fieldsets > * {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        margin: 0 0 1rem;
    }

/* Repli responsive : 2 puis 1 colonne sur les écrans étroits. */
@media (max-width: 1100px) {
    .sim-fieldsets {
        column-count: 2;
    }
}

@media (max-width: 700px) {
    .sim-fieldsets {
        column-count: 1;
    }
}

/* Colonnes fixes : chaque section reste dans SA colonne. Contrairement au « masonry »
   (column-count), un changement de hauteur d'une carte (ex. radio « Salaires ») ne
   redistribue pas les autres cartes entre les colonnes — l'agencement ne bouge pas. */
.sim-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

    /* Chaque colonne empile ses cartes verticalement ; flex-wrap gère le repli 3 → 2 → 1. */
    .sim-col {
        flex: 1 1 300px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: .3rem;
    }

/* Grille des champs à l'intérieur d'une carte. */
.sim-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    /* row-gap porte désormais l'espacement vertical entre rangées (le margin-top des champs a été retiré). */
    gap: 0.75rem 1rem;
    align-items: end;
}

    .sim-grid .rz-form-field,
    .sim-grid > .sim-field {
        width: 100%;
    }

    /* Étend l'élement sur toutes les colonnes  */
    .sim-grid .sim-span-all, .sim-synthese .sim-span-all {
        grid-column: 1 / -1;
    }

/* Sous-titre bleu à l'intérieur d'une carte (ex. « Points AGIRC-ARRCO »). */
.sim-subtitle {
    margin: 0;
    grid-column: 1 / -1;
    font-weight: 600;
    font-size: var(--rz-text-body1-font-size);
    color: var(--rz-primary);
}

.sim-note {
    grid-column: 1 / -1;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

/* Bandeau de synthèse (anciennement jaune). */
.sim-synthese {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.75rem 1.25rem;
    padding: var(--rz-tabs-padding);
    background: #fafafa;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
}

    .sim-synthese .sim-readonly .label {
        display: block;
        font-size: 0.8rem;
        color: var(--rz-text-secondary-color);
    }

    .sim-synthese .sim-readonly .value {
        display: block;
        min-height: 1.6rem;
        padding: 0.25rem 0.5rem;
        background: #fff;
        border: 1px solid #aaa;
        border-radius: 4px;
        font-weight: 600;
    }


/* Tableaux de résultats (blanc, en-têtes bleu clair, coins extérieurs arrondis). */
.sim-result-table {
    width: 100%;
    /* "separate" (et non "collapse") est OBLIGATOIRE pour que border-radius s'applique à un tableau. */
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    font-size: 0.9rem;
}

    /* Bordures posées à droite + en bas seulement → une seule ligne de 1px partagée entre cellules. */
    .sim-result-table th,
    .sim-result-table td {
        border-right: 1px solid var(--rz-border-color);
        border-bottom: 1px solid var(--rz-border-color);
        padding: 6px 10px;
        text-align: right;
        vertical-align: middle;
    }

    /* Bord gauche : uniquement sur la 1ère colonne. Bord haut : uniquement sur la 1ère ligne (en-tête). */
    .sim-result-table tr > *:first-child {
        border-left: 1px solid var(--rz-border-color);
    }
    .sim-result-table thead tr:first-child > * {
        border-top: 1px solid var(--rz-border-color);
    }
    .sim-result-table thead th:first-child {
        background-color: unset;
        border-top: 1px solid #eee;
        border-left: 1px solid #eee;
    }

    /* Arrondit les 4 cellules d'angle → coins arrondis du tableau. */
    .sim-result-table thead tr:first-child > *:first-child { border-top-left-radius: var(--by-border-radius-sm); }
    .sim-result-table thead tr:first-child > *:last-child { border-top-right-radius: var(--by-border-radius-sm); }
    .sim-result-table tbody tr:last-child > *:first-child { border-bottom-left-radius: var(--by-border-radius-sm); }
    .sim-result-table tbody tr:last-child > *:last-child { border-bottom-right-radius: var(--by-border-radius-sm); }

    /* Quand un <tfoot> existe (bandeau « Taux plein SS… » d'Estimation retraite), c'est LUI la dernière ligne
       visuelle du tableau — "tbody tr:last-child" ci-dessus ne le sait pas (thead/tbody/tfoot sont 3 parents
       distincts, :last-child s'évalue par parent) : il continue d'arrondir la dernière ligne du tbody, qui se
       retrouve maintenant au MILIEU du tableau (donc sans effet visible), tandis que le vrai dernier coin
       (dans tfoot) reste carré. On annule l'arrondi du tbody et on le reporte sur le tfoot dans ce cas. */
    .sim-result-table:has(tfoot) tbody tr:last-child > *:first-child,
    .sim-result-table:has(tfoot) tbody tr:last-child > *:last-child {
        border-radius: 0;
    }
    .sim-result-table tfoot tr:last-child > *:first-child { border-bottom-left-radius: var(--by-border-radius-sm); }
    .sim-result-table tfoot tr:last-child > *:last-child { border-bottom-right-radius: var(--by-border-radius-sm); }

    .sim-result-table thead th {
        background: var(--rz-primary-lighter);
        color: var(--rz-primary-dark);
        text-align: center;
        font-weight: 600;
    }

    .sim-result-table .row-head {
        background: var(--rz-primary-lighter);
        text-align: left;
        font-weight: 600;
    }

    .sim-result-table .row-sub {
        text-align: left;
        padding-left: 1.75rem;
        font-style: italic;
        color: var(--rz-text-secondary-color);
    }

    .sim-result-table .row-total .row-head,
    .sim-result-table .row-total td {
        background: var(--rz-primary-lighter);
        font-weight: 700;
    }

    /* Colonnes vides « Estimation retraite » : complètent le tableau à 6 colonnes (scénarios futurs non encore
       calculables). Le fond suit la MÊME règle que les colonnes remplies selon la ligne (héritée des règles
       ci-dessus : violet clair pour l'en-tête / le total, blanc pour les lignes intermédiaires) — seuls
       l'en-tête et la ligne « Taux de remplacement » (.col-empty) portent en plus un encart gris indiquant
       « pas encore calculable » ; les lignes intermédiaires (.col-empty-border) restent de simples cellules
       vides, sans décor. Un trait NOIR ne sépare que deux colonnes vides adjacentes : la frontière entre la
       dernière colonne remplie et la 1ʳᵉ colonne vide (.col-last-real) est supprimée. */
    .sim-result-table .col-last-real {
        border-right: none;
    }
    .sim-result-table .col-empty,
    .sim-result-table .col-empty-border {
        border-right-color: #000;
    }
    .sim-result-table th.col-empty,
    .sim-result-table td.col-empty {
        position: relative;
        cursor: default;
    }
    .sim-result-table th.col-empty::after,
    .sim-result-table td.col-empty::after {
        content: "";
        position: absolute;
        inset: 6px;
        border: 1px solid #b0b0b0;
        border-radius: var(--by-border-radius-sm);
        background: #d9d9d9;
    }

    /* Bandeau sous le tableau « Taux plein SS / Dépassement de l'âge automatique du taux plein » (message back
       à venir, cf. RetirementEstimation.AutomaticFullRateOverrunMessage). Cellule de droite alignée à gauche
       (contrairement aux cellules de données, alignées à droite par défaut). */
    .sim-result-table .row-footer-bar td:not(.row-head) {
        text-align: left;
        font-style: italic;
        color: var(--rz-text-secondary-color);
    }

.sim-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

/* Fiche résultat pouvant recevoir un bouton « Aide » en surimpression (coin haut-droit). */
.sim-fiche {
    position: relative;
}

    /* Bouton « Aide » aligné à droite, dans le flux (au-dessus du tableau) : évite de chevaucher l'en-tête
       de la dernière colonne — quitte à décaler légèrement le contenu vers le bas. */
.sim-fiche-help {
    margin-left: auto;
    width: fit-content;
    padding: 0 .5rem;
    font-size: var(--rz-text-caption-font-size);
    display: flex;
    align-items: center;
}

/* En-tête de colonne cliquable du tableau « Estimation retraite » (ouvre le détail du scénario). */
.sim-result-table th.rdd-header {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
}

    .sim-result-table th.rdd-header:hover {
        background: color-mix(in srgb, var(--rz-primary), transparent 85%);
    }

/* Colonne « taux plein SS » de l'estimation retraite : distinguée par un fond jaune (port de la classe legacy indemniteTauxPlein). */
.sim-result-table .rate-taux-plein {
    background-color: #fff3cd;
}

/* Barre décote / taux plein / surcote (dernière ligne du tableau « Estimation retraite »). */
.sim-result-table tfoot .rate-bar {
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    color: #fff;
}

.sim-result-table tfoot .rate-decote {
    background-color: #c0392b;
}

.sim-result-table tfoot .rate-tauxplein {
    background-color: #f0ad4e;
}

.sim-result-table tfoot .rate-surcote {
    background-color: #2e7d32;
}

.sim-result-table tfoot .rate-depassement {
    background-color: #9e9e9e;
}

/* Dialogue « Détail Estimation Retraite » (RetirementDetailDialog). */
.rdd {
    max-height: 90%;
    overflow-y: auto;
}

.rdd .rdd-section {
    margin-bottom: 1rem;
}

.rdd .rdd-title {
    margin: 0 0 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary), transparent 90%);
    border-radius: 4px;
}

.rdd .rdd-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 2px 0.5rem;
    border-bottom: 1px dotted #e0e0e0;
}

.sim-placeholder {
    padding: 2rem;
    text-align: center;
    color: var(--rz-text-secondary-color);
}

/* Retraite complémentaire */
.points-field {
    margin-left: 1rem;
    width: 20%;
}


/* ============================================================
   Page « Taux de charge » (ChargeRates.razor)
   ============================================================ */
.cr-table {
    border-collapse: collapse;
    border-radius: 5px;
    margin: 0 auto 1.25rem auto;
    width: 100%;
    max-width: 900px;
    background-color: var(--rz-base-background-color, #fff);
}

    .cr-table th, .cr-table td {
        border: 1px solid var(--rz-border-color, #d9d9d9);
        padding: 6px 10px;
        text-align: center;
        vertical-align: middle;
    }

    .cr-table .cr-title {
        background: #eee;
        font-weight: 600;
        font-size: 1.05rem;
    }

    .cr-table .cr-group {
        font-weight: 600;
    }

    .cr-table .cr-col {
        font-weight: 400;
        font-size: .82rem;
        color: var(--rz-text-secondary-color, #666);
    }

.cr-pct {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}


/* ============================================================
   Dialogue société TF1 (Tf1CompanyDialog.razor)
   ============================================================ */
.tf1dlg-table { border-collapse: collapse; width: 100%; }
.tf1dlg-table th, .tf1dlg-table td { border: 1px solid var(--rz-border-color, #d9d9d9); padding: 4px 8px; text-align: center; }
.tf1dlg-table td.tf1dlg-row { text-align: left; font-weight: 600; white-space: nowrap; }


/* ============================================================
   Page « Paramétrage Sociétés TF1 » (Tf1CompanyParameters.razor)
   ============================================================ */
.tf1cfg-wrap { overflow-x: auto; }
.tf1cfg-table { border-collapse: collapse; width: 100%; background: var(--rz-base-background-color, #fff); }
.tf1cfg-table th, .tf1cfg-table td { border: 1px solid var(--rz-border-color, #d9d9d9); padding: 5px 10px; text-align: center; white-space: nowrap; }
.tf1cfg-table thead th { font-weight: 600; background: #eee; }
.tf1cfg-table td.tf1cfg-text { text-align: left; white-space: normal; }


/* ============================================================
   Dialogue solde de tout compte (SoldeDeToutCompteDialog.razor)
   ============================================================ */
.stc-table { border-collapse: collapse; width: 100%; }
.stc-table th, .stc-table td { border: 1px solid var(--rz-border-color, #d9d9d9); padding: 4px 8px; text-align: right; vertical-align: middle; }
.stc-table thead th { font-weight: 600; text-align: right; }
.stc-table td.stc-label { text-align: left; }
.stc-table td.stc-amount { white-space: nowrap; }
.stc-table tr.stc-total { font-weight: 600; background: var(--rz-base-200, #f2f2f2); }


/* ============================================================
   Fieldset vert « Régime social et fiscal » (Home.razor, onglet « Départ en retraite »)
   Variante verte du RadzenFieldset : bordure + légende + fond teintés (rappel de l'ancien Caïd).
   ============================================================ */
.sim-green-fieldset.rz-fieldset {
    border-color: #6a9a3f;
    background-color: #f2f7ea;
}
    .sim-green-fieldset .rz-fieldset-legend-text {
        color: #4e7a2f;
    }
    .sim-green-fieldset .rz-fieldset-content {
        padding-top: var(--rz-fieldset-padding);
        color: #3f5626;
    }

/* ============================================================
   Fieldset orange « Estimation impôts » (Home.razor)
   Variante orange du RadzenFieldset : bordure + légende + fond teintés (rappel de l'ancien Caïd).
   ============================================================ */
.sim-orange-fieldset.rz-fieldset {
    border-color: #9a773f;
    background-color: #f7f3ea;
}
    .sim-orange-fieldset .rz-fieldset-legend-text {
        color: #7a642f;
    }
    .sim-orange-fieldset .rz-fieldset-content {
        padding-top: var(--rz-fieldset-padding);
        color: #3f5626;
    }


/* Titre de section visible UNIQUEMENT à l'impression (nom de l'onglet / de la fiche). */
.print-only { display: none; }


/* ============================================================
   Impression « Imprimer le dossier » : imprime le dossier (saisie + synthèse) + les fiches cochées (Home.razor).
   S'ajoute par-dessus l'isolation « printing-card » (le JS active les deux classes).
   ============================================================ */
@media print {
    /* Masque la barre d'actions flottante et la navigation par onglets (les titres de fiches la remplacent). */
    .not-printed,
    body.printing-fiches .home-floating-toolbar,
    body.printing-fiches .rz-radio-button-list,
    body.printing-fiches .rz-tabview-nav,
    body.printing-fiches .sim-fiche-help,
    body.printing-fiches .sim-fiche-help-hint {
        display: none !important;
    }

    /* Impression d'un dialogue (bouton « Imprimer » → printDialog ajoute .printing-dialog au body) :
       on isole la boîte de dialogue et on masque ses boutons (Imprimer / Fermer / croix). */
    body.printing-dialog * {
        visibility: hidden;
    }
    body.printing-dialog .rz-dialog,
    body.printing-dialog .rz-dialog * {
        visibility: visible;
    }
    body.printing-dialog .rz-dialog {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        transform: none !important;
        box-shadow: none !important;
        border: 0 !important;
    }
    body.printing-dialog .rz-dialog button,
    body.printing-dialog .rdd-print-hide {
        display: none !important;
    }

    /* Force l'affichage des panneaux d'onglets (Radzen masque les onglets inactifs en display:none),
       pour imprimer la saisie (ses 2 onglets) ET une fiche cochée même si son onglet n'est pas actif.
       "position: static" + "height: auto" sur le tabview : sinon son conteneur ne grandit pas quand on
       affiche les 2 panneaux → le bandeau synthèse qui suit se superpose au formulaire (bug d'overlap). */
    body.printing-fiches .rz-tabview,
    body.printing-fiches .rz-tabview-panels,
    body.printing-fiches .rz-tabview-panel {
        display: block !important;
        position: static !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Fiches résultat masquées par défaut ; seules les cochées (.print-selected) s'impriment. */
    body.printing-fiches .print-fiche { display: none !important; }
    body.printing-fiches .print-fiche.print-selected { display: block !important; }

    /* Fieldsets repliables : le titre est rendu par Radzen DANS un <button> à l'intérieur de la légende
       (icône chevron + libellé). Ce bouton est masqué en print par « .print-area button { display:none } ».
       On réaffiche donc le BOUTON de légende (l'#simArea l'emporte en spécificité), et on masque seulement
       l'icône chevron (.rz-fieldset-toggler) — le titre reste. */
    body.printing-fiches #simArea .rz-fieldset-legend button {
        display: inline-flex !important;
    }
    body.printing-fiches #simArea .rz-fieldset-legend .rz-fieldset-toggler {
        display: none !important;
    }
    /* Légende longue (ex. « TRANSACTION / SUPPL. D'INDEMNITÉ ») : retour à la ligne au lieu de la rogner. */
    body.printing-fiches #simArea .rz-fieldset-legend,
    body.printing-fiches #simArea .rz-fieldset-legend button,
    body.printing-fiches #simArea .rz-fieldset-legend-text {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: 100% !important;
        word-break: break-word !important;
        text-align: start !important;
    }
    body.printing-fiches .rz-fieldset-content-wrapper,
    body.printing-fiches .rz-fieldset-content {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Titres de section (nom de l'onglet), affichés seulement à l'impression. */
    body.printing-fiches .print-only { display: block !important; }
    body.printing-fiches .print-fiche-title {
        font-weight: 700;
        font-size: 1.05rem;
        color: var(--by-primary);
        margin: 0.75rem 0 0.35rem;
        padding-bottom: 0.15rem;
        border-bottom: 2px solid var(--by-primary);
    }

    /* Aplatit les cartes Radzen à l'impression : leur padding / bordure / ombre gaspillent de la place
       sur une page A4 (on ne peut pas retirer la carte, mais on peut la rendre invisible). */
    body.printing-fiches #simArea .rz-card,
    body.printing-fiches #simArea .rz-card-body {
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    body.printing-fiches #simArea .rz-tabview,
    body.printing-fiches #simArea .rz-tabview-panel {
        padding: 0 !important;
    }
    /* Le bandeau d'onglets est masqué en print, mais le conteneur des panneaux garde sa bordure/ombre
       (= la ligne grise en haut du formulaire). On la supprime. */
    body.printing-fiches #simArea .rz-tabview-panels {
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    /* Mise en page « une fiche par page » : chaque fiche cochée démarre sur une nouvelle page
       (le formulaire de saisie + la synthèse restent sur la 1ʳᵉ page). */
    body.printing-fiches .print-fiche.print-selected {
        break-before: page;
    }

    /* Avertissement légal en flux À LA FIN de chaque fiche (pas un pied de page fixe comme l'ancien Caïd).
       Texte injecté en CSS via ::after selon la fiche (data-fiche) → aucun markup à dupliquer. */
    body.printing-fiches .print-fiche.print-selected::after {
        content: "Le logiciel C@ïd est un outil d'aide à la gestion pour la DRH. Il permet de faire des estimations et des prévisions dont les restitutions sont destinées à l'usage exclusif de la DRH.";
        display: block;
        margin-top: 1rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--by-primary);
        font-size: 0.72rem;
        font-style: italic;
        color: var(--by-primary);
    }
    body.printing-fiches .print-fiche.print-selected[data-fiche="estimationRetraite"]::after {
        content: "C@ïd ne peut en aucun cas se substituer aux calculs effectués par les organismes de retraite. Il permet toutefois d'avoir une visibilité sur les principaux éléments de la retraite (taux plein, âge, dates…) selon l'état de la législation à ce jour.";
    }

    /* Évite qu'un bloc soit coupé (et se chevauche) entre deux pages : tableaux, encarts et fieldsets
       restent d'un seul tenant ; un titre de fiche ne se retrouve jamais seul en bas de page. */
    body.printing-fiches .sim-result-table,
    body.printing-fiches .stc-table,
    body.printing-fiches .rz-alert,
    body.printing-fiches .rz-fieldset,
    body.printing-fiches .sim-grid,
    body.printing-fiches .sim-synthese,
    body.printing-fiches .sim-synthese .sim-readonly {
        break-inside: avoid;
    }
    body.printing-fiches .print-fiche-title {
        break-after: avoid;
    }

    /* Formulaire de saisie COMPACT à l'impression. Police NORMALISÉE à 10px sur TOUTE la zone imprimée ;
       titres de section (légendes de fieldset : « Salaires », « Ancienneté société »…) un peu plus grands
       + gras ; sous-titres (« Pour le calcul des limites d'exonération »…) plus petits et NON gras ;
       titre de fiche en tête légèrement plus grand. */
    body.printing-fiches #simArea,
    body.printing-fiches #simArea * {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }
    body.printing-fiches #simArea .print-fiche-title {
        font-size: 15px !important;
    }
    body.printing-fiches #simArea .rz-fieldset-legend,
    body.printing-fiches #simArea .rz-fieldset-legend-text,
    body.printing-fiches #simArea .rz-fieldset-legend button {
        font-size: 13px !important;
        font-weight: 700 !important;
    }
    /* Sous-titres : même taille que le corps (12px) et NON gras — seuls les titres de section (13px, gras) ressortent. */
    body.printing-fiches #simArea .sim-subtitle {
        font-size: 12px !important;
        font-weight: 400 !important;
    }

    body.printing-fiches #simArea .sim-cols { gap: 0.25rem 0.7rem; }
    body.printing-fiches #simArea .sim-col { flex: 1 1 30%; gap: 0.15rem; }
    body.printing-fiches #simArea .sim-grid { gap: 0.05rem 0.5rem; }
    body.printing-fiches #simArea .rz-fieldset { margin: 0; }
    body.printing-fiches #simArea .rz-fieldset-content { padding: 0.2rem !important; }
    body.printing-fiches #simArea .rz-form-field-content :is(input, .rz-inputtext, .rz-dropdown, .rz-datepicker, .rz-numeric) {
        min-height: 0 !important;
        padding-block: 0 !important;
    }

    /* Étiquettes flottantes → « libellé : valeur » EN LIGNE, aligné à gauche à l'impression (comme le legacy).
       Radzen place la valeur puis le libellé dans le DOM : on repasse en ligne et on fait passer le libellé
       AVANT la valeur via order:-1, puis on ajoute « : » après lui. Résultat compact type « Nom : TEST ». */
    body.printing-fiches #simArea .rz-form-field .rz-form-field-content {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: baseline !important;
        justify-content: flex-start !important;
        column-gap: .3rem !important;
        width: 100% !important;
    }
    body.printing-fiches #simArea .rz-form-field .rz-form-field-label {
        order: -1 !important;
        position: static !important;
        transform: none !important;
        inset: auto !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: inherit !important;
        line-height: 1.2 !important;
        color: inherit !important;
    }
    /* « : » ajouté après chaque libellé (façon legacy). Les libellés « bruts » de Retraite complémentaire ont
       déjà leur propre « : » (span), ils ne sont pas des .rz-form-field-label → pas de doublon. */
    body.printing-fiches #simArea .rz-form-field .rz-form-field-label::after {
        content: "\00a0:";
    }
    /* Valeur saisie en gras, alignée à gauche (lisibilité, comme le legacy). */
    body.printing-fiches #simArea .rz-form-field-content :is(input, .rz-inputtext) {
        font-weight: 600 !important;
        text-align: start !important;
    }

    /* Bloc « Synthèse » : ce ne sont pas des RadzenFormField mais des .sim-readonly (libellé + valeur empilés
       dans une boîte). Même traitement legacy « libellé : valeur » en ligne, à plat, valeur en gras. */
    body.printing-fiches .sim-synthese .sim-readonly {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        column-gap: .3rem !important;
    }
    body.printing-fiches .sim-synthese .sim-readonly .label {
        display: inline !important;
    }
    body.printing-fiches .sim-synthese .sim-readonly .label::after {
        content: "\00a0:";
    }
    body.printing-fiches .sim-synthese .sim-readonly .value {
        display: inline !important;
        min-height: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        font-weight: 600 !important;
    }

    /* « Retraite sécurité sociale » + « Retraite complémentaire » : saisies PROPRES à l'Estimation retraite.
       À l'impression, on ne les inclut que si la fiche « Estimation retraite » est sélectionnée — sinon elles
       apparaîtraient à tort sur les autres fiches (licenciement, rupture…). :has() teste la fiche cochée. */
    body.printing-fiches .retirement-inputs {
        display: none !important;
    }
    body.printing-fiches:has(.print-fiche.print-selected[data-fiche="estimationRetraite"]) .retirement-inputs {
        display: flex !important;
    }

    /* Forcer le rendu des couleurs de fond à l'impression. Les navigateurs les suppriment par défaut, d'où
       les puces radio / cases cochées qui n'apparaissaient pas (leur « plein » est un background-color) et les
       aplats des encarts colorés qui disparaissaient. Sans effet sur les fonds volontairement transparents. */
    body.printing-fiches #simArea,
    body.printing-fiches #simArea * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Aplatir les champs de saisie à l'impression : la valeur s'affiche comme du texte simple, sans la « boîte »
       (bordure / fond / ombre / spinner / chevron). Rendu épuré proche du legacy, et surtout ça désencombre
       « Retraite complémentaire » dont les champs points/année ne sont pas des RadzenFormField (donc boxés en ligne).
       width:auto retire l'espace des largeurs fixes (année 80px, cumul 150px) qui écartait les valeurs. */
    body.printing-fiches #simArea :is(.rz-numeric, .rz-textbox, .rz-dropdown, .rz-datepicker) {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        width: auto !important;
        min-width: 0 !important;
    }
    /* RadzenDropDown (ex. « Société ») tronque sa valeur avec des points de suspension par défaut
       (.rz-dropdown-label du thème Radzen : overflow:hidden; white-space:nowrap; text-overflow:ellipsis),
       utile dans une liste déroulante étroite à l'écran, mais qui coupe des noms longs à l'impression alors
       qu'il y a toute la place voulue. On repasse en retour à la ligne normal. */
    body.printing-fiches #simArea .rz-dropdown,
    body.printing-fiches #simArea .rz-dropdown-label {
        overflow: visible !important;
        white-space: normal !important;
        text-overflow: clip !important;
        height: auto !important;
        word-break: break-word !important;
    }
    /* La « boîte » d'un RadzenFormField (variante Outlined) est portée par .rz-form-field-content, PAS par
       l'input : il faut donc l'aplatir aussi, sinon seuls les champs hors RadzenFormField (ex. Retraite
       complémentaire) perdaient leur cadre. On garde la disposition « légende au-dessus » (flex) inchangée. */
    body.printing-fiches #simArea .rz-form-field-content {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    body.printing-fiches #simArea :is(.rz-numeric, .rz-textbox, .rz-dropdown, .rz-datepicker) input {
        border: 0 !important;
        background: transparent !important;
        padding: 0 !important;
        text-align: start !important;
    }
    /* Enlever les commandes interactives (spinner numérique, chevron liste, icône calendrier) devenues inutiles. */
    body.printing-fiches #simArea :is(.rz-spinner-up, .rz-spinner-down, .rz-dropdown-trigger, .rz-datepicker-trigger) {
        display: none !important;
    }

    /* « Points acquis sur l'année » (RadzenFormField, donc « légende au-dessus » par défaut) : le remettre EN LIGNE
       (libellé puis valeur) pour s'aligner avec « Cumul des points… : 123 » de la même rangée dans « Retraite
       complémentaire » — sinon ce champ paraît décalé sur 2 lignes. */
    body.printing-fiches #simArea .points-field .rz-form-field-content {
        flex-direction: row !important;
        align-items: baseline !important;
        gap: 0.35rem !important;
        width: auto !important;
    }
    body.printing-fiches #simArea .points-field {
        width: auto !important;
    }

    /* « Retraite complémentaire » : garder chaque rangée sur UNE seule ligne et resserrer les champs.
       La règle générique « .rz-numeric { width:auto } » les élargissait à la largeur par défaut d'un <input>
       (~170px), ce qui poussait le « : » à droite et faisait replier « Points acquis sur l'année ». Ici on
       fixe une largeur compacte et on interdit le repli ; seul le libellé (flexible) se resserre au besoin. */
    body.printing-fiches #complementaryRetirement .rz-stack {
        flex-wrap: nowrap !important;
    }
    body.printing-fiches #complementaryRetirement .rz-numeric {
        width: 3.5rem !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
    }
}


/* Sections imprimables UNIQUEMENT : fiches « Salaire de référence » / « Solde de tout compte », qui n'ont pas
   d'affichage écran dédié (la saisie se fait via les dialogues). Masquées à l'écran, imprimées si cochées. */
.sim-print-only {
    display: none;
}