:root {
            --color-black: #000000;
            --color-white: #FFFFFF;
            --color-text: #111111;
            --color-text-secondary: #555555;
            --color-primary: #1D3D96;
            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
            --color-border: #CCCCCC;
            --color-gray-300: #B3B3B3;
            --disabled-surface: #B3B3B3;
            --disabled-border: #CCCCCC;
            --disabled-text: #B3B3B3;
            --bleu-crai: #1D3D96;
            --blanc-pur: #FFFFFF;
            --font-main: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            --slider-hit-height: 32px;
            --slider-track-height: 2px;
            --slider-thumb-size: 18px;
            --slider-thumb-border: 3px;
            --slider-thumb-offset: calc((var(--slider-track-height) - var(--slider-thumb-size)) / 2);
            /* Solution A : espacement via column-gap de la grille parente */
            --slider-col-gap: 28px;
            /* Solution B (en veille) : padding intérieur du compartiment slider */
            --notation-slider-cell-pad-y: 4px;
            --notation-slider-cell-pad-x: 8px;
            --notation-slider-cell-pad-y-compact: 3px;
            --notation-slider-cell-pad-x-compact: 5px;

            --space-2: 2px;
            --space-4: 4px;
            --space-6: 6px;
            --space-8: 8px;
            --space-10: 10px;
            --space-12: 12px;
            --space-16: 16px;
            --space-20: 20px;
            --space-24: 24px;

            --radius-sm: 4px;
            --radius-base: 6px;

            --font-size-xs: 10px;
            --font-size-sm: 13px;
            --font-size-base: 15px;
            --font-family-base: 'Roboto';

            --font-weight-regular: 400;
            --font-weight-medium: 500;
            --font-weight-semibold: 600;
        }

        * {
            box-sizing: border-box;
        }

        html, body {
            margin: 0;
            padding: 0;
            font-family: var(--font-family-base);
            font-size: var(--font-size-base);
            color: var(--color-text);
            background-color: #F5F5F5;
        }

        input,
        textarea,
        select,
        button {
            font-family: inherit;
        }

        body {
            padding: var(--space-16);
        }

        main {
            max-width: 1200px;
            margin: 0 auto;
        }

        h1, h2, h3, h4 {
            margin: 0 0 var(--space-8) 0;
        }

        .card {
            background-color: var(--color-white);
            border-radius: var(--radius-base);
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
            padding: var(--space-16);
        }
        /* Accueil / entête */

.accueil-card {
    background-color: var(--color-white);
}

.accueil-header {
    margin-bottom: var(--space-24);
}

/* Logo MAP CRAI */
.accueil-logo-map {
    margin: calc(-1 * var(--space-16)) calc(-1 * var(--space-16)) 0;
    border-radius: var(--radius-base) var(--radius-base) 0 0;
    overflow: hidden;
}

.logo-map-container {
    width: 100%;
    height: auto;
}

.logo-map-crai {
    display: block;
    width: 100%;
    height: auto;
}

.map-bg-rect {
    fill: var(--bleu-crai);
}

.map-text-white {
    fill: var(--blanc-pur);
    font-family: var(--font-main);
    font-weight: 700;
    text-transform: lowercase;
}

.crai-description-text {
    fill: var(--bleu-crai);
    font-family: var(--font-main);
}

.text-title {
    font-size: 24px;
    font-weight: 600;
}

.text-subtitle {
    font-size: 14px;
    font-weight: 400;
}

.accueil-brand-row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px var(--space-8) 56px;
}

@media (max-width: 600px) {
    .accueil-brand-row {
        padding-top: 28px;
        padding-bottom: 40px;
    }
}

.accueil-logo-valobois {
    display: block;
    margin-inline: auto;
}

.logo-valoxylo {
    width: min(90vw, 231px);
    color: var(--bleu-crai);
    transition: transform 0.3s ease, color 0.3s ease;
}

.valoxylo-logo {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    margin-inline: auto;
}

/* À propos */

.accueil-apropos {
    margin-bottom: var(--space-16);
}

.accueil-apropos-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.accueil-apropos-row .accueil-apropos-toggle {
    flex: 1;
}

@media (max-width: 600px) {
    .accueil-apropos-row {
        align-items: stretch;
    }
}

/* Barre d’onglets éditeur (sous À propos) */
.editor-tab-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 4px;
    margin-bottom: var(--space-16);
    padding: 4px;
    border-radius: var(--radius-base);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.editor-tab-bar .editor-tab {
    flex: 0 0 auto;
    margin: 0;
    padding: 10px 14px;
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary, #555);
    background: transparent;
    border: none;
    border-radius: calc(var(--radius-base) - 2px);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.editor-tab-bar .editor-tab:hover {
    color: var(--color-text);
    background-color: rgba(0, 0, 0, 0.04);
}

.editor-tab-bar .editor-tab:focus-visible {
    outline: 2px solid var(--color-primary, #173898);
    outline-offset: 2px;
}

.editor-tab-bar .editor-tab[aria-selected="true"] {
    color: var(--color-primary, #173898);
    background-color: rgba(23, 56, 152, 0.08);
    box-shadow: inset 0 -2px 0 0 var(--color-primary, #173898);
}

.editor-tab-panels {
    min-height: 0;
}

.editor-tab-panel[hidden] {
    display: none !important;
}

.editor-modals-root {
    display: contents;
}

/* Bandeau compte / connexion — haut droite, visible sur toute la page d'évaluation */
.auth-top-banner {
    position: fixed;
    top: var(--space-16);
    right: var(--space-16);
    z-index: 40;
    max-width: calc(100vw - var(--space-16) * 2);
    padding: 6px 10px;
    font-size: var(--font-size-sm);
    line-height: 1.35;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-8);
    text-align: right;
    background-color: var(--color-white);
    color: var(--color-text);
    border-radius: var(--radius-base);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.auth-top-banner #auth-header-status {
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    text-align: right;
}

.auth-banner-sync {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
}

.auth-banner-sync-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-text);
    border-radius: 50%;
    box-sizing: border-box;
    animation: auth-banner-sync-spin 0.65s linear infinite;
}

.auth-banner-sync-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    font-size: 12px;
    line-height: 1;
    color: var(--color-text);
    opacity: 0.85;
}

.auth-banner-sync-label {
    font: inherit;
    white-space: nowrap;
}

@keyframes auth-banner-sync-spin {
    to {
        transform: rotate(360deg);
    }
}

.auth-top-banner .auth-lang-select {
    flex-shrink: 0;
    max-width: 9rem;
    padding: 4px 8px;
    font: inherit;
    font-size: var(--font-size-sm);
    color: inherit;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    cursor: pointer;
}

.auth-top-banner a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-top-banner button.auth-banner-signout {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* Mobile : bandeau dans le flux pour ne pas masquer le haut de page (headline, logo) */
@media (max-width: 640px) {
    .auth-top-banner {
        position: static;
        top: auto;
        right: auto;
        max-width: none;
        width: 100%;
        margin: 0 0 var(--space-16);
    }
}

/* Page Compte Firebase (auth.html) */

.auth-main {
    max-width: 440px;
    margin-inline: auto;
    padding-top: var(--space-24);
}

.auth-back {
    margin: 0 0 var(--space-16);
    font-size: var(--font-size-sm);
}

.auth-back a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-card {
    margin-bottom: var(--space-24);
}

.auth-title {
    font-size: 1.25rem;
    margin-bottom: var(--space-16);
}

.auth-config-hint {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-12);
}

.auth-config-hint code {
    font-size: 0.9em;
    word-break: break-all;
}

.auth-error {
    font-size: var(--font-size-sm);
    color: #b00020;
    margin: 0 0 var(--space-12);
}

body.day-mode .auth-error {
    color: #9a0000;
}

.auth-success {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    margin: 0 0 var(--space-12);
    opacity: 0.9;
}

.auth-forgot-link {
    align-self: flex-start;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: var(--font-size-sm);
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    text-align: left;
}

.auth-forgot-link:hover,
.auth-forgot-link:focus-visible {
    opacity: 0.85;
}

.auth-reset-intro {
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-12);
}

.auth-reset-invalid-fallback {
    margin: 0;
}

.auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: var(--space-16);
    border-radius: var(--radius-base);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.auth-tab {
    flex: 1;
    padding: 10px 12px;
    border: none;
    background-color: var(--color-white);
    color: var(--color-text);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.auth-tab[aria-selected='true'] {
    background-color: var(--color-black);
    color: var(--color-white);
}

body.day-mode .auth-tab[aria-selected='true'] {
    background-color: var(--color-text);
    color: var(--color-white);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.auth-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.auth-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    background-color: var(--color-white);
    color: var(--color-text);
    box-sizing: border-box;
}

.auth-submit {
    margin-top: var(--space-8);
}

.auth-logged-in {
    padding-top: var(--space-8);
}

.auth-logged-in-text {
    margin: 0 0 var(--space-16);
    font-size: var(--font-size-sm);
}

.auth-logged-in-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

/* Page Mes évaluations */

.mes-eval-main {
    max-width: 520px;
}

.mes-eval-toolbar {
    margin-bottom: var(--space-16);
}

.mes-eval-loading {
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-12);
}

.mes-eval-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.mes-eval-item {
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    background-color: var(--color-white);
    overflow: hidden;
}

.mes-eval-item-inner {
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.mes-eval-item-main {
    flex: 1;
    min-width: 0;
}

.mes-eval-item-actions {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
    border-left: 1px solid var(--color-border);
}

.mes-eval-share-btn,
.mes-eval-delete-btn {
    padding: 6px 10px;
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.mes-eval-item-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
}

.mes-eval-shared-badge {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    padding: 2px 8px;
    border-radius: var(--radius-base);
    background-color: rgba(0, 0, 0, 0.06);
    color: inherit;
    opacity: 0.9;
}

.mes-eval-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-16);
    background-color: rgba(0, 0, 0, 0.45);
}

/* L’attribut HTML hidden doit gagner sur display:flex ci-dessus (sinon Annuler / fermeture ne masquent pas l’overlay). */
.mes-eval-modal[hidden] {
    display: none !important;
}

.mes-eval-modal-panel {
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow: auto;
    padding: var(--space-16);
    margin: 0;
}

.mes-eval-modal-title {
    margin: 0 0 var(--space-8);
    font-size: var(--font-size-lg);
}

.mes-eval-modal-hint {
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-12);
    opacity: 0.9;
}

.mes-eval-modal-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-8);
}

.mes-eval-modal-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-8);
    font: inherit;
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    resize: vertical;
    min-height: 120px;
    margin-bottom: var(--space-8);
}

.mes-eval-modal-error {
    margin: 0 0 var(--space-8);
}

.mes-eval-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    justify-content: flex-end;
    margin-top: var(--space-8);
}

.mes-eval-item-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-12);
    color: inherit;
    text-decoration: none;
}

.mes-eval-item-link:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.mes-eval-item-title {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
}

.mes-eval-item-date {
    font-size: 0.8rem;
    opacity: 0.85;
}

.mes-eval-item-meta {
    font-size: 0.78rem;
    opacity: 0.7;
}

.mes-eval-empty {
    font-size: var(--font-size-sm);
    margin: 0;
    opacity: 0.9;
}

.accueil-apropos-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    background-color: var(--color-black);
    color: var(--color-white);
    border-radius: var(--radius-base);
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.accueil-apropos-title {
    text-align: left;
}

.accueil-apropos-icon {
    transition: transform 0.2s ease;
}

.accueil-apropos-toggle[aria-expanded="true"] .accueil-apropos-icon {
    transform: rotate(90deg);
}

.accueil-apropos-content {
    margin-top: var(--space-8);
    padding: 10px 12px;
    border-radius: var(--radius-base);
    background-color: #111111;
    color: #FFFFFF;
    font-size: var(--font-size-sm);
    max-height: 320px;
    overflow-y: auto;
}

.accueil-apropos-content p {
    margin: 0 0 0.6em 0;
}

/* Champs méta */

.accueil-dashboard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12);
    align-items: start;
}

.accueil-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    background-color: #FAFAFA;
    padding: var(--space-12);
    display: grid;
    gap: var(--space-12);
}

.accueil-panel--wide {
    grid-column: 1 / -1;
}

.accueil-panel-title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.accueil-collapsible {
    display: block;
}

.accueil-collapsible-shell.accueil-collapsible-shell--with-alert {
    position: relative;
    --acc-summary-height: 40px;
}

.accueil-collapsible-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    padding: 8px 12px;
    border-radius: var(--radius-base);
    background-color: #111111;
    color: #FFFFFF;
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.accueil-collapsible-summary--with-alert {
    justify-content: flex-start;
    min-height: var(--acc-summary-height);
    padding-right: 88px;
    min-width: 0;
}

.accueil-collapsible-summary--with-alert::after {
    margin-left: auto;
    margin-right: 52px;
}

.accueil-collapsible-shell--with-alert > .accueil-collapsible-alert-action {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    position: absolute;
    top: calc(var(--acc-summary-height) / 2);
    transform: translateY(-50%);
    right: 10px;
    z-index: 1;
}

.accueil-collapsible-alert-action .lot-alert-btn--destination,
.accueil-collapsible-alert-action .lot-alert-btn--operation-reference,
.accueil-collapsible-alert-action .lot-alert-btn--diagnostiqueur,
.accueil-collapsible-alert-action .lot-alert-btn--contacts,
.accueil-collapsible-alert-action .lot-alert-btn--contexte-technique {
    margin-right: 0;
}

.accueil-collapsible-summary::-webkit-details-marker {
    display: none;
}

.accueil-collapsible-summary::after {
    content: '▶';
    font-size: 12px;
    transition: transform 0.2s ease;
}

.accueil-collapsible[open] .accueil-collapsible-summary::after {
    transform: rotate(90deg);
}

.accueil-collapsible-body {
    display: grid;
    gap: var(--space-12);
}

.accueil-collapsible:not(.accueil-collapsible--with-alert) > .accueil-collapsible-body {
    margin-top: var(--space-12);
}

.accueil-collapsible.accueil-collapsible--with-alert > .accueil-collapsible-body {
    margin-top: var(--space-12);
}

body.day-mode .accueil-collapsible-summary {
    background-color: var(--bleu-crai);
    color: #FFFFFF;
}

body.day-mode .accueil-collapsible-summary:hover {
    background-color: #152d6e;
}

.accueil-subsection {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: #FFFFFF;
    padding: var(--space-10);
    display: grid;
    gap: var(--space-8);
}

.accueil-subsection-title {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.accueil-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12);
}

@media (max-width: 768px) {
    .accueil-meta {
        grid-template-columns: 1fr;
    }
}

.accueil-meta-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.accueil-meta-row--full {
    grid-column: 1 / -1;
}

.accueil-meta-row--cols-2 {
    display: grid;
    grid-template-columns: 1.6fr 10.4fr;
    gap: var(--space-8);
    align-items: flex-start;
}

.accueil-meta-row--fields-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12);
    align-items: flex-start;
}

.accueil-meta-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.accueil-input--version {
    max-width: 150px;
}

.bio-slider-scale--statut {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    gap: 4px;
}

.accueil-meta-label[for="sliderStatutEtude"] + .bio-slider-wrapper {
    margin-top: var(--space-8);
}

.bio-slider-scale--statut .bio-slider-label {
    text-align: center;
    line-height: 1.15;
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
}

.study-status-help {
    margin-top: var(--space-10);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid #c8d9ff;
    background: #edf3ff;
}

.study-status-help__text {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #1f2a44;
}

@media (max-width: 900px) {
    .accueil-meta-row--cols-2 {
        grid-template-columns: 1fr;
    }

    .accueil-meta-row--fields-2 {
        grid-template-columns: 1fr;
    }

    .accueil-input--version {
        max-width: none;
    }
}

.accueil-meta-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.accueil-meta-hint {
    font-size: 12px;
    color: #666666;
}

.accueil-input,
.accueil-select,
.accueil-textarea {
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    padding: 6px 8px;
    font-size: var(--font-size-sm);
    background-color: #E6E6E6;
    color: var(--color-text);
    resize: vertical;
}

.accueil-input[readonly] {
    background-color: #F0F0F0;
    color: #555555;
}

.accueil-input::placeholder,
.accueil-select::placeholder,
.accueil-textarea::placeholder {
    color: #777777;
}

@media (max-width: 600px) {
    .accueil-dashboard {
        grid-template-columns: 1fr;
    }

    .accueil-panel--wide {
        grid-column: auto;
    }
}

        .mt-16 { margin-top: var(--space-16); }
        .mt-24 { margin-top: var(--space-24); }

        .card-title {
            font-size: 20px;
            font-weight: var(--font-weight-semibold);
        }

        .btn {
            border-radius: var(--radius-base);
            border: none;
            padding: 8px 14px;
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            cursor: pointer;
        }

        .btn-primary {
            background-color: var(--color-black);
            color: var(--color-white);
        }

        .btn-primary:hover {
            background-color: #222222;
        }

        .btn-full {
            width: 100%;
        }

        .hidden {
            display: none !important;
        }

        /* Modales génériques */

        .modal-backdrop {
            position: fixed;
            inset: 0;
            background-color: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 50;
        }

        .modal {
            background-color: #FFFFFF;
            color: var(--color-text);
            border-radius: var(--radius-base);
            max-width: 480px;
            width: 100%;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .modal-header {
            background-color: #FFFFFF;
            padding: var(--space-10) var(--space-16);
            border-bottom: 1px solid var(--color-border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .modal-body {
            background-color: #FFFFFF;
            padding: var(--space-12) var(--space-16);
            overflow-y: auto;
            font-size: var(--font-size-sm);
        }

        .modal-footer {
            background-color: #FFFFFF;
            padding: var(--space-10) var(--space-16);
            border-top: 1px solid var(--color-border);
            display: flex;
            gap: var(--space-8);
            justify-content: flex-end;
        }

        .modal-close {
            border: none;
            background: transparent;
            font-size: 18px;
            cursor: pointer;
        }

        .modal--info-sheet {
            max-width: 620px;
        }

        .info-sheet {
            display: grid;
            gap: 12px;
            line-height: 1.5;
        }

        .info-sheet-intro {
            padding: 10px 12px;
            border: 1px solid #DDD6C8;
            border-radius: var(--radius-sm);
            background-color: #F6F2E9;
            font-weight: var(--font-weight-medium);
        }

        .info-sheet-grid {
            display: grid;
            gap: 10px;
        }

        .info-sheet-section {
            padding: 10px 12px;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-sm);
            background-color: #FAFAF8;
        }

        .info-sheet-section h3 {
            margin: 0 0 6px;
            font-size: var(--font-size-sm);
        }

        .info-sheet-section p,
        .info-sheet-section ul {
            margin: 0;
        }

        .info-sheet-section ul {
            padding-left: 18px;
        }

        .info-sheet-section li + li {
            margin-top: 4px;
        }

        .info-sheet-note {
            padding: 10px 12px;
            border-left: 3px solid var(--bleu-crai);
            background-color: #F2F6F8;
            border-radius: var(--radius-sm);
        }

        .info-sheet-section--strategy {
            background-color: #F5F7F8;
            border-color: #D6DEE2;
        }

        .info-sheet-section--price-presets {
            background-color: #F7F8F5;
            border-color: #D9DDD2;
            display: grid;
            gap: 10px;
        }

        .price-preset-editor__list {
            display: grid;
            gap: 8px;
        }

        .price-preset-row {
            border: 1px solid #D9DDD2;
            border-radius: var(--radius-sm);
            padding: 8px;
            background: #FFFFFF;
            display: grid;
            gap: 6px;
        }

        .price-preset-row__head {
            display: flex;
            justify-content: flex-end;
        }

        .price-preset-row__badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 20px;
            padding: 0 8px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 600;
            background: #E8F0F5;
            color: #2E5E7D;
        }

        .price-preset-row__badge--custom {
            background: #F3ECE4;
            color: #6D4A26;
        }

        .price-preset-row__badge--ceeb {
            background: #E6F0E8;
            color: #1E4D2B;
        }

        .price-preset-row__grid {
            display: grid;
            grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 92px 96px;
            gap: 8px;
            align-items: center;
        }

        .price-preset-row__label-static {
            min-height: 34px;
            display: flex;
            align-items: center;
            padding: 0 8px;
            border: 1px solid #E4E4E4;
            border-radius: var(--radius-sm);
            background: #FAFAFA;
            font-size: var(--font-size-sm);
        }

        .price-preset-row__remove {
            width: 100%;
            min-height: 34px;
            border-radius: var(--radius-sm);
            border: 1px solid #D3D3D3;
            background: #F3F3F3;
            color: #4D4D4D;
            cursor: pointer;
        }

        .price-preset-row__remove[disabled] {
            color: #9A9A9A;
            cursor: default;
            opacity: 0.8;
        }

        .price-preset-editor__empty {
            margin: 0;
            font-size: 12px;
            color: #6B6B6B;
        }

        .price-preset-editor__import {
            margin-top: 2px;
            padding-top: 10px;
            border-top: 1px dashed #CDD3C6;
            display: grid;
            gap: 6px;
        }

        .price-preset-editor__import-row {
            display: flex;
            align-items: center;
            gap: var(--space-8);
            flex-wrap: wrap;
        }

        .price-preset-editor__import-status {
            font-size: 12px;
            min-height: 16px;
        }

        .price-preset-editor__import-status--ok {
            color: #2E5E2E;
        }

        .price-preset-editor__import-status--error {
            color: #A0341D;
        }

        .price-preset-editor__import-hint {
            margin: 0;
            font-size: 12px;
            color: #6B6B6B;
            max-width: 52ch;
        }

        .price-preset-editor__create {
            margin-top: 2px;
            padding-top: 10px;
            border-top: 1px dashed #CDD3C6;
            display: grid;
            gap: 8px;
        }

        .price-preset-editor__create h4 {
            margin: 0;
            font-size: var(--font-size-sm);
        }

        .price-preset-editor__create-grid {
            display: grid;
            grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 90px 110px;
            gap: 8px;
            align-items: center;
        }

        .price-preset-editor__error {
            margin: 0;
            min-height: 16px;
            font-size: 12px;
            color: #A0341D;
        }

        @media (max-width: 640px) {
            .price-preset-row__grid,
            .price-preset-editor__create-grid {
                grid-template-columns: minmax(0, 1fr);
            }
        }

        .detail-modal-content {
            display: grid;
            gap: 10px;
        }

        .detail-modal-content p {
            margin: 0;
            line-height: 1.55;
        }

        .detail-modal-subtitle {
            margin: 2px 0 0;
            padding: 7px 10px;
            border-left: 3px solid #B9C3CC;
            border-radius: var(--radius-sm);
            background-color: #F2F4F6;
            color: var(--color-text);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-semibold);
            line-height: 1.3;
        }

        .detail-modal-paragraph {
            padding: 10px 12px;
            border: 1px solid #D4DBE2;
            border-radius: var(--radius-sm);
            background-color: #F2F4F6;
        }

        .detail-modal-note {
            padding: 10px 12px;
            border: 1px solid #D4DBE2;
            border-radius: var(--radius-sm);
            background-color: #F2F4F6;
        }

        .detail-modal-instruction {
            padding: 10px 12px;
            border: 1px solid #D4DBE2;
            border-left: 3px solid #B9C3CC;
            border-radius: var(--radius-sm);
            background-color: #F2F4F6;
            font-weight: var(--font-weight-medium);
        }

        .detail-modal-link {
            color: var(--bleu-crai);
            text-decoration: underline;
            text-underline-offset: 2px;
            word-break: break-all;
        }

        .detail-modal-scale {
            margin: 0;
            padding: 8px 10px;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-sm);
            background-color: #FAFAF8;
            display: grid;
            gap: 7px;
        }

        .detail-modal-scale-item {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 8px;
            align-items: start;
            margin: 0;
            font-size: var(--font-size-sm);
            line-height: 1.45;
        }

        .detail-modal-scale-pill {
            display: inline-block;
            min-width: 72px;
            text-align: center;
            border-radius: 999px;
            padding: 2px 8px;
            font-size: 10px;
            font-weight: var(--font-weight-semibold);
            border: 1px solid transparent;
            line-height: 1.3;
        }

        .detail-modal-scale-pill--forte {
            background-color: #E8F5EC;
            border-color: #BFDCC8;
            color: #315E44;
        }

        .detail-modal-scale-pill--moyenne {
            background-color: #FFF3DF;
            border-color: #E6D1A8;
            color: #6C5430;
        }

        .detail-modal-scale-pill--faible {
            background-color: #FDE9E9;
            border-color: #E9C1C1;
            color: #7A3E3E;
        }

        .detail-modal-references {
            padding: 10px 12px;
            border: 1px solid #DDD6C8;
            border-radius: var(--radius-sm);
            background-color: #F6F2E9;
        }

        .detail-modal-references > summary {
            cursor: pointer;
            list-style: none;
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-semibold);
            color: var(--color-text);
        }

        .detail-modal-references > summary::-webkit-details-marker {
            display: none;
        }

        .detail-modal-references > summary::before {
            content: '+';
            display: inline-block;
            width: 14px;
            margin-right: 6px;
            color: var(--bleu-crai);
            font-weight: var(--font-weight-semibold);
        }

        .detail-modal-references[open] > summary::before {
            content: '-';
        }

        .detail-modal-references p {
            margin: 8px 0 0;
        }

        .detail-modal-references-empty {
            color: var(--color-text-secondary);
            font-style: italic;
        }

        .text-center {
            text-align: center;
        }

/* Allotissement / rail horizontal */

.allotissement-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-12);
}

.allotissement-lot-badge {
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-white);
    color: var(--color-text);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.allotissement-info-btn {
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-charcoal-700);
    color: var(--color-white);
    border-radius: var(--radius-base);
    border: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.allotissement-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-12);
}

.lot-rail-wrapper {
    background-color: var(--color-black);
    border-radius: var(--radius-base);
    padding: var(--space-12);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-color: var(--color-gray-300) rgba(255, 255, 255, 0.1);
    scrollbar-width: thin;
}

/* Scrollbar horizontale customisée (aspect proche du PDF) */
.lot-rail-wrapper::-webkit-scrollbar {
    height: 8px;
}

.lot-rail-wrapper::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

.lot-rail-wrapper::-webkit-scrollbar-thumb {
    background: var(--color-gray-300);
    border-radius: 3px;
}

.lot-rail {
    display: flex;
    gap: var(--space-12);
    min-height: 220px;
}

.allotissement-section,
.detail-lot-section {
    --lot-piece-card-min-width: 280px;
    --lot-piece-card-max-width: 320px;
}

/* Carte de lot */

.lot-card {
    min-width: var(--lot-piece-card-min-width);
    max-width: var(--lot-piece-card-max-width);
    flex: 0 0 var(--lot-piece-card-min-width);
    background-color: rgba(230, 230, 230, 0.6); /* grisé par défaut */
    border-radius: var(--radius-base);
    padding: var(--space-12);
    border: 1px solid rgba(230, 230, 230, 1);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.1s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.lot-card:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* État actif : fond blanc, encarts colorés */
.lot-card--active {
    background-color: var(--color-white);
    border-color: var(--color-primary);
}

/* État passif / grisé */
.lot-card--passive {
    opacity: 0.7;
}

/* Formulaire à ajouter (lot vierge) */
.lot-card--add {
    background-color: rgba(230, 230, 230, 0.4);
    border-style: dashed;
    border-color: rgba(230, 230, 230, 1);
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
}

/* En-tête de lot */

.lot-card-header {
  display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-8);
}

.lot-card-header-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    flex: 1;
    min-width: 0;
}

.lot-card-header-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.lot-reset-btn {
  padding: var(--space-4) var(--space-8);
  background-color: var(--color-black);
  color: var(--color-white);
  border-radius: var(--radius-base);
  border: none;
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.lot-card-title {
  flex: 1;
  text-align: center;
  padding: var(--space-4) var(--space-8);
  background-color: var(--color-white);
  color: var(--color-text);
  border-radius: var(--radius-base);
  border: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.lot-name-label {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
}

/* Lignes standards : Quantité / Type de pièces / Essence */

.lot-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: center;
}

.lot-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
}

