/* @g CSS-001 */

/* @g CSS-002 */
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat.ttf") format("truetype");
    font-weight: 100 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/MontserratBold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* @g CSS-003 */
    --natup-blue: #08829b;
    --natup-blue-light: #c2e8f0;
    --natup-blue-alt: #0094b5;
    --natup-orange: #ff9800;
    --natup-gray: #f5f5f4;
    --natup-gray-dark: #e7e5e4;
    --natup-gray-darker: #a8a29e;
    --natup-ink: #393532;

    /* @g CSS-004 */
    --natup-logo-turquoise: #00a59f;
    --natup-logo-vert: #c2d44a;
    /* @g CSS-005 */
    --natup-bandeau: #edf8fa;
    --natup-red: rgb(220 38 38);
    /* @g CSS-006 */
    --natup-refus-fond: #fdecec;
    --natup-refus-encre: #b91c1c;
    --natup-green: rgb(4 120 87);

    /* @g CSS-007 */
    --bs-primary: var(--natup-blue);
    --bs-primary-rgb: 8, 130, 155;
    --bs-link-color: var(--natup-blue);
    --bs-link-hover-color: var(--natup-blue-alt);
    --bs-body-color: var(--natup-ink);
    --bs-border-color: var(--natup-gray-dark);
    --bs-body-font-family: "Montserrat", Arial, sans-serif;
    --bs-body-bg: var(--natup-gray);

    /* @g CSS-008 */
    --bs-body-font-size: 0.875rem;

    /* @g CSS-009 */
    --natup-titre-bloc: 0.875rem;

    /* @g CSS-010 */
    --natup-radio: 18px;
    --natup-radio-point: 9px;
}

/* @g CSS-011 */
body {
    background-color: var(--natup-gray);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: var(--bs-body-font-size);
}

/* @g CSS-012 */
body.natup-fond-blanc {
    background-color: #fff;
}

/* @g CSS-013 */
.card {
    border: 0;
    border-radius: 8px;
}

/* @g CSS-014 */
.card-header {
    background-color: transparent;
    border-bottom: 0;
    padding-bottom: 0;
    font-weight: 600;
    font-size: var(--natup-titre-bloc);
}

/* @g CSS-015 */
.form-label,
legend.form-label {
    font-weight: 600;
    margin-bottom: 0.35rem;
    font-size: var(--bs-body-font-size);
    line-height: var(--bs-body-line-height);
}

/* @g CSS-016 */
.form-control,
.form-select {
    font-size: var(--bs-body-font-size);
}

.btn {
    --bs-btn-font-size: var(--bs-body-font-size);
}

/* @g CSS-017 */

/* @g CSS-018 */
.border.rounded {
    border: 0 !important;
    border-radius: 8px !important;
}

/* @g CSS-019 */
.natup-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}

.natup-radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-weight: 400;
}

.natup-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: var(--natup-radio);
    height: var(--natup-radio);
    margin: 0;
}

.natup-radio-pastille {
    width: var(--natup-radio);
    height: var(--natup-radio);
    border: 3px solid var(--natup-gray-dark);
    border-radius: 50%;
    margin-right: 8px;
    background: #fff;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.natup-radio input[type="radio"]:checked + .natup-radio-pastille {
    background: var(--natup-blue);
    border-color: var(--natup-blue);
}

.natup-radio input[type="radio"]:checked + .natup-radio-pastille::after {
    content: "";
    width: var(--natup-radio-point);
    height: var(--natup-radio-point);
    border-radius: 50%;
    background: #fff;
}

/* @g CSS-020 */
.natup-radio input[type="radio"]:focus-visible + .natup-radio-pastille {
    outline: 2px solid var(--natup-blue-alt);
    outline-offset: 2px;
}

/* @g CSS-021 */
.natup-radio input[type="radio"]:disabled + .natup-radio-pastille {
    border-color: var(--natup-gray-darker);
    background: var(--natup-gray);
}

.natup-radio input[type="radio"]:disabled ~ .natup-radio-texte {
    color: var(--natup-gray-darker);
}

/* @g CSS-022 */
.btn-primary {
    --bs-btn-bg: var(--natup-blue);
    --bs-btn-border-color: var(--natup-blue);
    --bs-btn-hover-bg: var(--natup-blue-alt);
    --bs-btn-hover-border-color: var(--natup-blue-alt);
    --bs-btn-active-bg: var(--natup-blue-alt);
    --bs-btn-active-border-color: var(--natup-blue-alt);
    --bs-btn-disabled-bg: var(--natup-gray-darker);
    --bs-btn-disabled-border-color: var(--natup-gray-darker);
}

.btn-outline-primary {
    --bs-btn-color: var(--natup-blue);
    --bs-btn-border-color: var(--natup-blue);
    --bs-btn-hover-bg: var(--natup-blue);
    --bs-btn-hover-border-color: var(--natup-blue);
    --bs-btn-active-bg: var(--natup-blue);
    --bs-btn-active-border-color: var(--natup-blue);
}

.text-primary {
    color: var(--natup-blue) !important;
}

.table-primary {
    --bs-table-bg: var(--natup-blue-light);
    --bs-table-color: var(--natup-ink);
}

/* @g CSS-023 */
#loader {
    position: fixed;
    inset: 0;
    z-index: 1080; /* @g CSS-024 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: rgb(255 255 255 / 82%);
}

@supports (backdrop-filter: blur(2px)) {
    #loader {
        backdrop-filter: blur(2px);
    }
}

/* @g CSS-025 */
#loader::after {
    content: "";
    width: 3.25rem;
    height: 3.25rem;
    border: 0.28rem solid var(--natup-gray-dark);
    border-top-color: var(--natup-blue);
    border-radius: 50%;
    animation: natup-tourne 0.9s linear infinite;
}

@supports ((mask: radial-gradient(#000 0 0)) or (-webkit-mask: radial-gradient(#000 0 0))) {
    #loader::after {
        border: 0;
        background: conic-gradient(
            from 0deg,
            rgb(0 165 159 / 0%) 0deg,
            var(--natup-logo-turquoise) 140deg,
            var(--natup-logo-vert) 260deg,
            rgb(194 212 74 / 0%) 360deg
        );
        /* @g CSS-026 */
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.28rem), #000 0);
        mask: radial-gradient(farthest-side, transparent calc(100% - 0.28rem), #000 0);
    }
}

/* @g CSS-027 */
#loader::before {
    content: attr(data-attente) " ";
    order: 2; /* @g CSS-028 */
    color: var(--natup-blue);
    font-weight: 700;
    letter-spacing: 0.04em;
}

#loader:not([data-attente])::before {
    content: "Veuillez patienter…";
}

@keyframes natup-tourne {
    to {
        transform: rotate(360deg);
    }
}

/* @g CSS-029 */
@media (prefers-reduced-motion: reduce) {
    #loader::after {
        animation: none;
    }
}

/* @g CSS-030 */
.table {
    font-size: 0.8125rem;
}

/* @g CSS-031 */
.table > thead {
    --bs-table-bg: var(--natup-blue);
    --bs-table-color: #fff;

    color: #fff;
}

.table > thead th {
    color: #fff;
    font-weight: 700;
}

/* @g CSS-032 */
.montant,
td.text-end,
th.text-end {
    font-variant-numeric: tabular-nums;
}

/* @g CSS-033 */
.alert {
    --bs-alert-border-radius: 3px;
}

.alert-danger {
    --bs-alert-color: #fff;
    --bs-alert-bg: #dd4b39;
    --bs-alert-border-color: #d73925;
}

/* @g CSS-034 */
.alert-success {
    --bs-alert-color: var(--natup-blue);
    --bs-alert-bg: var(--natup-bandeau);
    --bs-alert-border-color: var(--natup-blue-light);
}

/* @g CSS-035 */
.alert-danger .alert-link {
    color: #fff;
}

/* @g CSS-036 */
.alert-success .alert-link {
    color: var(--natup-blue);
}

.alert-info {
    --bs-alert-border-color: #00acd6;
}

.alert-warning {
    --bs-alert-border-color: #e08e0b;
}

/* @g CSS-037 */
.natup-message-titre {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
}

.natup-message-titre svg {
    flex: none;
    width: 1em;
    height: 1em;
}

/* @g CSS-038 */
.natup-message {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

/* @g CSS-039 */
#alerte-envoi {
    margin-bottom: 1rem;
}

/* @g CSS-040 */
#alerte-envoi.alert-danger {
    --bs-alert-color: var(--natup-ink);
    --bs-alert-bg: var(--natup-refus-fond);
    --bs-alert-border-color: var(--natup-refus-fond);
    border-top: 4px solid var(--natup-red);
    border-radius: 14px;
    padding: 1rem 1.125rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

#alerte-envoi.alert-danger .natup-message-titre {
    color: var(--natup-refus-encre);
    font-size: 1rem;
    font-weight: 700;
}

/* @g CSS-041 */
.natup-select {
    position: relative;
}

.natup-select-natif {
    display: none;
}