.lot-form-grid--outputs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lot-field-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    margin-bottom: var(--space-2);
}

.lot-group {
    display: grid;
    gap: 8px;
    padding: 5px;
    border: 1px solid #D4D4D4;
    border-radius: var(--radius-sm);
    background-color: rgba(255, 255, 255, 0.45);
    margin-bottom: var(--space-2);
}

.lot-field-block--full {
    grid-column: 1 / -1;
    gap: 12px;
}

.lot-group-title {
    display: none;
}

.lot-group--collapsible {
    display: block;
    padding: 0;
    border: none;
    background: transparent;
}

.lot-group--collapsible summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    background-color: #F4F4F4;
    color: var(--bleu-crai) !important;
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
}

.lot-group--collapsible summary::after {
    content: '▶';
    font-size: 12px;
    transition: transform 0.2s ease;
    color: var(--bleu-crai) !important;
}

body.day-mode .lot-group--collapsible summary {
    color: var(--bleu-crai) !important;
}

body.day-mode .lot-group--collapsible summary::after {
    color: var(--bleu-crai) !important;
}

.lot-group--collapsible summary::-webkit-details-marker {
    display: none;
}

.lot-group--collapsible[open] summary::after {
    transform: rotate(90deg);
}

.lot-group--collapsible summary:hover {
    background-color: #e6e8eb;
}

.lot-group--collapsible .lot-group-content {
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius-base) var(--radius-base);
    padding: 10px;
    margin-top: -1px;
    background-color: #FFFFFF;
}

body.day-mode .lot-group--collapsible summary {
    background-color: #F4F4F4;
    color: var(--color-text);
}

body.day-mode .lot-group--collapsible summary:hover {
    background-color: #e6e8eb;
}

.lot-group--collapsible .lot-group-content {
    border: 1px solid #D4D4D4;
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    padding: 10px;
    margin-top: -1px;
    background-color: rgba(255, 255, 255, 0.45);
}

/* Override robuste: summary Accueil avec alerte (statique + dynamique) */
.accueil-collapsible.accueil-collapsible--with-alert > summary.accueil-collapsible-summary--with-alert {
    position: relative;
    justify-content: flex-start;
    padding-right: 96px;
}

.accueil-collapsible.accueil-collapsible--with-alert > summary.accueil-collapsible-summary--with-alert::after {
    position: absolute;
    top: 50%;
    right: 52px;
    margin-right: 0;
    margin-left: 0;
    transform: translateY(-50%);
}

.accueil-collapsible.accueil-collapsible--with-alert[open] > summary.accueil-collapsible-summary--with-alert::after {
    transform: translateY(-50%) rotate(90deg);
}

.lot-inline-grid {
    display: grid;
    gap: 8px;
}

.lot-inline-grid--2 {
    grid-template-columns: 1fr 1fr;
}

.lot-location-group-nav {
    display: grid;
    gap: 8px;
}

.lot-group--location-combination {
    margin-bottom: 6px;
}

.lot-location-group-content {
    display: grid;
    gap: 8px;
}

.lot-location-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.lot-location-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
}

.lot-location-pieces-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
}

.lot-location-group-title {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    min-height: 14px;
}

.lot-location-group-btn {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: #F2EFE7;
    color: var(--color-text);
    cursor: pointer;
}

.lot-location-open-btn {
    align-self: stretch;
}

.lot-location-cycle-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

.lot-location-cycle-icon {
    width: 28px;
    height: 28px;
    display: block;
    fill: currentColor;
}

.lot-location-pieces-row .lot-input {
    min-width: 0;
}

@media (max-width: 720px) {
    .lot-location-grid {
        grid-template-columns: 1fr;
    }
}

.lot-location-group-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.lot-essence-picker {
    width: 100%;
}

.lot-inline-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lot-inline-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Variabilité adaptative : trio (rectangulaire) ou duo (cylindrique) */
.lot-inline-grid[data-variabilite-mode="rectangular"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lot-inline-grid[data-variabilite-mode="rectangular"] > [data-variabilite-dim="diametre"] {
    display: none;
}
.lot-inline-grid[data-variabilite-mode="cylindrical"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lot-inline-grid[data-variabilite-mode="cylindrical"] > [data-variabilite-dim="largeur"],
.lot-inline-grid[data-variabilite-mode="cylindrical"] > [data-variabilite-dim="epaisseur"] {
    display: none;
}

.lot-dest-grid[data-variabilite-mode="rectangular"] [data-variabilite-dim="diametre"] {
    display: none;
}

.lot-dest-grid[data-variabilite-mode="cylindrical"] [data-variabilite-dim="largeur"],
.lot-dest-grid[data-variabilite-mode="cylindrical"] [data-variabilite-dim="epaisseur"] {
    display: none;
}

.lot-inline-grid--lot-essence {
    display: grid;
    gap: 8px;
}

.lot-type-qty-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.lot-type-with-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: start;
}

.lot-essence-with-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: start;
}

.lot-type-with-detail.has-detail-btn,
.lot-essence-with-detail.has-detail-btn {
    grid-template-columns: minmax(0, 1fr) clamp(116px, 38%, 152px);
}

.lot-detail-btn {
    width: 100%;
    padding: var(--space-4) var(--space-8);
    justify-self: end;
    font-size: var(--font-size-xs);
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
    background-color: var(--bleu-crai);
    color: var(--color-white);
    border: 1px solid var(--bleu-crai);
    min-height: 26px;
}

.lot-type-with-detail .lot-input,
.lot-essence-with-detail .lot-input {
    min-height: 26px;
}

.lot-detail-btn:hover {
    background-color: #152d6e;
    border-color: #152d6e;
}

.lot-inline-grid--lot-dimensions {
    display: grid;
    grid-template-columns: 7fr 6fr 6fr;
    gap: 8px;
}

.lot-dimension-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lot-dimension-computed {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.lot-dimension-computed--spacer {
    visibility: hidden;
}

.lot-dimension-computed .lot-input {
    text-align: center;
}

.lot-dimension-input-wrap {
    position: relative;
}

.lot-dimension-input-wrap .lot-input {
    padding-right: 24px;
}

.lot-dimension-input-wrap:not([data-has-value="true"]) .lot-input {
    padding-right: var(--space-8);
}

.lot-dimension-unit {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--color-text-secondary);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.lot-dimension-input-wrap[data-has-value="true"] .lot-dimension-unit {
    opacity: 1;
}

/* Champs mutés (mode opposé actif) */
.lot-dimension-field[data-muted="true"] > .lot-field-label,
.lot-dimension-computed[data-muted="true"] > .lot-field-label {
    color: var(--color-gray-300);
}

.lot-dimension-field[data-muted="true"] > .lot-dimension-input-wrap .lot-input,
.lot-dimension-computed[data-muted="true"] .lot-input {
    background-color: #F4F4F4;
    color: var(--color-gray-300);
}

/* ── États de variabilité dimensionnelle (palette Wong) ── */
[data-variabilite-state="homogene"] {
    background-color: #009E73 !important;
    color: #ffffff !important;
}
[data-variabilite-state="acceptable"] {
    background-color: #56B4E9 !important;
    color: #111111 !important;
}
[data-variabilite-state="heterogene"] {
    background-color: #E69F00 !important;
    color: #111111 !important;
}
[data-variabilite-state="tres-heterogene"] {
    background-color: #D55E00 !important;
    color: #ffffff !important;
}
[data-variabilite-state="neutre"],
[data-variabilite-state=""] {
    background-color: var(--color-surface, #f0f0f0);
    color: var(--color-text, #111111);
}

/* ── Panneau de réglage des seuils ── */
.lot-group--seuils summary {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.lot-seuils-grid {
    display: grid;
    grid-template-columns: auto repeat(3, minmax(0, 1fr));
    gap: 6px;
    align-items: center;
}

.lot-seuils-section-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin: 10px 0 4px;
}

.lot-seuils-header-cell {
    font-size: 10px;
    color: var(--color-text-secondary);
    text-align: center;
    line-height: 1.2;
}
.lot-seuils-header-cell--t1 { color: #009E73; font-weight: 600; }
.lot-seuils-header-cell--t2 { color: #56B4E9; font-weight: 600; }
.lot-seuils-header-cell--t3 { color: #E69F00; font-weight: 600; }

.lot-seuils-dim-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    padding-right: 4px;
}

.lot-seuils-input-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
}

.lot-seuils-input {
    width: 100%;
    text-align: right;
    padding: 2px 4px;
    font-size: var(--font-size-xs);
}

/* Supprime les flèches natives des input[type=number] */
.lot-seuils-input::-webkit-outer-spin-button,
.lot-seuils-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.lot-seuils-input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.lot-seuils-unit {
    font-size: 10px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

/* Section poids de pondération dans le panneau seuils */
.lot-seuils-poids-grid {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr;
    gap: 6px;
    align-items: center;
    margin-top: 4px;
}
.lot-seuils-poids-input {
    width: 100%;
    text-align: right;
    padding: 2px 4px;
    font-size: var(--font-size-xs);
    background-color: #f2efe7;
    border: 1px solid #ddd6c8;
    color: #5d564a;
    border-radius: var(--radius-sm);
}

/* Panneau seuils de destination */
.lot-dest-grid {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 6px;
    align-items: center;
}
.lot-dest-header-cell {
    font-size: 10px;
    color: var(--color-text-secondary);
    text-align: center;
    font-weight: 600;
}
.lot-dest-input-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
}
.lot-dest-input {
    width: 100%;
    text-align: right;
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-sm);
    background-color: #e6e6e6;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
}
.lot-dest-input::-webkit-outer-spin-button,
.lot-dest-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lot-dest-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.lot-dest-suggest-btn {
    font-size: 9px;
    padding: 1px 4px;
    background: var(--bleu-crai, #1d3d96);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.4;
}
.lot-dest-suggest-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.lot-dest-medoide-label {
    grid-column: 1 / -1;
    font-size: 10px;
    color: var(--color-text-secondary);
    background: rgba(29,61,150,0.06);
    border-radius: var(--radius-sm);
    padding: 3px 6px;
    margin-top: 2px;
}
.lot-field-block--taux-similarite {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lot-field-block--taux-similarite .lot-input-with-unit {
    max-width: 160px;
}
.lot-taux-piece-type {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(29, 61, 150, 0.12);
}
.lot-taux-piece-type-title {
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}
.lot-dest-medoide-label--taux {
    display: block;
    margin-top: 0;
    background: #F2EFE7;
    font-size: var(--font-size-sm);
    line-height: 1.2;
    color: #5D564A;
    border: 1px solid #DDD6C8;
    border-radius: var(--radius-sm);
    padding: var(--space-4) var(--space-8);
}
.lot-taux-similarite-display {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: calc(1.2em + (2 * var(--space-4)));
    box-sizing: border-box;
}

/* Wrapper two-column layout for Taux and Pièce type */
.lot-taux-piecetype-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}
.lot-taux-piecetype-title {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin-right: auto;
}
.lot-taux-strategy-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.3em;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-base);
    border: 1px solid #A8B7BF;
    background-color: #EDF3F6;
    color: #33444D;
    font-size: var(--font-size-xs);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.lot-taux-strategy-badge:hover {
    background-color: #DBE8EF;
    border-color: #8EA4B0;
}
.lot-taux-strategy-badge:focus-visible {
    outline: 2px solid #4C7C93;
    outline-offset: 2px;
}
.lot-taux-info-btn {
    flex-shrink: 0;
    min-width: 36px;
    max-width: 48px;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-base);
    border: 1px solid var(--bleu-crai);
    background-color: var(--bleu-crai);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    line-height: 1;
    min-height: 2.3em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    white-space: nowrap;
    text-transform: lowercase;
}
.lot-piece-type-summary-inline {
    margin-top: var(--space-8);
}
.lot-taux-piecetype-wrapper {
    display: block;
}
.lot-piece-type-fields {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: stretch;
}

/* Nom pièce type — ligne pleine */
.lot-piece-type-name-row {
    width: 100%;
    margin-bottom: 6px;
}
.lot-piece-type-name-row .lot-field-label {
    margin-bottom: 2px;
}

/* Grille 2×2 homogénéité / hétérogénéité */
.lot-piece-type-duality {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 6px;
    align-items: stretch;
}
.lot-piece-type-quadrant {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: var(--radius-base);
    border: 1px solid #D4D4D4;
    background: rgba(255, 255, 255, 0.45);
    min-width: 0;
}
.lot-piece-type-quadrant--homo {
    background: rgba(255, 255, 255, 0.45);
    border-color: #D4D4D4;
}
.lot-piece-type-quadrant--hetero {
    background: rgba(255, 255, 255, 0.45);
    border-color: #D4D4D4;
}
.lot-piece-type-quadrant-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text);
    margin: 0;
}
.lot-piece-type-quadrant--homo .lot-piece-type-quadrant-title {
    color: var(--color-text);
}
.lot-piece-type-quadrant--hetero .lot-piece-type-quadrant-title {
    color: var(--color-text);
}
.lot-piece-type-kv {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--space-4);
    min-width: 0;
}
.lot-piece-type-kv-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    white-space: normal;
    line-height: 1.2;
}
.lot-piece-type-kv-value {
    display: block;
    min-width: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: #5D564A;
    white-space: normal;
    overflow-wrap: anywhere;
}
.lot-piece-type-kv-value-row {
    display: flex;
    align-items: stretch;
    gap: var(--space-6);
}
.lot-piece-type-kv-value-row .lot-piece-type-kv-value {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}
.lot-extreme-piece-info-btn {
    flex: 0 0 auto;
    width: 2.3em;
    min-height: 2.3em;
    padding: 0;
    border-radius: var(--radius-base);
    border: 1px solid var(--bleu-crai);
    background-color: var(--bleu-crai);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-transform: lowercase;
}
.lot-piece-type-kv-sub {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-align: left;
    line-height: 1.2;
    margin-top: 0;
    overflow-wrap: anywhere;
}

.lot-piece-type-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.lot-piece-type-field > .lot-field-label {
    min-height: calc(2 * 1.2em);
    display: flex;
    align-items: flex-end;
}
.lot-dest-medoide-label--piece-name {
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
    padding-top: 2px;
    padding-bottom: 2px;
}
.lot-field-label--two-lines {
    line-height: 1.2;
}
.lot-piece-type-field--nom .lot-dest-medoide-label,
.lot-piece-type-field--score .lot-dest-medoide-label,
.lot-piece-type-field--taux .lot-taux-similarite-display {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}
.lot-piece-type-field--nom .lot-dest-medoide-label {
    align-items: flex-start;
}
.lot-piece-type-field--score .lot-dest-medoide-label,
.lot-piece-type-field--taux .lot-taux-similarite-display {
    justify-content: center;
    text-align: center;
}
.lot-taux-similarite-display {
    padding: var(--space-4) 4px;
    font-size: var(--font-size-sm);
    line-height: 1.2;
    font-weight: var(--font-weight-regular);
}
@media (max-width: 640px) {
    .lot-piece-type-fields {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
        gap: 6px;
    }
}

/* Masquer visuellement le panneau EIqAbs héritage
   sans casser son fonctionnement JS */
.lot-group--seuils-legacy {
    opacity: 0.55;
}
.lot-group--seuils-legacy summary {
    font-style: italic;
}
.lot-seuils-poids-input::-webkit-outer-spin-button,
.lot-seuils-poids-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}

/* Gauges de conformité du lot — 6 catégories exclusives */
.lot-conformite-gauges {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}
.lot-group--conformite-lot {
    margin-top: 8px;
}
.lot-conformite-gauge-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lot-conformite-gauge-label {
    min-width: 65px;
    font-size: var(--font-size-xs);
    white-space: nowrap;
    color: var(--color-text);
}
.lot-conformite-gauge-track {
    flex-grow: 1;
    height: 16px;
    background-color: #E6E6E6;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.lot-conformite-gauge-fill {
    height: 100%;
    background-color: #B3B3B3;
    border-radius: inherit;
    transition: width 200ms ease-in-out;
}
.lot-conformite-gauge-count {
    min-width: 25px;
    text-align: right;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text);
}

.lot-dimension-field[data-muted="true"] > .lot-dimension-input-wrap .lot-dimension-unit {
    color: var(--color-gray-300) !important;
}

/* Champs désactivés par mesures multiples (≥ 2 positions renseignées) */
.lot-dimension-field[data-mm-disabled="true"] > .lot-field-label {
    color: var(--color-gray-300);
}

.lot-dimension-field[data-mm-disabled="true"] > .lot-dimension-input-wrap .lot-input,
.lot-dimension-field[data-mm-disabled="true"] > .lot-dimension-input-wrap .lot-dimension-unit {
    background-color: #F4F4F4;
    color: var(--color-gray-300);
}

.lot-price-summary-row .lot-field-block[data-muted="true"] > .lot-field-label {
    color: var(--color-gray-300);
}

.lot-price-summary-row .lot-field-block[data-muted="true"] .lot-input-with-unit .lot-input {
    background-color: #F4F4F4;
    color: var(--color-gray-300);
}

.lot-price-summary-row .lot-field-block[data-muted="true"] .lot-input-with-unit .lot-input-unit {
    color: var(--color-gray-300);
}

.lot-input-with-unit {
    position: relative;
}

.lot-input-with-unit .lot-input {
    padding-right: 22px;
}

.lot-input-with-unit--compact .lot-input {
    padding-right: 18px;
}

.lot-input-unit {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--color-text-secondary);
    pointer-events: none;
    white-space: nowrap;
}

.lot-input-with-unit--compact .lot-input-unit {
    right: 4px;
}

.lot-inline-grid--lot-col {
    display: grid;
    gap: 4px;
}

.lot-field-label {
    display: block;
    margin: 0;
    font-size: var(--font-size-xs);
    line-height: 1.2;
    color: var(--color-text-secondary);
    min-height: 16px;
}

/* Classe utilitaire pour masquer certains labels redondants dans le formulaire de lot */
.lot-field-label--hidden {
    display: none;
}

.lot-field-label--subsection {
    padding-top: 4px;
}

.lot-field-meta {
    margin: 0;
    min-height: 12px;
    font-size: 10px;
    line-height: 1.2;
    color: var(--color-text-secondary);
    opacity: 0.9;
}

/* input commun à tous les champs de lot */

.lot-input {
  flex: 1;
    width: 100%;
  min-width: 0;
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background-color: #E6E6E6;
  color: var(--color-text);
}

/* Placeholders des champs de lot en gris pour meilleure lisibilité */
.lot-input::placeholder {
        color: var(--color-text-secondary);
        opacity: 0.5;
        font-style: italic;
}

.lot-input--classe-bois {
    font-size: calc(var(--font-size-sm) - 1px);
}

.lot-input--classe-bois-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
    padding-left: var(--space-4);
    padding-right: 22px;
    text-align: left;
}

.lot-field-block--classe-bois-select,
.lot-field-block--inline-price-select {
    position: relative;
}

.lot-field-block--classe-bois-select::after,
.lot-field-block--inline-price-select::after {
    content: '\25BE';
    position: absolute;
    right: 8px;
    bottom: 7px;
    font-size: 12px;
    line-height: 1;
    color: var(--color-text);
    pointer-events: none;
}

.lot-input--classe-bois-select:has(option[value=""]:checked) {
    color: var(--color-text-secondary);
    opacity: 0.5;
    font-style: italic;
}

.lot-input--classe-bois-select:not(:has(option[value=""]:checked)) {
    color: var(--color-text);
    opacity: 1;
    font-style: normal;
}

.piece-card--passive .lot-field-block--classe-bois-select::after,
.piece-card--disabled .lot-field-block--classe-bois-select::after,
[data-prix-group-disabled="true"] .lot-field-block--inline-price-select::after,
[data-lot-prix-market-block][data-muted="true"] .lot-field-block--inline-price-select::after {
    color: var(--color-gray-300);
}

.lot-input[readonly] {
    background-color: #F2EFE7;
    border-color: #DDD6C8;
    color: #5D564A;
    cursor: default;
}

.lot-input[readonly][data-lot-bois-variable="true"] {
    cursor: pointer;
}

.lot-input[readonly][data-lot-fraction-c-variable="true"],
.lot-input[readonly][data-lot-humidite-variable="true"] {
    cursor: pointer;
}

.lot-input[readonly][data-lot-bois-variable="true"]:hover {
    background-color: #CCCCCC;
}

.lot-input[readonly][data-lot-fraction-c-variable="true"]:hover,
.lot-input[readonly][data-lot-humidite-variable="true"]:hover {
    background-color: #CCCCCC;
}

.lot-input[readonly]:focus {
    outline: none;
    box-shadow: none;
}

.lot-input[readonly]::selection {
    background-color: rgba(170, 150, 110, 0.18);
}

.lot-inline-grid--4 .lot-input[readonly] {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.lot-inline-grid[data-variabilite-grid="pieceType"] .lot-dimension-input-wrap .lot-input[readonly] {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
}

.lot-inline-grid[data-variabilite-grid="pieceType"] .lot-dimension-input-wrap:not([data-has-value="true"]) .lot-input[readonly] {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
}

.lot-inline-grid[data-variabilite-grid="pieceType"] .lot-dimension-input-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lot-inline-grid[data-variabilite-grid="pieceType"] .lot-dimension-unit {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    min-width: 18px;
    opacity: 1;
    transition: none;
}

.lot-input--qty {
        text-align: left;
}

.lot-qty-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lot-qty-row .lot-input--qty {
    flex: 1;
    min-width: 0;
}

.lot-pieces-badge {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted, #888);
    white-space: nowrap;
    padding: 0 4px;
    user-select: none;
}

.lot-alert-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-base);
    background: transparent;
    cursor: pointer;
    padding: 0;
    color: var(--color-text-muted, #aaa);
    opacity: 0.3;
    pointer-events: none;
    transition: opacity 0.2s, color 0.2s;
}

.lot-alert-btn[data-alert-active="true"] {
    opacity: 1;
    pointer-events: auto;
    color: #E69F00;
}

.lot-alert-btn[data-alert-active="false"][data-alert-missing="true"] {
    opacity: 1;
    pointer-events: auto;
    color: #D55E00;
}

.lot-alert-btn svg {
    width: 20px;
    height: 20px;
}

.lot-alert-btn--header[data-alert-notation="true"] {
    opacity: 1;
    pointer-events: auto;
    color: #E69F00;
}

.lot-alert-btn--header[data-alert-notation="false"] {
    opacity: 0.3;
    pointer-events: none;
}

.lot-alert-btn--destination[data-alert-destination="true"] {
    opacity: 1;
    pointer-events: auto;
    color: #E69F00;
}

.lot-alert-btn--destination[data-alert-destination="false"] {
    opacity: 0.3;
    pointer-events: none;
}

.lot-alert-btn--operation-reference[data-alert-operation-reference="true"] {
    opacity: 1;
    pointer-events: auto;
    color: #E69F00;
}

.lot-alert-btn--operation-reference[data-alert-operation-reference="false"] {
    opacity: 0.3;
    pointer-events: none;
}

.lot-alert-btn--diagnostiqueur[data-alert-diagnostiqueur="true"] {
    opacity: 1;
    pointer-events: auto;
    color: #E69F00;
}

.lot-alert-btn--diagnostiqueur[data-alert-diagnostiqueur="false"] {
    opacity: 0.3;
    pointer-events: none;
}

.lot-alert-btn--contacts[data-alert-contacts="true"] {
    opacity: 1;
    pointer-events: auto;
    color: #E69F00;
}

.lot-alert-btn--contacts[data-alert-contacts="false"] {
    opacity: 0.3;
    pointer-events: none;
}

.lot-alert-btn--contexte-technique[data-alert-contexte-technique="true"] {
    opacity: 1;
    pointer-events: auto;
    color: #E69F00;
}

.lot-alert-btn--contexte-technique[data-alert-contexte-technique="false"] {
    opacity: 0.3;
    pointer-events: none;
}

.lot-alert-btn--ancien-amortissement[data-alert-amortissement-state="strong"] {
    opacity: 1;
    pointer-events: auto;
    color: #009E73;
}

.lot-alert-btn--ancien-amortissement[data-alert-amortissement-state="medium"] {
    opacity: 1;
    pointer-events: auto;
    color: #E69F00;
}

.lot-alert-btn--ancien-amortissement[data-alert-amortissement-state="low"] {
    opacity: 1;
    pointer-events: auto;
    color: #D55E00;
}

.lot-alert-btn--ancien-amortissement[data-alert-amortissement-state="missing"] {
    opacity: 1;
    pointer-events: auto;
    color: #E69F00;
}

.lot-alert-btn--ancien-amortissement[data-alert-amortissement-state="none"] {
    opacity: 0.3;
    pointer-events: none;
}

.lot-alert-btn--ancien-vieillissement[data-alert-vieillissement-state="strong"] {
    opacity: 1;
    pointer-events: auto;
    color: #009E73;
}

.lot-alert-btn--ancien-vieillissement[data-alert-vieillissement-state="medium"] {
    opacity: 1;
    pointer-events: auto;
    color: #E69F00;
}

.lot-alert-btn--ancien-vieillissement[data-alert-vieillissement-state="low"] {
    opacity: 1;
    pointer-events: auto;
    color: #D55E00;
}

.lot-alert-btn--ancien-vieillissement[data-alert-vieillissement-state="none"] {
    opacity: 0.3;
    pointer-events: auto;
}

.lot-alert-btn--geo-massivite[data-alert-massivite-state="strong"] {
    opacity: 1;
    pointer-events: auto;
    color: #009E73;
}

.lot-alert-btn--geo-massivite[data-alert-massivite-state="medium"] {
    opacity: 1;
    pointer-events: auto;
    color: #E69F00;
}

.lot-alert-btn--geo-massivite[data-alert-massivite-state="low"] {
    opacity: 1;
    pointer-events: auto;
    color: #D55E00;
}

.lot-alert-btn--geo-massivite[data-alert-massivite-state="none"] {
    opacity: 0.3;
    pointer-events: none;
}

.lot-alert-btn--debit-volumetrie[data-alert-volumetrie-state="strong"] {
    opacity: 1;
    pointer-events: auto;
    color: #009E73;
}

.lot-alert-btn--debit-volumetrie[data-alert-volumetrie-state="medium"] {
    opacity: 1;
    pointer-events: auto;
    color: #E69F00;
}

.lot-alert-btn--debit-volumetrie[data-alert-volumetrie-state="low"] {
    opacity: 1;
    pointer-events: auto;
    color: #D55E00;
}

.lot-alert-btn--debit-volumetrie[data-alert-volumetrie-state="none"] {
    opacity: 0.3;
    pointer-events: none;
}

.lot-alert-btn--debit-regularite[data-alert-regularite-state="used"] {
    opacity: 1;
    pointer-events: auto;
    color: #E69F00;
}

.lot-alert-btn--debit-regularite[data-alert-regularite-state="none"] {
    opacity: 0.3;
    pointer-events: auto;
}

.lot-alert-btn--debit-artisanalite[data-alert-artisanalite-state="strong"] {
    opacity: 1;
    pointer-events: auto;
    color: #009E73;
}

.lot-alert-btn--debit-stabilite[data-alert-stabilite-state="strong"] {
    opacity: 1;
    pointer-events: auto;
    color: #009E73;
}

.lot-alert-btn--debit-stabilite[data-alert-stabilite-state="medium"] {
    opacity: 1;
    pointer-events: auto;
    color: #E69F00;
}

.lot-alert-btn--debit-stabilite[data-alert-stabilite-state="low"] {
    opacity: 1;
    pointer-events: auto;
    color: #D55E00;
}

.lot-alert-btn--debit-stabilite[data-alert-stabilite-state="none"] {
    opacity: 0.3;
    pointer-events: auto;
}

.lot-alert-btn--debit-artisanalite[data-alert-artisanalite-state="medium"] {
    opacity: 1;
    pointer-events: auto;
    color: #E69F00;
}

.lot-alert-btn--debit-artisanalite[data-alert-artisanalite-state="low"] {
    opacity: 1;
    pointer-events: auto;
    color: #D55E00;
}

.lot-alert-btn--debit-artisanalite[data-alert-artisanalite-state="none"] {
    opacity: 0.3;
    pointer-events: auto;
}

.lot-alert-btn--denat-naturalite[data-alert-naturalite-state="strong"] {
    opacity: 1;
    pointer-events: auto;
    color: #009E73;
}

.lot-alert-btn--denat-naturalite[data-alert-naturalite-state="medium"] {
    opacity: 1;
    pointer-events: auto;
    color: #E69F00;
}

.lot-alert-btn--denat-naturalite[data-alert-naturalite-state="none"] {
    opacity: 0.3;
    pointer-events: auto;
}

.lot-alert-btn--geo-industrialite[data-alert-industrialite-state="strong"] {
    opacity: 1;
    pointer-events: auto;
    color: #009E73;
}

.lot-alert-btn--geo-industrialite[data-alert-industrialite-state="medium"] {
    opacity: 1;
    pointer-events: auto;
    color: #E69F00;
}

.lot-alert-btn--geo-industrialite[data-alert-industrialite-state="low"] {
    opacity: 1;
    pointer-events: auto;
    color: #D55E00;
}

.lot-alert-btn--geo-industrialite[data-alert-industrialite-state="none"] {
    opacity: 0.3;
    pointer-events: auto;
}

.lot-alert-btn--geo-inclusivite[data-alert-inclusivite-state="strong"] {
    opacity: 1;
    pointer-events: auto;
    color: #009E73;
}

.lot-alert-btn--geo-inclusivite[data-alert-inclusivite-state="medium"] {
    opacity: 1;
    pointer-events: auto;
    color: #E69F00;
}

.lot-alert-btn--geo-inclusivite[data-alert-inclusivite-state="low"] {
    opacity: 1;
    pointer-events: auto;
    color: #D55E00;
}

.lot-alert-btn--geo-inclusivite[data-alert-inclusivite-state="none"] {
    opacity: 0.3;
    pointer-events: auto;
}

.lot-alert-btn--mech-feu[data-alert-feu-state="strong"] {
    opacity: 1;
    pointer-events: auto;
    color: #009E73;
}

.lot-alert-btn--mech-feu[data-alert-feu-state="medium"] {
    opacity: 1;
    pointer-events: auto;
    color: #E69F00;
}

.lot-alert-btn--mech-feu[data-alert-feu-state="low"] {
    opacity: 1;
    pointer-events: auto;
    color: #D55E00;
}

.lot-alert-btn--mech-feu[data-alert-feu-state="none"] {
    opacity: 0.3;
    pointer-events: auto;
}

.lot-alert-btn--bio-integrite[data-alert-integrite-bio-state="active"] {
    opacity: 1;
    pointer-events: auto;
    color: #D55E00;
}

.lot-alert-btn--bio-integrite[data-alert-integrite-bio-state="none"] {
    opacity: 0.3;
    pointer-events: auto;
}

.lot-alert-btn--mech-integrite[data-alert-integrite-mech-state="active"] {
    opacity: 1;
    pointer-events: auto;
    color: #D55E00;
}

.lot-alert-btn--mech-integrite[data-alert-integrite-mech-state="none"] {
    opacity: 0.3;
    pointer-events: auto;
}

.lot-alert-btn--bio-purge[data-alert-purge-bio-state="active"] {
    opacity: 1;
    pointer-events: auto;
    color: #D55E00;
}

.lot-alert-btn--bio-purge[data-alert-purge-bio-state="none"] {
    opacity: 0.3;
    pointer-events: auto;
}

.lot-alert-btn--mech-purge[data-alert-purge-mech-state="active"] {
    opacity: 1;
    pointer-events: auto;
    color: #D55E00;
}

.lot-alert-btn--mech-purge[data-alert-purge-mech-state="none"] {
    opacity: 0.3;
    pointer-events: auto;
}

.lot-alert-btn--bio-expansion[data-alert-expansion-state="active"] {
    opacity: 1;
    pointer-events: auto;
    color: #D55E00;
}

.lot-alert-btn--bio-expansion[data-alert-expansion-state="none"] {
    opacity: 0.3;
    pointer-events: auto;
}

.lot-alert-btn--denat-contamination[data-alert-contamination-state="active"] {
    opacity: 1;
    pointer-events: auto;
    color: #D55E00;
}

.lot-alert-btn--denat-contamination[data-alert-contamination-state="none"] {
    opacity: 0.3;
    pointer-events: auto;
}

.lot-alert-btn--traces-alteration[data-alert-alteration-state="active"] {
    opacity: 1;
    pointer-events: auto;
    color: #D55E00;
}

.lot-alert-btn--traces-alteration[data-alert-alteration-state="none"] {
    opacity: 0.3;
    pointer-events: auto;
}

.notation-locked {
    position: relative;
    pointer-events: none;
    opacity: 0.45;
    user-select: none;
}

/* Soft-lock altération : opacité réduite mais clics passants (interceptés par JS) */
.notation-soft-locked {
    position: relative;
    opacity: 0.45;
    user-select: none;
}

.modal-footer--with-ignore {
    display: flex;
    gap: 8px;
}

.modal-footer--with-ignore .btn {
    flex: 1;
}

/* Footer 3 boutons pour modale alerte altération */
.modal-footer--alteration-alert {
    display: flex;
    gap: 8px;
}

.modal-footer--alteration-alert .btn {
    flex: 1;
}

/* Sélecteur orientation révision */
.alteration-revision-select {
    width: 100%;
    padding: 6px 8px;
    border-radius: var(--radius-base);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

/* Modale large (révision) */
.modal--wide {
    width: 95%;
    max-width: 480px;
}

/* Checkbox révision */
.alteration-revision-group {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--font-size-sm);
}

.alteration-revision-group input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

.lot-alert-btn--provenance-macro[data-alert-macro-state="strong"] {
    opacity: 1;
    pointer-events: auto;
    color: #009E73;
}

.lot-alert-btn--provenance-macro[data-alert-macro-state="medium"] {
    opacity: 1;
    pointer-events: auto;
    color: #E69F00;
}

.lot-alert-btn--provenance-macro[data-alert-macro-state="low"] {
    opacity: 1;
    pointer-events: auto;
    color: #D55E00;
}

.lot-alert-btn--provenance-macro[data-alert-macro-state="none"] {
    opacity: 0.3;
    pointer-events: auto;
}

.lot-alert-btn--essence-massevol[data-alert-massevol-state="strong"] {
    opacity: 1;
    pointer-events: auto;
    color: #009E73;
}

.lot-alert-btn--essence-massevol[data-alert-massevol-state="medium"] {
    opacity: 1;
    pointer-events: auto;
    color: #E69F00;
}

.lot-alert-btn--essence-massevol[data-alert-massevol-state="low"] {
    opacity: 1;
    pointer-events: auto;
    color: #D55E00;
}

.lot-alert-btn--essence-massevol[data-alert-massevol-state="none"] {
    opacity: 0.3;
    pointer-events: auto;
}

.lot-alert-btn--confidence[data-alert-confidence-state="strong"] {
    opacity: 1;
    pointer-events: auto;
    color: #009E73;
}

.lot-alert-btn--confidence[data-alert-confidence-state="medium"] {
    opacity: 1;
    pointer-events: auto;
    color: #E69F00;
}

.lot-alert-btn--confidence[data-alert-confidence-state="low"] {
    opacity: 1;
    pointer-events: auto;
    color: #D55E00;
}

.lot-alert-btn--confidence[data-alert-confidence-state="none"] {
    opacity: 0.3;
    pointer-events: none;
}

.lot-alert-btn--usage-humidite[data-alert-humidite-state="strong"] {
    opacity: 1;
    pointer-events: auto;
    color: #E69F00;
}

.lot-alert-btn--usage-humidite[data-alert-humidite-state="medium"] {
    opacity: 1;
    pointer-events: auto;
    color: #009E73;
}

.lot-alert-btn--usage-humidite[data-alert-humidite-state="low"] {
    opacity: 1;
    pointer-events: auto;
    color: #D55E00;
}

.lot-alert-btn--usage-humidite[data-alert-humidite-state="none"] {
    opacity: 0.3;
    pointer-events: auto;
}

.lot-prix-group-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    grid-column: 1 / -1;
    margin-bottom: -2px;
}

.lot-prix-group-header .lot-prix-alert-btn {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
}

.lot-prix-group-header .lot-prix-alert-btn svg {
    width: 18px;
    height: 18px;
}

.lot-prix-group-header .lot-prix-toggle-btn {
    width: 72px;
    min-width: 72px;
    flex: 0 0 72px;
    height: 26px;
    padding: 0;
    justify-content: center;
    align-self: flex-start;
}

.lot-price-market-row .lot-prix-info-btn,
.lot-prix-group-header .lot-prix-info-btn,
.lot-prix-info-btn {
    background-color: var(--bleu-crai);
    border-color: var(--bleu-crai);
    color: var(--color-white);
}

.lot-price-market-row .lot-prix-info-btn:disabled,
.lot-prix-group-header .lot-prix-info-btn:disabled,
.lot-prix-info-btn:disabled {
    background-color: var(--bleu-crai);
    border-color: var(--bleu-crai);
    color: var(--color-white);
    opacity: 0.55;
}

.lot-prix-info-btn {
    min-width: 42px;
    background-color: var(--bleu-crai);
    border-color: var(--bleu-crai);
    color: var(--color-white);
    font-weight: var(--font-weight-medium);
    text-transform: lowercase;
}

.lot-prix-info-btn,
.lot-prix-toggle-btn {
    width: auto;
    min-width: 28px;
    height: 26px;
    padding: 0 var(--space-8);
    font-size: var(--font-size-xs);
}

.lot-prix-info-btn {
    min-width: 42px;
}

.lot-prix-toggle-btn[aria-pressed="true"] {
    background-color: var(--bleu-crai);
    border-color: var(--bleu-crai);
    color: var(--color-white);
}

/* Grisage du bloc Prix du marché du lot en mode OFF (prixLotDirect = false) */
[data-lot-prix-market-block][data-muted="true"] .lot-field-label {
    color: var(--color-gray-300);
}

[data-lot-prix-market-block][data-muted="true"] .lot-input {
    background-color: #F4F4F4;
    color: var(--color-gray-300);
}

[data-lot-prix-market-block][data-muted="true"] .lot-input-unit {
    color: var(--color-gray-300);
}

[data-lot-prix-market-block][data-muted="true"] .lot-price-unit-btn {
    opacity: 0.4;
    pointer-events: none;
}

/* Grisage du groupe Prix dans les formulaires Pièce / Pièce par défaut en mode ON */
[data-prix-group-disabled="true"] {
    position: relative;
    pointer-events: none;
}

[data-prix-group-disabled="true"] .lot-field-label,
[data-prix-group-disabled="true"] .lot-field-label--subsection {
    color: var(--color-gray-300);
}

[data-prix-group-disabled="true"] .lot-input {
    background-color: #F4F4F4;
    color: var(--color-gray-300);
}

[data-prix-group-disabled="true"] .lot-input-unit {
    color: var(--color-gray-300);
}

[data-prix-group-disabled="true"] .lot-price-unit-btn {
    opacity: 0.4;
}

.lot-price-market-layout {
    display: grid;
    gap: 6px;
    --lot-price-unit-gap: 4px;
    --lot-price-unit-grid-width: calc((100% - (2 * 8px)) / 3);
    --lot-price-info-width: calc((var(--lot-price-unit-grid-width) - var(--lot-price-unit-gap)) / 2);
}

.lot-price-market-row {
    display: grid;
    gap: 8px;
    align-items: stretch;
}

.lot-price-market-row--top {
    grid-template-columns: minmax(0, 1fr) var(--lot-price-info-width) minmax(0, var(--lot-price-unit-grid-width));
}

.lot-price-market-row--bottom {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--lot-price-unit-grid-width));
}

.lot-field-block--inline-price-select {
    margin-bottom: 0;
}

.lot-price-orientation-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
    padding-right: 22px;
    text-align: left;
    font-size: calc(var(--font-size-sm) - 2px);
}

.lot-price-orientation-select:has(option[value=""]:checked) {
    color: var(--color-text-secondary);
    font-style: italic;
}

.lot-price-orientation-select option {
    color: var(--color-text);
    font-style: normal;
}

.lot-price-market-row .lot-prix-info-btn {
    width: 100%;
    min-width: 0;
    padding: 0 var(--space-4);
}

.lot-price-summary-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.lot-carbon-summary-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.lot-carbon-input-row {
    display: grid;
    gap: 8px;
}

/* Ligne Masse volumique */
.lot-carbon-volumique-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* Ligne Masse unitaire theorique et Masse unitaire mesuree */
.lot-carbon-unit-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* Ligne Fraction C, Humidité, Bois */
.lot-carbon-other-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

/* Masse volumique et Masse unitaire sur leur ligne */
.lot-carbon-volumique-row .lot-field-block,
.lot-carbon-unit-row .lot-field-block {
    gap: 4px;
}

/* Fraction C, Humidité, Bois sur leur ligne */
.lot-carbon-other-row .lot-field-block {
    gap: 4px;
}

.lot-carbon-input-row .lot-field-label {
    min-height: auto;
    font-size: 10px;
    text-align: left;
}

.lot-carbon-input-row .lot-input {
    text-align: center;
}

/* Lisibilité du texte "Incomplète" dans les champs mesurés du lot */
.lot-carbon-input-row input[data-display="masseVolumiqueMoyenneMesureeLot"],
.lot-carbon-input-row input[data-display="masseLotMesuree"] {
    text-align: left;
    padding-left: var(--space-8);
}

.lot-carbon-input-row .lot-input-with-unit {
    width: min(148px, 100%);
    margin-inline: auto;
}

.lot-carbon-input-row input[data-lot-input="masseVolumique"] {
    text-align: center;
}

.lot-input-with-unit--mass-density .lot-input {
    padding-left: 4px;
    padding-right: 30px;
}

.lot-input-with-unit--mass-density .lot-input-unit {
    right: 6px;
    font-size: 9px;
}

.lot-carbon-other-row .lot-input-with-unit[data-lot-bois-state="variable"] .lot-input-unit {
    display: none;
}

.lot-carbon-other-row .lot-input-with-unit[data-lot-fraction-c-state="variable"] .lot-input-unit,
.lot-carbon-other-row .lot-input-with-unit[data-lot-humidite-state="variable"] .lot-input-unit {
    display: none;
}

.lot-carbon-other-row .lot-input-with-unit[data-lot-bois-state="variable"] .lot-input {
    padding-right: var(--space-8);
    text-align: left;
}

.lot-carbon-other-row .lot-input-with-unit[data-lot-fraction-c-state="variable"] .lot-input,
.lot-carbon-other-row .lot-input-with-unit[data-lot-humidite-state="variable"] .lot-input {
    padding-right: var(--space-8);
    text-align: left;
}

.lot-carbon-summary-row .lot-field-block {
    gap: 4px;
}

.lot-carbon-summary-row .lot-field-label {
    min-height: auto;
    font-size: 10px;
    text-align: left;
}

.lot-carbon-summary-row .lot-input {
    text-align: left;
}

.lot-carbon-summary-row .lot-input-with-unit {
    width: min(240px, 60%);
}

.lot-price-summary-row .lot-field-block {
    gap: 4px;
}

.lot-price-summary-row .lot-field-label {
    min-height: auto;
    font-size: 10px;
    text-align: left;
}

.lot-price-summary-row .lot-input {
    text-align: center;
}

.lot-price-summary-row .lot-input-with-unit .lot-input {
    text-align: right;
}

.lot-price-summary-row .lot-input-with-unit--compact .lot-input {
    padding-right: 16px;
}

.lot-price-summary-row .lot-input-with-unit--compact .lot-input-unit {
    right: 3px;
    padding: 0 2px;
    box-sizing: border-box;
    text-align: center;
}

.lot-price-unit-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lot-price-unit-gap);
    width: 100%;
    align-items: stretch;
}

.lot-price-unit-toggle--top,
.lot-price-unit-toggle--bottom {
    min-width: 0;
}

.lot-price-unit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    background-color: #E6E6E6;
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    padding: 0 var(--space-4);
    cursor: pointer;
    width: 100%;
    min-width: 0;
    line-height: 1.2;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .lot-price-market-layout {
        --lot-price-unit-gap: 3px;
    }

    .lot-price-market-row--top {
        grid-template-columns: minmax(0, 1fr) var(--lot-price-info-width) minmax(0, var(--lot-price-unit-grid-width));
    }

    .lot-price-market-row--bottom {
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--lot-price-unit-grid-width));
    }

    .lot-price-unit-toggle {
        gap: var(--lot-price-unit-gap);
    }

    .lot-price-unit-toggle .lot-price-unit-btn {
        min-width: 0;
        padding: 0 4px;
        font-size: 10px;
        line-height: 1.1;
    }

    .lot-price-summary-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .lot-price-summary-row .lot-field-block:last-child {
        grid-column: 1 / -1;
    }

    .lot-price-summary-row .lot-input-with-unit--compact .lot-input {
        padding-right: 12px;
    }

    .lot-price-summary-row .lot-input-with-unit--compact .lot-input-unit {
        right: 2px;
        padding: 0 1px;
    }
}

.lot-price-unit-btn[aria-pressed="true"] {
    background-color: var(--bleu-crai);
    border-color: var(--bleu-crai);
    color: var(--color-white);
}

.lot-prix-group-header .lot-prix-info-btn {
    background-color: var(--bleu-crai);
    border-color: var(--bleu-crai);
    color: var(--color-white);
}

.meta-toggle-group {
    display: flex;
    gap: var(--space-4);
}

.meta-toggle-group .lot-price-unit-btn {
    flex: 1;
    min-width: unset;
    height: 30px;
}

.meta-toggle-group .lot-price-unit-btn[aria-pressed="false"] {
    opacity: 0.7;
}

/* Grille densité / dimensions / prix / volumes */

.lot-row-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.lot-static-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.lot-static-label {
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-white);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

/* Groupement L / l / h */

.lot-dimensions-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.lot-dimensions-group .lot-input {
  flex: 1 1 100%;
  min-width: 0;
}

/* Supprimer les flèches des inputs numériques dans les cartes de lot */

.lot-card input[type="number"]::-webkit-outer-spin-button,
.lot-card input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.lot-card input[type="number"] {
  -moz-appearance: textfield;
  appearance: none;
}

/* Essences */

.lot-essence-row {
  flex-direction: column;
  align-items: stretch;
}

.lot-essence-field {
  width: 100%;
}

.lot-essence-display {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-8);
}

.lot-input--essence-common {
  font-weight: normal;
  font-size: var(--font-size-sm);
}

.lot-input--essence-scientific {
  font-style: italic;
  font-size: var(--font-size-xs);
}

/* Centrer le texte des champs de dimension */
.lot-inline-grid--lot-dimensions .lot-input {
  text-align: left;
}

.lot-inline-grid[data-variabilite-grid="pieceType"] .lot-input {
    text-align: center;
}

/* Styles lot identiques sur tous les formats (la carte a une largeur fixe ~280-320px) */

/* Orientation / résultat de notation */

.lot-orientation-row {
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
}

.lot-orientation-badge {
    display: inline-block;
    align-self: flex-start;
    padding: var(--space-4) var(--space-12);
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    background-color: #E6E6E6;
    color: var(--color-text);
}

/* Couleurs selon orientation */
.lot-orientation--reemploi {
    background-color: #009E73;
    color: var(--color-black);
}

.lot-orientation--reutilisation {
    background-color: #56B4E9;
    color: var(--color-black);
}

.lot-orientation--recyclage {
    background-color: #E69F00;
    color: var(--color-black);
}

.lot-orientation--combustion {
    background-color: #D55E00;
    color: var(--color-black);
}

.lot-orientation--none {
    background-color: #E6E6E6;
    color: var(--color-text);
}


/* Slider de navigation bas */

.lot-slider {
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}

.lot-slider-track {
    display: flex;
    gap: var(--space-8);
    justify-content: center;
}

.lot-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background-color: rgba(230, 230, 230, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: transform 0.1s ease, background-color 0.2s ease;
}

.lot-slider-dot--active {
    background-color: var(--color-primary);
    transform: scale(1.3);
}

.lot-delete-btn {
  padding: var(--space-4) var(--space-8);
    background-color: var(--bleu-crai);
    color: var(--blanc-pur);
  border-radius: var(--radius-base);
    border: none;
  font-size: var(--font-size-xs);
  cursor: pointer;
    flex-shrink: 0;
}

.lot-delete-btn:hover {
    background-color: #162e72;
    color: var(--blanc-pur);
}

/* Bouton Ajouter une pièce */

.lot-add-piece-btn {
    display: block;
    width: 100%;
    margin-top: var(--space-8);
    padding: var(--space-8) var(--space-12);
    background-color: var(--color-black);
    color: var(--color-white);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    cursor: pointer;
    text-align: center;
}

.lot-add-piece-btn:hover {
    background-color: #222;
}

/* Détail du lot : section dédiée sous allotissement */

.detail-lot-section {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-16);
}

.detail-lot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-12);
}

.detail-lot-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-12);
    margin-bottom: var(--space-12);
}

.detail-lot-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-8);
}

.detail-lot-title {
    margin-bottom: 0;
}

.detail-lot-lot-badge {
    white-space: nowrap;
}

.detail-lot-info-btn {
    flex-shrink: 0;
}

.detail-lot-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: var(--space-8);
}

.detail-lot-scroll::-webkit-scrollbar {
    height: 6px;
}

.detail-lot-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.detail-lot-scroll::-webkit-scrollbar-thumb {
    background: var(--bleu-crai);
    border-radius: 3px;
}

.piece-rail {
    display: flex;
    flex-direction: row;
    gap: var(--space-12);
}

/* Carte de pièce */

.piece-card {
    position: relative;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    padding: var(--space-12);
    min-width: var(--lot-piece-card-min-width);
    max-width: var(--lot-piece-card-max-width);
    flex: 0 0 var(--lot-piece-card-min-width);
}

.piece-card--active {
    border-color: var(--bleu-crai);
    box-shadow: 0 0 0 2px rgba(29, 61, 150, 0.15);
}

.piece-card--passive {
    opacity: 0.58;
    filter: grayscale(0.45);
    cursor: pointer;
}

.piece-card--passive input:disabled,
.piece-card--passive button:disabled,
.piece-card--passive select:disabled,
.piece-card--passive textarea:disabled {
    cursor: not-allowed;
    pointer-events: none;
}

.piece-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-8);
}

.piece-card-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.piece-card-title-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.piece-card-title-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.piece-card-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4, 4px);
    flex-shrink: 0;
}

.piece-card-actions--stacked {
    flex-direction: column;
    align-items: flex-end;
}

.piece-duplicate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: var(--space-4) var(--space-8);
    background-color: var(--bleu-crai);
    color: var(--blanc-pur);
    border-radius: var(--radius-base);
    border: none;
    font-size: var(--font-size-xs);
    cursor: pointer;
    flex-shrink: 0;
    opacity: 1;
}

.piece-duplicate-btn:hover:not(:disabled) {
    background-color: #162e72;
    color: var(--blanc-pur);
}

.piece-delete-btn {
    padding: var(--space-4) var(--space-8);
    background-color: var(--bleu-crai);
    color: var(--blanc-pur);
    border-radius: var(--radius-base);
    border: none;
    font-size: var(--font-size-xs);
    cursor: pointer;
    flex-shrink: 0;
}

.piece-delete-btn:hover {
    background-color: #162e72;
    color: var(--blanc-pur);
}

.piece-delete-btn:disabled,
.piece-duplicate-btn:disabled {
    background-color: #97A6D4;
    color: #EDEFF7;
}

/* Le reset de la pièce par défaut reprend exactement la boîte du bouton suppression pièce */
.piece-card .piece-delete-btn.btn-reset {
    min-width: 28px;
    min-height: 28px;
    padding: var(--space-4) var(--space-8);
    line-height: 1;
}

.piece-card .piece-delete-btn[data-default-piece-delete],
.piece-card .piece-delete-btn[data-piece-delete] {
    min-width: 28px;
    min-height: 28px;
    padding: var(--space-4) var(--space-8);
    line-height: 1;
}

.piece-card .piece-delete-btn.btn-reset svg {
    width: 12px;
    height: 12px;
}

/* Pièce par défaut */
.piece-card--default {
    border: 2px dashed var(--bleu-crai);
    background-color: rgba(29, 61, 150, 0.04);
}

.piece-card--default .piece-card-title {
    color: var(--bleu-crai);
}

.piece-card--default .piece-default-count {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted, #888);
    font-weight: var(--font-weight-semibold);
}

.piece-card--disabled {
    opacity: 0.35;
    filter: grayscale(0.6);
}

.piece-form-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.piece-badge-count {
    display: inline-block;
    margin-left: var(--space-4);
    padding: 0 6px;
    border-radius: 10px;
    background: var(--color-white);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.5;
    vertical-align: middle;
}

/* Modale allotissement */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal {
    max-width: 640px;
    width: 90%;
    max-height: 80vh;
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
}

.modal-header,
.modal-footer {
    padding: var(--space-16);
    border-bottom: 1px solid var(--color-border);
}

.modal-header {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    align-items: start;
    column-gap: var(--space-8);
}

.modal-header > h1,
.modal-header > h2,
.modal-header > h3 {
    grid-column: 2;
    margin: 0;
    min-width: 0;
    text-align: center;
    line-height: 1.1;
    word-break: normal;
    overflow-wrap: anywhere;
}

.modal-footer {
    border-top: 1px solid var(--color-border);
    border-bottom: none;
}

.modal-body {
    padding: var(--space-16);
    overflow-y: auto;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.modal-body p + p {
    margin-top: var(--space-8);
}

.modal-close {
    grid-column: 3;
    justify-self: end;
    background: none;
    border: none;
    font-size: var(--font-size-xl);
    cursor: pointer;
    margin-left: 0;
}

/* Inspection */

.inspection-card {
    background-color: var(--color-black);
    color: var(--color-white);
}

/* En-tête */

.inspection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-16);
}

.inspection-title {
    flex: 1;
    text-align: center;
    color: var(--color-white);
    margin-bottom: 0;
}

.inspection-lot-badge {
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-white);
    color: var(--color-text);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.inspection-info-btn {
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-black);
    color: var(--color-white);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

/* Corps */

.inspection-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

/* Grille de base (écrasée plus bas dans la cascade) */

.inspection-row {
    display: grid;
    grid-template-columns:
        minmax(0, 2.2fr)    /* slider */
        72px                /* reset / ignorer+reset */
        minmax(0, 1.35fr)   /* critère */
        46px                /* info */
    ;
    grid-template-areas:
        "slider reset label info";
    align-items: end;
    column-gap: var(--space-8);
    row-gap: 0;
    padding: var(--space-6);
    border-radius: var(--radius-base);
    background-color: rgba(255, 255, 255, 0.06);
}

.inspection-reset-btn {
    grid-area: reset;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-white);
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    min-height: 2.3em;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: end;
}