.natup-select-declencheur {
    /* @g CSS-042 */
    padding-right: 2.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* @g CSS-043 */
.natup-select-declencheur.est-vide {
    color: var(--bs-secondary-color, #6c757d);
}

.natup-select-panneau {
    position: absolute;
    z-index: 1000;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    max-height: 15rem;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* @g CSS-044 */
.natup-select.vers-le-haut .natup-select-panneau {
    top: auto;
    bottom: 100%;
}

/* @g CSS-045 */
.natup-select-recherche {
    flex: none;
    margin: 0.375rem;
    width: auto;
}

.natup-select-options {
    flex: 1 1 auto;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.natup-select-option {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.625rem;
    cursor: pointer;
}

/* @g CSS-046 */
.natup-select-option:hover,
.natup-select-option.est-actif {
    background: var(--natup-gray, #f1f3f5);
}

.natup-select-option[aria-selected="true"] {
    font-weight: 600;
}

/* @g CSS-047 */
.natup-select-marque {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    color: var(--bs-primary, #0d6efd);
}

.natup-select-marque svg {
    width: 100%;
    height: 100%;
}

/* @g CSS-048 */
.form-control[readonly],
.form-select[readonly] {
    background-color: var(--bs-secondary-bg, #e9ecef);
    opacity: 1;
}

/* @g CSS-049 */
.natup-cours {
    padding: 0.625rem 0.875rem;
    background: var(--natup-bandeau);
    border-radius: 3px;
    color: var(--natup-blue);
    font-weight: 700;
}

/* @g CSS-050 */
.natup-fenetre {
    max-width: 34rem;
    padding: 1.25rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
}

.natup-fenetre::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

/* @g CSS-051 */
.natup-auth {
    /* @g CSS-052 */
    min-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
}

/* @g CSS-053 */
@supports (min-height: 100svh) {
    .natup-auth {
        min-height: calc(100svh - 2rem);
    }
}

/* @g CSS-054 */
.natup-auth::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(
            75rem 32rem at 50% -12%,
            rgba(0, 165, 159, 0.13),
            rgba(0, 165, 159, 0) 62%
        );
}

.natup-auth-carte {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 25rem;
    padding: 2rem 1.75rem 1.75rem;
    border-radius: 14px;
    background: #fff;
    /* @g CSS-055 */
    box-shadow:
        0 1px 2px rgba(57, 53, 50, 0.06),
        0 1.25rem 2.5rem -1rem rgba(57, 53, 50, 0.22);
}

/* @g CSS-056 */
.natup-auth-carte::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--natup-logo-turquoise),
        var(--natup-logo-vert)
    );
}

/* @g CSS-057 */
.natup-auth-logo {
    display: block;
    width: 9.375rem;
    height: auto;
    margin: 0 auto 1.5rem;
}

/* @g CSS-058 */
.natup-auth-titre {
    margin: 0 0 0.25rem;
    font-size: 1.0625rem;
    font-weight: 700;
    text-align: center;
    color: var(--natup-ink);
}

.natup-auth-intro {
    margin: 0 0 1.5rem;
    text-align: center;
}

/* @g CSS-059 */
.natup-auth .form-control {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
}

.natup-auth .form-control:focus {
    border-color: var(--natup-blue-alt);
    box-shadow: 0 0 0 0.2rem rgba(8, 130, 155, 0.15);
}

.natup-auth .btn {
    padding: 0.55rem 1rem;
    border-radius: 8px;
    font-weight: 600;
}

/* @g CSS-060 */
.natup-auth-liens {
    margin: 1.25rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--natup-gray-dark);
    text-align: center;
}

.natup-auth-liens p {
    margin: 0;
}

.natup-auth-liens p + p {
    margin-top: 0.35rem;
}

/* @g CSS-061 */
.natup-auth-pied {
    margin: 0;
    text-align: center;
}

/* @g CSS-062 */
@media (max-width: 480px) {
    .natup-auth-carte {
        padding: 1.5rem 1.25rem 1.25rem;
        border-radius: 12px;
    }

    .natup-auth-logo {
        width: 7.5rem;
        margin-bottom: 1.25rem;
    }
}

/* @g CSS-063 */
.natup-barre {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: -1rem calc(-1 * var(--bs-gutter-x, 1.5rem) / 2) 1.5rem;
    background: #fff;
    border-bottom: 1px solid var(--natup-gray-dark);
    box-shadow: 0 1px 3px rgb(0 0 0 / 6%);
}

/* @g CSS-064 */
:root {
    --natup-barre-hauteur: 3.5rem;
}

.natup-barre-contenu {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 90%;
    max-width: none;
    min-height: calc(var(--natup-barre-hauteur) - 1px);
    margin: 0 auto;
    padding: 0.625rem calc(var(--bs-gutter-x, 1.5rem) / 2);
}

.natup-barre-marque {
    flex: none;
    line-height: 0;
}

/* @g CSS-065 */
.natup-barre-marque img {
    height: 2.125rem;
    width: auto;
}

/* @g CSS-066 */
.natup-barre-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    flex: 1 1 auto;
    min-width: 0;
}

.natup-barre-lien {
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
    color: var(--natup-ink);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    white-space: nowrap;
}

.natup-barre-lien:hover {
    background: var(--natup-bandeau);
    color: var(--natup-blue);
}

/* @g CSS-067 */
.natup-barre-lien.est-actif {
    background: var(--natup-bandeau);
    color: var(--natup-blue);
}

/* @g CSS-068 */
.natup-barre-lien.est-a-venir,
.natup-barre-lien.est-a-venir:hover {
    background: none;
    color: var(--natup-gray-darker);
    cursor: default;
}

.natup-barre-outils {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: none;
}

/* @g CSS-069 */
.natup-barre-moi > .natup-barre-sous-menu {
    right: 0;
    left: auto;
}

/* @g CSS-070 */
.natup-barre-moi-ate {
    margin: 0;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--natup-gray-dark);
    color: var(--natup-gray-darker);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* @g CSS-071 */
.natup-barre-moi-sortie:hover {
    background: #fdecec;
    color: #b4413f;
}


/* @g CSS-072 */

/* @g CSS-073 */
.natup-selecteur {
    position: relative;
}

.natup-selecteur > summary {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

/* @g CSS-074 */
.natup-selecteur > summary::-webkit-details-marker {
    display: none;
}

.natup-selecteur > summary::marker {
    content: "";
}

.natup-selecteur > summary:hover {
    border-color: var(--natup-blue);
}

.natup-selecteur > summary:focus-visible {
    outline: 2px solid var(--natup-blue-alt);
    outline-offset: 2px;
}

.natup-selecteur-etiquette {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--natup-gray-darker);
}

.natup-selecteur-valeur {
    font-weight: 700;
    color: var(--natup-blue);
}

/* @g CSS-075 */
.natup-selecteur-valeur::after {
    content: "";
    display: inline-block;
    margin-left: 0.4rem;
    vertical-align: 0.15em;
    border: 4px solid transparent;
    border-top-color: currentcolor;
}

.natup-selecteur[open] .natup-selecteur-valeur::after {
    transform: rotate(180deg);
    vertical-align: -0.05em;
}

.natup-selecteur-liste {
    position: absolute;
    right: 0;
    z-index: 20;
    min-width: 100%;
    margin-top: 0.375rem;
    padding: 0.25rem;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
}

.natup-selecteur-liste a {
    display: block;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    color: var(--natup-ink);
    font-weight: 600;
    text-align: right;
    text-decoration: none;
}

.natup-selecteur-liste a:hover {
    background: var(--natup-bandeau);
}

.natup-selecteur-liste a.est-actif {
    background: var(--natup-blue);
    color: #fff;
}

/* @g CSS-076 */
.natup-barre,
.natup-app,
.natup-pied {
    --bs-body-font-size: 0.75rem;

    font-size: var(--bs-body-font-size);
}

/* @g CSS-077 */

/* @g CSS-078 */
.natup-app {
    width: 90%;
    /* @g CSS-079 */
    padding-bottom: calc(var(--natup-pied-hauteur) + 1.5rem);
    margin: 0 auto;
}

/* @g CSS-080 */
.natup-titre-ecran {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* @g CSS-081 */
.natup-etiquette {
    flex: none;
    margin-left: 0.375rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--natup-bandeau);
    color: var(--natup-blue);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* @g CSS-082 */

/* @g CSS-083 */
.natup-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

@media (min-width: 1200px) {
    .natup-kpis {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* @g CSS-084 */
.natup-kpi {
    position: relative;
    overflow: hidden;
    padding: 0.875rem 1rem 0.75rem;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

/* @g CSS-085 */
.natup-kpi-lien {
    display: block;
    color: inherit;
    text-decoration: none;
}

.natup-kpi-lien:hover,
.natup-kpi-lien:focus-visible {
    border-color: var(--natup-blue);
    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

/* @g CSS-086 */
.natup-kpi.est-alerte .natup-kpi-valeur,
.natup-kpi-part.est-alerte .natup-kpi-valeur {
    color: var(--natup-red);
}

.natup-kpi::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--natup-logo-turquoise),
        var(--natup-logo-vert)
    );
}

.natup-kpi-libelle {
    margin: 0 0 0.375rem;
    color: var(--natup-gray-darker);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.natup-kpi-valeur {
    margin: 0;
    color: var(--natup-ink);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
    /* @g CSS-087 */
    font-variant-numeric: tabular-nums;
}

.natup-kpi-unite {
    margin-left: 0.3rem;
    color: var(--natup-gray-darker);
    font-size: 0.6875rem;
    font-weight: 600;
}

.natup-kpi-detail {
    margin: 0.375rem 0 0;
    color: var(--natup-gray-darker);
    font-size: 0.6875rem;
}

/* @g CSS-350 */
.natup-kpi-paire {
    display: flex;
    gap: 1rem;
}

.natup-kpi-part {
    flex: 1 1 0;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.natup-kpi-part > span {
    display: block;
}

.natup-kpi-part:hover .natup-kpi-valeur,
.natup-kpi-part:focus-visible .natup-kpi-valeur {
    text-decoration: underline;
}

/* @g CSS-088 */

/* @g CSS-089 */
.natup-colonnes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.natup-carte {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

.natup-carte > h2 {
    margin: 0;
    padding: 0.75rem 1.125rem;
    background: var(--natup-blue);
    color: #fff;
    font-size: var(--natup-titre-bloc);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.natup-carte-corps {
    flex: 1;
    padding: 1.125rem;
}

.natup-vide {
    margin: 0;
    color: var(--natup-gray-darker);
    text-align: center;
}

/* @g CSS-090 */

.natup-classement {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.natup-classement > li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

/* @g CSS-091 */
.natup-rang {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    background: var(--natup-bandeau);
    color: var(--natup-blue);
    font-size: 0.8125rem;
    font-weight: 700;
}

/* @g CSS-092 */
.natup-classement > li:first-child .natup-rang {
    background: var(--natup-blue);
    color: #fff;
}

.natup-classement-corps {
    flex: 1 1 auto;
    min-width: 0;
}

.natup-classement-ligne {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.natup-classement-nom {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.natup-classement-valeur {
    flex: none;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.natup-classement-detail {
    display: block;
    margin-top: 0.25rem;
    color: var(--natup-gray-darker);
    font-size: 0.8125rem;
}

.natup-jauge {
    display: block;
    height: 6px;
    margin-top: 0.375rem;
    border-radius: 999px;
    background: var(--natup-gray-dark);
    overflow: hidden;
}

.natup-jauge-remplie {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--natup-blue), var(--natup-logo-turquoise));
}

/* @g CSS-093 */

.natup-camembert {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* @g CSS-094 */
.natup-camembert-anneau {
    flex: none;
    width: 11.5rem;
    height: 11.5rem;
}

.natup-camembert-total {
    fill: var(--natup-ink);
    font-size: 13px;
    font-weight: 700;
}

.natup-camembert-unite {
    fill: var(--natup-gray-darker);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.natup-legende {
    flex: 1 1 12rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

/* @g CSS-095 */
.natup-legende > li {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.natup-pastille {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 3px;
    align-self: center;
}

.natup-legende-nom {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.natup-legende-part {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.natup-legende-detail {
    color: var(--natup-gray-darker);
    font-variant-numeric: tabular-nums;
}

.natup-note {
    margin: 1.25rem 0 0;
    color: var(--natup-gray-darker);
    font-size: 0.8125rem;
}

/* @g CSS-096 */

@media (max-width: 768px) {
    /* @g CSS-097 */
    .natup-barre-moi > summary {
        max-width: 6rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* @g CSS-098 */
    .natup-barre-contenu {
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
    }

    .natup-barre-nav {
        order: 3;
        flex-basis: 100%;
    }

    .natup-barre-outils {
        margin-left: auto;
    }

    .natup-kpi-valeur {
        font-size: 1.5rem;
    }

    .natup-camembert {
        justify-content: center;
    }
}

/* @g CSS-099 */
.natup-confirmation {
    width: calc(100% - 2rem);
    max-width: 26rem;
    padding: 0;
    /* @g CSS-100 */
    border-radius: 14px;
    overflow: hidden;
    color: var(--natup-ink);
    box-shadow:
        0 1px 2px rgba(57, 53, 50, 0.08),
        0 1.5rem 3rem -1rem rgba(57, 53, 50, 0.35);
}

/* @g CSS-101 */
.natup-confirmation::backdrop {
    background: rgba(57, 53, 50, 0.45);
}

@supports (backdrop-filter: blur(2px)) {
    .natup-confirmation::backdrop {
        backdrop-filter: blur(2px);
    }
}

/* @g CSS-102 */
.natup-confirmation-corps {
    padding: 1.5rem 1.5rem 1.25rem;
    text-align: center;
}

.natup-confirmation-titre {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
}

/* @g CSS-103 */
.natup-confirmation-question {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* @g CSS-104 */
.natup-confirmation-adhesion {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    margin-top: 0.25rem;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.45;
    cursor: pointer;
}

/* @g CSS-105 */
.natup-confirmation-adhesion .form-check-input {
    flex: none;
    margin-top: 0.15rem;
}

/* @g CSS-106 */
.natup-confirmation-actions {
    display: flex;
    gap: 0.625rem;
    padding: 0 1.5rem 1.5rem;
}

.natup-confirmation-actions .btn {
    flex: 1 1 0;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    font-weight: 600;
}

/* @g CSS-107 */
@media (prefers-reduced-motion: no-preference) {
    .natup-confirmation[open] {
        animation: natup-confirmation-entree 0.16s ease-out;
    }
}

@keyframes natup-confirmation-entree {
    from {
        opacity: 0;
        transform: translateY(0.5rem) scale(0.97);
    }
}

@media (max-width: 480px) {
    .natup-confirmation-corps {
        padding: 1.5rem 1.25rem 1rem;
    }

    .natup-confirmation-actions {
        padding: 0 1.25rem 1.25rem;
    }
}

/* @g CSS-108 */
.natup-avertissement {
    background: var(--natup-refus-fond);
    border-top: 4px solid var(--natup-red);
}

.natup-avertissement .natup-confirmation-titre {
    color: var(--natup-refus-encre);
}

.natup-avertissement .natup-confirmation-question {
    text-align: left;
}

.natup-avertissement .natup-confirmation-actions .btn {
    color: #fff;
    background: var(--natup-refus-encre);
    border-color: var(--natup-refus-encre);
}

.natup-avertissement .natup-confirmation-actions .btn:hover,
.natup-avertissement .natup-confirmation-actions .btn:focus-visible {
    background: #991b1b;
    border-color: #991b1b;
}

/* @g CSS-109 */

/* @g CSS-110 */
:root {
    --natup-pied-hauteur: 2.75rem;
}

.natup-pied {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    height: var(--natup-pied-hauteur);
    background: #fff;
    border-top: 1px solid var(--natup-gray-dark);
    /* @g CSS-111 */
    box-shadow: 0 -1px 3px rgb(0 0 0 / 6%);
}

.natup-pied-contenu {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 90%;
    height: 100%;
    margin: 0 auto;
    color: var(--natup-gray-darker);
    font-size: 0.8125rem;
}

.natup-pied-marque {
    color: var(--natup-blue);
    font-weight: 700;
}

/* @g CSS-112 */
.natup-pied-detail {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.natup-pied-annee {
    flex: none;
}

@media (max-width: 600px) {
    .natup-pied-detail {
        display: none;
    }
}

/* @g CSS-113 */

/* @g CSS-114 */
.natup-liste {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

/* @g CSS-115 */
.natup-tableau-cadre + .natup-liste {
    margin-top: 1.5rem;
}

.natup-filtres {
    position: sticky;
    /* @g CSS-116 */
    top: 1rem;
}

.natup-filtres-form {
    padding: 1.125rem;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 14px;
    background: #fff;
}

.natup-filtres-form > h2 {
    margin: 0 0 1rem;
    font-size: var(--natup-titre-bloc);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--natup-blue);
}

.natup-filtre {
    margin-bottom: 0.875rem;
}

.natup-filtres-actions {
    display: grid;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.natup-resultats {
    min-width: 0;
}

.natup-resultats-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
}

/* @g CSS-117 */
.natup-resultats-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.natup-resultats-compte {
    margin: 0;
    font-weight: 600;
}

.natup-resultats-taille {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--natup-gray-darker);
}

.natup-resultats-taille .form-select {
    width: auto;
}

/* @g CSS-118 */
.natup-tableau-cadre {
    overflow-x: auto;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 14px;
    background: #fff;
}

/* @g CSS-119 */
.natup-tableau {
    --bs-body-font-size: 0.6875rem;

    width: 100%;
    margin: 0;
    font-size: var(--bs-body-font-size);
    white-space: nowrap;
}

.natup-tableau > thead th {
    padding: 0;
    background: var(--natup-blue);
}

/* @g CSS-120 */
.natup-tableau > thead th button {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    font-weight: 700;
    text-align: inherit;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.natup-tableau > thead th:not(:has(button)) {
    padding: 0.625rem 0.75rem;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* @g CSS-121 */
.natup-tableau > thead th button[data-sens="desc"]::after {
    content: " ↓";
}

.natup-tableau > thead th button[data-sens="asc"]::after {
    content: " ↑";
}

/* @g CSS-122 */
.natup-tableau > tbody td {
    padding: 0.375rem 0.75rem;
    vertical-align: middle;
}

/* @g CSS-123 */
.natup-tableau .btn {
    --bs-btn-font-size: var(--bs-body-font-size);
    --bs-btn-padding-y: 0;
    --bs-btn-padding-x: 0.4rem;

    line-height: 1.2;
}

.natup-tableau > tbody tr:hover td {
    background: var(--natup-bandeau);
}

.natup-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.875rem;
}

.natup-pagination-etat {
    color: var(--natup-gray-darker);
}

/* @g CSS-124 */
@media (max-width: 900px) {
    .natup-liste {
        grid-template-columns: 1fr;
    }

    .natup-filtres {
        position: static;
    }
}

/* @g CSS-125 */
.natup-filtres-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.natup-filtres-entete h2 {
    margin: 0;
    color: var(--natup-blue);
    font-size: var(--natup-titre-bloc);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.natup-filtres-masquer {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--natup-gray);
    color: var(--natup-gray-darker);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}

.natup-filtres-masquer:hover {
    background: var(--natup-bandeau);
    color: var(--natup-blue);
}

/* @g CSS-126 */
.natup-filtres-montrer {
    display: none;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 999px;
    background: #fff;
    color: var(--natup-blue);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.natup-filtres-montrer::before {
    content: "☰ ";
}

.natup-liste.est-replie {
    grid-template-columns: minmax(0, 1fr);
}

.natup-liste.est-replie .natup-filtres {
    display: none;
}

.natup-liste.est-replie .natup-filtres-montrer {
    display: inline-block;
}

/* @g CSS-127 */

/* @g CSS-128 */
.natup-barre-groupe {
    position: relative;
    flex: none;
}

/* @g CSS-129 */
.natup-barre-groupe > summary {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    list-style: none;
    cursor: pointer;
}

.natup-barre-groupe > summary::-webkit-details-marker {
    display: none;
}

/* @g CSS-130 */
.natup-barre-groupe > summary::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    transform: rotate(45deg) translate(-15%, -15%);
    transition: transform 0.15s ease;
}

.natup-barre-groupe[open] > summary::after {
    transform: rotate(-135deg) translate(-15%, -15%);
}

.natup-barre-groupe > summary:hover,
.natup-barre-groupe.est-actif > summary {
    background: var(--natup-bandeau);
    color: var(--natup-blue);
}

.natup-barre-sous-menu {
    position: absolute;
    left: 0;
    z-index: 20;
    min-width: 12rem;
    margin-top: 0.375rem;
    padding: 0.25rem;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
}

.natup-barre-sous-menu a {
    display: block;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    color: var(--natup-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.natup-barre-sous-menu a:hover {
    background: var(--natup-bandeau);
}

.natup-barre-sous-menu a.est-actif {
    background: var(--natup-blue);
    color: #fff;
}

/* @g CSS-131 */

.natup-ecran-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.875rem;
}

.natup-ecran-detail {
    margin: 0;
    color: var(--natup-gray-darker);
    font-size: 0.9375rem;
}

/* @g CSS-132 */
.natup-etiquette-lecture {
    margin: 0;
    background: #fff4e0;
    color: #8a5300;
}

/* @g CSS-133 */

/* @g CSS-134 */
.natup-onglets {
    display: block;
}

/* @g CSS-135 */
.natup-cellule-fusionnee {
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
    color: var(--natup-blue);
    font-weight: 700;
}

/* @g CSS-136 */
.natup-tableau .natup-cellule-fusionnee {
    --bs-table-bg: var(--natup-bandeau);
}

/* @g CSS-137 */
.natup-tableau .natup-cellule-fusionnee {
    border-right: 1px solid var(--natup-gray-dark);
}

.natup-onglets-espaces {
    margin-top: 1.75rem;
}

/* @g CSS-138 */
.natup-onglet-choix {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.natup-onglets-barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.875rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--natup-gray-dark);
}

/* @g CSS-139 */
.natup-onglets-action {
    margin: 0 0 0 auto;
}

/* @g CSS-140 */
.natup-onglets-action:has(.natup-onglets-case) {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.natup-onglets-case {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    white-space: nowrap;
}

.natup-onglets-case:has(input:disabled) {
    color: var(--natup-gray-darker);
    cursor: not-allowed;
}

/* @g CSS-141 */
.natup-sms > summary {
    cursor: pointer;
    white-space: nowrap;
}

.natup-sms-texte {
    max-width: 22rem;
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    background: var(--natup-bandeau);
    font-size: inherit;
    white-space: pre-wrap;
}

.natup-onglet-etiquette {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 0.875rem;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--natup-gray-darker);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.natup-onglet-etiquette:hover {
    background: var(--natup-bandeau);
    color: var(--natup-blue);
}

/* @g CSS-142 */
.natup-onglet-compte {
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--natup-gray-dark);
    color: var(--natup-gray-darker);
    font-size: 0.75rem;
    font-weight: 700;
}

.natup-onglet-panneau {
    display: none;
}

/* @g CSS-143 */
.natup-onglet-choix:nth-of-type(1):checked ~ .natup-onglets-barre > .natup-onglet-etiquette:nth-child(1),
.natup-onglet-choix:nth-of-type(2):checked ~ .natup-onglets-barre > .natup-onglet-etiquette:nth-child(2),
.natup-onglet-choix:nth-of-type(3):checked ~ .natup-onglets-barre > .natup-onglet-etiquette:nth-child(3),
.natup-onglet-choix:nth-of-type(4):checked ~ .natup-onglets-barre > .natup-onglet-etiquette:nth-child(4),
.natup-onglet-choix:nth-of-type(5):checked ~ .natup-onglets-barre > .natup-onglet-etiquette:nth-child(5),
.natup-onglet-choix:nth-of-type(6):checked ~ .natup-onglets-barre > .natup-onglet-etiquette:nth-child(6),
.natup-onglet-choix:nth-of-type(7):checked ~ .natup-onglets-barre > .natup-onglet-etiquette:nth-child(7),
.natup-onglet-choix:nth-of-type(8):checked ~ .natup-onglets-barre > .natup-onglet-etiquette:nth-child(8) {
    border-color: var(--natup-blue);
    background: var(--natup-blue);
    color: #fff;
}

.natup-onglet-choix:nth-of-type(1):checked ~ .natup-onglets-barre > .natup-onglet-etiquette:nth-child(1) .natup-onglet-compte,
.natup-onglet-choix:nth-of-type(2):checked ~ .natup-onglets-barre > .natup-onglet-etiquette:nth-child(2) .natup-onglet-compte,
.natup-onglet-choix:nth-of-type(3):checked ~ .natup-onglets-barre > .natup-onglet-etiquette:nth-child(3) .natup-onglet-compte,
.natup-onglet-choix:nth-of-type(4):checked ~ .natup-onglets-barre > .natup-onglet-etiquette:nth-child(4) .natup-onglet-compte,
.natup-onglet-choix:nth-of-type(5):checked ~ .natup-onglets-barre > .natup-onglet-etiquette:nth-child(5) .natup-onglet-compte,
.natup-onglet-choix:nth-of-type(6):checked ~ .natup-onglets-barre > .natup-onglet-etiquette:nth-child(6) .natup-onglet-compte,
.natup-onglet-choix:nth-of-type(7):checked ~ .natup-onglets-barre > .natup-onglet-etiquette:nth-child(7) .natup-onglet-compte,
.natup-onglet-choix:nth-of-type(8):checked ~ .natup-onglets-barre > .natup-onglet-etiquette:nth-child(8) .natup-onglet-compte {
    background: rgb(255 255 255 / 25%);
    color: #fff;
}

.natup-onglet-choix:nth-of-type(1):checked ~ .natup-onglets-panneaux > .natup-onglet-panneau:nth-child(1),
.natup-onglet-choix:nth-of-type(2):checked ~ .natup-onglets-panneaux > .natup-onglet-panneau:nth-child(2),
.natup-onglet-choix:nth-of-type(3):checked ~ .natup-onglets-panneaux > .natup-onglet-panneau:nth-child(3),
.natup-onglet-choix:nth-of-type(4):checked ~ .natup-onglets-panneaux > .natup-onglet-panneau:nth-child(4),
.natup-onglet-choix:nth-of-type(5):checked ~ .natup-onglets-panneaux > .natup-onglet-panneau:nth-child(5),
.natup-onglet-choix:nth-of-type(6):checked ~ .natup-onglets-panneaux > .natup-onglet-panneau:nth-child(6),
.natup-onglet-choix:nth-of-type(7):checked ~ .natup-onglets-panneaux > .natup-onglet-panneau:nth-child(7),
.natup-onglet-choix:nth-of-type(8):checked ~ .natup-onglets-panneaux > .natup-onglet-panneau:nth-child(8) {
    display: block;
}

/* @g CSS-144 */
.natup-onglet-choix:focus-visible ~ .natup-onglets-barre > .natup-onglet-etiquette {
    outline: 2px dashed var(--natup-blue);
    outline-offset: 2px;
}

/* @g CSS-145 */

/* @g CSS-146 */
.natup-grille-actives-choix {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.natup-grille-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.natup-grille-actives {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 999px;
    background: #fff;
    color: var(--natup-gray-darker);
    font-size: 0.875rem;
    cursor: pointer;
}

.natup-grille-actives:hover {
    border-color: var(--natup-blue);
    color: var(--natup-blue);
}

/* @g CSS-147 */
.natup-grille-actives-choix:checked ~ .natup-grille-entete .natup-grille-actives {
    border-color: var(--natup-blue);
    background: var(--natup-bandeau);
    color: var(--natup-blue);
    font-weight: 600;
}

/* @g CSS-148 */
.natup-grille-actives-choix:focus-visible ~ .natup-grille-entete .natup-grille-actives {
    outline: 2px solid var(--natup-blue);
    outline-offset: 2px;
}

/* @g CSS-149 */
.natup-grille-actives-choix:checked ~ .natup-grille-corps tr.est-inactif,
.natup-grille-actives-choix:checked ~ .natup-grille-corps tbody.est-inactif {
    display: none;
}
.natup-grille-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.natup-grille-detail {
    margin: 0;
    color: var(--natup-gray-darker);
    font-size: 0.9375rem;
}

.natup-grille-famille {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    color: var(--natup-gray-darker);
    font-size: 0.8125rem;
}

.natup-grille-famille code {
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    background: var(--natup-bandeau);
    color: var(--natup-blue);
    font-weight: 700;
}

/* @g CSS-150 */
.natup-grille > thead th {
    vertical-align: bottom;
}

.natup-colonne-libelle {
    display: block;
    font-size: 0.6875rem;
}

/* @g CSS-151 */
.natup-grille > thead th.est-anonyme .natup-colonne-libelle {
    color: rgb(255 255 255 / 75%);
    font-style: italic;
}

/* @g CSS-152 */
/* @g CSS-153 */

/* @g CSS-154 */
.natup-puce-compte {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0.05rem 0.4rem;
    margin-right: 0.4rem;
    border-radius: 999px;
    background: var(--natup-blue);
    color: #fff;
    font-weight: 700;
    text-align: center;
}

/* @g CSS-155 */
.natup-grille-groupe-titre th {
    padding: 0.3rem 0.75rem;
    border-top: 2px solid var(--natup-blue);
    background: var(--natup-bandeau);
    color: var(--natup-blue);
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* @g CSS-156 */
.natup-grille > tbody:first-of-type .natup-grille-groupe-titre th {
    border-top: 0;
}

/* @g CSS-157 */
.natup-grille-groupe-compte {
    margin-left: 0.5rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--natup-blue);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0;
}

/* @g CSS-158 */

/* @g CSS-159 */
.natup-grille-filtres {
    display: none;
}

@supports selector(:has(*)) {
    /* @g CSS-160 */
    .natup-grille-filtres {
        position: sticky;
        top: var(--natup-barre-hauteur);
        z-index: 5;
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;
        margin-bottom: 0.75rem;
        padding: 0.4rem 0;
        background: var(--natup-gray);
    }
}

.natup-grille-filtre {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 999px;
    background: #fff;
    color: var(--natup-gray-darker);
    font-size: 0.6875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.natup-grille-filtre:hover {
    border-color: var(--natup-blue);
    background: var(--natup-bandeau);
    color: var(--natup-blue);
}

.natup-grille-filtre-compte {
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--puce-fond, var(--natup-gray-dark));
    color: var(--puce-encre, var(--natup-gray-darker));
    font-size: 0.5625rem;
    font-weight: 700;
}

/* @g CSS-161 */
.natup-grille-corps:has(tbody:target) .natup-grille > tbody:not(:target) {
    display: none;
}

/* @g CSS-162 */
.natup-grille-corps:has(tbody:nth-of-type(1):target) .natup-grille-filtre:nth-of-type(2),
.natup-grille-corps:has(tbody:nth-of-type(2):target) .natup-grille-filtre:nth-of-type(3),
.natup-grille-corps:has(tbody:nth-of-type(3):target) .natup-grille-filtre:nth-of-type(4),
.natup-grille-corps:has(tbody:nth-of-type(4):target) .natup-grille-filtre:nth-of-type(5),
.natup-grille-corps:has(tbody:nth-of-type(5):target) .natup-grille-filtre:nth-of-type(6),
.natup-grille-corps:has(tbody:nth-of-type(6):target) .natup-grille-filtre:nth-of-type(7),
.natup-grille-corps:has(tbody:nth-of-type(7):target) .natup-grille-filtre:nth-of-type(8),
.natup-grille-corps:has(tbody:nth-of-type(8):target) .natup-grille-filtre:nth-of-type(9),
.natup-grille-corps:has(tbody:nth-of-type(9):target) .natup-grille-filtre:nth-of-type(10),
.natup-grille-corps:has(tbody:nth-of-type(10):target) .natup-grille-filtre:nth-of-type(11),
.natup-grille-corps:has(tbody:nth-of-type(11):target) .natup-grille-filtre:nth-of-type(12),
.natup-grille-corps:has(tbody:nth-of-type(12):target) .natup-grille-filtre:nth-of-type(13),
.natup-grille-corps:has(tbody:nth-of-type(13):target) .natup-grille-filtre:nth-of-type(14),
.natup-grille-corps:has(tbody:nth-of-type(14):target) .natup-grille-filtre:nth-of-type(15),
.natup-grille-corps:has(tbody:nth-of-type(15):target) .natup-grille-filtre:nth-of-type(16),
.natup-grille-corps:has(tbody:nth-of-type(16):target) .natup-grille-filtre:nth-of-type(17),
.natup-grille-corps:has(tbody:nth-of-type(17):target) .natup-grille-filtre:nth-of-type(18),
.natup-grille-corps:has(tbody:nth-of-type(18):target) .natup-grille-filtre:nth-of-type(19),
.natup-grille-corps:has(tbody:nth-of-type(19):target) .natup-grille-filtre:nth-of-type(20),
.natup-grille-corps:has(tbody:nth-of-type(20):target) .natup-grille-filtre:nth-of-type(21),
.natup-grille-corps:has(tbody:nth-of-type(21):target) .natup-grille-filtre:nth-of-type(22),
.natup-grille-corps:has(tbody:nth-of-type(22):target) .natup-grille-filtre:nth-of-type(23),
.natup-grille-corps:has(tbody:nth-of-type(23):target) .natup-grille-filtre:nth-of-type(24),
.natup-grille-corps:has(tbody:nth-of-type(24):target) .natup-grille-filtre:nth-of-type(25),
.natup-grille-corps:has(tbody:nth-of-type(25):target) .natup-grille-filtre:nth-of-type(26),
.natup-grille-corps:has(tbody:nth-of-type(26):target) .natup-grille-filtre:nth-of-type(27),
.natup-grille-corps:has(tbody:nth-of-type(27):target) .natup-grille-filtre:nth-of-type(28),
.natup-grille-corps:has(tbody:nth-of-type(28):target) .natup-grille-filtre:nth-of-type(29),
.natup-grille-corps:has(tbody:nth-of-type(29):target) .natup-grille-filtre:nth-of-type(30),
.natup-grille-corps:has(tbody:nth-of-type(30):target) .natup-grille-filtre:nth-of-type(31),
.natup-grille-corps:has(tbody:nth-of-type(31):target) .natup-grille-filtre:nth-of-type(32),
.natup-grille-corps:has(tbody:nth-of-type(32):target) .natup-grille-filtre:nth-of-type(33),
.natup-grille-corps:has(tbody:nth-of-type(33):target) .natup-grille-filtre:nth-of-type(34),
.natup-grille-corps:has(tbody:nth-of-type(34):target) .natup-grille-filtre:nth-of-type(35),
.natup-grille-corps:has(tbody:nth-of-type(35):target) .natup-grille-filtre:nth-of-type(36),
.natup-grille-corps:has(tbody:nth-of-type(36):target) .natup-grille-filtre:nth-of-type(37),
.natup-grille-corps:has(tbody:nth-of-type(37):target) .natup-grille-filtre:nth-of-type(38),
.natup-grille-corps:has(tbody:nth-of-type(38):target) .natup-grille-filtre:nth-of-type(39),
.natup-grille-corps:has(tbody:nth-of-type(39):target) .natup-grille-filtre:nth-of-type(40),
.natup-grille-corps:has(tbody:nth-of-type(40):target) .natup-grille-filtre:nth-of-type(41) {
    border-color: var(--natup-blue);
    background: var(--natup-blue);
    color: #fff;

    /* @g CSS-163 */
    --puce-fond: rgb(255 255 255 / 25%);
    --puce-encre: #fff;
}

/* @g CSS-164 */
.natup-alerte {
    margin: 0 0 0.875rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid #f0c36d;
    border-radius: 10px;
    background: #fff8e8;
    color: #8a5300;
    font-size: 0.875rem;
}

@media (width <= 700px) {
    .natup-ecran-entete {
        flex-direction: column;
        align-items: flex-start;
    }

    .natup-onglet-etiquette {
        font-size: 0.875rem;
    }

    /* @g CSS-165 */
    .natup-barre-sous-menu {
        left: auto;
        right: 0;
    }

    /* @g CSS-166 */
    .natup-grille-filtres {
        position: static;
    }
}

/* @g CSS-167 */

/* @g CSS-168 */
.natup-jeton-lecture {
    display: inline-block;
    max-width: 11rem;
    margin-right: 0.25rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--natup-bandeau);
    color: var(--natup-blue);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

/* @g CSS-169 */
.natup-jeton-lecture.est-reste {
    max-width: none;
    background: var(--natup-blue);
    color: #fff;
    cursor: help;
}

.natup-jetons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 10px;
    background: #fff;
}

.natup-jeton {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.2rem 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--natup-bandeau);
    color: var(--natup-blue);
    font-weight: 600;
}

/* @g CSS-170 */
.natup-jeton.est-alerte {
    background: #f6e5c8;
    color: #8a5300;
}

.natup-jeton-retrait {
    padding: 0 0.25rem;
    border: 0;
    background: none;
    color: inherit;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
}

.natup-jeton-retrait:hover {
    color: var(--natup-red, #b4413f);
}

/* @g CSS-171 */
.natup-jetons .natup-jeton-saisie {
    flex: 1 1 10rem;
    min-width: 8rem;
    border: 0;
    padding: 0.1rem 0.3rem;
    background: none;
    box-shadow: none;
}

.natup-jetons .natup-jeton-saisie:focus {
    outline: none;
    box-shadow: none;
}

.natup-jetons:focus-within {
    border-color: var(--natup-blue);
}


/* @g CSS-172 */
.natup-cases {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding-top: 0.25rem;
}

.natup-case {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    user-select: none;
}

.natup-case:hover {
    border-color: var(--natup-blue);
    background: var(--natup-bandeau);
}

/* @g CSS-173 */
.natup-case:has(input:checked) {
    border-color: var(--natup-blue);
    background: var(--natup-bandeau);
    color: var(--natup-blue);
    font-weight: 700;
}

.natup-case:has(input:focus-visible) {
    outline: 2px dashed var(--natup-blue);
    outline-offset: 2px;
}

/* @g CSS-174 */
.natup-case.est-hors-plage {
    border-style: dashed;
    border-color: #f0c36d;
    background: #fff8e8;
}

/* @g CSS-175 */

/* @g CSS-176 */
.natup-type-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

/* @g CSS-177 */
.natup-edition .natup-champ {
    margin-left: 0.3rem;
    color: var(--natup-gray-darker);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}


/* @g CSS-178 */

/* @g CSS-179 */
.natup-referentiel-onglets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.natup-referentiel-onglet {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 999px;
    background: #fff;
    color: var(--natup-ink);
    font-weight: 600;
    text-decoration: none;
}

.natup-referentiel-onglet:hover {
    border-color: var(--natup-blue);
    color: var(--natup-blue);
}

.natup-referentiel-onglet.est-actif {
    border-color: var(--natup-blue);
    background: var(--natup-blue);
    color: #fff;
}

/* @g CSS-180 */
.natup-recherche {
    flex: 1 1 14rem;
    margin: 0;
}

/* @g CSS-181 */
.natup-recherche-masques {
    flex: 0 0 auto;
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin: 0;
    white-space: nowrap;
    cursor: pointer;
}

/* @g CSS-182 */
.natup-edition {
    width: calc(100% - 2rem);
    max-width: 50rem;
    max-height: calc(100vh - 4rem);
    padding: 0;
    overflow: hidden;
}

.natup-edition form {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 4rem);
}

.natup-edition-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--natup-gray-dark);
}

.natup-edition-entete h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

/* @g CSS-183 */
.natup-edition-corps {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
}

/* @g CSS-184 */
.natup-zone-longue {
    font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
    resize: vertical;
}

/* @g CSS-185 */
.natup-edition-corps .form-control[readonly] {
    background: var(--natup-gray);
    cursor: default;
}

.natup-edition .natup-confirmation-actions {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--natup-gray-dark);
}

.natup-edition .natup-message {
    margin: 0 1.25rem;
}

/* @g CSS-186 */
.natup-edition .form-control[readonly] {
    background: var(--natup-gray);
    color: var(--natup-gray-darker);
}

/* @g CSS-187 */
.natup-choix {
    display: flex;
    gap: 1rem;
    padding-top: 0.25rem;
}

.natup-choix-option {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    cursor: pointer;
}

.natup-choix-option input[disabled] {
    cursor: not-allowed;
}

.natup-choix-option input[disabled] + span {
    color: var(--natup-gray-darker);
}

/* @g CSS-188 */
.natup-pastille-etat {
    display: inline-block;
    min-width: 2.75rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.02em;
}

.natup-pastille-etat.est-oui {
    background: var(--natup-bandeau);
    color: var(--natup-blue);
}

.natup-pastille-etat.est-non,
.natup-pastille-etat.est-rouge {
    background: #fdecec;
    color: #b4413f;
}

/* @g CSS-189 */
.natup-pastille-etat.est-vert,
.natup-etiquette-touche {
    background: #e7f4ec;
    color: #2f7a52;
}

/* @g CSS-190 */
.natup-pastille-etat.est-orange {
    background: #fdf0e1;
    color: #a0561a;
}

/* @g CSS-191 */
.natup-pastille-signature::before {
    content: "\270D\FE0E";
    margin-right: 0.35rem;
}

/* @g CSS-192 */

/* @g CSS-193 */
.natup-compteurs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.natup-compteur {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 10px;
    background: #fff;
}

.natup-compteur-valeur {
    color: var(--natup-blue);
    font-size: 1.125rem;
    font-weight: 700;
}

.natup-compteur-libelle {
    color: var(--natup-gray-darker);
    font-size: 0.8125rem;
}

/* @g CSS-194 */
.natup-compteur-source {
    display: block;
    font-size: 0.75rem;
}

/* @g CSS-195 */
.natup-compteur.est-alerte {
    border-color: #f0c36d;
    background: #fff8e8;
}

.natup-compteur.est-alerte .natup-compteur-valeur {
    color: #8a5300;
}

/* @g CSS-196 */

.natup-types {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.natup-type {
    border: 1px solid var(--natup-gray-dark);
    border-radius: 12px;
    background: #fff;
}

/* @g CSS-197 */
.natup-type > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.625rem 0.875rem;
    list-style: none;
    cursor: pointer;
}

.natup-type > summary::-webkit-details-marker {
    display: none;
}

.natup-type > summary::before {
    content: "";
    flex: none;
    width: 0.4rem;
    height: 0.4rem;
    border-right: 2px solid var(--natup-gray-darker);
    border-bottom: 2px solid var(--natup-gray-darker);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.natup-type[open] > summary::before {
    transform: rotate(45deg);
}

.natup-type > summary:hover {
    background: var(--natup-bandeau);
    border-radius: 12px;
}

.natup-type-mouvement {
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    background: var(--natup-blue);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.natup-type-libelle {
    font-weight: 600;
}

.natup-type-id,
.natup-type-compte {
    color: var(--natup-gray-darker);
    font-size: 0.8125rem;
}

/* @g CSS-198 */
.natup-type-compte {
    margin-left: auto;
}

.natup-libelle-code {
    color: var(--natup-blue);
    font-weight: 600;
}

.natup-type-compte.est-alerte {
    color: #8a5300;
    font-weight: 700;
}

.natup-type.est-marque {
    border-color: #f0c36d;
}

.natup-type-corps {
    padding: 0 0.875rem 0.875rem;
}

/* @g CSS-199 */
.natup-etiquette-alerte {
    margin: 0;
    background: #fff4e0;
    color: #8a5300;
}

/* @g CSS-200 */
.natup-definitions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    margin: 0 0 0.875rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--natup-gray-dark);
    border-bottom: 1px solid var(--natup-gray-dark);
}

.natup-definitions dt {
    color: var(--natup-gray-darker);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.natup-definitions dd {
    margin: 0;
    font-size: var(--bs-body-font-size);
}

.natup-definitions code,
.natup-orphelines code,
.natup-note code {
    padding: 0.05rem 0.35rem;
    border-radius: 5px;
    background: var(--natup-bandeau);
    color: var(--natup-blue);
    font-weight: 600;
}

.natup-champ {
    color: var(--natup-gray-darker);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.natup-orphelines {
    margin-top: 1.5rem;
}

.natup-orphelines h2 {
    color: var(--natup-blue);
    font-size: var(--natup-titre-bloc);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (width <= 700px) {
    .natup-type-compte {
        margin-left: 0;
    }

    .natup-definitions {
        gap: 0.5rem 1rem;
    }
}

/* @g CSS-201 */

.natup-titre-section {
    margin: 1.5rem 0 0.75rem;
    color: var(--natup-blue);
    font-size: var(--natup-titre-bloc);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* @g CSS-202 */
.natup-ecran-adherent main {
    padding-bottom: 2.5rem !important;
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)) !important;
}

/* @g CSS-203 */
.natup-lien-arbitrage {
    padding: 0;
    border: 0;
    background: none;
    color: var(--natup-blue);
    font-size: var(--bs-body-font-size);
    font-weight: 600;
    text-align: left;
    text-decoration: underline;
}

.natup-lien-arbitrage:hover,
.natup-lien-arbitrage:focus-visible {
    color: var(--natup-blue-alt);
}

.natup-lien-arbitrage:disabled {
    color: var(--natup-gray-darker);
    text-decoration: none;
    cursor: not-allowed;
}

/* @g CSS-204 */
.natup-ecran-adherent .btn {
    --bs-btn-border-radius: 30px;
}

/* @g CSS-205 */
.natup-ecran-adherent .natup-confirmation .btn {
    --bs-btn-border-radius: 20px;
}

/* @g CSS-206 */
.natup-ecran-adherent .natup-fenetre {
    border-radius: 14px;
}

.natup-ecran-adherent .natup-fenetre .btn {
    --bs-btn-border-radius: 20px;
}

/* @g CSS-207 */
.natup-succes {
    margin: 0 0 0.875rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--natup-blue-light);
    border-radius: 10px;
    background: var(--natup-bandeau);
    color: var(--natup-blue);
    font-size: var(--bs-body-font-size);
}

/* @g CSS-208 */
.natup-backing > thead th,
.natup-backing > tbody td,
.natup-backing > tbody th {
    padding: 0.2rem 0.4rem;
}

/* @g CSS-209 */
.natup-backing input[type="text"] {
    width: 6rem;
    padding: 0.15rem 0.35rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* @g CSS-210 */
.natup-backing output {
    display: inline-block;
    min-width: 6rem;
    padding: 0.15rem 0.35rem;
    border: 1px dashed var(--natup-gray-dark);
    border-radius: 6px;
    background: var(--natup-gray);
    color: var(--natup-gray-darker);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* @g CSS-211 */
.natup-backing-etiquette {
    white-space: nowrap;
    font-weight: 600;
    color: var(--natup-gray-darker);
}

/* @g CSS-212 */
.natup-nombre {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.natup-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

/* @g CSS-213 */
.natup-tableau td.natup-actions {
    display: table-cell;
    margin-top: 0;
    white-space: nowrap;
    text-align: right;
}

/* @g CSS-214 */
.natup-tableau td.natup-actions .btn + .btn {
    margin-left: 0.35rem;
}

/* @g CSS-215 */
.natup-historique {
    margin-top: 1.75rem;
    padding: 0.875rem 1.125rem;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 14px;
    background: #fff;
}

.natup-historique > summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--natup-blue);
    text-transform: uppercase;
    font-size: var(--natup-titre-bloc);
    letter-spacing: 0.04em;
}

.natup-historique-liste {
    margin: 0.875rem 0 0;
    padding-left: 1.25rem;
    columns: 2;
    font-variant-numeric: tabular-nums;
}

/* @g CSS-216 */
.natup-archive {
    margin-top: 1.5rem;
    padding-left: 0.875rem;
    border-left: 3px solid var(--natup-gray-dark);
}

.natup-archive .natup-tableau-cadre {
    margin-bottom: 1rem;
}

@media (width <= 700px) {
    .natup-historique-liste {
        columns: 1;
    }

    .natup-backing input[type="text"],
    .natup-backing output {
        width: 5.5rem;
        min-width: 5.5rem;
    }
}

/* @g CSS-217 */

.natup-achat {
    white-space: nowrap;
}

/* @g CSS-218 */

/* @g CSS-219 */
.natup-achat-differentiel {
    --bs-table-bg: #fff;

    color: #b4413f;
    font-weight: 700;
}

/* @g CSS-220 */
.natup-achat-precedent {
    --bs-table-bg: #fdf3e0;

    color: var(--natup-ink);
    font-weight: 700;
}

/* @g CSS-221 */
.natup-achat-solde {
    --bs-table-bg: var(--natup-bandeau);
}

/* @g CSS-222 */
.natup-achat thead th.natup-achat-precedent {
    color: inherit;
}

/* @g CSS-223 */
.natup-achat-groupe + .natup-achat-groupe > tr:first-child > * {
    border-top: 2px solid var(--natup-gray-dark);
}

/* @g CSS-224 */
.natup-achat-sous-total > * {
    --bs-table-bg: var(--natup-bandeau);

    border-top: 1px solid var(--natup-gray-dark);
    color: var(--natup-blue);
    font-weight: 700;
}

.natup-achat-total > * {
    font-weight: 700;
    border-top: 2px solid var(--natup-blue);
    color: var(--natup-blue);
}

/* @g CSS-225 */
.natup-historique-liste .natup-note {
    display: inline;
    margin: 0 0 0 0.5rem;
}

/* @g CSS-226 */

.natup-maillon {
    margin-bottom: 0.5rem;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 12px;
    background: #fff;
}

/* @g CSS-227 */
.natup-maillon > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.625rem 0.875rem;
    list-style: none;
    cursor: pointer;
}

.natup-maillon > summary::-webkit-details-marker {
    display: none;
}

.natup-maillon > summary::before {
    content: "";
    flex: none;
    width: 0.4rem;
    height: 0.4rem;
    border-right: 2px solid var(--natup-gray-darker);
    border-bottom: 2px solid var(--natup-gray-darker);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.natup-maillon[open] > summary::before {
    transform: rotate(45deg);
}

.natup-maillon > summary:hover {
    background: var(--natup-bandeau);
    border-radius: 12px;
}

.natup-maillon.est-marque {
    border-color: #f0c36d;
}

/* @g CSS-228 */
tr.est-marque {
    --bs-table-bg: #fdf6e6;
}

/* @g CSS-229 */
tr.est-retrouvee {
    --bs-table-bg: var(--natup-bandeau);
}

/* @g CSS-230 */
.natup-type.est-retrouvee {
    border-color: var(--natup-blue);
    background: var(--natup-bandeau);
}

.natup-maillon-cle {
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    background: var(--natup-blue);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.natup-maillon-libelle {
    font-weight: 600;
}

.natup-maillon-compte {
    color: var(--natup-gray-darker);
    font-size: 0.8125rem;
}

/* @g CSS-231 */

.natup-maillon-compte.est-alerte {
    color: #8a5300;
    font-weight: 700;
}

.natup-maillon-corps {
    padding: 0 0.875rem 0.875rem;
}

.natup-maillon-titre {
    margin: 1rem 0 0.5rem;
    font-size: var(--natup-titre-bloc);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--natup-gray-darker);
}

/* @g CSS-232 */

.natup-rattachement {
    margin-top: 0.75rem;
}

.natup-rattachement fieldset {
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 10px;
    background: var(--natup-gray);
}

.natup-rattachement legend {
    float: none;
    width: auto;
    padding: 0 0.375rem;
    margin: 0;
    font-size: var(--natup-titre-bloc);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--natup-blue);
}

.natup-rattachement select {
    max-width: 28rem;
}

/* @g CSS-233 */

/* @g CSS-234 */

.natup-creation {
    margin: 0 0 1rem;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 10px;
    background: var(--natup-gray);
}

.natup-creation > summary {
    padding: 0.5rem 0.875rem;
    font-weight: 700;
    color: var(--natup-blue);
    cursor: pointer;
}

.natup-creation-form {
    padding: 0 0.875rem 0.875rem;
}

.natup-creation-champ {
    margin-bottom: 0.75rem;
    max-width: 32rem;
}

/* @g CSS-235 */
.natup-rattachement-ligne {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.natup-rattachement-ligne select {
    min-width: 12rem;
}

/* @g CSS-236 */
.natup-cases {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.125rem 0.75rem;
}

.natup-case {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.2rem 0.3rem;
    border-radius: 6px;
    cursor: pointer;
}

.natup-case:hover {
    background: #fff;
}

.natup-case input {
    flex: none;
}

.natup-case-cle {
    flex: none;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.75rem;
    color: var(--natup-gray-darker);
}

.natup-case-note {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--natup-gray-darker);
}

/* @g CSS-237 */
.natup-liste-plate {
    margin: 0;
    padding-left: 1.25rem;
    columns: 3;
}

/* @g CSS-238 */
.natup-ligne-marquee > *:first-child {
    box-shadow: inset 3px 0 0 #f0c36d;
}

@media (width <= 700px) {
    .natup-liste-plate {
        columns: 1;
    }

    .natup-cases {
        grid-template-columns: 1fr;
    }
}

/* @g CSS-239 */

/* @g CSS-240 */
.natup-ordres-barre {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.natup-ordres-coches {
    font-size: 0.875rem;
    color: var(--natup-gray-darker);
}

/* @g CSS-241 */
.natup-rapport-ordres {
    display: block;
    margin-bottom: 2rem;
}

/* @g CSS-242 */
.natup-fenetre-validation {
    width: min(34rem, calc(100vw - 2rem));
    max-width: none;
}

/* @g CSS-243 */
.natup-saisie-ordres {
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 12px;
    background: var(--natup-bandeau);
}

/* @g CSS-244 */
.natup-saisie-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.natup-saisie-ordres legend {
    float: none;
    width: auto;
    margin-bottom: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--natup-gray-darker);
}

/* @g CSS-245 */
.natup-saisie-entete .natup-actions {
    margin: 0;
}

/* @g CSS-246 */
.natup-ecran-entete .natup-actions {
    margin: 0;
    align-items: center;
}

/* @g CSS-247 */
.natup-saisie-montants {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.5rem 0.75rem;
}

/* @g CSS-248 */

/* @g CSS-249 */
.natup-fiche-colonnes {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1rem;
    align-items: start;
}

/* @g CSS-250 */
@media (max-width: 991.98px) {
    .natup-fiche-colonnes {
        grid-template-columns: minmax(0, 1fr);
    }
}

.natup-fiche-bloc {
    padding: 0.75rem 1rem;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 12px;
    background: var(--natup-bandeau);
}

/* @g CSS-251 */
.natup-fiche-tarif {
    border-color: var(--natup-blue);
}

.natup-fiche-titre {
    margin: 0 0 0.5rem;
    color: var(--natup-gray-darker);
    font-size: 0.95rem;
    font-weight: 700;
}

/* @g CSS-252 */
.natup-fiche-tarif .natup-saisie-montants {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* @g CSS-253 */
.natup-saisie-montants > .natup-filtre {
    min-width: 0;
    margin-bottom: 0;
}

/* @g CSS-254 */
.natup-filtre-paire {
    display: contents;
}

/* @g CSS-255 */
.natup-cases {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
}

.natup-cases > .form-check {
    margin-bottom: 0;
}

.natup-saisie-ordres .natup-actions {
    margin-top: 0.75rem;
}

/* @g CSS-256 */
.natup-stylo {
    padding: 0 0.25rem;
    margin-left: 0.25rem;
    font-size: 0.875rem;
    line-height: 1;
    color: var(--natup-blue);
    visibility: hidden;
    cursor: pointer;
    background: none;
    border: 0;
}

.natup-grille tr:hover .natup-stylo,
.natup-stylo:focus-visible {
    visibility: visible;
}

.natup-stylo:hover {
    color: var(--natup-blue-alt);
}

/* @g CSS-257 */
.natup-colonne-case {
    width: 2.25rem;
    text-align: center;
}

/* @g CSS-258 */
/* @g CSS-259 */

/* @g CSS-260 */
.natup-erreur {
    position: relative;
    max-width: 34rem;
    margin: 2.5rem auto 0;
    padding: 2.5rem 2rem 2rem;
    overflow: hidden;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 14px;
    background: #fff;
    text-align: center;
    box-shadow:
        0 1px 2px rgba(57, 53, 50, 0.06),
        0 1.25rem 2.5rem -1.25rem rgba(57, 53, 50, 0.28);
}

/* @g CSS-261 */
.natup-erreur::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--natup-blue), var(--natup-blue-alt));
}

/* @g CSS-262 */
.natup-erreur-marque {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: var(--natup-bandeau);
    color: var(--natup-blue);
}

/* @g CSS-263 */
.natup-erreur-code {
    margin: 0 0 0.35rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--natup-gray-darker);
}

.natup-erreur-titre {
    margin: 0 0 0.75rem;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--natup-blue);
}

.natup-erreur-message {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
}

/* @g CSS-264 */
.natup-erreur-details {
    margin: 1rem 0 0;
    font-size: 0.8rem;
    color: var(--natup-gray-darker);
    overflow-wrap: anywhere;
}

/* @g CSS-265 */
.natup-page-erreur {
    padding: 1.5rem 1rem 3rem;
}

/* @g CSS-266 */
.natup-page-erreur-reference {
    max-width: 34rem;
    margin: 1.25rem auto 0;
    padding: 0 0.5rem;
    text-align: center;
    font-size: 0.9rem;
}

.natup-page-erreur-reference code {
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    background: var(--natup-bandeau);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.natup-page-erreur-reference span {
    display: block;
    margin-top: 0.35rem;
    color: var(--natup-gray-darker);
}

@media (max-width: 480px) {
    .natup-erreur {
        margin-top: 1.5rem;
        padding: 2rem 1.25rem 1.5rem;
    }

    .natup-erreur-titre {
        font-size: 1.2rem;
    }
}

/* @g CSS-267 */
.natup-fenetre-ajout,
.natup-fenetre-bascule {
    width: min(38rem, calc(100vw - 2rem));
    max-width: none;
}

/* @g CSS-268 */
.natup-fenetre-ajout .natup-fenetre-titre,
.natup-fenetre-validation .natup-fenetre-titre,
.natup-fenetre-duplication .natup-fenetre-titre,
.natup-fenetre-bascule .natup-fenetre-titre,
.natup-fenetre-historique .natup-fenetre-titre {
    padding: 0.875rem 1.25rem;
    margin: -1.25rem -1.25rem 1rem;
    color: #fff;
    background: var(--natup-blue);
    border-radius: 0.5rem 0.5rem 0 0;
}

/* @g CSS-269 */
.natup-fenetre-historique {
    width: min(56rem, calc(100vw - 2rem));
    max-width: none;
    max-height: 80vh;
}

/* @g CSS-270 */
.natup-fenetre-historique .natup-tableau-cadre {
    max-height: 55vh;
    overflow: auto;
}

/* @g CSS-271 */
.natup-tiroir-historique {
    margin-left: 0.75rem;
    vertical-align: middle;
}

/* @g CSS-272 */
.natup-fenetre-ajout .natup-etape-titre,
.natup-fenetre-bascule .natup-etape-titre {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    color: var(--natup-blue);
}

.natup-fenetre-ajout .natup-etape-titre::before,
.natup-fenetre-bascule .natup-etape-titre::before {
    width: 0.25rem;
    height: 1rem;
    content: "";
    background: var(--natup-blue-alt);
    border-radius: 0.125rem;
}

.natup-etape {
    padding: 0;
    margin: 0 0 1.25rem;
    border: 0;
}

.natup-etape-titre {
    float: none;
    width: auto;
    padding: 0;
    margin-bottom: 0.5rem;
    font-size: var(--bs-body-font-size);
    font-weight: 700;
    color: var(--natup-gray-darker);
}

/* @g CSS-273 */
.natup-etape-choix {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.5rem;
}

/* @g CSS-274 */
.natup-carte-offre {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0.625rem;
    cursor: pointer;
    background: var(--natup-bandeau);
    border: 1px solid var(--natup-gray-dark);
    border-radius: 0.5rem;
}

/* @g CSS-275 */
.natup-carte-offre input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
}

/* @g CSS-276 */
.natup-carte-offre-groupe {
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--natup-blue);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.natup-carte-offre-nom {
    font-weight: 600;
    line-height: 1.25;
}

.natup-carte-offre:hover {
    border-color: var(--natup-blue);
}

/* @g CSS-277 */
.natup-carte-offre:has(input:focus-visible) {
    outline: 2px solid var(--natup-blue);
    outline-offset: 2px;
}

/* @g CSS-278 */
/* @g CSS-279 */
.natup-carte-offre:has(input:checked) {
    background: var(--natup-blue-light);
    border-color: var(--natup-blue);
    box-shadow: inset 0 0 0 1px var(--natup-blue);
}

.natup-carte-offre:has(input:checked) .natup-carte-offre-nom {
    color: var(--natup-blue);
}

.natup-etape-resultats {
    margin-top: 0.75rem;
}

.natup-etape-liste {
    max-height: 16rem;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 0.375rem;
}

.natup-choix-adherent {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    text-align: left;
    cursor: pointer;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--natup-gray-dark);
}

.natup-etape-liste li:last-child .natup-choix-adherent {
    border-bottom: 0;
}

.natup-choix-adherent:hover:not(:disabled) {
    background: var(--natup-gray);
}

.natup-choix-adherent:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.natup-choix-adherent.est-marque {
    background: var(--natup-gray);
    box-shadow: inset 0.1875rem 0 0 var(--natup-blue);
}

.natup-choix-nom {
    font-weight: 600;
}

/* @g CSS-280 */
.natup-choix-detail {
    font-size: 0.8125rem;
    color: var(--natup-ink);
}

/* @g CSS-281 */
.natup-fenetre-ajout .natup-actions,
.natup-fenetre-bascule .natup-actions {
    justify-content: flex-end;
}

/* @g CSS-344 */
.natup-fenetre.natup-fenetre-ajout {
    width: min(46rem, calc(100vw - 2rem));
}

/* @g CSS-345 */
.natup-fenetre-ajout .natup-actions {
    align-items: center;
}

.natup-ajout-resume {
    margin: 0 auto 0 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--natup-blue);
}

/* @g CSS-346 */
.natup-adherent-retenu {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.75rem;
    background: var(--natup-blue-light);
    border: 1px solid var(--natup-blue);
    border-radius: 0.5rem;
}

.natup-adherent-retenu[hidden] {
    display: none;
}

.natup-adherent-retenu-texte {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

/* @g CSS-347 */
.natup-ajout-compte {
    margin: 0 0 0.375rem;
    font-size: 0.8125rem;
    color: var(--natup-ink);
}

.natup-ajout-compte.est-tronque {
    font-weight: 600;
    color: var(--natup-blue);
}

/* @g CSS-348 */
.natup-choix-adherent:focus-visible {
    outline: 2px solid var(--natup-blue);
    outline-offset: -2px;
    background: var(--natup-gray);
}

/* @g CSS-282 */

/* @g CSS-283 */
.natup-differe-attente {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 14rem;
    margin: 0;
    color: var(--natup-blue);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.natup-differe-attente::before {
    content: "";
    width: 2.25rem;
    height: 2.25rem;
    border: 0.22rem solid var(--natup-gray-dark);
    border-top-color: var(--natup-blue);
    border-radius: 50%;
    animation: natup-tourne 0.9s linear infinite;
}

@supports ((mask: radial-gradient(#000 0 0)) or (-webkit-mask: radial-gradient(#000 0 0))) {
    .natup-differe-attente::before {
        border: 0;
        background: conic-gradient(
            from 0deg,
            rgb(0 165 159 / 0%) 0deg,
            var(--natup-logo-turquoise) 140deg,
            var(--natup-logo-vert) 260deg,
            rgb(194 212 74 / 0%) 360deg
        );
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.22rem), #000 0);
        mask: radial-gradient(farthest-side, transparent calc(100% - 0.22rem), #000 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .natup-differe-attente::before {
        animation: none;
    }
}



/* @g CSS-284 */
.natup-tableau td.montant .natup-etiquette {
    margin-left: 0;
}

/* @g CSS-285 */
.natup-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.4rem;
    line-height: 1;
}

/* @g CSS-286 */

/* @g CSS-287 */
.natup-tiroir-voile {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgb(0 0 0 / 35%);
}

.natup-tiroir {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    width: 50%;
    min-width: 34rem;
    max-width: 60rem;
    background: #fff;
    box-shadow: -0.5rem 0 1.5rem rgb(0 0 0 / 18%);
    transform: translateX(100%);
    transition: transform 0.2s ease-out;
}

.natup-tiroir[aria-hidden="false"] {
    transform: translateX(0);
}

/* @g CSS-288 */
.natup-tiroir[aria-hidden="true"] {
    visibility: hidden;
    transition: transform 0.2s ease-out, visibility 0s linear 0.2s;
}

.natup-tiroir-entete {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--natup-gray-dark);
    background: var(--natup-gray);
}

.natup-tiroir-titre {
    margin: 0;
    color: var(--natup-blue);
    font-size: 0.9375rem;
    font-weight: 700;
    flex: none;
}

/* @g CSS-289 */
.natup-tiroir-complement {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
}

/* @g CSS-290 */
.natup-tiroir-complement .natup-tiroir-numero {
    margin: 0;
    overflow: hidden;
    font-size: 0.9375rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.natup-tiroir-fermer {
    flex: none;
    padding: 0.125rem 0.5rem;
    border: 0;
    border-radius: 0.25rem;
    background: transparent;
    color: var(--natup-gray-darker);
    font-size: 1.25rem;
    line-height: 1;
}

.natup-tiroir-fermer:hover {
    background: var(--natup-gray-dark);
    color: #000;
}

/* @g CSS-291 */
.natup-tiroir-corps {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 0.75rem 0.75rem;
}

/* @g CSS-292 */
.natup-tiroir.est-cadre {
    width: 80%;
    max-width: 78rem;
}

/* @g CSS-293 */
.natup-tiroir.est-cadre .natup-tiroir-corps {
    overflow: hidden;
    padding: 0;
}

.natup-tiroir-page {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* @g CSS-294 */

/* @g CSS-295 */
.natup-tiroir-corps .natup-app {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* @g CSS-296 */
.natup-tiroir-corps .natup-saisie-ordres {
    margin-bottom: 0;
    padding: 0;
    border: 0;
    background: none;
}

/* @g CSS-297 */
.natup-tiroir-corps .natup-fiche-elements {
    margin-bottom: 0.75rem;
    padding: 0;
    border: 0;
    background: none;
}

.natup-tiroir-corps .natup-fiche-colonnes {
    gap: 0.75rem;
}

.natup-tiroir-corps .natup-champ {
    margin-bottom: 0.5rem;
}

.natup-tiroir-corps .natup-note,
.natup-tiroir-corps .natup-succes,
.natup-tiroir-corps .natup-alerte {
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem;
}

/* @g CSS-298 */

/* @g CSS-299 */
.natup-tiroir-tete {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 -0.75rem 0.75rem;
    padding: 0.75rem 0.75rem 0.625rem;
    border-bottom: 1px solid var(--natup-gray-dark);
    background: #fff;
}

.natup-tiroir-numero {
    margin: 0 0 0.375rem;
    color: var(--natup-blue);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
}

/* @g CSS-300 */
.natup-tiroir-adherent {
    color: #1c1917;
    font-size: 0.875rem;
    font-weight: 600;
}

.natup-tiroir-adherent::before {
    margin: 0 0.375rem;
    color: var(--natup-gray-darker);
    content: '·';
    font-weight: 400;
}

.natup-tiroir-etats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
}

/* @g CSS-301 */
.natup-tiroir-etat {
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--natup-gray);
    color: #44403c;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.natup-tiroir-etat.est-acquise {
    background: #e7f6ec;
    color: #10683a;
}

.natup-tiroir-etat.est-attente {
    background: #fdf0e3;
    color: #9a5b00;
}

/* @g CSS-302 */

/* @g CSS-303 */
.natup-tiroir-dates {
    margin: 0.375rem 0 0;
    color: var(--natup-gray-darker);
    font-size: 0.6875rem;
}

/* @g CSS-304 */

/* @g CSS-305 */
.natup-tiroir-corps .natup-fiche-colonnes {
    display: block;
}

/* @g CSS-306 */
.natup-tiroir-corps .natup-saisie-montants {
    display: block;
}

/* @g CSS-307 */
.natup-tiroir-corps .natup-filtre {
    display: grid;
    grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
    align-items: center;
    gap: 0 0.75rem;
    margin: 0;
    padding: 0.1875rem 0;
    border-bottom: 1px solid var(--natup-gray);
}

/* @g CSS-308 */
.natup-tiroir-corps .natup-filtre-paire {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 0.75rem;
    border-bottom: 1px solid var(--natup-gray);
}

/* @g CSS-309 */
.natup-tiroir-corps .natup-filtre-paire > .natup-filtre {
    border-bottom: 0;
}

/* @g CSS-310 */
.natup-tiroir-corps .natup-filtre > .form-label {
    margin: 0;
    color: #57534e;
    font-size: 0.8125rem;
    line-height: 1.3;
}

.natup-tiroir-corps .natup-filtre > .form-control,
.natup-tiroir-corps .natup-filtre > .form-select {
    min-width: 0;
    font-size: 0.8125rem;
}

/* @g CSS-311 */
.natup-tiroir-corps .natup-filtre > .natup-cases {
    grid-column: 2;
}

/* @g CSS-312 */
@media (max-width: 900px) {
    .natup-tiroir-corps .natup-filtre {
        grid-template-columns: minmax(0, 1fr);
    }

    .natup-tiroir-corps .natup-filtre > .form-label {
        margin-bottom: 0.125rem;
    }

    .natup-tiroir-corps .natup-filtre > .natup-cases {
        grid-column: 1;
    }

    /* @g CSS-313 */
    .natup-tiroir-corps .natup-filtre-paire {
        grid-template-columns: minmax(0, 1fr);
        border-bottom: 0;
    }

    /* @g CSS-314 */
    .natup-tiroir-corps .natup-filtre-paire > .natup-filtre {
        border-bottom: 1px solid var(--natup-gray);
    }
}

/* @g CSS-338 */
.natup-tiroir:has(.natup-fiche-colonnes) {
    width: 76%;
    max-width: 96rem;
}

/* @g CSS-339 */
@media (min-width: 901px) {
    .natup-tiroir-corps .natup-fiche-colonnes .natup-saisie-montants {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem 0.75rem;
    }

    /* @g CSS-340 */
    .natup-tiroir-corps .natup-fiche-colonnes .natup-filtre {
        grid-template-columns: minmax(0, 1fr);
        padding: 0;
        border-bottom: 0;
    }

    .natup-tiroir-corps .natup-fiche-colonnes .natup-filtre > .form-label {
        margin-bottom: 0.125rem;
    }

    .natup-tiroir-corps .natup-fiche-colonnes .natup-filtre > .natup-cases {
        grid-column: 1;
    }

    /* @g CSS-341 */
    .natup-tiroir-corps .natup-fiche-colonnes .natup-filtre-paire {
        grid-column: 1 / -1;
        gap: 0.5rem 0.75rem;
        border-bottom: 0;
    }

    /* @g CSS-342 */
    .natup-tiroir-corps .natup-fiche-colonnes .natup-filtre:has(> .natup-cases) {
        grid-column: 1 / -1;
    }

    .natup-tiroir-corps .natup-fiche-elements {
        margin-bottom: 0;
    }
}

/* @g CSS-343 */
@media (min-width: 1200px) {
    .natup-tiroir-corps .natup-fiche-colonnes {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 1rem;
        align-items: start;
    }
}

/* @g CSS-315 */

/* @g CSS-316 */
.natup-tiroir-corps form > .natup-actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    /* @g CSS-317 */
    margin: 0 -0.75rem;
    padding: 0.625rem 0.75rem;
    border-top: 1px solid var(--natup-gray-dark);
    background: #fff;
    box-shadow: 0 -0.25rem 0.5rem rgb(0 0 0 / 6%);
}

/* @g CSS-318 */
.natup-tiroir-corps form > .natup-actions .btn-danger {
    margin-left: auto;
}

/* @g CSS-319 */
.natup-tiroir-corps .natup-fiche-titre {
    margin: 0 0 0.5rem;
    color: var(--natup-gray-darker);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* @g CSS-320 */
body.natup-tiroir-ouvert {
    overflow: hidden;
}

/* @g CSS-321 */
@media (max-width: 900px) {
    .natup-tiroir {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    /* @g CSS-322 */
    .natup-tiroir.est-cadre {
        width: 100%;
        max-width: none;
    }
}

/* @g CSS-323 */
@media (prefers-reduced-motion: reduce) {
    .natup-tiroir {
        transition: none;
    }

    .natup-tiroir[aria-hidden="true"] {
        transition: none;
    }
}

/* @g CSS-324 */

/* @g CSS-325 */
.natup-numero-fiche {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--natup-bandeau);
    color: var(--natup-blue);
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.natup-numero-fiche:hover,
.natup-numero-fiche:focus-visible {
    background: var(--natup-blue-light);
    color: var(--natup-blue);
}

.natup-numero-fiche svg {
    flex: none;
    width: 0.75rem;
    height: 0.75rem;
    opacity: 0.75;
}

/* @g CSS-326 */

/* @g CSS-327 */
.natup-apercu-lien {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    color: var(--natup-blue);
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
}

.natup-apercu-lien:hover,
.natup-apercu-lien:focus-visible {
    background: var(--natup-bandeau);
    color: var(--natup-blue);
}

/* @g CSS-328 */
.natup-apercu-entetes {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 0 0.75rem;
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
}

.natup-apercu-entetes dt {
    padding: 0.1875rem 0;
    border-bottom: 1px solid var(--natup-gray);
    color: #57534e;
    font-weight: 400;
}

.natup-apercu-entetes dd {
    margin: 0;
    padding: 0.1875rem 0;
    border-bottom: 1px solid var(--natup-gray);
    color: #1c1917;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* @g CSS-329 */
.natup-apercu-message {
    display: block;
    width: 100%;
    height: 26rem;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 12px;
    background: #fff;
}

.natup-apercu-source {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
}

.natup-apercu-source summary {
    color: var(--natup-gray-darker);
    cursor: pointer;
}

/* @g CSS-330 */
.natup-apercu-source pre {
    max-height: 18rem;
    margin: 0.5rem 0 0;
    padding: 0.625rem 0.75rem;
    overflow: auto;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 8px;
    background: var(--natup-gray);
    font-size: 0.75rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* @g CSS-331 */
.natup-tiroir-corps .natup-apercu-message {
    height: 60vh;
}

/* @g CSS-332 */

/* @g CSS-333 */
.natup-etapes {
    margin: 0;
    padding: 1rem 1.25rem 0.5rem;
    list-style: none;
}

.natup-etapes .natup-etape {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    padding-bottom: 0.625rem;
    margin-bottom: 0.625rem;
    border-bottom: 1px solid var(--natup-gray-dark);
}

/* @g CSS-334 */
.natup-etapes .natup-etape:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

/* @g CSS-335 */
.natup-etape-rang {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--natup-bandeau);
    color: var(--natup-blue);
    font-size: 0.8125rem;
    font-weight: 700;
}

.natup-etape-libelle {
    font-size: 0.9375rem;
    font-weight: 600;
}

/* @g CSS-336 */
.natup-duplication-avertissement {
    margin-top: 1rem;
}

/* @g CSS-337 */
.natup-rapport-duplication {
    max-height: 16rem;
    margin-top: 1rem;
    overflow-y: auto;
}

.natup-rapport-duplication ul {
    padding-left: 1.25rem;
    margin-bottom: 0;
    font-size: 0.875rem;
}

.natup-rapport-duplication li {
    margin-bottom: 0.25rem;
}

/* @g CSS-349 */
.natup-apercu-bouton {
    margin-top: 0.5rem;
}

.natup-apercu {
    margin-top: 0.5rem;
}

.natup-apercu-cadre {
    display: block;
    width: 100%;
    height: 32rem;
    border: 1px solid var(--natup-gray-darker);
    border-radius: 0.375rem;
    background: var(--natup-gray-dark);
}

/* @g CSS-351 */
.natup-adherent-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.natup-adherent-retour {
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
}

/* @g CSS-352 */
.natup-adherent {
    display: grid;
    grid-template-columns: 20rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
}

.natup-adherent-cote {
    position: sticky;
    top: 1rem;
    min-width: 0;
}

.natup-adherent-principal {
    min-width: 0;
}

.natup-adherent-principal > .natup-differe {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* @g CSS-353 */
.natup-adherent-profil {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

.natup-adherent-profil::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--natup-logo-turquoise), var(--natup-logo-vert));
}

.natup-adherent-tete {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.125rem 1rem 0.875rem;
}

.natup-adherent-avatar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--natup-blue);
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.natup-adherent-nom {
    margin: 0 0 0.125rem;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.natup-adherent-ident {
    margin: 0;
    color: var(--natup-gray-darker);
    font-size: 0.6875rem;
}

.natup-adherent-ident code {
    color: var(--natup-ink);
    font-size: 0.6875rem;
}

.natup-adherent-etiquettes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.375rem;
}

/* @g CSS-354 */
.natup-adherent-section {
    padding: 0.875rem 1rem;
    border-top: 1px solid var(--natup-gray-dark);
}

.natup-adherent-section.est-rattachement {
    background: var(--natup-bandeau);
}

.natup-adherent-section.est-actions {
    background: #fafaf9;
}

.natup-adherent-section > h2 {
    margin: 0 0 0.5rem;
    color: var(--natup-blue);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.natup-adherent-champs {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3125rem 0.75rem;
    margin: 0;
}

.natup-adherent-champs dt {
    color: var(--natup-gray-darker);
    font-size: 0.6875rem;
    font-weight: 500;
}

.natup-adherent-champs dd {
    min-width: 0;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.natup-adherent-vide {
    color: var(--natup-gray-darker);
    font-weight: 500;
}

.natup-adherent-a-noter {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.6875rem;
}

.natup-adherent-a-noter .natup-pastille-etat {
    margin-right: 0.375rem;
}

/* @g CSS-355 */
.natup-adherent-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

/* @g CSS-356 */
.natup-adherent-contrats > h2 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.natup-adherent-contrats > h2 a {
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.natup-adherent-contrats .natup-carte-corps {
    padding: 0;
}

.natup-adherent-contrats .natup-tableau-cadre {
    border: 0;
    border-radius: 0;
}

.natup-adherent-contrats .natup-tableau > thead th,
.natup-adherent-contrats .natup-tableau > thead th:not(:has(button)) {
    border-bottom: 1px solid var(--natup-blue-light);
    background: var(--natup-bandeau);
    color: var(--natup-blue);
}

.natup-adherent-aucun {
    padding: 1.125rem;
}

.natup-adherent-pied-tableau {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--natup-gray-dark);
    color: var(--natup-gray-darker);
    font-size: 0.6875rem;
}

/* @g CSS-357 */
.natup-adherent-duo {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 0.75rem;
}

.natup-adherent-legende-barres {
    display: flex;
    gap: 1rem;
    margin: 0 0 0.625rem;
    color: var(--natup-gray-darker);
    font-size: 0.6875rem;
}

.natup-adherent-legende-barres span::before {
    content: "";
    display: inline-block;
    width: 0.75rem;
    height: 0.5rem;
    margin-right: 0.375rem;
    border-radius: 999px;
    vertical-align: middle;
}

.natup-adherent-legende-barres .est-contracte::before,
.natup-adherent-barre.est-contracte > span {
    background: var(--natup-blue);
}

.natup-adherent-legende-barres .est-livre::before,
.natup-adherent-barre.est-livre > span {
    background: var(--natup-logo-vert);
}

.natup-adherent-campagnes {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.natup-adherent-campagnes > li {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) 6.5rem;
    gap: 0.625rem;
    align-items: center;
}

.natup-adherent-annee {
    font-size: 0.8125rem;
    font-weight: 700;
}

.natup-adherent-annee.est-courante {
    color: var(--natup-blue);
}

.natup-adherent-barres {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
}

.natup-adherent-barre {
    display: block;
    height: 0.5rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--natup-gray-dark);
}

.natup-adherent-barre > span {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.natup-adherent-chiffres {
    font-size: 0.6875rem;
    line-height: 1.3;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* @g CSS-358 */
.natup-adherent-anneau {
    flex-wrap: nowrap;
    align-items: center;
    gap: 1rem;
}

.natup-adherent-anneau .natup-camembert-anneau {
    flex: none;
    width: 7.5rem;
    height: 7.5rem;
}

.natup-adherent-anneau .natup-legende {
    flex: 1;
    min-width: 0;
}

/* @g CSS-359 */
.natup-adherent-frise {
    position: relative;
    margin: 0;
    padding: 0 0 0 1.125rem;
    list-style: none;
}

.natup-adherent-frise::before {
    content: "";
    position: absolute;
    top: 0.375rem;
    bottom: 0.375rem;
    left: 0.3125rem;
    width: 2px;
    background: var(--natup-gray-dark);
}

.natup-adherent-frise > li {
    --natup-frise-point: var(--natup-gray-darker);
    --natup-frise-fond: var(--natup-gray);
    --natup-frise-encre: #57534e;

    position: relative;
    padding: 0 0 0.75rem;
}

.natup-adherent-frise > li:last-child {
    padding-bottom: 0;
}

.natup-adherent-frise > li::before {
    content: "";
    position: absolute;
    top: 0.3125rem;
    left: -1.0625rem;
    width: 0.625rem;
    height: 0.625rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--natup-frise-point);
    box-shadow: 0 0 0 1px var(--natup-frise-point);
}

.natup-adherent-frise > li.est-creation {
    --natup-frise-point: var(--natup-blue);
    --natup-frise-fond: var(--natup-bandeau);
    --natup-frise-encre: var(--natup-blue);
}

.natup-adherent-frise > li.est-signature {
    --natup-frise-point: var(--natup-green);
    --natup-frise-fond: #e7f4ec;
    --natup-frise-encre: #2f7a52;
}

.natup-adherent-frise > li.est-arbitrage {
    --natup-frise-point: var(--natup-orange);
    --natup-frise-fond: #fdf0e1;
    --natup-frise-encre: #a0561a;
}

.natup-adherent-frise > li.est-suppression {
    --natup-frise-point: var(--natup-refus-encre);
    --natup-frise-fond: var(--natup-refus-fond);
    --natup-frise-encre: var(--natup-refus-encre);
}

.natup-adherent-frise-tete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
}

.natup-adherent-frise-date {
    color: var(--natup-gray-darker);
    font-variant-numeric: tabular-nums;
}

.natup-adherent-frise-type {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--natup-frise-fond);
    color: var(--natup-frise-encre);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.natup-adherent-frise-texte {
    margin: 0.125rem 0 0;
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

.natup-adherent-frise-qui {
    margin: 0;
    color: var(--natup-gray-darker);
    font-size: 0.625rem;
}

/* @g CSS-360 */
.natup-lien-adherent {
    font-weight: 600;
    text-decoration: none;
}

.natup-lien-adherent:hover,
.natup-lien-adherent:focus-visible {
    text-decoration: underline;
}

/* @g CSS-361 */
@media (max-width: 1100px) {
    .natup-adherent,
    .natup-adherent-duo {
        grid-template-columns: 1fr;
    }

    .natup-adherent-cote {
        position: static;
    }

    .natup-adherent-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* @g CSS-362 */
.natup-barre-recherche {
    position: relative;
    width: 15rem;
}

.natup-barre-recherche .form-control {
    border-radius: 999px;
    padding-left: 0.875rem;
}

/* @g CSS-363 */
.natup-barre-recherche-resultats {
    position: absolute;
    right: 0;
    z-index: 30;
    width: 22rem;
    max-height: 24rem;
    margin: 0.375rem 0 0;
    padding: 0.25rem;
    overflow-y: auto;
    border: 1px solid var(--natup-gray-dark);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
    list-style: none;
}

.natup-barre-recherche-resultats a {
    display: flex;
    flex-direction: column;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    color: var(--natup-ink);
    text-decoration: none;
}

.natup-barre-recherche-resultats a:hover,
.natup-barre-recherche-resultats a:focus-visible,
.natup-barre-recherche-resultats a.est-active {
    background: var(--natup-bandeau);
}

.natup-barre-recherche-nom {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.natup-barre-recherche-detail {
    color: var(--natup-gray-darker);
    font-size: 0.75rem;
}

.natup-barre-recherche-note {
    padding: 0.4rem 0.75rem;
    color: var(--natup-gray-darker);
    font-size: 0.75rem;
}

/* @g CSS-364 */
@media (max-width: 768px) {
    .natup-barre-recherche {
        width: 10rem;
    }

    .natup-barre-recherche-resultats {
        width: min(22rem, 90vw);
    }
}

/* @g CSS-365 */
.natup-tableau th.natup-divers-actions,
.natup-tableau td.natup-divers-actions {
    width: 1%;
    text-align: center;
}