/* bloc spécial pour Intégrité (ignorer + reset) */
.inspection-ignore-reset {
    grid-area: reset;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inspection-ignore-btn {
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-white);
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    min-height: 2.3em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inspection-ignore-reset .inspection-ignore-btn,
.inspection-ignore-reset .inspection-reset-btn {
    width: 100%;
}

.inspection-label-box {
    grid-area: label;
    padding: 1px 2px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background-color: #E6E6E6;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: 1.15;
    min-height: 2.3em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.inspection-value-box {
    grid-area: level;
    padding: 1px 2px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background-color: #E6E6E6;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: 1.15;
    min-height: 2.3em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: var(--font-weight-medium);
}

.inspection-intensity-box {
    grid-area: intensity;
    justify-self: center;
    min-width: 36px;
    max-width: 48px;
    padding: 1px 2px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background-color: #E6E6E6;
    color: var(--color-text);
    font-size: var(--font-size-xs);
    line-height: 1.1;
    min-height: 2.3em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    text-align: center;
}

.inspection-info-small-btn {
    grid-area: info;
    justify-self: center;
    min-width: 36px;
    max-width: 48px;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-white);
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    line-height: 1;
    min-height: 2.3em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    white-space: nowrap;
}

/* Slider */

.inspection-slider-wrapper {
    grid-area: slider;
    width: 100%;
    display: grid;
    grid-template-rows: auto var(--slider-hit-height);
    row-gap: var(--space-4);
    align-items: end;
}

.inspection-slider-display {
    grid-row: 2;
    grid-column: 1;
    position: relative;
    height: var(--slider-hit-height);
    pointer-events: none;
    z-index: 0;
}

.inspection-slider-display-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: var(--slider-track-height);
    background: var(--color-white);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inspection-slider-dot {
    width: 8px;
    height: 8px;
    background: var(--color-white);
    border-radius: 50%;
}

.inspection-slider-center-ring {
    width: 8px;
    height: 8px;
    background: var(--color-white);
    border-radius: 50%;
    border: none;
    position: static;
    transform: none;
}

.inspection-slider {
    grid-row: 2;
    grid-column: 1;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: var(--slider-hit-height);
    background: transparent;
    outline: none;
    position: relative;
    margin: 0;
    z-index: 1;
    cursor: pointer;
    touch-action: pan-y;
}

.inspection-slider::-webkit-slider-runnable-track {
    height: var(--slider-track-height);
    background: transparent;
}

.inspection-slider::-moz-range-progress {
    height: var(--slider-track-height);
    background: transparent;
}

/* Curseur mobile : cercle noir avec bordure blanche épaisse */
.inspection-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    border-radius: 50%;
    background: var(--color-black);
    border: var(--slider-thumb-border) solid var(--color-white);
    box-sizing: border-box;
    cursor: pointer;
    margin-top: var(--slider-thumb-offset);
}

.inspection-slider::-moz-range-thumb {
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    border-radius: 50%;
    background: var(--color-black);
    border: var(--slider-thumb-border) solid var(--color-white);
    cursor: pointer;
    box-sizing: border-box;
}

.inspection-slider::-moz-range-track {
    height: var(--slider-track-height);
    background: transparent;
}

.inspection-slider-scale {
    grid-row: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 32px;
    font-size: var(--font-size-xs);
    color: var(--color-gray-300);
    line-height: 1.2;
    align-self: end;
}

.inspection-slider-scale span {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
}

/* État désactivé : tout le slider est grisé */

.inspection-row--disabled .inspection-slider-display-line {
    background: var(--disabled-surface);
}

.inspection-row--disabled .inspection-slider-dot,
.inspection-row--disabled .inspection-slider-center-ring {
    background: var(--disabled-surface);
}

.inspection-row--disabled .inspection-slider::-webkit-slider-thumb,
.inspection-row--disabled .inspection-slider::-moz-range-thumb {
    background: transparent;
    border-color: transparent;
    opacity: 0;
}

.inspection-row--disabled .inspection-slider::-webkit-slider-thumb {
    width: 0;
    height: 0;
    border-width: 0;
    margin-top: 0;
}

.inspection-row--disabled .inspection-slider::-moz-range-thumb {
    width: 0;
    height: 0;
    border-width: 0;
}

.inspection-row--disabled .inspection-slider {
    cursor: pointer;
}

.inspection-row--disabled .inspection-slider:active::-webkit-slider-thumb,
.inspection-row--disabled .inspection-slider:focus-visible::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    background: var(--color-black);
    border-width: 3px;
    border-color: var(--color-white);
    margin-top: -8px;
    opacity: 1;
}

.inspection-row--disabled .inspection-slider:active::-moz-range-thumb,
.inspection-row--disabled .inspection-slider:focus-visible::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--color-black);
    border-width: 3px;
    border-color: var(--color-white);
    opacity: 1;
}

/* Note : les boutons restent visibles même en état grisé */

/* Dégradation biologique */

.bio-card {
    background-color: var(--color-black);
    color: var(--color-white);
}

.bio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-16);
}

.bio-title {
    flex: 1;
    text-align: center;
    color: var(--color-white);
    margin-bottom: 0;
}

.bio-lot-badge {
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-white);
    color: var(--color-text);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.bio-info-btn {
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-black);
    color: var(--color-white);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.bio-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.bio-row {
    display: grid;
    padding: var(--space-8);
    border-radius: var(--radius-base);
    background-color: rgba(255, 255, 255, 0.06);
}

.inspection-row {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) 72px minmax(0, 1.2fr) 42px;
    grid-template-areas: "slider reset label info";
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8);
    border-radius: var(--radius-base);
    background-color: rgba(255, 255, 255, 0.06);
}

.bio-value-label-box,
.bio-label-box,
.bio-level-box,
.bio-intensity-box {
    padding: 1px 2px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background-color: #E6E6E6;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    text-align: center;
}

.bio-value-label-box {
    font-weight: var(--font-weight-medium);
}

.bio-label-box {
    font-weight: var(--font-weight-medium);
}

.bio-level-box {
    text-align: center;
    font-weight: var(--font-weight-medium);
}

.bio-intensity-box {
    font-size: var(--font-size-xs);
}

.bio-reset-btn,
.bio-info-small-btn {
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-white);
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    cursor: pointer;
    white-space: nowrap;
}

.bio-slider-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.bio-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    outline: none;
    background:
      linear-gradient(to right, #CCCCCC 0, #CCCCCC 100%) center/100% 4px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) left center/12px 12px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) center center/12px 12px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) right center/12px 12px no-repeat;
}

/* WebKit */
.bio-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-white);
    border: 4px solid var(--color-black);
    cursor: pointer;
    margin-top: -2px;
}

/* Firefox */
.bio-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-white);
    border: 4px solid var(--color-black);
    cursor: pointer;
}

.bio-slider::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: #CCCCCC;
}

.bio-slider-scale {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--color-gray-300);
}

.bio-slider-label {
    transition: all 0.2s ease;
    font-weight: 400;
    color: var(--color-gray-300);
    cursor: default;
}

.slider-label--active,
.bio-slider-label--active {
    font-weight: 700;
    color: var(--bleu-crai);
    text-decoration: none; /* esthétique : plus de soulignement */
}

/* État grisé (désactivé) */

.bio-row--disabled .bio-slider {
    background-color: var(--disabled-border);
}

.bio-row--disabled .bio-slider::-webkit-slider-thumb,
.bio-row--disabled .bio-slider::-moz-range-thumb {
    border-color: var(--disabled-surface);
}

/* Confiance = faible => titre rouge */

.bio-label-confiance[data-confiance-title] {
    transition: background-color 0.2s ease, color 0.2s ease;
}

.bio-label-confiance--low {
    background-color: #D55E00;
    color: var(--color-black);
}
/* Dégradation mécanique */

.mech-card {
    background-color: var(--color-black);
    color: var(--color-white);
}

.mech-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-16);
}

.mech-title {
    flex: 1;
    text-align: center;
    color: var(--color-white);
    margin-bottom: 0;
}

.mech-lot-badge {
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-white);
    color: var(--color-text);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.mech-info-btn {
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-black);
    color: var(--color-white);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.mech-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.mech-row {
    display: grid;
    padding: var(--space-8);
    border-radius: var(--radius-base);
    background-color: rgba(255, 255, 255, 0.06);
}

.mech-value-label-box,
.mech-label-box,
.mech-level-box,
.mech-intensity-box {
    padding: 1px 2px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background-color: #E6E6E6;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    text-align: center;
}

.mech-value-label-box {
    font-weight: var(--font-weight-medium);
}

.mech-label-box {
    font-weight: var(--font-weight-medium);
}

.mech-level-box {
    text-align: center;
    font-weight: var(--font-weight-medium);
}

.mech-intensity-box {
    font-size: var(--font-size-xs);
}

.mech-reset-btn,
.mech-info-small-btn {
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-white);
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    cursor: pointer;
    white-space: nowrap;
}

.mech-slider-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.mech-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    outline: none;
    background:
      linear-gradient(to right, #CCCCCC 0, #CCCCCC 100%) center/100% 4px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) left center/12px 12px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) center center/12px 12px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) right center/12px 12px no-repeat;
}

/* WebKit */
.mech-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-white);
    border: 4px solid var(--color-black);
    cursor: pointer;
     
}

/* Firefox */
.mech-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-white);
    border: 4px solid var(--color-black);
    cursor: pointer;
}

.mech-slider::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: #CCCCCC;
}

.mech-slider-scale {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--color-gray-300);
}

/* État grisé (désactivé) */

.mech-row--disabled .mech-slider {
    background-color: var(--disabled-border);
}

.mech-row--disabled .mech-slider::-webkit-slider-thumb,
.mech-row--disabled .mech-slider::-moz-range-thumb {
    border-color: var(--disabled-surface);
}

/* Confiance faible => titre rouge */

.mech-label-confiance[data-mech-confiance-title] {
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mech-label-confiance--low {
    background-color: #D55E00;
    color: var(--color-black);
}

/* Classement d’usage */

.usage-card {
    background-color: var(--color-black);
    color: var(--color-white);
}

.usage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-16);
}

.usage-title {
    flex: 1;
    text-align: center;
    color: var(--color-white);
    margin-bottom: 0;
}

.usage-lot-badge {
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-white);
    color: var(--color-text);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.usage-info-btn {
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-black);
    color: var(--color-white);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.usage-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.usage-row {
    display: grid;
    padding: var(--space-8);
    border-radius: var(--radius-base);
    background-color: rgba(255, 255, 255, 0.06);
}

.usage-value-label-box,
.usage-label-box,
.usage-level-box,
.usage-intensity-box {
    padding: 1px 2px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background-color: #E6E6E6;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    text-align: center;
}

.usage-value-label-box {
    font-weight: var(--font-weight-medium);
}

.usage-label-box {
    font-weight: var(--font-weight-medium);
}

.usage-level-box {
    text-align: center;
    font-weight: var(--font-weight-medium);
}

.usage-intensity-box {
    font-size: var(--font-size-xs);
}

.usage-reset-btn,
.usage-info-small-btn {
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-white);
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    cursor: pointer;
    white-space: nowrap;
}

.usage-slider-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.usage-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    outline: none;
    background:
      linear-gradient(to right, #CCCCCC 0, #CCCCCC 100%) center/100% 4px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) left center/12px 12px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) center center/12px 12px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) right center/12px 12px no-repeat;
}

/* WebKit */
.usage-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-white);
    border: 4px solid var(--color-black);
    cursor: pointer;
     
}

/* Firefox */
.usage-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-white);
    border: 4px solid var(--color-black);
    cursor: pointer;
}

.usage-slider::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: #CCCCCC;
}

.usage-slider-scale {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--color-gray-300);
}

/* État grisé */

.usage-row--disabled .usage-slider {
    background-color: var(--disabled-border);
}

.usage-row--disabled .usage-slider::-webkit-slider-thumb,
.usage-row--disabled .usage-slider::-moz-range-thumb {
    border-color: var(--disabled-surface);
}

/* Confiance faible => titre rouge */

.usage-label-confiance[data-usage-confiance-title] {
    transition: background-color 0.2s ease, color 0.2s ease;
}

.usage-label-confiance--low {
    background-color: #D55E00;
    color: var(--color-black);
}

/* Dénaturation */

.denat-card {
    background-color: var(--color-black);
    color: var(--color-white);
}

.denat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-16);
}

.denat-title {
    flex: 1;
    text-align: center;
    color: var(--color-white);
    margin-bottom: 0;
}

.denat-lot-badge {
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-white);
    color: var(--color-text);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.denat-info-btn {
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-black);
    color: var(--color-white);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.denat-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.denat-row {
    display: grid;
    padding: var(--space-8);
    border-radius: var(--radius-base);
    background-color: rgba(255, 255, 255, 0.06);
}

.denat-value-label-box,
.denat-label-box,
.denat-level-box,
.denat-intensity-box {
    padding: 1px 2px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background-color: #E6E6E6;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    text-align: center;
}

.denat-value-label-box {
    font-weight: var(--font-weight-medium);
}

.denat-label-box {
    font-weight: var(--font-weight-medium);
}

.denat-level-box {
    text-align: center;
    font-weight: var(--font-weight-medium);
}

.denat-intensity-box {
    font-size: var(--font-size-xs);
}

.denat-reset-btn,
.denat-info-small-btn {
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-white);
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    cursor: pointer;
    white-space: nowrap;
}

.denat-slider-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.denat-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    outline: none;
    background:
      linear-gradient(to right, #CCCCCC 0, #CCCCCC 100%) center/100% 4px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) left center/12px 12px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) center center/12px 12px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) right center/12px 12px no-repeat;
}

/* WebKit */
.denat-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-white);
    border: 4px solid var(--color-black);
    cursor: pointer;
}

/* Firefox */
.denat-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-white);
    border: 4px solid var(--color-black);
    cursor: pointer;
}

.denat-slider::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: #CCCCCC;
}

.denat-slider-scale {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--color-gray-300);
}

/* État grisé */

.denat-row--disabled .denat-slider {
    background-color: var(--disabled-border);
}

.denat-row--disabled .denat-slider::-webkit-slider-thumb,
.denat-row--disabled .denat-slider::-moz-range-thumb {
    border-color: var(--disabled-surface);
}

/* Confiance faible => titre rouge */

.denat-label-confiance[data-denat-confiance-title] {
    transition: background-color 0.2s ease, color 0.2s ease;
}

.denat-label-confiance--low {
    background-color: #D55E00;
    color: var(--color-black);
}

/* Débit */

.debit-card {
    background-color: var(--color-black);
    color: var(--color-white);
}

.debit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-16);
}

.debit-title {
    flex: 1;
    text-align: center;
    color: var(--color-white);
    margin-bottom: 0;
}

.debit-lot-badge {
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-white);
    color: var(--color-text);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.debit-info-btn {
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-black);
    color: var(--color-white);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.debit-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.debit-row {
    display: grid;
    padding: var(--space-8);
    border-radius: var(--radius-base);
    background-color: rgba(255, 255, 255, 0.06);
}

.debit-value-label-box,
.debit-label-box,
.debit-level-box,
.debit-intensity-box {
    padding: 1px 2px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background-color: #E6E6E6;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    text-align: center;
}

.debit-value-label-box {
    font-weight: var(--font-weight-medium);
}

.debit-label-box {
    font-weight: var(--font-weight-medium);
}

.debit-level-box {
    text-align: center;
    font-weight: var(--font-weight-medium);
}

.debit-intensity-box {
    font-size: var(--font-size-xs);
}

.debit-reset-btn,
.debit-info-small-btn {
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-white);
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    cursor: pointer;
    white-space: nowrap;
}

        .debit-slider-wrapper {
            display: flex;
            flex-direction: column;
            gap: var(--space-4);
        }

        /* Style personnalisé pour le fond gris clair et bord noir du slider */
        .slider-custom-bg {
            background: #F0F0F0;
            border: 2px solid #111;
            border-radius: 8px;
            padding: 8px 12px;
        }

.debit-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    outline: none;
    background:
      linear-gradient(to right, #CCCCCC 0, #CCCCCC 100%) center/100% 4px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) left center/12px 12px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) center center/12px 12px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) right center/12px 12px no-repeat;
}

/* WebKit */
.debit-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-white);
    border: 4px solid var(--color-black);
    cursor: pointer;
     
}

/* Firefox */
.debit-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-white);
    border: 4px solid var(--color-black);
    cursor: pointer;
}

.debit-slider::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: #CCCCCC;
}

.debit-slider-scale {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--color-gray-300);
}

/* État grisé */

.debit-row--disabled .debit-slider {
    background-color: var(--disabled-border);
}

.debit-row--disabled .debit-slider::-webkit-slider-thumb,
.debit-row--disabled .debit-slider::-moz-range-thumb {
    border-color: var(--disabled-surface);
}

/* Géométrie */

.geo-card {
    background-color: var(--color-black);
    color: var(--color-white);
}

.geo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-16);
}

.geo-title {
    flex: 1;
    text-align: center;
    color: var(--color-white);
    margin-bottom: 0;
}

.geo-lot-badge {
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-white);
    color: var(--color-text);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.geo-info-btn {
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-black);
    color: var(--color-white);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.geo-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.geo-row {
    display: grid;
    padding: var(--space-8);
    border-radius: var(--radius-base);
    background-color: rgba(255, 255, 255, 0.06);
}

.geo-value-label-box,
.geo-label-box,
.geo-level-box,
.geo-intensity-box {
    padding: 1px 2px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background-color: #E6E6E6;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    text-align: center;
}

.geo-value-label-box {
    font-weight: var(--font-weight-medium);
}

.geo-label-box {
    font-weight: var(--font-weight-medium);
}

.geo-level-box {
    text-align: center;
    font-weight: var(--font-weight-medium);
}

.geo-intensity-box {
    font-size: var(--font-size-xs);
}

.geo-reset-btn,
.geo-info-small-btn {
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-white);
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    cursor: pointer;
    white-space: nowrap;
}

.geo-slider-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.geo-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    outline: none;
    background:
      linear-gradient(to right, #CCCCCC 0, #CCCCCC 100%) center/100% 4px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) left center/12px 12px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) center center/12px 12px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) right center/12px 12px no-repeat;
}

/* WebKit */
.geo-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-white);
    border: 4px solid var(--color-black);
    cursor: pointer;
     
}

/* Firefox */
.geo-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-white);
    border: 4px solid var(--color-black);
    cursor: pointer;
}

.geo-slider::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: #CCCCCC;
}

.geo-slider-scale {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--color-gray-300);
}

/* État grisé */

.geo-row--disabled .geo-slider {
    background-color: var(--disabled-border);
}

.geo-row--disabled .geo-slider::-webkit-slider-thumb,
.geo-row--disabled .geo-slider::-moz-range-thumb {
    border-color: var(--disabled-surface);
}

  /* Essence */

.essence-card {
    background-color: var(--color-black);
    color: var(--color-white);
}

.essence-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-16);
}

.essence-title {
    flex: 1;
    text-align: center;
    color: var(--color-white);
    margin-bottom: 0;
}

.essence-lot-badge {
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-white);
    color: var(--color-text);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.essence-info-btn {
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-black);
    color: var(--color-white);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.essence-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.essence-row {
    display: grid;
    padding: var(--space-8);
    border-radius: var(--radius-base);
    background-color: rgba(255, 255, 255, 0.06);
}

.essence-value-label-box,
.essence-label-box,
.essence-level-box,
.essence-intensity-box {
    padding: 1px 2px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background-color: #E6E6E6;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    text-align: center;
}

.essence-value-label-box {
    font-weight: var(--font-weight-medium);
}

.essence-label-box {
    font-weight: var(--font-weight-medium);
}

.essence-level-box {
    text-align: center;
    font-weight: var(--font-weight-medium);
}

.essence-intensity-box {
    font-size: var(--font-size-xs);
}

.essence-reset-btn,
.essence-info-small-btn {
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-white);
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    cursor: pointer;
    white-space: nowrap;
}

.essence-slider-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.essence-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    outline: none;
    background:
      linear-gradient(to right, #CCCCCC 0, #CCCCCC 100%) center/100% 4px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) left center/12px 12px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) center center/12px 12px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) right center/12px 12px no-repeat;
}

/* WebKit */
.essence-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-white);
    border: 4px solid var(--color-black);
    cursor: pointer;
     
}

/* Firefox */
.essence-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-white);
    border: 4px solid var(--color-black);
    cursor: pointer;
}

.essence-slider::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: #CCCCCC;
}

.essence-slider-scale {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--color-gray-300);
}

/* État grisé */

.essence-row--disabled .essence-slider {
    background-color: var(--disabled-border);
}

.essence-row--disabled .essence-slider::-webkit-slider-thumb,
.essence-row--disabled .essence-slider::-moz-range-thumb {
    border-color: var(--disabled-surface);
}

/* Confiance faible => titre rouge */

.essence-label-confiance[data-essence-confiance-title] {
    transition: background-color 0.2s ease, color 0.2s ease;
}

.essence-label-confiance--low {
    background-color: #D55E00;
    color: var(--color-black);
}

 /* Ancienneté */

.ancien-card {
    background-color: var(--color-black);
    color: var(--color-white);
}

.ancien-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-16);
}

.ancien-title {
    flex: 1;
    text-align: center;
    color: var(--color-white);
    margin-bottom: 0;
}

.ancien-lot-badge {
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-white);
    color: var(--color-text);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.ancien-info-btn {
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-black);
    color: var(--color-white);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.ancien-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ancien-row {
    display: grid;
    padding: var(--space-8);
    border-radius: var(--radius-base);
    background-color: rgba(255, 255, 255, 0.06);
}

.ancien-value-label-box,
.ancien-label-box,
.ancien-level-box,
.ancien-intensity-box {
    padding: 1px 2px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background-color: #E6E6E6;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    text-align: center;
}

.ancien-value-label-box {
    font-weight: var(--font-weight-medium);
}

.ancien-label-box {
    font-weight: var(--font-weight-medium);
}

.ancien-level-box {
    text-align: center;
    font-weight: var(--font-weight-medium);
}

.ancien-intensity-box {
    font-size: var(--font-size-xs);
}

.ancien-reset-btn,
.ancien-info-small-btn {
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-white);
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    cursor: pointer;
    white-space: nowrap;
}

.ancien-slider-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ancien-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    outline: none;
    background:
      linear-gradient(to right, #CCCCCC 0, #CCCCCC 100%) center/100% 4px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) left center/12px 12px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) center center/12px 12px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) right center/12px 12px no-repeat;
}

/* WebKit */
.ancien-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-white);
    border: 4px solid var(--color-black);
    cursor: pointer;
}

/* Traces */

.traces-card {
    background-color: var(--color-black);
    color: var(--color-white);
}

.traces-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-16);
}

.traces-title {
    flex: 1;
    text-align: center;
    color: var(--color-white);
    margin-bottom: 0;
}

.traces-lot-badge {
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-white);
    color: var(--color-text);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.traces-info-btn {
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-black);
    color: var(--color-white);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.traces-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.traces-row {
    display: grid;
    padding: var(--space-8);
    border-radius: var(--radius-base);
    background-color: rgba(255, 255, 255, 0.06);
}

.traces-value-label-box,
.traces-label-box,
.traces-level-box,
.traces-intensity-box {
    padding: 1px 2px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background-color: #E6E6E6;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    text-align: center;  
}

.traces-value-label-box {
    font-weight: var(--font-weight-medium);
}

.traces-label-box {
    font-weight: var(--font-weight-medium);
}

.traces-level-box {
    text-align: center;
    font-weight: var(--font-weight-medium);
}

.traces-intensity-box {
    font-size: var(--font-size-xs);
}

.traces-reset-btn,
.traces-info-small-btn {
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-white);
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    cursor: pointer;
    white-space: nowrap;
}

.traces-slider-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.traces-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    outline: none;
    background:
      linear-gradient(to right, #CCCCCC 0, #CCCCCC 100%) center/100% 4px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) left center/12px 12px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) center center/12px 12px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) right center/12px 12px no-repeat;
}

/* WebKit */
.traces-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-white);
    border: 4px solid var(--color-black);
    cursor: pointer;
     
}

/* Firefox */
.traces-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-white);
    border: 4px solid var(--color-black);
    cursor: pointer;
}

.traces-slider::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: #CCCCCC;
}

.traces-slider-scale {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--color-gray-300);
}

/* État grisé */

.traces-row--disabled .traces-slider {
    background-color: var(--disabled-border);
}

.traces-row--disabled .traces-slider::-webkit-slider-thumb,
.traces-row--disabled .traces-slider::-moz-range-thumb {
    border-color: var(--disabled-surface);
}

/* Confiance faible => titre rouge */

.traces-label-confiance[data-traces-confiance-title] {
    transition: background-color 0.2s ease, color 0.2s ease;
}

.traces-label-confiance--low {
    background-color: #D55E00;
    color: var(--color-black);
}
        /* Provenance */

.provenance-card {
    background-color: var(--color-black);
    color: var(--color-white);
}

.provenance-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-16);
}

.provenance-title {
    flex: 1;
    text-align: center;
    color: var(--color-white);
    margin-bottom: 0;
}

.provenance-lot-badge {
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-white);
    color: var(--color-text);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.provenance-info-btn {
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-black);
    color: var(--color-white);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.provenance-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.provenance-row {
    display: grid;
    padding: var(--space-8);
    border-radius: var(--radius-base);
    background-color: rgba(255, 255, 255, 0.06);
}

.provenance-value-label-box,
.provenance-label-box,
.provenance-level-box,
.provenance-intensity-box {
    padding: 1px 2px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background-color: #E6E6E6;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    text-align: center;
}

.provenance-value-label-box {
    font-weight: var(--font-weight-medium);
}

.provenance-label-box {
    font-weight: var(--font-weight-medium);
}

.provenance-level-box {
    text-align: center;
    font-weight: var(--font-weight-medium);
}

.provenance-intensity-box {
    font-size: var(--font-size-xs);
}

.provenance-reset-btn,
.provenance-info-small-btn {
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-white);
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    cursor: pointer;
    white-space: nowrap;
}

.provenance-slider-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.provenance-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    outline: none;
    background:
      linear-gradient(to right, #CCCCCC 0, #CCCCCC 100%) center/100% 4px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) left center/12px 12px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) center center/12px 12px no-repeat,
      radial-gradient(circle, transparent 0 3px, #888 3px 5px, transparent 5px) right center/12px 12px no-repeat;
}

/* WebKit */
.provenance-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-white);
    border: 4px solid var(--color-black);
    cursor: pointer;
     
}

/* Firefox */
.provenance-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-white);
    border: 4px solid var(--color-black);
    cursor: pointer;
}

.provenance-slider::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: #CCCCCC;
}

.provenance-slider-scale {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--color-gray-300);
}

/* État grisé */

.provenance-row--disabled .provenance-slider {
    background-color: var(--disabled-border);
}

.provenance-row--disabled .provenance-slider::-webkit-slider-thumb,
.provenance-row--disabled .provenance-slider::-moz-range-thumb {
    border-color: var(--disabled-surface);
}

/* ── Fix mobile : empêcher le scroll de modifier les sliders ── */
.inspection-slider,
.bio-slider,
.mech-slider,
.usage-slider,
.denat-slider,
.debit-slider,
.geo-slider,
.essence-slider,
.ancien-slider,
.traces-slider,
.provenance-slider {
    touch-action: pan-y;
}

.inspection-slider::-webkit-slider-thumb,
.bio-slider::-webkit-slider-thumb,
.mech-slider::-webkit-slider-thumb,
.usage-slider::-webkit-slider-thumb,
.denat-slider::-webkit-slider-thumb,
.debit-slider::-webkit-slider-thumb,
.geo-slider::-webkit-slider-thumb,
.essence-slider::-webkit-slider-thumb,
.ancien-slider::-webkit-slider-thumb,
.traces-slider::-webkit-slider-thumb,
.provenance-slider::-webkit-slider-thumb {
    touch-action: none;
}

.inspection-slider::-moz-range-thumb,
.bio-slider::-moz-range-thumb,
.mech-slider::-moz-range-thumb,
.usage-slider::-moz-range-thumb,
.denat-slider::-moz-range-thumb,
.debit-slider::-moz-range-thumb,
.geo-slider::-moz-range-thumb,
.essence-slider::-moz-range-thumb,
.ancien-slider::-moz-range-thumb,
.traces-slider::-moz-range-thumb,
.provenance-slider::-moz-range-thumb {
    touch-action: none;
}

/* Confiance faible => titre rouge */

.provenance-label-confiance[data-provenance-confiance-title] {
    transition: background-color 0.2s ease, color 0.2s ease;
}

.provenance-label-confiance--low {
    background-color: #D55E00;
    color: var(--color-black);
}

/* Harmonisation des lignes de notation (2 lignes de texte) */

.bio-value-label-box,
.bio-label-box,
.bio-level-box,
.bio-intensity-box,
.bio-reset-btn,
.bio-info-small-btn,
.mech-value-label-box,
.mech-label-box,
.mech-level-box,
.mech-intensity-box,
.mech-reset-btn,
.mech-info-small-btn,
.usage-value-label-box,
.usage-label-box,
.usage-level-box,
.usage-intensity-box,
.usage-reset-btn,
.usage-info-small-btn,
.denat-value-label-box,
.denat-label-box,
.denat-level-box,
.denat-intensity-box,
.denat-reset-btn,
.denat-info-small-btn,
.debit-value-label-box,
.debit-label-box,
.debit-level-box,
.debit-intensity-box,
.debit-reset-btn,
.debit-info-small-btn,
.geo-value-label-box,
.geo-label-box,
.geo-level-box,
.geo-intensity-box,
.geo-reset-btn,
.geo-info-small-btn,
.essence-value-label-box,
.essence-label-box,
.essence-level-box,
.essence-intensity-box,
.essence-reset-btn,
.essence-info-small-btn,
.ancien-value-label-box,
.ancien-label-box,
.ancien-level-box,
.ancien-intensity-box,
.ancien-reset-btn,
.ancien-info-small-btn,
.traces-value-label-box,
.traces-label-box,
.traces-level-box,
.traces-intensity-box,
.traces-reset-btn,
.traces-info-small-btn,
.provenance-value-label-box,
.provenance-label-box,
.provenance-level-box,
.provenance-intensity-box,
.provenance-reset-btn,
.provenance-info-small-btn,
.inspection-label-box,
.inspection-value-box,
.inspection-intensity-box,
.inspection-reset-btn,
.inspection-ignore-btn,
.inspection-info-small-btn {
    min-height: 32px;
    height: 32px;
    padding: 2px 6px;
    font-size: 10px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
}

:is(
    .bio-value-label-box,
    .mech-value-label-box,
    .usage-value-label-box,
    .denat-value-label-box,
    .debit-value-label-box,
    .geo-value-label-box,
    .essence-value-label-box,
    .ancien-value-label-box,
    .traces-value-label-box,
    .provenance-value-label-box,
    .bio-label-box,
    .mech-label-box,
    .usage-label-box,
    .denat-label-box,
    .debit-label-box,
    .geo-label-box,
    .essence-label-box,
    .ancien-label-box,
    .traces-label-box,
    .provenance-label-box,
    .inspection-label-box,
    .bio-level-box,
    .mech-level-box,
    .usage-level-box,
    .denat-level-box,
    .debit-level-box,
    .geo-level-box,
    .essence-level-box,
    .ancien-level-box,
    .traces-level-box,
    .provenance-level-box,
    .inspection-value-box
) {
    font-weight: var(--font-weight-semibold);
}

:is(
    .bio-reset-btn,
    .mech-reset-btn,
    .usage-reset-btn,
    .denat-reset-btn,
    .debit-reset-btn,
    .geo-reset-btn,
    .essence-reset-btn,
    .ancien-reset-btn,
    .traces-reset-btn,
    .provenance-reset-btn,
    .inspection-reset-btn,
    .inspection-ignore-btn,
    .bio-intensity-box,
    .mech-intensity-box,
    .usage-intensity-box,
    .denat-intensity-box,
    .debit-intensity-box,
    .geo-intensity-box,
    .essence-intensity-box,
    .ancien-intensity-box,
    .traces-intensity-box,
    .provenance-intensity-box,
    .inspection-intensity-box,
    .bio-info-small-btn,
    .mech-info-small-btn,
    .usage-info-small-btn,
    .denat-info-small-btn,
    .debit-info-small-btn,
    .geo-info-small-btn,
    .essence-info-small-btn,
    .ancien-info-small-btn,
    .traces-info-small-btn,
    .provenance-info-small-btn,
    .inspection-info-small-btn
) {
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: none;
}

/* Superpose l'overlay ligne+points et le slider (notation) comme pour Statut */
:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper
):has(.bio-slider-display--statut) {
    display: grid;
    grid-template-rows: auto 32px;
    row-gap: 6px;
    align-items: end;
    justify-items: center;
}

:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper
):has(.bio-slider-display--statut) .bio-slider-display--statut,
:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper
):has(.bio-slider-display--statut) input[type="range"] {
    grid-row: 2;
    grid-column: 1;
    width: var(--statut-slider-track-width, 100%);
    justify-self: center;
}

:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper
):has(.bio-slider-display--statut) .bio-slider-scale,
:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper
):has(.bio-slider-display--statut) .mech-slider-scale,
:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper
):has(.bio-slider-display--statut) .usage-slider-scale,
:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper
):has(.bio-slider-display--statut) .denat-slider-scale,
:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper
):has(.bio-slider-display--statut) .debit-slider-scale,
:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper
):has(.bio-slider-display--statut) .geo-slider-scale,
:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper
):has(.bio-slider-display--statut) .essence-slider-scale,
:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper
):has(.bio-slider-display--statut) .ancien-slider-scale,
:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper
):has(.bio-slider-display--statut) .traces-slider-scale,
:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper
):has(.bio-slider-display--statut) .provenance-slider-scale {
    grid-row: 1;
    grid-column: 1;
    justify-self: center;
    width: var(--statut-slider-scale-width, 100%);
}

/* Sliders de notation unifiés (hors Inspection) */

:is(
    .bio-slider,
    .mech-slider,
    .usage-slider,
    .denat-slider,
    .debit-slider,
    .geo-slider,
    .essence-slider,
    .ancien-slider,
    .traces-slider,
    .provenance-slider
) {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 32px;
    outline: none;
    cursor: pointer;
    grid-row: 2;
    grid-column: 1;
    background:
      linear-gradient(to right, #FFFFFF 0, #FFFFFF 100%) center/100% 2px no-repeat,
      radial-gradient(circle, #FFFFFF 4px, transparent 4.5px) left center/8px 8px no-repeat,
      radial-gradient(circle, #FFFFFF 4px, transparent 4.5px) center center/8px 8px no-repeat,
      radial-gradient(circle, #FFFFFF 4px, transparent 4.5px) right center/8px 8px no-repeat;
}

:is(
    .bio-slider,
    .mech-slider,
    .usage-slider,
    .denat-slider,
    .debit-slider,
    .geo-slider,
    .essence-slider,
    .ancien-slider,
    .traces-slider,
    .provenance-slider
)::-webkit-slider-runnable-track {
    height: 2px;
    background: transparent;
}

:is(
    .bio-slider,
    .mech-slider,
    .usage-slider,
    .denat-slider,
    .debit-slider,
    .geo-slider,
    .essence-slider,
    .ancien-slider,
    .traces-slider,
    .provenance-slider
)::-moz-range-track,
:is(
    .bio-slider,
    .mech-slider,
    .usage-slider,
    .denat-slider,
    .debit-slider,
    .geo-slider,
    .essence-slider,
    .ancien-slider,
    .traces-slider,
    .provenance-slider
)::-moz-range-progress {
    height: 2px;
    background: transparent;
}

:is(
    .bio-slider,
    .mech-slider,
    .usage-slider,
    .denat-slider,
    .debit-slider,
    .geo-slider,
    .essence-slider,
    .ancien-slider,
    .traces-slider,
    .provenance-slider
)::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-black);
    border: 3px solid var(--color-white);
    cursor: pointer;
    margin-top: -8px;
}

:is(
    .bio-slider,
    .mech-slider,
    .usage-slider,
    .denat-slider,
    .debit-slider,
    .geo-slider,
    .essence-slider,
    .ancien-slider,
    .traces-slider,
    .provenance-slider
)::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-black);
    border: 3px solid var(--color-white);
    cursor: pointer;
    box-sizing: border-box;
}

/* État neutre/grisé : ligne et 3 crans gris, thumb absent */

:is(
    .bio-row--disabled .bio-slider,
    .mech-row--disabled .mech-slider,
    .usage-row--disabled .usage-slider,
    .denat-row--disabled .denat-slider,
    .debit-row--disabled .debit-slider,
    .geo-row--disabled .geo-slider,
    .essence-row--disabled .essence-slider,
    .ancien-row--disabled .ancien-slider,
    .traces-row--disabled .traces-slider,
    .provenance-row--disabled .provenance-slider
) {
    background:
    linear-gradient(to right, var(--disabled-surface) 0, var(--disabled-surface) 100%) center/100% 2px no-repeat,
    radial-gradient(circle, var(--disabled-surface) 4px, transparent 4.5px) left center/8px 8px no-repeat,
    radial-gradient(circle, var(--disabled-surface) 4px, transparent 4.5px) center center/8px 8px no-repeat,
    radial-gradient(circle, var(--disabled-surface) 4px, transparent 4.5px) right center/8px 8px no-repeat;
}

:is(
    .bio-row--disabled .bio-slider,
    .mech-row--disabled .mech-slider,
    .usage-row--disabled .usage-slider,
    .denat-row--disabled .denat-slider,
    .debit-row--disabled .debit-slider,
    .geo-row--disabled .geo-slider,
    .essence-row--disabled .essence-slider,
    .ancien-row--disabled .ancien-slider,
    .traces-row--disabled .traces-slider,
    .provenance-row--disabled .provenance-slider
)::-webkit-slider-thumb,
:is(
    .bio-row--disabled .bio-slider,
    .mech-row--disabled .mech-slider,
    .usage-row--disabled .usage-slider,
    .denat-row--disabled .denat-slider,
    .debit-row--disabled .debit-slider,
    .geo-row--disabled .geo-slider,
    .essence-row--disabled .essence-slider,
    .ancien-row--disabled .ancien-slider,
    .traces-row--disabled .traces-slider,
    .provenance-row--disabled .provenance-slider
)::-moz-range-thumb {
    background: transparent;
    border-color: transparent;
    opacity: 0;
}

:is(
    .bio-row--disabled .bio-slider,
    .mech-row--disabled .mech-slider,
    .usage-row--disabled .usage-slider,
    .denat-row--disabled .denat-slider,
    .debit-row--disabled .debit-slider,
    .geo-row--disabled .geo-slider,
    .essence-row--disabled .essence-slider,
    .ancien-row--disabled .ancien-slider,
    .traces-row--disabled .traces-slider,
    .provenance-row--disabled .provenance-slider
)::-webkit-slider-thumb {
    width: 0;
    height: 0;
    border-width: 0;
    margin-top: 0;
}

:is(
    .bio-row--disabled .bio-slider,
    .mech-row--disabled .mech-slider,
    .usage-row--disabled .usage-slider,
    .denat-row--disabled .denat-slider,
    .debit-row--disabled .debit-slider,
    .geo-row--disabled .geo-slider,
    .essence-row--disabled .essence-slider,
    .ancien-row--disabled .ancien-slider,
    .traces-row--disabled .traces-slider,
    .provenance-row--disabled .provenance-slider
)::-moz-range-thumb {
    width: 0;
    height: 0;
    border-width: 0;
}

:is(
    .bio-row--disabled .bio-slider,
    .mech-row--disabled .mech-slider,
    .usage-row--disabled .usage-slider,
    .denat-row--disabled .denat-slider,
    .debit-row--disabled .debit-slider,
    .geo-row--disabled .geo-slider,
    .essence-row--disabled .essence-slider,
    .ancien-row--disabled .ancien-slider,
    .traces-row--disabled .traces-slider,
    .provenance-row--disabled .provenance-slider
):active::-webkit-slider-thumb,
:is(
    .bio-row--disabled .bio-slider,
    .mech-row--disabled .mech-slider,
    .usage-row--disabled .usage-slider,
    .denat-row--disabled .denat-slider,
    .debit-row--disabled .debit-slider,
    .geo-row--disabled .geo-slider,
    .essence-row--disabled .essence-slider,
    .ancien-row--disabled .ancien-slider,
    .traces-row--disabled .traces-slider,
    .provenance-row--disabled .provenance-slider
):focus-visible::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    background: var(--color-black);
    border-width: 3px;
    border-color: var(--color-white);
    margin-top: -8px;
    opacity: 1;
}

:is(
    .bio-row--disabled .bio-slider,
    .mech-row--disabled .mech-slider,
    .usage-row--disabled .usage-slider,
    .denat-row--disabled .denat-slider,
    .debit-row--disabled .debit-slider,
    .geo-row--disabled .geo-slider,
    .essence-row--disabled .essence-slider,
    .ancien-row--disabled .ancien-slider,
    .traces-row--disabled .traces-slider,
    .provenance-row--disabled .provenance-slider
):active::-moz-range-thumb,
:is(
    .bio-row--disabled .bio-slider,
    .mech-row--disabled .mech-slider,
    .usage-row--disabled .usage-slider,
    .denat-row--disabled .denat-slider,
    .debit-row--disabled .debit-slider,
    .geo-row--disabled .geo-slider,
    .essence-row--disabled .essence-slider,
    .ancien-row--disabled .ancien-slider,
    .traces-row--disabled .traces-slider,
    .provenance-row--disabled .provenance-slider
):focus-visible::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--color-black);
    border-width: 3px;
    border-color: var(--color-white);
    opacity: 1;
}

/* Statut de l'etude : meme logique visuelle que le slider Inspection */
.bio-slider-display--statut {
    grid-row: 2;
    grid-column: 1;
    position: relative;
    height: var(--slider-hit-height);
    pointer-events: none;
    z-index: 0;
}

.bio-slider-display-line--statut {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: var(--slider-track-height);
        background: var(--bleu-crai);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bio-slider-dot--statut {
    width: 8px;
    height: 8px;
    background: var(--bleu-crai);
    border-radius: 50%;
}

.bio-slider.bio-slider--statut {
    grid-row: 2;
    grid-column: 1;
    height: var(--slider-hit-height);
    background: transparent !important;
    position: relative;
    z-index: 1;
    margin: 0;
}

/* Style générique pour rendre le track transparent quand on superpose la ligne/points du statut */
.slider--statut-visual {
    background: transparent !important;
    height: var(--slider-hit-height); /* aligne la hauteur avec l'overlay ligne + points */
    position: relative;
    z-index: 1;
    margin: 0;
}

.slider--statut-visual::-webkit-slider-runnable-track,
.slider--statut-visual::-moz-range-track,
.slider--statut-visual::-moz-range-progress {
    height: var(--slider-track-height);
    background: transparent;
}

.slider--statut-visual::-webkit-slider-thumb,
.bio-slider.bio-slider--statut::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    border-radius: 50%;
    background: var(--color-black);
    border: var(--slider-thumb-border) solid var(--color-white);
    box-sizing: border-box;
    margin-top: var(--slider-thumb-offset); /* centre le thumb sur la ligne overlay */
}

.slider--statut-visual::-moz-range-thumb,
.bio-slider.bio-slider--statut::-moz-range-thumb {
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    border-radius: 50%;
    background: var(--color-black);
    border: var(--slider-thumb-border) solid var(--color-white);
    box-sizing: border-box;
    cursor: pointer;
}

.slider--statut-visual::-webkit-slider-thumb,
.slider--statut-visual::-moz-range-thumb {
    position: relative;
    z-index: 2;
}

.bio-slider.bio-slider--statut::-webkit-slider-runnable-track,
.bio-slider.bio-slider--statut::-moz-range-track,
.bio-slider.bio-slider--statut::-moz-range-progress {
    height: var(--slider-track-height);
    background: transparent;
}

:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled,
    .inspection-row--disabled
) .bio-slider-display-line--statut,
:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled,
    .inspection-row--disabled
) .bio-slider-dot--statut {
    background: var(--disabled-surface);
}

/* Désactivation visuelle : labels des échelles en gris quand la ligne est neutre/désactivée */
:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled,
    .inspection-row--disabled
) .bio-slider-scale span,
:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled,
    .inspection-row--disabled
) .mech-slider-scale span,
:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled,
    .inspection-row--disabled
) .usage-slider-scale span,
:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled,
    .inspection-row--disabled
) .denat-slider-scale span,
:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled,
    .inspection-row--disabled
) .debit-slider-scale span,
:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled,
    .inspection-row--disabled
) .geo-slider-scale span,
:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled,
    .inspection-row--disabled
) .essence-slider-scale span,
:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled,
    .inspection-row--disabled
) .ancien-slider-scale span,
:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled,
    .inspection-row--disabled
) .traces-slider-scale span,
:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled,
    .inspection-row--disabled
) .provenance-slider-scale span,
:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled,
    .inspection-row--disabled
) .inspection-slider-scale span {
    color: var(--disabled-text);
    font-weight: 400;
}

:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled,
    .inspection-row--disabled
) .bio-slider-label {
    color: var(--disabled-text);
    font-weight: 400;
    text-decoration: none;
}

:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled,
    .inspection-row--disabled
) :is(
    [class$="-label-box"],
    [class$="-value-box"],
    [class$="-value-label-box"],
    [class$="-level-box"],
    [class$="-intensity-box"]
) {
    background-color: var(--disabled-surface);
    color: var(--disabled-text);
    border-color: var(--disabled-border);
}

:is(
    .bio-row--disabled .bio-slider,
    .mech-row--disabled .mech-slider,
    .usage-row--disabled .usage-slider,
    .denat-row--disabled .denat-slider,
    .debit-row--disabled .debit-slider,
    .geo-row--disabled .geo-slider,
    .essence-row--disabled .essence-slider,
    .ancien-row--disabled .ancien-slider,
    .traces-row--disabled .traces-slider,
    .provenance-row--disabled .provenance-slider
) {
    background-color: var(--disabled-border);
}

:is(
    .bio-row--disabled .bio-slider,
    .mech-row--disabled .mech-slider,
    .usage-row--disabled .usage-slider,
    .denat-row--disabled .denat-slider,
    .debit-row--disabled .debit-slider,
    .geo-row--disabled .geo-slider,
    .essence-row--disabled .essence-slider,
    .ancien-row--disabled .ancien-slider,
    .traces-row--disabled .traces-slider,
    .provenance-row--disabled .provenance-slider,
    .inspection-row--disabled .inspection-slider
)::-webkit-slider-thumb,
:is(
    .bio-row--disabled .bio-slider,
    .mech-row--disabled .mech-slider,
    .usage-row--disabled .usage-slider,
    .denat-row--disabled .denat-slider,
    .debit-row--disabled .debit-slider,
    .geo-row--disabled .geo-slider,
    .essence-row--disabled .essence-slider,
    .ancien-row--disabled .ancien-slider,
    .traces-row--disabled .traces-slider,
    .provenance-row--disabled .provenance-slider,
    .inspection-row--disabled .inspection-slider
)::-moz-range-thumb {
    border-color: var(--disabled-surface);
}

.bio-slider-wrapper:has(.bio-slider--statut) {
    --statut-slider-scale-width: 86%;
    --statut-slider-thumb-radius: calc(var(--slider-thumb-size) / 2);
    --statut-slider-track-width: calc((var(--statut-slider-scale-width) * 4 / 5) + var(--slider-thumb-size));
    row-gap: 6px;
}

.bio-slider-display--statut,
.bio-slider.bio-slider--statut {
    width: var(--statut-slider-track-width, 100%);
    justify-self: center;
}

.bio-slider-scale.bio-slider-scale--statut {
    width: var(--statut-slider-scale-width, 100%);
    justify-self: center;
    grid-row: 1;
    grid-column: 1;
    min-height: 38px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    gap: 0;
    text-align: center;
}

.bio-slider-wrapper:has(.bio-slider--statut) .bio-slider-display-line--statut {
    position: relative;
    display: block;
    background: transparent;
}

.bio-slider-wrapper:has(.bio-slider--statut) .bio-slider-display-line--statut::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--statut-slider-thumb-radius);
    right: var(--statut-slider-thumb-radius);
    height: var(--slider-track-height);
    transform: translateY(-50%);
    background: var(--bleu-crai);
}

.bio-slider-wrapper:has(.bio-slider--statut) .bio-slider-dot--statut {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.bio-slider-wrapper:has(.bio-slider--statut) .bio-slider-dot--statut:nth-child(1) {
    left: var(--statut-slider-thumb-radius);
}

.bio-slider-wrapper:has(.bio-slider--statut) .bio-slider-dot--statut:nth-child(2) {
    left: calc(var(--statut-slider-thumb-radius) + (100% - 2 * var(--statut-slider-thumb-radius)) / 4);
}

.bio-slider-wrapper:has(.bio-slider--statut) .bio-slider-dot--statut:nth-child(3) {
    left: 50%;
}

.bio-slider-wrapper:has(.bio-slider--statut) .bio-slider-dot--statut:nth-child(4) {
    left: calc(100% - var(--statut-slider-thumb-radius) - (100% - 2 * var(--statut-slider-thumb-radius)) / 4);
}

.bio-slider-wrapper:has(.bio-slider--statut) .bio-slider-dot--statut:nth-child(5) {
    left: calc(100% - var(--statut-slider-thumb-radius));
}

.bio-slider-scale--statut .bio-slider-label {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.01em;
}

.bio-slider-scale--statut .bio-slider-label--active {
    font-weight: 700;
    color: var(--bleu-crai);
    text-decoration: none;
}

@media (max-width: 900px) {
    .bio-slider-wrapper:has(.bio-slider--statut) {
        --statut-slider-scale-width: 100%;
        --statut-slider-track-width: calc((100% * 4 / 5) + var(--slider-thumb-size));
    }

    .bio-slider-scale.bio-slider-scale--statut {
        min-height: 44px;
        gap: 0;
    }

    .bio-slider-scale--statut .bio-slider-label {
        font-size: 11px;
    }
}

/* Orientation (Synthèse) */

.orientation-card {
    --lot-piece-card-min-width: 280px;
    --lot-piece-card-max-width: 320px;
    background-color: var(--color-black);
    color: var(--color-white);
}

.orientation-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-8);
    margin-bottom: var(--space-16);
}

.orientation-title {
    grid-column: 2;
    text-align: center;
    color: var(--color-white);
    margin-bottom: 0;
}

.orientation-info-btn {
    grid-column: 3;
    justify-self: end;
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-black);
    color: var(--color-white);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.orientation-body {
    overflow: hidden;
}

.orientation-scroll-wrapper {
    overflow: hidden;
    padding-bottom: var(--space-8);
}

.orientation-scroll-inner {
    display: flex;
    gap: var(--space-12);
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: var(--space-4);
}

/* Masquer la scrollbar native mais garder le scroll */
.orientation-scroll-inner::-webkit-scrollbar {
    height: 0;
}
.orientation-scroll-inner {
    scrollbar-width: none;
}

/* Cartes lots */

.orientation-lot-card {
    min-width: var(--lot-piece-card-min-width);
    max-width: var(--lot-piece-card-max-width);
    flex: 0 0 var(--lot-piece-card-min-width);
    padding: var(--space-8);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-border);
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--color-white);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
    opacity: 0.5;
}

.orientation-lot-card--active {
    background-color: var(--color-white);
    color: var(--color-text);
    opacity: 1;
    box-shadow: 0 0 0 1px var(--color-border);
}

.orientation-lot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-24);
}

.orientation-lot-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.orientation-lot-orientation {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    background-color: #E6E6E6;
    color: var(--color-text);
}

/* Couleurs orientation */

.orientation-lot-orientation--reemploi {
    background-color: #009E73;
    color: var(--color-black);
}

.orientation-lot-orientation--reutilisation {
    background-color: #56B4E9;
    color: var(--color-black);
}

.orientation-lot-orientation--recyclage {
    background-color: #E69F00;
    color: var(--color-black);
}

.orientation-lot-orientation--combustion {
    background-color: #D55E00;
    color: var(--color-black);
}

/* "…" ou non défini -> fond gris très clair */

.orientation-lot-orientation--none {
    background-color: #E6E6E6;
    color: var(--color-text);
}

.orientation-lot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    font-size: var(--font-size-xs);
}

.orientation-notation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column: 1 / -1;
    gap: var(--space-6);
}

@media (max-width: 700px) {
    .orientation-lot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6);
    }

    .orientation-field-box span {
        font-size: var(--font-size-xs);
    }
}

.orientation-field--unfavorable {
    grid-column: 1 / -1;
}

.orientation-field--confidence-general {
    grid-column: 1 / -1;
}

.orientation-field--type-piece {
    grid-column: 1 / -1;
}

.orientation-field--essence {
    grid-column: 1 / -1;
}

.orientation-field {
    display: flex;
    flex-direction: column;
}

.orientation-field-label {
    font-size: 10px;
    color: var(--color-text);
    opacity: 0.85;
    padding: 0 2px;
    margin-bottom: 2px;
}

.orientation-field-box {
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    background-color: #F2F2F2;
    color: var(--color-text);
}

.orientation-field-box span {
    display: block;
    font-weight: var(--font-weight-semibold);
    font-size: 12px;
}

.orientation-field-box--with-dot {
    display: flex;
    align-items: center;
    gap: 5px;
}

.orientation-field-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* Scrollbar custom en bas */

.orientation-scrollbar {
    margin-top: var(--space-4);
}

.orientation-scrollbar-track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background-color: #333333;
    overflow: hidden;
}

.orientation-scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 8px;
    border-radius: 999px;
    background-color: #FFFFFF;
    width: 25%;
}

        /* ---- Seuils ---- */

        .seuils-card {
            background-color: var(--color-black);
            color: var(--color-white);
        }

        .seuils-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-8);
            margin-bottom: var(--space-16);
            position: relative;
            overflow: visible;
        }

        .seuils-title {
            flex: 1;
            text-align: center;
            color: var(--color-white);
            margin-bottom: 0;
        }

        .seuils-lot-badge {
            padding: var(--space-4) var(--space-12);
            background-color: var(--bleu-crai);
            color: var(--color-white);
            border-radius: var(--radius-base);
            border: 1px solid var(--bleu-crai);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            cursor: pointer;
            border-radius: var(--radius-base);
            border: 1px solid var(--color-border);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            cursor: pointer;
            font-family: inherit;
        }

        .seuils-info-btn {
            padding: var(--space-4) var(--space-12);
            background-color: var(--color-black);
            color: var(--color-white);
            border-radius: var(--radius-base);
            border: 1px solid var(--color-white);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            cursor: pointer;
        }

        .seuils-body {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: var(--space-8);
            align-items: end;
        }

        .seuils-item {
            padding: var(--space-8) var(--space-6);
            border-radius: var(--radius-base);
            background-color: rgba(255, 255, 255, 0.06);
            display: flex;
            flex-direction: column;
            gap: var(--space-6);
            justify-content: flex-end;
            align-items: center;
            text-align: center;
        }

        .seuils-item-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            font-size: var(--font-size-sm);
            width: 100%;
        }

        .seuils-label {
            font-weight: var(--font-weight-medium);
            font-size: var(--font-size-xs);
            line-height: 1.15;
            min-height: 28px;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            width: 100%;
        }

        .seuils-percent {
            font-weight: var(--font-weight-semibold);
        }

        .seuils-gauge-wrapper {
            width: 28px;
            height: 132px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }

        .seuils-gauge-canvas {
            width: 100%;
            height: 100%;
            display: block;
        }

        .seuils-score-box {
            padding: 4px 6px;
            border-radius: var(--radius-sm);
            background-color: #E6E6E6;
            color: var(--color-text);
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-medium);
            text-align: center;
            width: 100%;
        }

        @media (max-width: 768px) {
            .seuils-body {
                gap: var(--space-6);
            }

            .seuils-item {
                padding: var(--space-6) 4px;
            }

            .seuils-gauge-wrapper {
                width: 22px;
                height: 108px;
            }

            .seuils-percent,
            .seuils-score-box,
            .seuils-label {
                font-size: 11px;
            }

            .seuils-label {
                min-height: 24px;
            }
        }

        /* ---- Radar ---- */

        .radar-card {
            background-color: var(--color-white);
            color: var(--color-text);
        }

        .radar-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-8);
            margin-bottom: var(--space-8);
            position: relative;
            overflow: visible;
        }

        .radar-title {
            flex: 1;
            text-align: center;
            margin-bottom: 0;
            color: var(--color-text);
        }

        .radar-lot-badge {
            padding: var(--space-4) var(--space-12);
            background-color: var(--bleu-crai);
            color: var(--color-white);
            border-radius: var(--radius-base);
            border: 1px solid var(--bleu-crai);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            cursor: pointer;
            border-radius: var(--radius-base);
            border: 1px solid var(--color-border);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            cursor: pointer;
            font-family: inherit;
        }

        .radar-info-btn {
            padding: var(--space-4) var(--space-12);
            background-color: var(--color-black);
            color: var(--color-white);
            border-radius: var(--radius-base);
            border: 1px solid var(--color-black);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            cursor: pointer;
        }

        .radar-body {
            padding-top: var(--space-4);
        }

        .radar-canvas-wrapper {
            width: 100%;
            max-width: 480px;
            margin: 0 auto;
            aspect-ratio: 1 / 1;
        }

        #radarChart,
        #radarChartCanvas {
            width: 100%;
            height: 100%;
            display: block;
        }

        .scatter-dims-card {
            background-color: var(--color-white);
            color: var(--color-text);
        }

        .scatter-dims-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-8);
            margin-bottom: var(--space-8);
            position: relative;
            overflow: visible;
        }

        .scatter-dims-title {
            flex: 1;
            text-align: center;
            margin-bottom: 0;
            color: var(--color-text);
        }

        .scatter-dims-lot-badge {
            padding: var(--space-4) var(--space-12);
            background-color: var(--bleu-crai);
            color: var(--color-white);
            border-radius: var(--radius-base);
            border: 1px solid var(--bleu-crai);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            cursor: pointer;
            border-radius: var(--radius-base);
            border: 1px solid var(--color-border);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            cursor: pointer;
            font-family: inherit;
        }

        .analysis-lot-selector-menu {
            position: absolute;
            top: calc(100% + var(--space-4));
            left: 0;
            min-width: 160px;
            margin: 0;
            padding: 4px;
            list-style: none;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-base);
            background: var(--color-white);
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
            z-index: 20;
        }

        .analysis-lot-selector-item {
            margin: 0;
            padding: 0;
        }

        .analysis-lot-selector-option {
            width: 100%;
            border: none;
            background: transparent;
            color: var(--color-text);
            text-align: left;
            font-size: var(--font-size-sm);
            font-family: inherit;
            font-weight: var(--font-weight-medium);
            border-radius: calc(var(--radius-base) - 2px);
            padding: 6px 8px;
            cursor: pointer;
        }

        .analysis-lot-selector-option:hover,
        .analysis-lot-selector-option:focus-visible {
            background-color: #EDF3F6;
            outline: none;
        }

        .analysis-lot-selector-option.is-active {
            background-color: #E6E6E6;
        }

        .scatter-dims-info-btn {
            padding: var(--space-4) var(--space-12);
            background-color: var(--bleu-crai);
            color: var(--color-white);
            border-radius: var(--radius-base);
            border: 1px solid var(--bleu-crai);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            cursor: pointer;
        }

        .scatter-dims-reset-btn {
            padding: var(--space-4) var(--space-12);
            background-color: var(--color-black);
            color: var(--color-white);
            border-radius: var(--radius-base);
            border: 1px solid var(--color-white);
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            overflow: hidden;
            font-size: 0;
        }

        .scatter-dims-reset-btn svg {
            width: 16px;
            height: 16px;
            display: block;
        }

        .scatter-dims-reset-btn[disabled] {
            opacity: 0.45;
            cursor: default;
        }

        .scatter-dims-body {
            padding-top: var(--space-4);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-12);
            flex-wrap: nowrap;
        }

        .scatter-dims-canvas-wrapper {
            width: 100%;
            max-width: 700px;
            margin: 0;
            aspect-ratio: 16 / 10;
            flex-shrink: 0;
        }

        .scatter-dims-scale {
            width: auto;
            display: grid;
            grid-template-columns: 14px auto;
            grid-template-rows: auto 260px;
            align-items: center;
            column-gap: var(--space-8);
            row-gap: var(--space-6);
        }

        .scatter-dims-scale-title {
            grid-column: 1 / -1;
            grid-row: 1;
            font-size: var(--font-size-xs);
            color: var(--color-text);
            text-align: center;
        }

        .scatter-dims-scale-bar {
            grid-column: 1;
            grid-row: 2;
            width: 14px;
            height: 260px;
            border-radius: var(--radius-base);
            border: 1px solid var(--color-border);
            background: linear-gradient(
                to top,
                var(--scatter-dims-low, rgba(219, 234, 254, 0.9)),
                var(--scatter-dims-high, rgba(21, 67, 153, 0.9))
            );
        }

        .scatter-dims-scale-labels {
            grid-column: 2;
            grid-row: 2;
            width: auto;
            height: 260px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            font-size: var(--font-size-xs);
            color: var(--color-text);
        }

        #scatterDimsChart {
            width: 100%;
            height: 100%;
            display: block;
            cursor: grab;
            touch-action: none;
        }

        @media (max-width: 768px) {
            .scatter-dims-body {
                flex-direction: column;
                align-items: stretch;
                gap: var(--space-10);
            }

            .scatter-dims-canvas-wrapper {
                max-width: 100%;
                aspect-ratio: auto;
                height: clamp(320px, 56vh, 460px);
            }

            .scatter-dims-scale {
                display: flex;
                width: 100%;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: var(--space-8);
            }

            .scatter-dims-scale-bar {
                width: 180px;
                height: 14px;
                background: linear-gradient(
                    to right,
                    var(--scatter-dims-low, rgba(219, 234, 254, 0.9)),
                    var(--scatter-dims-high, rgba(21, 67, 153, 0.9))
                );
            }

            .scatter-dims-scale-labels {
                width: 180px;
                height: auto;
                flex-direction: row-reverse;
                justify-content: space-between;
                align-items: center;
            }
        }

        .scatter-dims-empty {
            text-align: center;
            color: var(--color-text);
            opacity: 0.5;
            font-size: var(--font-size-sm);
            padding: var(--space-16);
        }

        /* ---- Évaluation de l’opération ---- */

        .evalop-card {
            background-color: var(--color-black);
            color: var(--color-white);
        }

        .evalop-header {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: var(--space-24);
            position: relative;
        }

        .evalop-title {
            margin-bottom: 0;
        }

        .evalop-info-btn {
            position: absolute;
            right: 0;
            padding: var(--space-4) var(--space-12);
            background-color: var(--color-black);
            color: var(--color-white);
            border-radius: var(--radius-base);
            border: 1px solid var(--color-white);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            cursor: pointer;
        }

        .evalop-body {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: var(--space-12);
            align-items: stretch;
        }

        @media (max-width: 1024px) {
            .evalop-body {
                gap: var(--space-8);
            }
        }

        @media (max-width: 640px) {
            .evalop-body {
                gap: var(--space-6);
            }

            .evalop-body .evalop-column-title,
            .evalop-body .evalop-field-box {
                font-size: 10px;
                line-height: 1.2;
            }

            .evalop-body .evalop-field-box {
                min-height: 24px;
                padding: 3px 4px;
            }
        }

        .evalop-column {
            display: flex;
            flex-direction: column;
            gap: var(--space-4);
        }

        .evalop-column-title {
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-semibold);
            text-align: center;
            line-height: 1.2;
            min-height: 2.4em;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .evalop-field-box {
            padding: 6px 8px;
            border-radius: var(--radius-sm);
            background-color: #E6E6E6;
            color: var(--color-text);
            font-size: var(--font-size-sm);
            text-align: center;
            min-height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .evalop-field-box[data-eval="vol-reemploi"],
        .evalop-field-box[data-eval="prix-reemploi"],
        .evalop-field-box[data-eval="part-reemploi"],
        .evalop-field-box[data-eval="lots-reemploi"] {
            background-color: #009E73;
        }

        .evalop-field-box[data-eval="vol-reutil"],
        .evalop-field-box[data-eval="prix-reutil"],
        .evalop-field-box[data-eval="part-reutil"],
        .evalop-field-box[data-eval="lots-reutil"] {
            background-color: #56B4E9;
        }

        .evalop-field-box[data-eval="vol-recyc"],
        .evalop-field-box[data-eval="prix-recyc"],
        .evalop-field-box[data-eval="part-recyc"],
        .evalop-field-box[data-eval="lots-recyc"] {
            background-color: #E69F00;
        }

        .evalop-field-box[data-eval="vol-incin"],
        .evalop-field-box[data-eval="prix-incin"],
        .evalop-field-box[data-eval="part-incin"],
        .evalop-field-box[data-eval="lots-incin"] {
            background-color: #D55E00;
        }

        .evalop-field-box[data-eval="circularite"],
        .evalop-field-box[data-eval="bilan-monetaire"],
        .evalop-field-box[data-eval="vol-circulaire"],
        .evalop-field-box[data-eval="lots-circulaires"] {
            background-color: #E6E6E6;
        }

        .evalop-field-box--lots {
            font-size: var(--font-size-sm);
            flex-wrap: wrap;
            word-break: break-word;
            min-height: 30px;
            height: auto;
        }

        @media (max-width: 640px) {
            .evalop-field-box--lots {
                font-size: 9px;
            }
        }

        .evalop-column .evalop-field-box:nth-child(3) { background-image: linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)); }
        .evalop-column .evalop-field-box:nth-child(4) { background-image: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.4)); }
        .evalop-column .evalop-field-box:nth-child(5) { background-image: linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.6)); }

        .evalop-gauge-wrap {
            margin-top: var(--space-16);
            background-color: #E6E6E6;
            border: none;
            border-radius: var(--radius-sm);
            padding: var(--space-10);
        }

        .evalop-gauge-title {
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-semibold);
            margin-bottom: var(--space-8);
            text-align: left;
        }

        .evalop-gauge-track {
            width: 100%;
            height: 26px;
            background-color: #E6E6E6;
            border: 2px solid #E6E6E6;
            border-radius: 999px;
            overflow: hidden;
            display: flex;
        }

        .evalop-gauge-segment {
            height: 100%;
            flex: 0 0 auto;
        }

        .evalop-gauge-segment--split {
            box-shadow: inset 2px 0 0 #E6E6E6;
        }

        .evalop-gauge-empty {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4D4D4D;
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            background-color: #E6E6E6;
        }

        .evalop-gauge-legend {
            display: none;
        }

        .evalop-gauge-legend-item {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 3px 8px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.45);
            color: var(--color-white);
            font-size: var(--font-size-sm);
            line-height: 1.2;
        }

        body.day-mode .evalop-gauge-legend-item {
            color: var(--color-text);
            border-color: rgba(0, 0, 0, 0.25);
        }

        .evalop-gauge-legend-swatch {
            width: 10px;
            height: 10px;
            border-radius: 999px;
            flex: 0 0 10px;
        }

        .evalop-gauge-legend-value {
            opacity: 0.9;
            font-weight: var(--font-weight-medium);
        }

        @media (max-width: 640px) {
            .evalop-gauge-track {
                height: 22px;
            }

            .evalop-gauge-legend-item {
                font-size: 10px;
                padding: 3px 6px;
                gap: 5px;
            }

            .evalop-gauge-legend-swatch {
                width: 8px;
                height: 8px;
                flex-basis: 8px;
            }
        }

        /* ---- Actions finales (CTA) ---- */

        .footer-actions-card {
            background-color: transparent;
            box-shadow: none;
        }

        .footer-actions-body {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--space-12);
            width: min(100%, 360px);
            margin: 0 auto;
            padding-top: var(--space-16);
            padding-bottom: var(--space-8);
            border-top: 1px solid var(--color-border);
        }

        .footer-action-btn {
            width: 100%;
            min-width: 0;
        }

        .cc-license-wrap {
            display: flex;
            justify-content: center;
            margin-top: var(--space-12);
            margin-bottom: var(--space-8);
        }

        .cc-license-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 4px 6px;
            line-height: 0;
            border-radius: 4px;
            background: #FFFFFF;
            border: 1px solid #D9D9D9;
            transition: border-color 0.2s ease;
        }

        .cc-license-link:hover {
            border-color: #BDBDBD;
        }

        .cc-license-link:focus-visible {
            outline: 2px solid var(--bleu-crai);
            outline-offset: 2px;
        }

        .cc-license-badge {
            width: 88px;
            height: 31px;
            display: block;
            border-radius: 3px;
        }

        #btnResetAll {
            background-color: var(--bleu-crai);
            color: var(--color-white);
            border: 1px solid var(--bleu-crai);
        }

        #btnResetAll:hover {
            background-color: #152d6e;
        }

        #btnImportJson,
        #btnEtiqueter,
        #btnExportPdf {
            background-color: var(--bleu-crai);
            color: var(--color-white);
            border: 1px solid var(--bleu-crai);
        }

        #btnImportJson:hover,
        #btnEtiqueter:hover,
        #btnExportPdf:hover {
            background-color: #152d6e;
        }

        .btn.btn-secondary {
            background-color: var(--color-white);
            color: var(--color-text);
            border: 1px solid var(--color-black);
        }

        .btn.btn-secondary:hover {
            background-color: #F2F2F2;
        }

        .btn.btn-secondary.lot-detail-btn {
            background-color: var(--bleu-crai);
            color: var(--color-white);
            border: 1px solid var(--bleu-crai);
        }

        .btn.btn-secondary.lot-detail-btn:hover {
            background-color: #152d6e;
            border-color: #152d6e;
        }

        #exportPdfBackdrop .export-modal-select {
            width: 100%;
            border-radius: var(--radius-sm);
            border: 1px solid var(--color-border);
            background-color: #E6E6E6;
            color: var(--color-text);
            padding: 8px;
            font-size: var(--font-size-sm);
        }

        #exportPdfBackdrop #btnRunExport {
            background-color: #E6E6E6;
            color: var(--color-text);
            border: 1px solid var(--color-border);
        }

        #exportPdfBackdrop #btnRunExport:hover {
            background-color: #DADADA;
        }

        #exportPdfBackdrop #btnCancelExportPdf {
            background-color: var(--bleu-crai);
            color: var(--color-white);
            border: 1px solid var(--bleu-crai);
        }

        #exportPdfBackdrop #btnCancelExportPdf:hover {
            background-color: #152d6e;
        }
 
/* Harmonisation finale: mêmes espacements verticaux pour tous les sliders de notation */
:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper
) {
    display: grid;
    grid-template-rows: minmax(18px, auto) minmax(18px, auto) minmax(14px, auto) var(--slider-hit-height);
    row-gap: var(--space-2);
    align-items: stretch;
    height: 100%;
    padding: var(--notation-slider-cell-pad-y) var(--notation-slider-cell-pad-x);
    box-sizing: border-box;
}

:is(
    .bio-slider-scale,
    .mech-slider-scale,
    .usage-slider-scale,
    .denat-slider-scale,
    .traces-slider-scale,
    .provenance-slider-scale,
    .debit-slider-scale,
    .geo-slider-scale,
    .essence-slider-scale,
    .ancien-slider-scale
) {
    grid-row: 1 / span 2;
    grid-column: 1;
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 4px;
    align-items: stretch;
    text-align: center;
    margin-top: 0;
    line-height: 1.2;
    align-self: stretch;
}

:is(
    .bio-slider-scale,
    .mech-slider-scale,
    .usage-slider-scale,
    .denat-slider-scale,
    .traces-slider-scale,
    .provenance-slider-scale,
    .debit-slider-scale,
    .geo-slider-scale,
    .essence-slider-scale,
    .ancien-slider-scale
) span {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: minmax(18px, auto) minmax(18px, auto);
    align-items: center;
    justify-items: center;
    text-align: center;
    white-space: normal;
    padding: 0 2px;
}

:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper
) :is(.bio-slider-display--statut, input[type="range"]) {
    grid-column: 1;
    grid-row: 3 / span 2;
    align-self: end;
}

.cards-grid :is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper
) {
    padding: var(--notation-slider-cell-pad-y-compact) var(--notation-slider-cell-pad-x-compact);
}

/* ===== MODE JOUR ===== */

/* Cartes à fond noir → fond blanc */
body.day-mode .inspection-card,
body.day-mode .bio-card,
body.day-mode .mech-card,
body.day-mode .usage-card,
body.day-mode .denat-card,
body.day-mode .debit-card,
body.day-mode .geo-card,
body.day-mode .essence-card,
body.day-mode .ancien-card,
body.day-mode .traces-card,
body.day-mode .provenance-card,
body.day-mode .orientation-card,
body.day-mode .seuils-card,
body.day-mode .radar-card,
body.day-mode .scatter-dims-card,
body.day-mode .evalop-card {
    background-color: #FFFFFF;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

/* Titres blancs dans les cartes → sombres */
body.day-mode .inspection-title,
body.day-mode .bio-title,
body.day-mode .mech-title,
body.day-mode .usage-title,
body.day-mode .denat-title,
body.day-mode .debit-title,
body.day-mode .geo-title,
body.day-mode .essence-title,
body.day-mode .ancien-title,
body.day-mode .traces-title,
body.day-mode .provenance-title,
body.day-mode .orientation-title,
body.day-mode .seuils-title,
body.day-mode .evalop-title {
    color: var(--color-text);
}

/* Lignes de notation → fond légèrement grisé sur blanc */
body.day-mode .inspection-row,
body.day-mode .bio-row,
body.day-mode .mech-row,
body.day-mode .usage-row,
body.day-mode .denat-row,
body.day-mode .debit-row,
body.day-mode .geo-row,
body.day-mode .essence-row,
body.day-mode .ancien-row,
body.day-mode .traces-row,
body.day-mode .provenance-row {
    background-color: rgba(0, 0, 0, 0.04);
}

body.day-mode .seuils-item {
    background-color: rgba(0, 0, 0, 0.04);
}

/* Slider d'inspection : ligne et points blancs → bleu CRAI */
body.day-mode .inspection-slider-display-line {
    background: var(--bleu-crai);
}

body.day-mode .inspection-slider-dot,
body.day-mode .inspection-slider-center-ring {
    background: var(--bleu-crai);
}

body.day-mode .inspection-slider::-webkit-slider-thumb {
    background: #FFFFFF;
    border-color: var(--bleu-crai);
}

body.day-mode .inspection-slider::-moz-range-thumb {
    background: #FFFFFF;
    border-color: var(--bleu-crai);
}

body.day-mode .inspection-slider-scale {
    color: #555555;
}

/* État désactivé inspection en mode jour */
body.day-mode .inspection-row--disabled .inspection-slider-display-line {
    background: var(--disabled-surface);
}

body.day-mode .inspection-row--disabled .inspection-slider-dot,
body.day-mode .inspection-row--disabled .inspection-slider-center-ring {
    background: var(--disabled-surface);
}

body.day-mode .inspection-row--disabled .inspection-slider:active::-webkit-slider-thumb,
body.day-mode .inspection-row--disabled .inspection-slider:focus-visible::-webkit-slider-thumb {
    background: #FFFFFF;
    border-color: #333333;
}

body.day-mode .inspection-row--disabled .inspection-slider:active::-moz-range-thumb,
body.day-mode .inspection-row--disabled .inspection-slider:focus-visible::-moz-range-thumb {
    background: #FFFFFF;
    border-color: #333333;
}

/* Sliders de notation unifiés : points/ligne blancs → sombres */
body.day-mode :is(
    .bio-slider,
    .mech-slider,
    .usage-slider,
    .denat-slider,
    .debit-slider,
    .geo-slider,
    .essence-slider,
    .ancien-slider,
    .traces-slider,
    .provenance-slider
) {
    background:
            linear-gradient(to right, var(--bleu-crai) 0, var(--bleu-crai) 100%) center/100% 2px no-repeat,
            radial-gradient(circle, var(--bleu-crai) 4px, transparent 4.5px) left center/8px 8px no-repeat,
            radial-gradient(circle, var(--bleu-crai) 4px, transparent 4.5px) center center/8px 8px no-repeat,
            radial-gradient(circle, var(--bleu-crai) 4px, transparent 4.5px) right center/8px 8px no-repeat;
}

body.day-mode :is(
    .bio-slider,
    .mech-slider,
    .usage-slider,
    .denat-slider,
    .debit-slider,
    .geo-slider,
    .essence-slider,
    .ancien-slider,
    .traces-slider,
    .provenance-slider
)::-webkit-slider-thumb {
    background: #FFFFFF;
    border-color: var(--bleu-crai);
}

body.day-mode :is(
    .bio-slider,
    .mech-slider,
    .usage-slider,
    .denat-slider,
    .debit-slider,
    .geo-slider,
    .essence-slider,
    .ancien-slider,
    .traces-slider,
    .provenance-slider
)::-moz-range-thumb {
    background: #FFFFFF;
    border-color: var(--bleu-crai);
}

/* Échelles de slider → texte sombre */
body.day-mode :is(
    .bio-slider-scale,
    .mech-slider-scale,
    .usage-slider-scale,
    .denat-slider-scale,
    .debit-slider-scale,
    .geo-slider-scale,
    .essence-slider-scale,
    .ancien-slider-scale,
    .traces-slider-scale,
    .provenance-slider-scale
) {
    color: #555555;
}

/* État désactivé des sliders unifiés en mode jour */
body.day-mode :is(
    .bio-row--disabled .bio-slider,
    .mech-row--disabled .mech-slider,
    .usage-row--disabled .usage-slider,
    .denat-row--disabled .denat-slider,
    .debit-row--disabled .debit-slider,
    .geo-row--disabled .geo-slider,
    .essence-row--disabled .essence-slider,
    .ancien-row--disabled .ancien-slider,
    .traces-row--disabled .traces-slider,
    .provenance-row--disabled .provenance-slider
) {
    background:
    linear-gradient(to right, var(--disabled-surface) 0, var(--disabled-surface) 100%) center/100% 2px no-repeat,
    radial-gradient(circle, var(--disabled-surface) 4px, transparent 4.5px) left center/8px 8px no-repeat,
    radial-gradient(circle, var(--disabled-surface) 4px, transparent 4.5px) center center/8px 8px no-repeat,
    radial-gradient(circle, var(--disabled-surface) 4px, transparent 4.5px) right center/8px 8px no-repeat;
}

body.day-mode :is(
    .bio-row--disabled .bio-slider,
    .mech-row--disabled .mech-slider,
    .usage-row--disabled .usage-slider,
    .denat-row--disabled .denat-slider,
    .debit-row--disabled .debit-slider,
    .geo-row--disabled .geo-slider,
    .essence-row--disabled .essence-slider,
    .ancien-row--disabled .ancien-slider,
    .traces-row--disabled .traces-slider,
    .provenance-row--disabled .provenance-slider
):active::-webkit-slider-thumb,
body.day-mode :is(
    .bio-row--disabled .bio-slider,
    .mech-row--disabled .mech-slider,
    .usage-row--disabled .usage-slider,
    .denat-row--disabled .denat-slider,
    .debit-row--disabled .debit-slider,
    .geo-row--disabled .geo-slider,
    .essence-row--disabled .essence-slider,
    .ancien-row--disabled .ancien-slider,
    .traces-row--disabled .traces-slider,
    .provenance-row--disabled .provenance-slider
):focus-visible::-webkit-slider-thumb {
    background: #FFFFFF;
    border-color: #333333;
}

body.day-mode :is(
    .bio-row--disabled .bio-slider,
    .mech-row--disabled .mech-slider,
    .usage-row--disabled .usage-slider,
    .denat-row--disabled .denat-slider,
    .debit-row--disabled .debit-slider,
    .geo-row--disabled .geo-slider,
    .essence-row--disabled .essence-slider,
    .ancien-row--disabled .ancien-slider,
    .traces-row--disabled .traces-slider,
    .provenance-row--disabled .provenance-slider
):active::-moz-range-thumb,
body.day-mode :is(
    .bio-row--disabled .bio-slider,
    .mech-row--disabled .mech-slider,
    .usage-row--disabled .usage-slider,
    .denat-row--disabled .denat-slider,
    .debit-row--disabled .debit-slider,
    .geo-row--disabled .geo-slider,
    .essence-row--disabled .essence-slider,
    .ancien-row--disabled .ancien-slider,
    .traces-row--disabled .traces-slider,
    .provenance-row--disabled .provenance-slider
):focus-visible::-moz-range-thumb {
    background: #FFFFFF;
    border-color: #333333;
}

/* Boutons à fond noir → fond bleu CRAI en mode jour */
body.day-mode .inspection-reset-btn,
body.day-mode .inspection-ignore-btn,
body.day-mode .inspection-info-small-btn,
body.day-mode .inspection-info-btn,
body.day-mode .scatter-dims-reset-btn,
body.day-mode .bio-reset-btn,
body.day-mode .bio-info-small-btn,
body.day-mode .bio-info-btn,
body.day-mode .mech-reset-btn,
body.day-mode .mech-info-small-btn,
body.day-mode .mech-info-btn,
body.day-mode .usage-reset-btn,
body.day-mode .usage-info-small-btn,
body.day-mode .usage-info-btn,
body.day-mode .denat-reset-btn,
body.day-mode .denat-info-small-btn,
body.day-mode .denat-info-btn,
body.day-mode .debit-reset-btn,
body.day-mode .debit-info-small-btn,
body.day-mode .debit-info-btn,
body.day-mode .geo-reset-btn,
body.day-mode .geo-info-small-btn,
body.day-mode .geo-info-btn,
body.day-mode .essence-reset-btn,
body.day-mode .essence-info-small-btn,
body.day-mode .essence-info-btn,
body.day-mode .ancien-reset-btn,
body.day-mode .ancien-info-small-btn,
body.day-mode .ancien-info-btn,
body.day-mode .traces-reset-btn,
body.day-mode .traces-info-small-btn,
body.day-mode .traces-info-btn,
body.day-mode .provenance-reset-btn,
body.day-mode .provenance-info-small-btn,
body.day-mode .provenance-info-btn,
body.day-mode .allotissement-info-btn,
body.day-mode .orientation-info-btn,
body.day-mode .seuils-info-btn,
body.day-mode .evalop-info-btn {
    background-color: var(--bleu-crai);
    border-color: transparent;
}

/* Bouton À propos et boutons primaires → bleu CRAI */
body.day-mode .accueil-apropos-toggle {
    background-color: var(--bleu-crai);
}

body.day-mode .accueil-apropos-toggle:hover {
    background-color: #152d6e;
}

body.day-mode .btn-primary {
    background-color: var(--bleu-crai);
}

body.day-mode .btn-primary:hover {
    background-color: #152d6e;
}

body.day-mode .lot-reset-btn {
    background-color: var(--bleu-crai);
}

/* Lot rail : fond noir → fond gris clair */
body.day-mode .lot-rail-wrapper {
    background-color: #EEEEEE;
    scrollbar-color: var(--bleu-crai) rgba(0, 0, 0, 0.1);
}

body.day-mode .lot-rail-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

body.day-mode .lot-rail-wrapper::-webkit-scrollbar-thumb {
    background: var(--bleu-crai);
}

/* À propos : fond sombre → fond clair */
body.day-mode .accueil-apropos-content {
    background-color: #F5F5F5;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

/* Cartes de lots dans la synthèse orientation */
body.day-mode .orientation-lot-card {
    background-color: rgba(0, 0, 0, 0.04);
    color: var(--color-text);
    border-color: var(--color-border);
}

body.day-mode .orientation-lot-card--active {
    background-color: #FFFFFF;
    color: var(--color-text);
}

/* Scrollbar orientation : sombre → clair */
body.day-mode .orientation-scrollbar-track {
    background-color: #CCCCCC;
}

body.day-mode .orientation-scrollbar-thumb {
    background-color: var(--bleu-crai);
}

/* Bouton réinitialiser global → bleu CRAI */
body.day-mode #btnResetAll {
    background-color: var(--bleu-crai);
    border-color: var(--bleu-crai);
}

body.day-mode #btnResetAll:hover {
    background-color: #152d6e;
    border-color: #152d6e;
}

/* Bouton info radar → bleu CRAI */
body.day-mode .radar-info-btn {
    background-color: var(--bleu-crai);
    border-color: var(--bleu-crai);
}

/* Colonnes evalop : texte blanc hérité → sombre */
body.day-mode .evalop-column-title {
    color: var(--color-text);
}

/* Cards grid: Inspection + Notation responsive (1 / 2 / 3 cols) */
.cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-16);
    align-items: start;
}
.cards-grid .card {
    display: flex;
    flex-direction: column;
    height: auto; /* allow cards to grow with content */
    min-height: 320px; /* base minimum so cards keep reasonable size */
    overflow: visible; /* ensure inner elements are visible and the page can scroll */
}
.cards-grid .card > header,
.cards-grid .card > .card-title {
    flex: 0 0 auto;
}
.cards-grid .card > .inspection-body,
.cards-grid .card > .bio-body,
.cards-grid .card > .mech-body,
.cards-grid .card > .usage-body,
.cards-grid .card > .denat-body,
.cards-grid .card > .debit-body,
.cards-grid .card > .geo-body,
.cards-grid .card > .essence-body,
.cards-grid .card > .ancien-body,
.cards-grid .card > .traces-body,
.cards-grid .card > .provenance-body,
.cards-grid .card > .evalop-body {
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0;
}

@media (min-width: 601px) and (max-width: 1024px) {
    .cards-grid { grid-template-columns: repeat(2, 1fr); }
    .cards-grid .card { min-height: 420px; }
}

@media (min-width: 1025px) {
    .cards-grid { grid-template-columns: repeat(3, 1fr); }
    .cards-grid .card { min-height: 520px; }
}

/* Les sliders de notation enrichis en JS reprennent le gabarit inspection :
   piste et crans sur toute la largeur, libellés centrés sur 3 colonnes. */
:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper
):has(.bio-slider-display--statut):not(:has(.bio-slider--statut)) {
    --statut-slider-scale-width: 86%;
    --statut-slider-thumb-radius: calc(var(--slider-thumb-size) / 2);
    /* Le centre du thumb se déplace entre r et (largeur-r), pas entre 0 et largeur. */
    --statut-slider-track-width: calc((var(--statut-slider-scale-width) * 2 / 3) + var(--slider-thumb-size));
    row-gap: var(--space-4);
}

:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper
):has(.bio-slider-display--statut):not(:has(.bio-slider--statut)) .bio-slider-display-line--statut {
    position: relative;
    display: block;
    background: transparent;
    color: var(--bleu-crai);
}

:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled
):has(.bio-slider-display--statut) .bio-slider-display-line--statut {
    color: var(--disabled-surface);
    background: transparent;
}

:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled
):has(.bio-slider-display--statut) .bio-slider-display-line--statut::before,
:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled
):has(.bio-slider-display--statut) .bio-slider-dot--statut {
    background: var(--disabled-surface) !important;
}

:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper
):has(.bio-slider-display--statut):not(:has(.bio-slider--statut)) .bio-slider-display-line--statut::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--statut-slider-thumb-radius);
    right: var(--statut-slider-thumb-radius);
    height: var(--slider-track-height);
    transform: translateY(-50%);
    background: currentColor;
}

:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper
):has(.bio-slider-display--statut):not(:has(.bio-slider--statut)) .bio-slider-dot--statut {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper
):has(.bio-slider-display--statut):not(:has(.bio-slider--statut)) .bio-slider-dot--statut:nth-child(1) {
    left: var(--statut-slider-thumb-radius);
}

:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper
):has(.bio-slider-display--statut):not(:has(.bio-slider--statut)) .bio-slider-dot--statut:nth-child(2) {
    left: 50%;
}

:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper
):has(.bio-slider-display--statut):not(:has(.bio-slider--statut)) .bio-slider-dot--statut:nth-child(3) {
    left: calc(100% - var(--statut-slider-thumb-radius));
}

:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper
):has(.bio-slider-display--statut):not(:has(.bio-slider--statut)) :is(
    .bio-slider-scale,
    .mech-slider-scale,
    .usage-slider-scale,
    .denat-slider-scale,
    .traces-slider-scale,
    .provenance-slider-scale,
    .debit-slider-scale,
    .geo-slider-scale,
    .essence-slider-scale,
    .ancien-slider-scale
) {
    min-height: 32px;
    margin: 0;
    width: var(--statut-slider-scale-width, 100%);
    justify-self: center;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 0;
    align-items: stretch;
    text-align: center;
    line-height: 1.2;
    font-size: 12px;
    font-weight: 700;
}

:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper
):has(.bio-slider-display--statut):not(:has(.bio-slider--statut)) :is(
    .bio-slider-scale,
    .mech-slider-scale,
    .usage-slider-scale,
    .denat-slider-scale,
    .traces-slider-scale,
    .provenance-slider-scale,
    .debit-slider-scale,
    .geo-slider-scale,
    .essence-slider-scale,
    .ancien-slider-scale
) span {
    min-height: 32px;
    display: grid;
    grid-template-rows: minmax(18px, auto) minmax(18px, auto);
    align-items: center;
    justify-items: center;
    text-align: center;
    white-space: normal;
}

/* Masquage visuel des encarts texte (niveau et note) */
:is(
    .bio-level-box,
    .mech-level-box,
    .usage-level-box,
    .denat-level-box,
    .debit-level-box,
    .geo-level-box,
    .essence-level-box,
    .ancien-level-box,
    .traces-level-box,
    .provenance-level-box
) {
    display: none;
}

:is(
    .bio-intensity-box,
    .mech-intensity-box,
    .usage-intensity-box,
    .denat-intensity-box,
    .debit-intensity-box,
    .geo-intensity-box,
    .essence-intensity-box,
    .ancien-intensity-box,
    .traces-intensity-box,
    .provenance-intensity-box,
    .inspection-intensity-box
) {
    display: none;
}

/* Affiche la note au-dessus du terme actif sur l'échelle du slider */
:is(
    .bio-slider-scale span,
    .mech-slider-scale span,
    .usage-slider-scale span,
    .denat-slider-scale span,
    .debit-slider-scale span,
    .geo-slider-scale span,
    .essence-slider-scale span,
    .ancien-slider-scale span,
    .traces-slider-scale span,
    .provenance-slider-scale span,
    .inspection-slider-scale span
)[data-note]:not([data-note=""]):not([data-note="..."]):not([data-note="…"]):not([data-note="Coeff. …"]) {
    display: grid;
    grid-template-rows: minmax(18px, auto) minmax(18px, auto);
    align-items: center;
    justify-items: center;
    color: var(--disabled-text);
    font-size: 12px;
    font-weight: 700;
}

:is(
    .bio-slider-scale span,
    .mech-slider-scale span,
    .usage-slider-scale span,
    .denat-slider-scale span,
    .debit-slider-scale span,
    .geo-slider-scale span,
    .essence-slider-scale span,
    .ancien-slider-scale span,
    .traces-slider-scale span,
    .provenance-slider-scale span,
    .inspection-slider-scale span
)[data-note]:not([data-note=""]):not([data-note="..."]):not([data-note="…"]):not([data-note="Coeff. …"])::before {
    content: attr(data-note);
    display: block;
    grid-row: 1;
    font-size: 12px;
    line-height: 1.1;
    font-weight: 700;
    color: currentColor;
    margin-bottom: 0;
}

/* État actif unique : terme + note en bleu CRAI */
:is(.slider-label--active, .bio-slider-label--active) {
    color: var(--bleu-crai) !important;
    font-weight: 700 !important;
}

:is(.slider-label--active, .bio-slider-label--active)[data-note]:not([data-note=""]):not([data-note="..."]):not([data-note="…"]):not([data-note="Coeff. …"])::before {
    color: var(--bleu-crai) !important;
}

/* Disabled : conserver la note active lisible au-dessus du slider */
:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled,
    .inspection-row--disabled
) :is(.slider-label--active, .bio-slider-label--active) {
    color: var(--disabled-text) !important;
    font-weight: 700 !important;
}

:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled,
    .inspection-row--disabled
) :is(.slider-label--active, .bio-slider-label--active)[data-note]:not([data-note=""]):not([data-note="..."]):not([data-note="…"]):not([data-note="Coeff. …"])::before {
    color: var(--disabled-text) !important;
    opacity: 1;
}

/* Réagencement unifié des lignes de notation */
:is(
    .bio-row,
    .mech-row,
    .usage-row,
    .denat-row,
    .traces-row,
    .provenance-row,
    .debit-row,
    .geo-row,
    .essence-row,
    .ancien-row
) {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    grid-template-rows: 30px minmax(18px, auto) minmax(18px, auto) minmax(28px, auto) 30px;
    grid-template-areas:
        "val label reset"
        "val slider ."
        "val slider ."
        "val slider ."
        "val slider info";
    align-items: stretch;
    column-gap: var(--space-8);
    row-gap: var(--space-4);
}

.cards-grid :is(
    .bio-row,
    .mech-row,
    .usage-row,
    .denat-row,
    .traces-row,
    .provenance-row,
    .debit-row,
    .geo-row,
    .essence-row,
    .ancien-row
) {
    grid-template-columns: 26px minmax(0, 1fr) 28px;
    grid-template-rows: 30px minmax(18px, auto) minmax(18px, auto) minmax(28px, auto) minmax(30px, auto);
    grid-template-areas:
        "val label  reset"
        "val slider ."
        "val slider ."
        "val slider ."
        "val slider info";
    align-items: stretch;
    column-gap: var(--space-6);
    row-gap: var(--space-3);
}

/* Inspection (hors Intégrité) : grille 3 colonnes avec spacer gauche
   pour aligner verticalement avec la colonne "ignore" de l'Intégrité. */
.inspection-row:not([data-inspection-field="integrite"]) {
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    grid-template-rows: 30px minmax(20px, auto) minmax(20px, auto) minmax(30px, auto) minmax(30px, auto);
    grid-template-areas:
        "spacer label  reset"
        "spacer slider ."
        "spacer slider ."
        "spacer slider ."
        "spacer slider info";
    align-items: stretch;
    column-gap: var(--space-8);
    row-gap: var(--space-4);
}

.cards-grid .inspection-row:not([data-inspection-field="integrite"]) {
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    grid-template-rows: 28px minmax(18px, auto) minmax(18px, auto) minmax(28px, auto) minmax(28px, auto);
    grid-template-areas:
        "spacer label  reset"
        "spacer slider ."
        "spacer slider ."
        "spacer slider ."
        "spacer slider info";
    align-items: stretch;
    column-gap: var(--space-6);
    row-gap: var(--space-3);
}

/* Spacer : même apparence que la colonne "ignore" */
.inspection-spacer-box {
    grid-area: spacer;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: rgba(29, 61, 150, 0.3);
}

/* Spacer désactivé : fond gris clair */
.inspection-row--disabled .inspection-spacer-box {
    background: #E6E6E6;
}

.inspection-row:not([data-inspection-field="integrite"]) .inspection-value-box,
.inspection-row:not([data-inspection-field="integrite"]) .inspection-intensity-box {
    display: none;
}

/* Notation : les encarts niveau/note restent masqués, la note et le terme viennent du slider */
:is(
    .bio-level-box,
    .mech-level-box,
    .usage-level-box,
    .denat-level-box,
    .traces-level-box,
    .provenance-level-box,
    .debit-level-box,
    .geo-level-box,
    .essence-level-box,
    .ancien-level-box
) {
    display: none;
}

:is(
    .bio-intensity-box,
    .mech-intensity-box,
    .usage-intensity-box,
    .denat-intensity-box,
    .traces-intensity-box,
    .provenance-intensity-box,
    .debit-intensity-box,
    .geo-intensity-box,
    .essence-intensity-box,
    .ancien-intensity-box
) {
    display: none;
}

/* Notation : en-tête critère — bande horizontale pleine largeur */
:is(
    .bio-label-box,
    .mech-label-box,
    .usage-label-box,
    .denat-label-box,
    .traces-label-box,
    .provenance-label-box,
    .debit-label-box,
    .geo-label-box,
    .essence-label-box,
    .ancien-label-box,
    .inspection-label-box
) {
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-align: center;
    text-transform: capitalize;
    letter-spacing: 0.08em;
    font-size: var(--space-s);
    padding: 4px 6px;
    justify-self: stretch;
    align-self: stretch;
    width: 100%;
    min-height: 32px;
    height: 32px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cards-grid :is(
    .bio-label-box,
    .mech-label-box,
    .usage-label-box,
    .denat-label-box,
    .traces-label-box,
    .provenance-label-box,
    .debit-label-box,
    .geo-label-box,
    .essence-label-box,
    .ancien-label-box,
    .inspection-label-box
) {
    min-height: 30px;
    height: 30px;
}

:is(
    .bio-intensity-box,
    .mech-intensity-box,
    .usage-intensity-box,
    .denat-intensity-box,
    .traces-intensity-box,
    .provenance-intensity-box,
    .debit-intensity-box,
    .geo-intensity-box,
    .essence-intensity-box,
    .ancien-intensity-box,
    .bio-level-box,
    .mech-level-box,
    .usage-level-box,
    .denat-level-box,
    .traces-level-box,
    .provenance-level-box,
    .debit-level-box,
    .geo-level-box,
    .essence-level-box,
    .ancien-level-box
) {
    justify-self: stretch;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
    align-items: center;
    line-height: 1.1;
}

:is(
    .bio-intensity-box,
    .mech-intensity-box,
    .usage-intensity-box,
    .denat-intensity-box,
    .traces-intensity-box,
    .provenance-intensity-box,
    .debit-intensity-box,
    .geo-intensity-box,
    .essence-intensity-box,
    .ancien-intensity-box
) {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    min-height: 20px;
}

:is(
    .bio-level-box,
    .mech-level-box,
    .usage-level-box,
    .denat-level-box,
    .traces-level-box,
    .provenance-level-box,
    .debit-level-box,
    .geo-level-box,
    .essence-level-box,
    .ancien-level-box
) {
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    min-height: 20px;
    opacity: 0.92;
}

.cards-grid :is(
    .bio-intensity-box,
    .mech-intensity-box,
    .usage-intensity-box,
    .denat-intensity-box,
    .traces-intensity-box,
    .provenance-intensity-box,
    .debit-intensity-box,
    .geo-intensity-box,
    .essence-intensity-box,
    .ancien-intensity-box,
    .bio-level-box,
    .mech-level-box,
    .usage-level-box,
    .denat-level-box,
    .traces-level-box,
    .provenance-level-box,
    .debit-level-box,
    .geo-level-box,
    .essence-level-box,
    .ancien-level-box
) {
    padding: 0 4px;
}

.cards-grid :is(
    .bio-intensity-box,
    .mech-intensity-box,
    .usage-intensity-box,
    .denat-intensity-box,
    .traces-intensity-box,
    .provenance-intensity-box,
    .debit-intensity-box,
    .geo-intensity-box,
    .essence-intensity-box,
    .ancien-intensity-box
) {
    min-height: 18px;
    font-size: 11px;
}

.cards-grid :is(
    .bio-level-box,
    .mech-level-box,
    .usage-level-box,
    .denat-level-box,
    .traces-level-box,
    .provenance-level-box,
    .debit-level-box,
    .geo-level-box,
    .essence-level-box,
    .ancien-level-box
) {
    min-height: 18px;
    font-size: 10px;
}

/* encarts/labels conservent leur apparence active à l'état grisé */

:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled,
    .inspection-row--disabled
) .bio-slider-display-line--statut {
    color: var(--disabled-surface);
}

/* Notation : label valeur — ruban vertical colonne gauche */
:is(
    .bio-value-label-box,
    .mech-value-label-box,
    .usage-value-label-box,
    .denat-value-label-box,
    .traces-value-label-box,
    .provenance-value-label-box,
    .debit-value-label-box,
    .geo-value-label-box,
    .essence-value-label-box,
    .ancien-value-label-box,
    .inspection-value-box
) {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    justify-self: stretch;
    align-self: stretch;
    inline-size: 100%;
    height: 100%;
    min-height: 0;
    text-align: center;
    padding: var(--space-3) 1px;
    font-size: var(--space-xs);
    width: auto;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.88);
}

/* Cards-grid : ruban vertical plus compact */
.cards-grid :is(
    .bio-value-label-box,
    .mech-value-label-box,
    .usage-value-label-box,
    .denat-value-label-box,
    .traces-value-label-box,
    .provenance-value-label-box,
    .debit-value-label-box,
    .geo-value-label-box,
    .essence-value-label-box,
    .ancien-value-label-box,
    .inspection-value-box
) {
    font-size: 12px;
    padding: 2px 1px;
}

/* Notation : labels — apparence identique quel que soit l'état */
:is(
    .bio-row,
    .mech-row,
    .usage-row,
    .denat-row,
    .traces-row,
    .provenance-row,
    .debit-row,
    .geo-row,
    .essence-row,
    .ancien-row,
    .inspection-row
) :is(
    .bio-label-box,
    .mech-label-box,
    .usage-label-box,
    .denat-label-box,
    .traces-label-box,
    .provenance-label-box,
    .debit-label-box,
    .geo-label-box,
    .essence-label-box,
    .ancien-label-box,
    .inspection-label-box
) {
    background: transparent;
    color: var(--color-text);
    border: none;
}

/* Notation : ruban vertical — état actif : bleu CRAI 0.3, texte noir */
:is(
    .bio-row,
    .mech-row,
    .usage-row,
    .denat-row,
    .traces-row,
    .provenance-row,
    .debit-row,
    .geo-row,
    .essence-row,
    .ancien-row,
    .inspection-row:not([data-inspection-field="integrite"])
) :is(
    .bio-value-label-box,
    .mech-value-label-box,
    .usage-value-label-box,
    .denat-value-label-box,
    .traces-value-label-box,
    .provenance-value-label-box,
    .debit-value-label-box,
    .geo-value-label-box,
    .essence-value-label-box,
    .ancien-value-label-box,
    .inspection-value-box
) {
    background: rgba(29, 61, 150, 0.3);
    color: var(--color-text);
    border-color: var(--color-border);
}

/* État grisé : seule la couleur du texte change */
:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .inspection-row--disabled
) :is(
    .bio-label-box,
    .mech-label-box,
    .usage-label-box,
    .denat-label-box,
    .traces-label-box,
    .provenance-label-box,
    .debit-label-box,
    .geo-label-box,
    .essence-label-box,
    .ancien-label-box,
    .inspection-label-box,
    .bio-value-label-box,
    .mech-value-label-box,
    .usage-value-label-box,
    .denat-value-label-box,
    .traces-value-label-box,
    .provenance-value-label-box,
    .debit-value-label-box,
    .geo-value-label-box,
    .essence-value-label-box,
    .ancien-value-label-box,
    .inspection-value-box
) {
    color: var(--disabled-text);
}

/* État grisé : ruban vertical — fond gris clair */
:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .inspection-row--disabled
) :is(
    .bio-value-label-box,
    .mech-value-label-box,
    .usage-value-label-box,
    .denat-value-label-box,
    .traces-value-label-box,
    .provenance-value-label-box,
    .debit-value-label-box,
    .geo-value-label-box,
    .essence-value-label-box,
    .ancien-value-label-box,
    .inspection-value-box
) {
    background: #E6E6E6;
}

/* État grisé (notation) : version explicite par bloc pour verrouiller la priorité CSS */
.bio-row--disabled .bio-value-label-box,
.mech-row--disabled .mech-value-label-box,
.usage-row--disabled .usage-value-label-box,
.denat-row--disabled .denat-value-label-box,
.traces-row--disabled .traces-value-label-box,
.provenance-row--disabled .provenance-value-label-box,
.debit-row--disabled .debit-value-label-box,
.geo-row--disabled .geo-value-label-box,
.essence-row--disabled .essence-value-label-box,
.ancien-row--disabled .ancien-value-label-box {
    background: #E6E6E6;
}

/* Notation : slider en cellule de tableau basse */
:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper,
    .inspection-slider-wrapper
) {
    border-top: 0;
    padding: 0 var(--space-8);
    min-width: 0;
    box-sizing: border-box;
}

.cards-grid :is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper,
    .inspection-slider-wrapper
) {
    padding: 0 var(--space-5);
}

.inspection-row:not([data-inspection-field="integrite"]) .inspection-label-box,
.inspection-row:not([data-inspection-field="integrite"]) .inspection-value-box {
    justify-self: end;
    width: 100%;
}

.cards-grid :is(
    .bio-value-label-box,
    .mech-value-label-box,
    .usage-value-label-box,
    .denat-value-label-box,
    .traces-value-label-box,
    .provenance-value-label-box,
    .debit-value-label-box,
    .geo-value-label-box,
    .essence-value-label-box,
    .ancien-value-label-box,
    .inspection-value-box
) {
    grid-area: val;
}

.cards-grid :is(
    .bio-reset-btn,
    .mech-reset-btn,
    .usage-reset-btn,
    .denat-reset-btn,
    .traces-reset-btn,
    .provenance-reset-btn,
    .debit-reset-btn,
    .geo-reset-btn,
    .essence-reset-btn,
    .ancien-reset-btn
) {
    grid-area: reset;
    justify-self: end;
    align-self: start;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
}

.cards-grid :is(
    .bio-info-small-btn,
    .mech-info-small-btn,
    .usage-info-small-btn,
    .denat-info-small-btn,
    .traces-info-small-btn,
    .provenance-info-small-btn,
    .debit-info-small-btn,
    .geo-info-small-btn,
    .essence-info-small-btn,
    .ancien-info-small-btn
) {
    grid-area: info;
    justify-self: end;
    align-self: end;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
}

.cards-grid .inspection-ignore-reset {
    grid-area: reset;
    gap: 2px;
}

:is(
    .bio-slider-wrapper,
    .mech-slider-wrapper,
    .usage-slider-wrapper,
    .denat-slider-wrapper,
    .traces-slider-wrapper,
    .provenance-slider-wrapper,
    .debit-slider-wrapper,
    .geo-slider-wrapper,
    .essence-slider-wrapper,
    .ancien-slider-wrapper,
    .inspection-slider-wrapper
) {
    grid-area: slider;
}

:is(
    .bio-label-box,
    .mech-label-box,
    .usage-label-box,
    .denat-label-box,
    .traces-label-box,
    .provenance-label-box,
    .debit-label-box,
    .geo-label-box,
    .essence-label-box,
    .ancien-label-box,
    .inspection-label-box
) {
    grid-area: label;
}

:is(
    .bio-value-label-box,
    .mech-value-label-box,
    .usage-value-label-box,
    .denat-value-label-box,
    .traces-value-label-box,
    .provenance-value-label-box,
    .debit-value-label-box,
    .geo-value-label-box,
    .essence-value-label-box,
    .ancien-value-label-box,
    .inspection-value-box
) {
    grid-area: val;
}

:is(
    .bio-level-box,
    .mech-level-box,
    .usage-level-box,
    .denat-level-box,
    .traces-level-box,
    .provenance-level-box,
    .debit-level-box,
    .geo-level-box,
    .essence-level-box,
    .ancien-level-box
) {
    grid-area: level;
}

:is(
    .bio-intensity-box,
    .mech-intensity-box,
    .usage-intensity-box,
    .denat-intensity-box,
    .traces-intensity-box,
    .provenance-intensity-box,
    .debit-intensity-box,
    .geo-intensity-box,
    .essence-intensity-box,
    .ancien-intensity-box
) {
    grid-area: intensity;
}

.inspection-row:not([data-inspection-field="integrite"]) .inspection-value-box {
    grid-area: value;
    justify-self: end;
    width: 100%;
}

.inspection-value-box {
    display: flex;
}

:is(
    .bio-info-small-btn,
    .mech-info-small-btn,
    .usage-info-small-btn,
    .denat-info-small-btn,
    .traces-info-small-btn,
    .provenance-info-small-btn,
    .debit-info-small-btn,
    .geo-info-small-btn,
    .essence-info-small-btn,
    .ancien-info-small-btn,
    .inspection-info-small-btn
) {
    grid-area: info;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
}

:is(
    .bio-row,
    .mech-row,
    .usage-row,
    .denat-row,
    .traces-row,
    .provenance-row,
    .debit-row,
    .geo-row,
    .essence-row,
    .ancien-row
) > .lot-alert-btn {
    grid-column: 3;
    grid-row: 2 / span 3;
    justify-self: end;
    align-self: center;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    margin: 0;
    z-index: 1;
}

:is(
    .bio-reset-btn,
    .mech-reset-btn,
    .usage-reset-btn,
    .denat-reset-btn,
    .traces-reset-btn,
    .provenance-reset-btn,
    .debit-reset-btn,
    .geo-reset-btn,
    .essence-reset-btn,
    .ancien-reset-btn,
    .inspection-reset-btn
) {
    grid-area: reset;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
}

/* Notation + Inspection (visibilité/instrumentation) : actions carrées */
:is(
    .bio-reset-btn,
    .mech-reset-btn,
    .usage-reset-btn,
    .denat-reset-btn,
    .traces-reset-btn,
    .provenance-reset-btn,
    .debit-reset-btn,
    .geo-reset-btn,
    .essence-reset-btn,
    .ancien-reset-btn,
    .bio-info-small-btn,
    .mech-info-small-btn,
    .usage-info-small-btn,
    .denat-info-small-btn,
    .traces-info-small-btn,
    .provenance-info-small-btn,
    .debit-info-small-btn,
    .geo-info-small-btn,
    .essence-info-small-btn,
    .ancien-info-small-btn
) {
    justify-self: center;
    align-self: center;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    line-height: 1;
    margin: 0;
}

:is(
    .bio-reset-btn,
    .mech-reset-btn,
    .usage-reset-btn,
    .denat-reset-btn,
    .traces-reset-btn,
    .provenance-reset-btn,
    .debit-reset-btn,
    .geo-reset-btn,
    .essence-reset-btn,
    .ancien-reset-btn
) {
    justify-self: end;
    align-self: start;
}

:is(
    .bio-info-small-btn,
    .mech-info-small-btn,
    .usage-info-small-btn,
    .denat-info-small-btn,
    .traces-info-small-btn,
    .provenance-info-small-btn,
    .debit-info-small-btn,
    .geo-info-small-btn,
    .essence-info-small-btn,
    .ancien-info-small-btn
) {
    justify-self: end;
    align-self: end;
}



.inspection-row:not([data-inspection-field="integrite"]) .inspection-reset-btn,
.inspection-row:not([data-inspection-field="integrite"]) .inspection-info-small-btn {
    justify-self: end;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    line-height: 1;
    margin: 0;
}

.inspection-row:not([data-inspection-field="integrite"]) .inspection-reset-btn {
    align-self: start;
}

.inspection-row:not([data-inspection-field="integrite"]) .inspection-info-small-btn {
    align-self: end;
}

.cards-grid .inspection-row:not([data-inspection-field="integrite"]) .inspection-reset-btn,
.cards-grid .inspection-row:not([data-inspection-field="integrite"]) .inspection-info-small-btn {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
}

.cards-grid :is(
    .bio-reset-btn,
    .mech-reset-btn,
    .usage-reset-btn,
    .denat-reset-btn,
    .traces-reset-btn,
    .provenance-reset-btn,
    .debit-reset-btn,
    .geo-reset-btn,
    .essence-reset-btn,
    .ancien-reset-btn,
    .bio-info-small-btn,
    .mech-info-small-btn,
    .usage-info-small-btn,
    .denat-info-small-btn,
    .traces-info-small-btn,
    .provenance-info-small-btn,
    .debit-info-small-btn,
    .geo-info-small-btn,
    .essence-info-small-btn,
    .ancien-info-small-btn
) {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
}

.cards-grid :is(
    .bio-row,
    .mech-row,
    .usage-row,
    .denat-row,
    .traces-row,
    .provenance-row,
    .debit-row,
    .geo-row,
    .essence-row,
    .ancien-row
) > .lot-alert-btn {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
}

.inspection-row:not([data-inspection-field="integrite"]) .inspection-slider-wrapper,
.inspection-row[data-inspection-field="integrite"] .inspection-slider-wrapper {
    --inspection-slider-scale-width: 86%;
    --inspection-slider-thumb-radius: calc(var(--slider-thumb-size) / 2);
    --inspection-slider-track-width: calc((var(--inspection-slider-scale-width) * 2 / 3) + var(--slider-thumb-size));
    display: grid;
    grid-template-rows: minmax(18px, auto) minmax(18px, auto) minmax(14px, auto) var(--slider-hit-height);
    row-gap: var(--space-2);
    align-items: stretch;
    height: 100%;
    padding: var(--notation-slider-cell-pad-y) var(--notation-slider-cell-pad-x);
    box-sizing: border-box;
    min-width: 0;
}

.cards-grid .inspection-row:not([data-inspection-field="integrite"]) .inspection-slider-wrapper,
.cards-grid .inspection-row[data-inspection-field="integrite"] .inspection-slider-wrapper {
    padding: var(--notation-slider-cell-pad-y-compact) var(--notation-slider-cell-pad-x-compact);
}

.inspection-slider-scale {
    grid-row: 1 / span 2;
    grid-column: 1;
    min-height: 0;
    height: 100%;
    width: var(--inspection-slider-scale-width, 100%);
    justify-self: center;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 0;
    align-items: stretch;
    text-align: center;
    margin-top: 0;
    line-height: 1.2;
    align-self: stretch;
    font-size: 12px;
    font-weight: 700;
    color: var(--disabled-text);
}

.inspection-slider-scale span {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: minmax(18px, auto) minmax(18px, auto);
    align-items: center;
    justify-items: center;
    text-align: center;
    white-space: normal;
    padding: 0 2px;
}

.inspection-slider-display,
.inspection-slider {
    grid-column: 1;
    grid-row: 3 / span 2;
    align-self: end;
    width: var(--inspection-slider-track-width, 100%) !important;
    justify-self: center !important;
}

.inspection-slider-display {
    background: transparent !important;
}

.inspection-slider {
    background: transparent !important;
    padding: 0;
    border: none;
}

.inspection-slider::-webkit-slider-runnable-track,
.inspection-slider::-moz-range-track,
.inspection-slider::-moz-range-progress {
    background: transparent !important;
}

.inspection-slider-display-line {
    left: 0;
    right: 0;
    background: transparent !important;
    color: var(--bleu-crai);
    position: absolute;
    display: block;
}

.inspection-slider-display-line::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--inspection-slider-thumb-radius);
    right: var(--inspection-slider-thumb-radius);
    height: var(--slider-track-height);
    transform: translateY(-50%);
    background: currentColor;
}

.inspection-slider-display-line > :is(.inspection-slider-dot, .inspection-slider-center-ring) {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bleu-crai);
}

.inspection-slider-display-line > :nth-child(1) {
    left: var(--inspection-slider-thumb-radius);
}

.inspection-slider-display-line > :nth-child(2) {
    left: 50%;
}

.inspection-slider-display-line > :nth-child(3) {
    left: calc(100% - var(--inspection-slider-thumb-radius));
}

.inspection-row--disabled .inspection-slider-display-line {
    color: var(--disabled-surface);
    background: transparent !important;
}

.inspection-row--disabled .inspection-slider-display {
    background: transparent !important;
}

.inspection-row--disabled .inspection-slider,
.inspection-row--disabled .inspection-slider::-webkit-slider-runnable-track,
.inspection-row--disabled .inspection-slider::-moz-range-track,
.inspection-row--disabled .inspection-slider::-moz-range-progress {
    background: transparent !important;
}

.inspection-row--disabled .inspection-slider-display-line::before,
.inspection-row--disabled .inspection-slider-dot,
.inspection-row--disabled .inspection-slider-center-ring {
    background: var(--disabled-surface);
}

/* Cas Inspection Intégrité : ruban "Ignoré" toujours visible */
.inspection-row[data-inspection-field="integrite"] {
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    grid-template-rows: 30px minmax(20px, auto) minmax(20px, auto) minmax(30px, auto) minmax(30px, auto);
    grid-template-areas:
      "ignore label actions"
      "ignore slider actions"
      "ignore slider actions"
      "ignore slider actions"
      "ignore slider actions";
    align-items: stretch;
    column-gap: var(--space-8);
    row-gap: var(--space-4);
}

.cards-grid .inspection-row[data-inspection-field="integrite"] {
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    grid-template-rows: 28px minmax(18px, auto) minmax(18px, auto) minmax(28px, auto) minmax(28px, auto);
}

/* Encart "Ignoré" : ruban vertical toujours visible */
.inspection-ignore-box {
    grid-area: ignore;
    display: flex;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    justify-self: stretch;
    align-self: stretch;
    inline-size: 100%;
    height: 100%;
    min-height: 0;
    text-align: center;
    padding: var(--space-3) 1px;
    font-size: var(--font-size-xs);
    width: auto;
    max-width: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: 0.08em;
    text-transform: capitalize;
    font-weight: var(--font-weight-semibold);
    box-sizing: border-box;
}

/* Ruban "Ignoré" en mode jour : bordure cohérente */
body.day-mode .inspection-ignore-box {
    border-color: var(--color-border);
}

/* État désactivé (non ignoré) : fond gris clair, texte grisé */
.inspection-row[data-inspection-field="integrite"].inspection-row--disabled:not(.inspection-row--ignored) .inspection-ignore-box {
    background: #E6E6E6;
    color: var(--disabled-text);
}

/* Les états actifs/ignorés de l'intégrité sont gérés plus bas via data-note-tone */

/* Harmonisation durcie : rubans/encarts valeur */

/* Désactivé : fond gris clair + texte gris foncé */
:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .inspection-row--disabled
) :is(
    .bio-value-label-box,
    .mech-value-label-box,
    .usage-value-label-box,
    .denat-value-label-box,
    .traces-value-label-box,
    .provenance-value-label-box,
    .debit-value-label-box,
    .geo-value-label-box,
    .essence-value-label-box,
    .ancien-value-label-box,
    .inspection-value-box
),
.inspection-row--disabled .inspection-spacer-box,
.inspection-row[data-inspection-field="integrite"].inspection-row--disabled:not(.inspection-row--ignored) .inspection-ignore-box {
    background: #E6E6E6;
    color: var(--disabled-text);
    border-color: var(--color-border);
}

.inspection-row[data-inspection-field="integrite"] .inspection-value-box,
.inspection-row[data-inspection-field="integrite"] .inspection-intensity-box {
    display: none;
}

/* Règle finale dédiée : encart label valeur */

/* Désactivé */
:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .inspection-row--disabled
) :is(
    .bio-value-label-box,
    .mech-value-label-box,
    .usage-value-label-box,
    .denat-value-label-box,
    .traces-value-label-box,
    .provenance-value-label-box,
    .debit-value-label-box,
    .geo-value-label-box,
    .essence-value-label-box,
    .ancien-value-label-box,
    .inspection-value-box
) {
    background: #E6E6E6 !important;
    color: var(--disabled-text) !important;
    border-color: var(--color-border) !important;
}

/* Coloration par note (remplace le bleu actif) */
:is(
    .bio-row,
    .mech-row,
    .usage-row,
    .denat-row,
    .traces-row,
    .provenance-row,
    .debit-row,
    .geo-row,
    .essence-row,
    .ancien-row,
    .inspection-row:not([data-inspection-field="integrite"])
):not(:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .inspection-row--disabled
))[data-note-tone="high"] :is(
    .bio-value-label-box,
    .mech-value-label-box,
    .usage-value-label-box,
    .denat-value-label-box,
    .traces-value-label-box,
    .provenance-value-label-box,
    .debit-value-label-box,
    .geo-value-label-box,
    .essence-value-label-box,
    .ancien-value-label-box,
    .inspection-value-box
) {
    background: #009E73 !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

:is(
    .bio-row,
    .mech-row,
    .usage-row,
    .denat-row,
    .traces-row,
    .provenance-row,
    .debit-row,
    .geo-row,
    .essence-row,
    .ancien-row,
    .inspection-row:not([data-inspection-field="integrite"])
):not(:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .inspection-row--disabled
))[data-note-tone="mid"] :is(
    .bio-value-label-box,
    .mech-value-label-box,
    .usage-value-label-box,
    .denat-value-label-box,
    .traces-value-label-box,
    .provenance-value-label-box,
    .debit-value-label-box,
    .geo-value-label-box,
    .essence-value-label-box,
    .ancien-value-label-box,
    .inspection-value-box
) {
    background: #E69F00 !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

:is(
    .bio-row,
    .mech-row,
    .usage-row,
    .denat-row,
    .traces-row,
    .provenance-row,
    .debit-row,
    .geo-row,
    .essence-row,
    .ancien-row,
    .inspection-row:not([data-inspection-field="integrite"])
):not(:is(
    .bio-row--disabled,
    .mech-row--disabled,
    .usage-row--disabled,
    .denat-row--disabled,
    .traces-row--disabled,
    .provenance-row--disabled,
    .debit-row--disabled,
    .geo-row--disabled,
    .essence-row--disabled,
    .ancien-row--disabled,
    .inspection-row--disabled
))[data-note-tone="low"] :is(
    .bio-value-label-box,
    .mech-value-label-box,
    .usage-value-label-box,
    .denat-value-label-box,
    .traces-value-label-box,
    .provenance-value-label-box,
    .debit-value-label-box,
    .geo-value-label-box,
    .essence-value-label-box,
    .ancien-value-label-box,
    .inspection-value-box
) {
    background: #D55E00 !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.ancien-row[data-note-tone="high"]:not(.ancien-row--disabled) .ancien-value-label-box {
    background: #009E73 !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.ancien-row[data-note-tone="mid"]:not(.ancien-row--disabled) .ancien-value-label-box {
    background: #E69F00 !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.ancien-row[data-note-tone="low"]:not(.ancien-row--disabled) .ancien-value-label-box {
    background: #D55E00 !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.inspection-row:not([data-inspection-field="integrite"]):not(.inspection-row--disabled)[data-note-tone="high"] .inspection-spacer-box {
    background: #009E73 !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.inspection-row:not([data-inspection-field="integrite"]):not(.inspection-row--disabled)[data-note-tone="mid"] .inspection-spacer-box {
    background: #E69F00 !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.inspection-row:not([data-inspection-field="integrite"]):not(.inspection-row--disabled)[data-note-tone="low"] .inspection-spacer-box {
    background: #D55E00 !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.inspection-row[data-inspection-field="integrite"]:not(.inspection-row--disabled):not(.inspection-row--ignored)[data-note-tone="high"] .inspection-ignore-box {
    background: #009E73 !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.inspection-row[data-inspection-field="integrite"]:not(.inspection-row--disabled):not(.inspection-row--ignored)[data-note-tone="mid"] .inspection-ignore-box {
    background: #E69F00 !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.inspection-row[data-inspection-field="integrite"]:not(.inspection-row--disabled):not(.inspection-row--ignored)[data-note-tone="low"] .inspection-ignore-box {
    background: #D55E00 !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

/* Règle particulière Inspection : si ignoré, fond blanc */
.inspection-row[data-inspection-field="integrite"].inspection-row--ignored .inspection-ignore-box {
    background: #FFFFFF !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

/* Hors mode "Ignorer", le terme du ruban reste masqué */
.inspection-row[data-inspection-field="integrite"]:not(.inspection-row--ignored) .inspection-ignore-box {
    color: transparent !important;
}

.inspection-row[data-inspection-field="integrite"] .inspection-ignore-reset {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    justify-content: space-between;
    align-self: stretch;
}

.inspection-row[data-inspection-field="integrite"] .inspection-ignore-reset .inspection-reset-btn {
    order: 1;
}

.inspection-row[data-inspection-field="integrite"] .inspection-ignore-reset .inspection-info-small-btn {
    order: 3;
}

.inspection-row[data-inspection-field="integrite"] .inspection-ignore-reset .inspection-ignore-btn {
    order: 2;
}

.inspection-row[data-inspection-field="integrite"] .inspection-ignore-reset :is(
    .inspection-reset-btn,
    .inspection-info-small-btn,
    .inspection-ignore-btn
) {
    width: 100%;
    min-width: 0;
    height: 30px;
    min-height: 30px;
    padding: 0;
    line-height: 1;
}

/* Affinage petit écran : pile de boutons Intégrité moins massive en cards */
@media (max-width: 1024px) {
    .cards-grid .inspection-row[data-inspection-field="integrite"] .inspection-ignore-reset :is(
        .inspection-reset-btn,
        .inspection-info-small-btn,
        .inspection-ignore-btn
    ) {
        width: 100%;
        min-width: 0;
        height: 28px;
        min-height: 28px;
        padding: 0;
        line-height: 1;
    }
}

/* Conteneur dédié des actions de ligne (reset / ignorer) */
.row-action-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-left: 0;
    padding-left: 0;
    flex-shrink: 0;
}

:is(
    .inspection-row,
    .bio-row,
    .mech-row,
    .usage-row,
    .denat-row,
    .debit-row,
    .geo-row,
    .essence-row,
    .ancien-row,
    .traces-row,
    .provenance-row
) > .row-action-group {
    grid-area: reset;
    justify-self: end;
    align-self: start;
}

.row-action-group .btn-ignore,
.row-action-group .btn-reset {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    font-size: 0;
    overflow: hidden;
}

.row-action-group .btn-ignore svg,
.row-action-group .btn-reset svg {
    width: 16px;
    height: 16px;
    display: block;
}

.inspection-row[data-inspection-field="integrite"] .inspection-ignore-reset .btn-ignore svg,
.inspection-row[data-inspection-field="integrite"] .inspection-ignore-reset .btn-reset svg {
    width: 16px;
    height: 16px;
    display: block;
}

.inspection-row:not([data-inspection-field="integrite"]) > .row-action-group .btn-ignore,
.inspection-row:not([data-inspection-field="integrite"]) > .row-action-group .btn-reset {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
}

.cards-grid .inspection-row:not([data-inspection-field="integrite"]) > .row-action-group .btn-ignore,
.cards-grid .inspection-row:not([data-inspection-field="integrite"]) > .row-action-group .btn-reset {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
}

.cards-grid :is(
    .bio-row,
    .mech-row,
    .usage-row,
    .denat-row,
    .debit-row,
    .geo-row,
    .essence-row,
    .ancien-row,
    .traces-row,
    .provenance-row
) > .row-action-group .btn-ignore,
.cards-grid :is(
    .bio-row,
    .mech-row,
    .usage-row,
    .denat-row,
    .debit-row,
    .geo-row,
    .essence-row,
    .ancien-row,
    .traces-row,
    .provenance-row
) > .row-action-group .btn-reset {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Radar Chart Legend --- */
.radar-legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 18px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.radar-legend-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #222;
  font-weight: 400;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  background: none;
  transition: background 0.2s;
}
.radar-legend-item.weakest {
  font-weight: 700;
  color: #e74c3c;
  background: rgba(231,76,60,0.08);
}
.radar-legend-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 4px;
  box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px #ddd;
}

/* ============================================================
   Mesures multiples
   ============================================================ */

.lot-group--mesures-multiples {
    padding-top: 8px;
    padding-bottom: 6px;
}

.lot-group--collapsible--mesures {
    margin-top: 10px;
}

.lot-group--collapsible--mesures .lot-group--collapsible-body {
    padding: 10px 4px 4px;
}

.btn-mesures-multiples {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    padding: 4px 10px;
    border-radius: 6px;
    background: transparent;
    border: 1.5px solid var(--color-border, #aaa);
    cursor: pointer;
    color: inherit;
    transition: border-color 0.15s, background 0.15s;
}

.btn-mesures-multiples:hover {
    border-color: var(--color-primary, #4a7c59);
    background: var(--color-primary-faint, rgba(74, 124, 89, 0.06));
}

.btn-mesures-multiples[data-mesures-actif="true"] {
    border-color: var(--color-primary, #4a7c59);
    color: var(--color-primary, #4a7c59);
    font-weight: 600;
}

.badge-mesures {
    display: inline-block;
    background: var(--color-primary, #4a7c59);
    color: #fff;
    border-radius: 10px;
    font-size: 0.75rem;
    padding: 1px 7px;
    font-weight: 600;
    line-height: 1.4;
}

.badge-mesures--incomplete {
    background: #E69F00;
}

.mesures-multiples-resume {
    margin-top: 6px;
    font-size: 0.82rem;
    color: var(--color-text-muted, #666);
}

.mesures-resume-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.mesures-resume-field-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mesures-resume-pos-label {
    font-size: 0.78rem;
    font-weight: 600;
    min-width: 52px;
    flex-shrink: 0;
    color: var(--color-text-secondary, #888);
}

.mesures-resume-dims-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.mesures-resume-dim {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mesures-resume-dim-label {
    font-size: 0.78rem;
    color: var(--color-text-secondary, #888);
}

.mesures-resume-dim .lot-dimension-input-wrap {
    width: 62px;
}

.mesures-resume-dim .lot-input {
    font-size: 0.82rem;
    padding: 2px 26px 2px 6px;
    height: 26px;
    text-align: right;
}

.mesures-resume-empty {
    font-size: 0.82rem;
    opacity: 0.4;
}

.mesures-resume-volume {
    font-size: 0.8rem;
    font-style: italic;
    opacity: 0.75;
    margin-top: 4px;
}

.mesures-step-a,
.mesures-step-b {
    padding: 4px 0;
}

.mesures-step-desc {
    font-size: 0.9rem;
    opacity: 0.85;
    line-height: 1.4;
}

.mesures-step-note {
    font-size: 0.82rem;
    opacity: 0.6;
}

.mesures-section-bloc {
    border: 1px solid var(--color-border, #ddd);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--color-surface-alt, transparent);
}

.mesures-section-title {
    font-size: 0.88rem;
    margin-bottom: 8px;
    opacity: 0.9;
}

.mesures-section-type-toggle {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.mesures-type-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    cursor: pointer;
}

.mesures-dims-rect,
.mesures-dims-circ {
    margin-top: 6px;
}

/* ============================================================
   /Mesures multiples
   ============================================================ */

/* ============================================================
   Mesures inline widget
   ============================================================ */

.mesures-inline-widget {
    padding: 8px 4px 4px;
}

.mesures-accordion {
    margin-top: 10px;
    border: none;
    display: block;
}

.mesures-accordion.mesures-accordion--with-actions {
    margin-top: 0;
}

.mesures-accordion-shell.mesures-accordion-shell--with-actions {
    position: relative;
    --mesures-summary-height: 34px;
    margin-top: 10px;
}

.mesures-accordion > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--bleu-crai, #2563eb);
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    background-color: #F4F4F4;
    user-select: none;
    transition: background-color 0.15s;
}

.mesures-accordion-shell--with-actions > .mesures-accordion.mesures-accordion--with-actions > summary {
    border-radius: var(--radius-base);
    min-height: var(--mesures-summary-height);
    padding-right: 74px;
}

.mesures-accordion-title-text {
    flex: 1;
}

.mesures-accordion > summary:hover {
    background-color: #e6e8eb;
}

.mesures-accordion > summary::-webkit-details-marker {
    display: none;
}

.mesures-accordion-chevron {
    font-size: 0.7rem;
    color: var(--bleu-crai, #2563eb);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 4px 6px;
    margin: -4px -6px;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
}

.mesures-accordion.mesures-accordion--with-actions[open] > summary {
    border-radius: var(--radius-base) var(--radius-base) 0 0;
}

.mesures-accordion[open] > summary .mesures-accordion-chevron {
    transform: rotate(90deg);
}

.mesures-accordion-shell--with-actions > .mesures-accordion-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 3px;
    min-width: 48px;
    height: var(--mesures-summary-height);
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: transparent;
    position: absolute;
    top: calc(var(--mesures-summary-height) / 2);
    transform: translateY(-50%);
    right: 8px;
    z-index: 1;
}

.mesures-accordion-shell--with-actions > .mesures-accordion-actions {
    border-radius: 0;
}

.mesures-accordion.mesures-accordion--with-actions[open] > .mesures-inline-widget {
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius-base) var(--radius-base);
    padding: 10px 4px;
    background-color: #FFFFFF;
}

.mesures-accordion-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-faint, rgba(37, 99, 235, 0.1));
    color: var(--color-primary, #2563eb);
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 0 6px;
    min-width: 18px;
    height: 16px;
    letter-spacing: 0;
    text-transform: none;
}

.mesures-accordion-badge--incomplete {
    background: #E69F00;
    color: #fff;
}

.mesures-beam-container {
    position: relative;
    --beam-inset: 5%;
    padding: 0;
}

.mesures-arrow-row {
    position: relative;
    height: 1.5rem;
    margin-left: var(--beam-inset, 10%);
    margin-right: var(--beam-inset, 10%);
    margin-bottom: 4px;
}

.mesures-arrow {
    position: absolute;
    transform: translateX(-50%);
    background: none;
    border: none;
    padding: 1px 3px;
    font-size: 0.82rem;
    cursor: pointer;
    color: #9ca3af;
    transition: transform 0.15s, color 0.15s, opacity 0.15s;
    line-height: 1;
    border-radius: 3px;
}
.mesures-arrow[data-pos="extremite1"] { left: 0%;   }
.mesures-arrow[data-pos="quart1"]     { left: 25%;  }
.mesures-arrow[data-pos="milieu"]     { left: 50%;  }
.mesures-arrow[data-pos="quart3"]     { left: 75%;  }
.mesures-arrow[data-pos="extremite2"] { left: 100%; }

.mesures-arrow:hover:not(:disabled) {
    transform: translateX(-50%) scale(1.18);
}

.mesures-arrow--active {
    color: var(--color-primary, #2563eb);
}

.mesures-arrow--active[data-has-data="false"] {
    opacity: 0.55;
}

.mesures-arrow--active[data-has-data="true"] {
    opacity: 1;
}

.mesures-arrow:disabled {
    cursor: default;
    pointer-events: none;
}

.mesures-beam-bar {
    height: 30px;
    border-radius: 4px;
    border: 1px solid #808080;
    position: relative;
    overflow: hidden;
    background-color: #B3B3B3;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
    margin-left: var(--beam-inset, 10%);
    margin-right: var(--beam-inset, 10%);
}

.mesures-labels-row {
    position: relative;
    min-height: 1.8rem;
    margin-left: var(--beam-inset, 10%);
    margin-right: var(--beam-inset, 10%);
    margin-top: 5px;
}

.mesures-pos-label {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: #6b7280;
    text-align: center;
    transition: color 0.15s;
    white-space: nowrap;
}
.mesures-pos-label[data-pos="quart1"] { left: 25%;  }
.mesures-pos-label[data-pos="milieu"] { left: 50%;  }
.mesures-pos-label[data-pos="quart3"] { left: 75%;  }

.mesures-pos-label[data-active="true"] {
    color: var(--color-primary, #2563eb);
    font-weight: 500;
}

.mesures-fields-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mesures-field-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.mesures-field-label {
    width: 40px;
    flex-shrink: 0;
    font-size: 0.8rem;
    color: #374151;
    white-space: nowrap;
    margin-left: 4px;
}

.mesures-field-dims {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: nowrap;
}

.mesures-type-toggle-btn {
    font-size: 0.85rem;
    padding: 2px 7px;
    min-width: 20px;
    flex-shrink: 0;
    line-height: 1.2;
    margin-right: 4px;
    color: var(--color-text-muted, #9ca3af);
    border-color: var(--color-border, #d1d5db);
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.mesures-type-toggle-btn--active {
    color: var(--color-primary, #2563eb);
    border-color: var(--color-primary, #2563eb);
    background: var(--color-primary-faint, rgba(37, 99, 235, 0.07));
    font-weight: 600;
}

.mesures-pos-label--stale {
    color: #E69F00;
    font-weight: 600;
}

/* Inputs de position libres dans la barre des mesures */
.mesures-pos-input {
    position: absolute;
    transform: translateX(-50%);
    max-width: 48px;
    width: 48px;
    font-size: 0.78rem;
    text-align: center;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background-color: #E6E6E6;
    color: var(--color-text);
    min-width: 0;
    box-sizing: border-box;
}
.mesures-pos-input[data-pos-input="quart1"] { left: 25%; }
.mesures-pos-input[data-pos-input="milieu"] { left: 50%; }
.mesures-pos-input[data-pos-input="quart3"] { left: 75%; }
.mesures-pos-input:disabled {
    opacity: 0.4;
    pointer-events: none;
}
.mesures-pos-input--custom {
    border-color: var(--color-primary);
    font-weight: 500;
}
.mesures-pos-input--error {
    border-color: #ef4444;
    background: #fef2f2;
}

/* Indicateurs verticaux sur la barre (trait bleu Craï quand périmètre saisi) */
.mesures-beam-indicator {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: var(--bleu-crai, #1e3a8a);
    display: none;
    pointer-events: none;
    z-index: 1;
}
.mesures-beam-indicator[data-pos="extremite1"] { left: 0%; }
.mesures-beam-indicator[data-pos="quart1"]     { left: 25%; }
.mesures-beam-indicator[data-pos="milieu"]     { left: 50%; }
.mesures-beam-indicator[data-pos="quart3"]     { left: 75%; }
.mesures-beam-indicator[data-pos="extremite2"] { left: 100%; transform: translateX(-1px); }
.mesures-beam-indicator--visible { display: block; }

/* Libellé de section Positions des mesures */
.mesures-positions-section-label {
    display: block;
    margin-top: 6px;
    margin-bottom: 2px;
    font-size: 0.8rem;
    color: #374151;
    white-space: nowrap;
    text-align: center;
}

/* Libellé de section Périmètres */
.mesures-perimetre-section-label {
    display: block;
    margin-top: 6px;
    margin-bottom: 2px;
    font-size: 0.8rem;
    color: #374151;
    white-space: nowrap;
    text-align: center;
}

/* Ligne Périmètre de section */
.mesures-perimetre-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 6px;
    margin-bottom: 18px;
}
.mesures-perimetre-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.mesures-perimetre-cell[data-pos="extremite1"] { align-items: flex-start; }
.mesures-perimetre-cell[data-pos="extremite2"] { align-items: flex-end; }
.mesures-perimetre-input {
    width: 90%;
    font-size: 0.75rem;
    text-align: center;
    padding: 2px 2px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background-color: #E6E6E6;
    color: var(--color-text);
    min-width: 0;
    box-sizing: border-box;
}
.mesures-perimetre-input:disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Flèche avec position personnalisée */
.mesures-arrow--custom {
    color: var(--color-primary);
}
.mesures-arrow--custom::after {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-primary);
    margin: 1px auto 0;
}

.mesures-input--stale {
    background-color: rgba(230, 159, 0, 0.12);
    border-color: #E69F00 !important;
}

.mesures-accordion-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 0;
    padding: 0;
    background-color: var(--bleu-crai);
    border: none;
    border-radius: var(--radius-base);
    color: var(--blanc-pur);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s;
}

.mesures-accordion-reset-btn:hover {
    background-color: #162e72;
}

.mesures-accordion-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 0;
    padding: 0;
    background-color: var(--bleu-crai);
    border: none;
    border-radius: var(--radius-base);
    color: var(--blanc-pur, #fff);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s;
}

.mesures-accordion-info-btn:hover {
    background-color: #162e72;
}

.mesures-accordion-actions .mesures-accordion-reset-btn,
.mesures-accordion-actions .mesures-accordion-info-btn {
    margin-right: 0;
}

/* ============================================================
   /Mesures inline widget
   ============================================================ */