:root {
    /* Pile système alignée sur FluentUI (tue le retour à Times). */
    --rcm-font: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system,
                "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;

    /* Palette des verdicts : fonds pleins sur texte blanc, ratios de contraste annotés (WCAG AA). */
    --rcm-verdict-conforme: #0E700E;   /* vert   — Conforme / Validé          (6,28:1) */
    --rcm-verdict-infraction: #BC2F32; /* rouge  — Infraction potentielle     (5,85:1) */
    --rcm-verdict-averifier: #A85B32;  /* orange — À vérifier                 (4,52:1) */
    --rcm-verdict-manuel: #8A5A00;     /* ambre  — Contrôle manuel            (4,71:1) */
    --rcm-verdict-neutre: #5A5F66;     /* gris   — Exclu / Hors plage / inactif (5,3:1) */
    --rcm-statut-attente: #8A5A00;     /* ambre  — En attente                        */

    --rcm-fond-page: #F7F9FB;

    --rcm-titre-page: 1.5rem;   /* 24px */
    --rcm-titre-section: 1.125rem; /* 18px */
}

html {
    font-family: var(--rcm-font);
}

body {
    font-family: var(--rcm-font);
    /* Sans ça, la marge UA (8px) laisse le document défiler de 16px et décale la coquille. */
    margin: 0;
}

/* FluentBodyContent rend une div `.body-content`, et non `.fluent-body-content`. */
.body-content {
    background: var(--rcm-fond-page);
}

/* Coquille fixe : SEULE la zone de contenu défile. La hauteur 100dvh est posée en style inline sur
   FluentLayout — la feuille FluentUI redéfinit `.layout` et gagnerait sur une règle externe. */

/* min-height:0 est indispensable pour qu'un enfant flex puisse défiler au lieu d'étirer la page. */
.rcm-corps {
    flex: 1 1 0;
    min-height: 0;
}

.rcm-corps > .body-content {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
}

@media (min-width: 769px) {
    /* Ne pas forcer height ici : en mobile la nav est en position:fixed, les deux se contrediraient. */
    .rcm-nav {
        height: 100%;
        overflow-y: auto;
        flex-shrink: 0;
    }
}

.rcm-chiffre {
    font-variant-numeric: tabular-nums;
}

/* FluentMessageBar se dimensionne en content-box : `width:100%` PUIS 2 × 12 px de padding, d'où un
   bandeau plus large que sa colonne. On ne fixe aucune largeur, on change la façon de compter. */
.fluent-messagebar {
    box-sizing: border-box;
}

/* Retiré de l'affichage sans être retiré de l'arbre d'accessibilité, ce que feraient `display:none`
   ou `visibility:hidden`. */
.rcm-hors-ecran {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

h1:focus {
    outline: none;
}

/* Badge d'état : couleur + icône + texte, jamais la couleur seule (WCAG 1.4.1). FluentBadge
   Appearance=Accent neutralise BackgroundColor et rendait tous les badges en bleu. */
.rcm-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px 2px 7px;
    border-radius: 11px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    color: #fff;
    background: var(--rcm-verdict-neutre);
    letter-spacing: 0.01em;
}

.rcm-badge svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

.rcm-badge--conforme { background: var(--rcm-verdict-conforme); }
.rcm-badge--infraction { background: var(--rcm-verdict-infraction); }
.rcm-badge--averifier { background: var(--rcm-verdict-averifier); }
.rcm-badge--manuel { background: var(--rcm-verdict-manuel); }
.rcm-badge--neutre { background: var(--rcm-verdict-neutre); }
.rcm-badge--attente { background: var(--rcm-statut-attente); }

/* Marqueur compact : contrairement à .rcm-badge, il n'impose PAS de couleur — l'appelant pose la
   sienne en ligne. */
.rcm-badge-statut {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    letter-spacing: 0.01em;
}


.rcm-badge-statut--barriere {
    padding: 1px 7px;
    border-radius: 9px;
    color: #fff;
    background: var(--rcm-verdict-neutre);
}
/* Une ligne de référentiel inactive reste de fait exclue du contrôle : elle doit se voir. */
.rcm-badge-statut--herite {
    margin-left: .4rem;
    padding: 1px 7px;
    border-radius: 9px;
    color: #fff;
    background: var(--rcm-verdict-averifier);
}

/* Hauteur bornée : capte la molette et fige l'en-tête, au lieu d'emporter toute la page. */
.rcm-grille-scroll {
    max-height: calc(100vh - 340px);
    min-height: 180px;
    /* max-width : sans lui, agrandir une colonne étire le wrapper au-delà de son parent et le tableau
       sort de la page, clippé sans aucun scroll possible. */
    max-width: 100%;
    /* align-self : filet contre le FluentStack vertical, dont `align-items:start` dimensionne chaque
       enfant sur son contenu — la grille se repliait alors à la largeur des libellés affichés. */
    align-self: stretch;
    overflow: auto;
    border: 1px solid var(--neutral-stroke-rest, #e0e0e0);
    border-radius: 4px;
}

/* MODIFICATEUR : se pose TOUJOURS en plus de `.rcm-grille-scroll`, dont elle n'ajuste que les
   hauteurs. Employée seule, elle laissait le wrapper déborder de son dialogue. */
.rcm-grille-scroll--court {
    max-height: 320px;
    min-height: 0;
}

/* Un <button> natif, jamais un lien : la plaque ne doit entrer dans aucune URL (§6 CLAUDE.md). */
.rcm-plaque-lien {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent-fill-rest, #0f6cbd);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rcm-plaque-lien:hover:not(:disabled) {
    text-decoration: underline;
}

.rcm-plaque-lien:focus-visible {
    outline: 2px solid var(--accent-fill-rest, #0f6cbd);
    outline-offset: 2px;
    border-radius: 3px;
}

.rcm-plaque-lien:disabled {
    color: var(--neutral-foreground-hint, #5a5a5a);
    cursor: default;
}

.rcm-plaque-lien code {
    color: inherit;
}

/* z-index : cette barre collante crée un contexte d'empilement, qui plafonne à SON niveau tout ce
   qu'elle contient — panneau de FluentSelect compris. En dessous de 5, l'en-tête figé de la grille
   se dessinait par-dessus et masquait l'option. */
.rcm-filtres-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--rcm-fond-page);
    padding-bottom: 0.5rem;
}

/* FluentCard se confine deux fois (`contain: content` ET `content-visibility: auto`) : le volet
   `paint` ROGNE les surcouches ouvertes depuis une carte, le volet `layout` en fait un contexte
   d'empilement. Aucun z-index ne corrige un rognage : il faut lever les DEUX déclarations. */
fluent-card {
    contain: style;
    content-visibility: visible;
}

/* Cible tactile des boutons d'action de grille : ≥ 32px (WCAG 2.5.8, P3-6). */
.rcm-actions-grille .fluent-button,
.rcm-actions-grille fluent-button {
    min-width: 32px;
    min-height: 32px;
}

/* `<select>` NATIF, jamais FluentSelect : ce dernier rend sa liste dans le document, où elle est
   rognée par la cellule de grille et par `.rcm-grille-scroll` — aucun z-index n'y peut rien. La
   liste d'un select natif est peinte par le navigateur hors du document. */
.rcm-select-ligne {
    width: 100%;
    max-width: 100%;
    min-height: 32px;
    padding: 4px 8px;
    font: inherit;
    color: inherit;
    background: var(--neutral-fill-input-rest, #fff);
    border: 1px solid var(--neutral-stroke-input-rest, #d1d1d1);
    border-radius: 4px;
}

.rcm-select-ligne:hover {
    border-color: var(--neutral-stroke-input-hover, #a0a0a0);
}

.rcm-select-ligne:focus-visible {
    outline: 2px solid var(--accent-fill-rest, #0f6cbd);
    outline-offset: 1px;
}

.rcm-titre-page {
    font-size: var(--rcm-titre-page);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Ne pas peindre un halo bleu sur le titre non interactif : il donnait l'illusion d'un champ. */
fluent-dialog [role="heading"]:focus,
fluent-dialog .fluent-dialog-header h1:focus,
fluent-dialog .fluent-dialog-header:focus {
    outline: none;
}

/* Pied de dialogue vide : FluentUI le rend quand même, avec ses 24 px de padding. `:not(:has(*))`
   et non `:empty`, le rendu Blazor y laissant des nœuds texte. La classe est répétée à dessein :
   sans ce doublon, `display:none` perdait la cascade face à la règle isolée de FluentUI. */
fluent-dialog .fluent-dialog-footer.fluent-dialog-footer:not(:has(*)) {
    display: none;
    padding: 0;
}

/* FluentUI pense la hauteur du toast en border-box, mais l'élément reste en content-box faute de
   reset global : les 24 px de padding s'ajoutaient au minimum. */
.fluent-toast {
    box-sizing: border-box;
}

.login-conteneur {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 1rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.login-label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.login-input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--neutral-stroke-rest, #ccc);
    border-radius: 4px;
    font-size: 0.95rem;
}

.login-bouton {
    margin-top: 1rem;
    padding: 0.6rem;
    background: var(--accent-fill-rest, #0f6cbd);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.95rem;
    cursor: pointer;
}

.login-bouton:hover {
    background: var(--accent-fill-hover, #115ea3);
}

/* Le second sélecteur habille un <button> de formulaire posté : un lien ne peut pas porter de jeton
   antiforgery. */
.login-lien,
.login-lien-bouton {
    font-size: 0.85rem;
    color: var(--accent-foreground-rest, #0f6cbd);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.login-lien:hover,
.login-lien-bouton:hover {
    text-decoration: underline;
}
.grille-compteurs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.carte-compteur {
    text-decoration: none;
    color: inherit;
    display: block;
}

.carte-compteur .carte-compteur-fond {
    border-left: 4px solid var(--accent, var(--accent-fill-rest));
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.carte-compteur:hover .carte-compteur-fond {
    box-shadow: var(--elevation-shadow-card-hover, 0 2px 8px rgba(0, 0, 0, 0.15));
    transform: translateY(-1px);
}

.carte-compteur:focus-visible {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
    border-radius: 6px;
}

.carte-compteur .carte-compteur-valeur {
    font-variant-numeric: tabular-nums;
}

/* Sous 768 px la navigation devient un tiroir superposé, ouvert par la case `#rcm-nav-toggle` :
   aucun JS, MainLayout étant rendu en SSR statique. */

.rcm-titre-app {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.rcm-nav-toggle {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.rcm-hamburger,
.rcm-nav-voile-label {
    display: none;
}

.rcm-titre-app-court {
    display: none;
}

@media (max-width: 768px) {
    .rcm-hamburger {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        padding: 4px;
    }

    .rcm-titre-app-long { display: none; }
    .rcm-titre-app-court { display: inline; }
    .rcm-user-nom { display: none; }

    /* overflow-y indispensable : en paysage, les entrées du menu Admin dépassent la hauteur du tiroir. */
    .rcm-nav {
        position: fixed;
        top: 52px;
        bottom: 0;
        left: 0;
        z-index: 1200;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(-105%);
        transition: transform 0.22s ease;
        background: var(--neutral-layer-1, #fff);
        box-shadow: 2px 0 14px rgba(0, 0, 0, 0.28);
    }

    /* Expander de FluentNavMenu masqué ici : replié, il réduit le menu à un rail de 40 px et son bouton
           disparaît avec le tiroir — donc sans moyen de revenir en arrière. */
    .rcm-nav .expander {
        display: none;
    }

    /* Les styles à neutraliser sont posés en inline par le JS de FluentNavMenu, d'où le !important. */
    .rcm-nav .fluent-nav-menu.collapsed {
        width: 250px !important;
        min-width: 250px !important;
    }

    .rcm-nav .fluent-nav-menu.collapsed .fluent-nav-text {
        display: block !important;
    }

    .rcm-nav-toggle:checked ~ * .rcm-nav {
        transform: translateX(0);
    }

    .rcm-nav-voile-label {
        display: none;
        position: fixed;
        inset: 52px 0 0 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 1100;
    }

    .rcm-nav-toggle:checked ~ * .rcm-nav-voile-label {
        display: block;
    }
}

@media (max-width: 768px) {
    .body-content > div {
        padding: 0.75rem !important;
    }

    .rcm-grille-scroll,
    .rcm-grille-scroll--court {
        max-height: 46vh;
    }
}

.rcm-etat-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--neutral-foreground-hint, #5a5a5a);
}

.rcm-etat-vide svg {
    width: 48px;
    height: 48px;
    opacity: 0.55;
}


/* Coquille : rail à gauche, section à droite. Elle remplace FluentTabs, qui rangeait derrière un
   compteur « +N » NON CLIQUABLE les entrées ne tenant pas dans sa largeur. Sous 900 px le rail cède
   la place à un sélecteur qui les liste toutes. */
.rcm-adm-coquille {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
    margin-top: 1rem;
}

/* Le rail suit le défilement : avec neuf cartes de réglages, revenir en haut pour changer de
   section était un aller-retour à chaque fois. */
.rcm-adm-rail {
    position: sticky;
    top: 0;
    padding-bottom: 1rem;
}

.rcm-adm-rail-groupe {
    margin: 0.9rem 0 0.35rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint, #5a5a5a);
}

.rcm-adm-rail-groupe:first-child {
    margin-top: 0;
}

.rcm-adm-rail-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.rcm-adm-rail-lien {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    border-left: 3px solid transparent;
    color: var(--neutral-foreground-rest, #242424);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.3;
    transition: background-color 0.12s ease;
}

/* `fill: currentColor` et non `color:` — FluentIcon peint son SVG en accent, et en style INLINE,
   que seul `!important` peut reprendre : sans elle, toutes les icônes du rail sortaient bleues. */
.rcm-adm-rail-lien svg,
.rcm-adm-rail-lien svg path {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: currentColor !important;
}

.rcm-adm-rail-lien:hover {
    background: var(--neutral-fill-secondary-hover, #f0f0f0);
}

/* Focus clavier visible : le seul fond de survol ne s'affiche pas au Tab (WCAG 2.4.7). */
.rcm-adm-rail-lien:focus-visible {
    outline: 2px solid var(--accent-fill-rest, #0f6cbd);
    outline-offset: 1px;
}

/* Section courante marquée par la couleur ET par la barre de gauche (WCAG 1.4.1). */
.rcm-adm-rail-lien--actif {
    background: var(--neutral-fill-secondary-rest, #f5f5f5);
    border-left-color: var(--accent-fill-rest, #0f6cbd);
    color: var(--accent-fill-rest, #0f6cbd);
    font-weight: 600;
}


.rcm-adm-selecteur {
    display: none;
}

/* `min-width: 0` est indispensable : sans lui, une grille large impose sa largeur naturelle à la
   piste et pousse la page en débordement horizontal. AUCUNE largeur maximale (CLAUDE.md,
   « Conventions UI durables »). */
.rcm-adm-contenu {
    min-width: 0;
}

@media (max-width: 900px) {
    .rcm-adm-coquille {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

    .rcm-adm-rail {
        display: none;
    }

    .rcm-adm-selecteur {
        display: block;
        margin-top: 0.75rem;
        max-width: 22rem;
    }
}

.rcm-adm-intro {
    margin: 1rem 0 0.25rem;
}

.rcm-adm-intro h5 {
    margin: 0;
    font-size: var(--rcm-titre-section);
    font-weight: 600;
    letter-spacing: -0.005em;
}

/* AUCUNE bride de largeur sur les textes d'écran (CLAUDE.md, « Conventions UI durables »). */
.rcm-adm-intro p {
    margin: 0.15rem 0 0;
    color: var(--neutral-foreground-hint, #5a5a5a);
    font-size: 0.85rem;
}

.rcm-adm-sections {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

/* Au-delà de 1650 px, les cartes se rangent en deux colonnes. GRILLE et non `columns` : une carte
   trop haute pour la fin d'une colonne y est FRAGMENTÉE, et `break-inside: avoid` ne l'empêche pas.
   `align-items: start` garde à chaque carte sa hauteur naturelle. Seuil mesuré et non choisi : plus
   bas, les champs en `minmax(200px, 1fr)` repassaient à un par ligne. */
@media (min-width: 1650px) {
    .rcm-adm-sections {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 1.25rem;
    }
}

/* Bulle d'aide (BulleAide) : seules la taille du déclencheur et la mise en forme de la bulle vivent
   ici, l'apparence venant de la bibliothèque. */
/* Le pictogramme vit DEHORS du <label> : posé dedans, la bulle s'y trouvait aussi et le DOM ne
   correspondait plus à ce que Blazor attendait. */
.rcm-adm-champ {
    position: relative;
}

.rcm-adm-aide {
    position: absolute;
    top: -2px;
    right: 0;
    line-height: 0;
}

/* Bouton nu : FluentButton ne convient pas ici, son shadow DOM avale l'infobulle. */
.rcm-adm-bulle {
    display: inline-flex;
    padding: 2px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--neutral-foreground-hint, #5a5a5a);
    cursor: help;
    line-height: 0;
}

.rcm-adm-bulle:hover {
    color: var(--accent-fill-rest, #0f6cbd);
}

/* Focus visible : le pictogramme est le seul contenu du bouton (WCAG 2.4.7). */
.rcm-adm-bulle:focus-visible {
    outline: 2px solid var(--accent-fill-rest, #0f6cbd);
    outline-offset: 1px;
    color: var(--accent-fill-rest, #0f6cbd);
}

.rcm-adm-bulle svg,
.rcm-adm-bulle svg path {
    width: 16px;
    height: 16px;
    fill: currentColor !important;
}

/* Ouverte au survol ET au focus clavier, sans aucun JavaScript — donc aucun nœud déplacé sous
   Blazor, ce qui est exactement ce qui faisait tomber le circuit avec FluentTooltip. */
.rcm-adm-bulle-texte {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    width: max-content;
    max-width: min(360px, 80vw);
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--neutral-stroke-rest, #e0e0e0);
    border-radius: 6px;
    background: var(--neutral-layer-1, #fff);
    box-shadow: 0 4px 14px rgb(0 0 0 / 14%);
    color: var(--neutral-foreground-rest, #242424);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
}

.rcm-adm-bulle:hover + .rcm-adm-bulle-texte,
.rcm-adm-bulle:focus-visible + .rcm-adm-bulle-texte,
.rcm-adm-aide:hover .rcm-adm-bulle-texte {
    display: block;
}

/* Variantes de placement : la bulle par défaut s'étend vers la gauche et vers le bas, et sortait
   du cadre d'un conteneur qui rogne. */
/* Déclencheur EN LIGNE. Sélecteur DOUBLÉ à dessein : AideRepliable partage `.rcm-adm-aide` et lui
   donne une marge basse plus loin dans cette feuille — à spécificité égale, l'ordre gagnait. */
.rcm-adm-aide.rcm-adm-aide--enligne {
    position: relative;
    top: auto;
    right: auto;
    display: inline-flex;
    margin: 0;
    vertical-align: middle;
}

/* La règle d'icône de titre d'un entête de section s'appliquait aussi à ce pictogramme. */
.rcm-adm-carte-entete .rcm-adm-bulle svg,
.rcm-adm-carte-entete .rcm-adm-bulle svg path {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: inherit;
}

/* Ancrée au bord GAUCHE : elle s'étend vers la droite, pour un déclencheur près d'un bord qui rogne. */
.rcm-adm-aide--droite .rcm-adm-bulle-texte {
    right: auto;
    left: 0;
}

.rcm-adm-aide--haut .rcm-adm-bulle-texte {
    top: auto;
    bottom: calc(100% + 6px);
}

.rcm-ligne-aide {
    display: flex;
    align-items: center;
    gap: .3rem;
}

/* Sous 760 px la bulle devient une FEUILLE fixée au bas de l'écran : aucun ancrage latéral ne
   convient à toutes les positions de déclencheur. Les sélecteurs des variantes sont repris pour
   battre leurs ancrages, plus spécifiques que la classe seule. */
@media (max-width: 760px) {
    .rcm-adm-bulle-texte,
    .rcm-adm-aide--droite .rcm-adm-bulle-texte,
    .rcm-adm-aide--haut .rcm-adm-bulle-texte {
        position: fixed;
        top: auto;
        right: 3vw;
        bottom: 12px;
        left: 3vw;
        z-index: 10000;
        width: auto;
        max-width: none;
    }
}

.rcm-cam-section {
    width: 100%;
    border-top: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    padding-top: .9rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.rcm-cam-fiche {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .4rem .9rem;
    margin: 0;
    padding: .7rem .9rem;
    border: 1px solid var(--neutral-stroke-rest, #e0e0e0);
    border-radius: 6px;
    background: var(--neutral-layer-2, #f7f7f7);
    font-size: .85rem;
}

.rcm-cam-fiche dt {
    color: var(--neutral-foreground-hint, #5a5a5a);
}

.rcm-cam-fiche dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Libellé posé À GAUCHE d'un champ : FluentUI le rend comme un FRÈRE du champ, d'où un décalage
   vertical. La règle couvre les deux conteneurs à libellés latéraux du projet et écrase sciemment
   l'alignement déclaré sur la pile, pour le SEUL libellé. */
.stack-horizontal > label.fluent-input-label,
.rcm-barre-filtres > label.fluent-input-label,
.rcm-filtre-groupe > label.fluent-input-label {
    align-self: center;
    /* La marge basse sert quand le libellé est AU-DESSUS du champ ; à gauche, elle décale le centre. */
    margin-bottom: 0;
}

/* Couple « libellé + champ » rendu INSÉCABLE : FluentUI émet le libellé comme un FRÈRE du champ,
   et dans une barre à `flex-wrap` le retour à la ligne pouvait tomber ENTRE les deux. */
.rcm-filtre-groupe {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    min-width: 0;
}

/* Aide détaillée repliable (AideRepliable) : repliée, elle laisse les champs au-dessus de la ligne
   de flottaison. */
.rcm-adm-aide {
    margin: 0 0 0.9rem;
}

/* `list-item` conservé : toute autre valeur d'affichage supprime le ::marker, donc le triangle qui
   dit si l'aide est ouverte — or ce repli n'a d'intérêt que s'il reste découvrable. */
.rcm-adm-aide-resume {
    display: list-item;
    list-style-position: inside;
    width: fit-content;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent-fill-rest, #0f6cbd);
    padding: 0.15rem 0.2rem 0.15rem 0;
    border-radius: 4px;
}

.rcm-adm-aide-resume:focus-visible {
    outline: 2px solid var(--accent-fill-rest, #0f6cbd);
    outline-offset: 2px;
}

.rcm-adm-aide-corps {
    margin-top: 0.35rem;
    padding-left: 0.85rem;
    border-left: 2px solid var(--neutral-stroke-rest, #e0e0e0);
}

.rcm-adm-aide-corps .rcm-adm-carte-desc:last-child {
    margin-bottom: 0;
}

.rcm-adm-carte {
    padding: 1.1rem 1.25rem 1.25rem;
}

.rcm-adm-carte-entete {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.15rem;
}

.rcm-adm-carte-entete svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: var(--accent-fill-rest, #0f6cbd);
}

.rcm-adm-carte-titre {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.rcm-adm-carte-desc {
    margin: 0.1rem 0 0.9rem;
    color: var(--neutral-foreground-hint, #5a5a5a);
    font-size: 0.82rem;
}

.rcm-adm-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.85rem 1rem;
    align-items: end;
}

.rcm-adm-champ {
    min-width: 0;
}

.rcm-adm-champ .fluent-text-field,
.rcm-adm-champ fluent-text-field,
.rcm-adm-champ .fluent-number-field,
.rcm-adm-champ fluent-number-field,
.rcm-adm-champ .fluent-time-picker,
.rcm-adm-champ fluent-time-picker {
    width: 100%;
}

.rcm-adm-champ--large {
    grid-column: 1 / -1;
}

.rcm-adm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.25rem;
}

/* Réellement collante : les réglages s'enregistrent d'un seul geste et le bouton vivait sous neuf
   cartes. Le fond opaque est nécessaire, le contenu défilant dessous. */
.rcm-adm-actions--collante {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: 0.25rem;
    padding: 0.7rem 0;
    background: var(--rcm-fond-page);
    border-top: 1px solid var(--neutral-stroke-rest, #e0e0e0);
}

.rcm-adm-barre {
    padding: 0.9rem 1rem;
}

/* Le nom historique `-purge-` est conservé pour ne pas retoucher un balisage existant ; l'alias
   `-compteurs-` dit ce que la grille est réellement. */
.rcm-adm-purge-grille,
.rcm-adm-compteurs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.75rem 1rem;
    margin-top: 0.75rem;
}

.rcm-adm-purge-item,
.rcm-adm-compteur {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--neutral-stroke-rest, #e0e0e0);
    border-radius: 6px;
    background: var(--neutral-layer-1, #fff);
}

.rcm-adm-purge-item .rcm-adm-purge-valeur,
.rcm-adm-compteur .rcm-adm-compteur-valeur {
    font-size: 1.4rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.rcm-adm-purge-item .rcm-adm-purge-libelle,
.rcm-adm-compteur .rcm-adm-compteur-libelle {
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint, #5a5a5a);
}

/* FluentInputFile empile un <input type="file"> transparent SOUS un calque de contenu en
   `z-index: 991`, qui recevait le clic : le sélecteur de fichier ne s'ouvrait jamais. Le contenu
   étant purement illustratif, on le rend transparent aux clics. */
.fluent-inputfile-container .inputfile-content {
    pointer-events: none;
}

.rcm-adm-depot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--neutral-foreground-rest, #242424);
}

.rcm-adm-depot svg {
    width: 24px;
    height: 24px;
    color: var(--accent-fill-rest, #0f6cbd);
}

/* Couleur du texte courant : le gris atténué passait sous le seuil de contraste sur ce fond teinté. */
.rcm-adm-depot-note {
    font-size: 0.8rem;
    color: var(--neutral-foreground-rest, #242424);
}

/* Saisie des traductions : le texte source reste visible pendant la saisie — c'est lui qui rattache
   la traduction à la bonne consigne. */
.rcm-adm-traductions {
    margin-top: 0.9rem;
}

.rcm-adm-traductions-titre {
    margin: 0 0 0.15rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.rcm-adm-traduction {
    padding: 0.7rem 0.85rem 0.85rem;
    margin-top: 0.7rem;
    border: 1px solid var(--neutral-stroke-rest, #e0e0e0);
    border-radius: 6px;
    background: var(--neutral-layer-1, #fff);
}

.rcm-adm-traduction-source {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-bottom: 0.6rem;
}

/* Marque « (restauree) » : elle explique pourquoi une consigne montree comme ecartee demande une
   traduction. */
.rcm-adm-traduction-restauree {
    margin-left: 0.35rem;
    color: var(--accent-fill-rest, #0f6cbd);
    text-transform: none;
    letter-spacing: 0;
}

.rcm-adm-traduction-repere {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint, #5a5a5a);
    font-variant-numeric: tabular-nums;
}

.rcm-adm-traduction-texte {
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--neutral-foreground-rest, #242424);
}

.rcm-adm-provenance {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    white-space: nowrap;
}

.rcm-adm-provenance svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

/* Consigne ÉCARTÉE par le dédoublonnage : fond ambré plutôt que gris — le gris se lit
   « désactivé », l'ambre se lit « à regarder ». */
.rcm-adm-consigne-ecartee {
    background: var(--rcm-ecartee-fond, rgba(255, 185, 0, 0.09));
}

/* Troncature d'une CELLULE de grille, et non une bride de largeur sur du texte d'écran. */
.rcm-adm-chaine {
    color: var(--neutral-foreground-hint, #5a5a5a);
    font-size: 0.85em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pastille de couleur d'un tracé : même teinte que sa polyligne, seul repère commun entre la liste
   des tracés, la carte des caméras et la page du chauffeur. */
.rcm-adm-pastille-trace {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 0.5rem;
    vertical-align: middle;
    flex: none;
}

.rcm-adm-fil {
    margin-bottom: 0.8rem;
}

.rcm-adm-diagnostic {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

/* Ligne glissée et ligne visée : seul repère de ce que l'on tient et de l'endroit où cela va
   tomber, la zone de dépôt étant la cellule « Ordre ». `:hover` ne peut pas les remplacer, les
   navigateurs ne le mettant pas à jour pendant un glisser-déposer HTML5. */
.rcm-adm-ligne-glissee {
    opacity: 0.55;
}

.rcm-adm-ligne-cible {
    box-shadow: inset 0 2px 0 0 var(--accent-fill-rest);
    background: var(--neutral-fill-secondary-hover);
}

.rcm-adm-ordre {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    width: 100%;
    min-height: 26px;
}

.rcm-adm-poignee {
    display: inline-flex;
    align-items: center;
    cursor: grab;
    padding: 0 0.15rem;
    color: var(--neutral-foreground-hint);
}

.rcm-adm-poignee:active {
    cursor: grabbing;
}

.rcm-adm-poignee svg {
    width: 18px;
    height: 18px;
}

/* Départ et arrivée : le rang est FIXE, et on le dit — une cellule vide se lirait « ligne oubliée ». */
.rcm-adm-ordre-fixe {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

.rcm-adm-ordre-fixe svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

.rcm-adm-abscisse-deplacee {
    color: var(--accent-foreground-rest);
    font-weight: 600;
}

/* Hauteur FIXE : un conteneur Leaflet sans hauteur se rend à 0 px. Ce n'est pas une bride de
   largeur au sens des conventions UI. */
.rcm-adm-apercu-carte {
    height: 420px;
    width: 100%;
    margin: 0.3rem 0 0.9rem;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    overflow: hidden;
}

/* Leaflet applique déjà sa position absolue : on ne neutralise que le fond et la bordure. */
.rcm-apercu-marqueur {
    background: transparent;
    border: 0;
}

/* Le numéro est celui de la colonne « N° » : seul lien entre un virage sur la carte et sa ligne. */
.rcm-apercu-pastille {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rcm-apercu-servie, #0f6cbd);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Teintes écrites ici plutôt que reprises de css/carte.css, qui n'est chargé que par l'écran de
   cartographie : les référencer donnerait l'illusion d'un partage qui n'existe pas. */
.rcm-apercu-pastille--extremite {
    background: #2e7d32;
}

.rcm-apercu-pastille--ecartee {
    background: #9e9e9e;
    border-style: dashed;
    opacity: 0.85;
}

.rcm-apercu-popup {
    font-size: 0.85rem;
    line-height: 1.45;
}

.rcm-apercu-popup-titre {
    font-weight: 600;
}

.rcm-apercu-popup-note {
    color: #6b5200;
}

/* Une BulleAide a été essayée ici et retirée : son déclencheur est positionné en absolu, il sortait
   de la cellule et `overflow:hidden` le coupait. Le `title` d'un élément NATIF, lui, s'affiche. */
.rcm-adm-garder {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}


.rcm-barre-outils {
    padding: 0.9rem 1rem 1rem;
}

.rcm-barre-filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 0.85rem;
}

.rcm-barre-filtres .fluent-search,
.rcm-barre-filtres fluent-search,
.rcm-barre-filtres .fluent-select,
.rcm-barre-filtres fluent-select,
.rcm-barre-filtres .fluent-date-picker,
.rcm-barre-filtres fluent-date-picker {
    min-width: 160px;
}

.rcm-grille-entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.rcm-compteur {
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint, #5a5a5a);
}

/* Alignement en bas : le sélecteur porte son libellé AU-DESSUS du champ, un centrage décalerait le
   paginateur. */
/* width:100% indispensable : dans un FluentStack vertical sans « Stretch », la barre restait en
   fit-content et tout se tassait à gauche. */
.rcm-pagination-barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
}

.rcm-taille-page {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.rcm-taille-page-libelle {
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint, #5a5a5a);
}

.rcm-pagination-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.rcm-compteur strong {
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-rest, #242424);
    font-weight: 600;
}

.rcm-coord-vide {
    color: var(--neutral-foreground-hint, #9a9a9a);
}

/* `contain` et non `cover` : une preuve ne se recadre pas — `cover` rognait le haut et le bas d'un
   cliché 16:9, soit exactement la plaque ou le gabarit. */
.rcm-vignette-preuve {
    width: 84px;
    height: 48px;
    object-fit: contain;
    border-radius: 4px;
    background: var(--neutral-fill-rest, #f0f0f0);
    display: block;
}

/* Écran barrière : lu à plusieurs mètres, fond plein, et le libellé TOUJOURS doublé d'une icône et
   d'un texte — la couleur ne porte jamais seule l'information (WCAG 1.4.1). */
:root {
    --rcm-feu-passe: var(--rcm-verdict-conforme);     /* vert   — passage autorisé      (6,28:1) */
    --rcm-feu-controle: var(--rcm-verdict-averifier); /* orange — contrôle avant ouverture (4,52:1) */
    --rcm-feu-arret: var(--rcm-verdict-infraction);   /* rouge  — infraction, arrêt     (5,85:1) */
    --rcm-feu-attente: var(--rcm-verdict-neutre);     /* gris   — évaluation en cours   (5,30:1) */
    --rcm-feu-alerte: var(--rcm-verdict-averifier);   /* orange — écran non configuré   (4,52:1) */
    --rcm-feu-texte: #ffffff;
    --rcm-barriere-bandeau-fond: #1F2933;
}

.rcm-barriere-coquille {
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #ffffff;
}

.rcm-barriere-bandeau {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.75rem;
    height: 2.25rem;
    background: var(--rcm-barriere-bandeau-fond);
    color: #ffffff;
    font-size: 0.8rem;
}

.rcm-barriere-bandeau-titre {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rcm-barriere-bandeau-point {
    opacity: 0.85;
}

.rcm-barriere-bandeau-espace {
    flex: 1 1 auto;
}

.rcm-barriere-bandeau-user {
    opacity: 0.85;
}

.rcm-barriere-bandeau-lien {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0 0.4rem;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: #ffffff;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.rcm-barriere-bandeau-lien:hover {
    background: rgba(255, 255, 255, 0.14);
}

.rcm-barriere-contenu {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Panneau principal, volontairement compact : il ne porte que quatre informations et laissait la
   file à quatre ou cinq lignes, alors que l'agent y cherche un camion passé il y a vingt minutes. */
.rcm-barriere-principal {
    flex: 2 1 0;
    min-height: 0;
    display: flex;
}

.rcm-barriere-panneau {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    width: 100%;
    padding: 0.5rem 1rem;
    border: none;
    color: var(--rcm-feu-texte);
    font: inherit;
    text-align: center;
    background: var(--rcm-feu-attente);
    /* Filet : rien ne doit déborder sur la file, même avec une plaque étrangère très longue. */
    overflow: hidden;
}

button.rcm-barriere-panneau {
    cursor: pointer;
}

button.rcm-barriere-panneau:focus-visible {
    outline: 4px solid #ffffff;
    outline-offset: -8px;
}

.rcm-barriere-panneau--passe { background: var(--rcm-feu-passe); }
.rcm-barriere-panneau--controle { background: var(--rcm-feu-controle); }
.rcm-barriere-panneau--arret { background: var(--rcm-feu-arret); }
.rcm-barriere-panneau--attente { background: var(--rcm-feu-attente); }
.rcm-barriere-panneau--neutre { background: var(--rcm-feu-attente); }

/* FluentIcon pose la largeur en STYLE INLINE : seul !important peut la remettre à l'échelle. */
.rcm-barriere-icone svg {
    width: clamp(1.75rem, 4vw, 3.25rem) !important;
    height: auto;
}

.rcm-barriere-plaque {
    font-family: ui-monospace, "Cascadia Mono", "Consolas", "Menlo", monospace;
    font-size: clamp(2.25rem, 9vw, 6rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
}

.rcm-barriere-heure {
    font-size: clamp(1.1rem, 2.6vw, 2rem);
    font-weight: 600;
    line-height: 1.1;
}

.rcm-barriere-libelle {
    font-size: clamp(1.4rem, 3.8vw, 3rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.05;
}

/* Deux lignes au plus : au-delà on tronque, plutôt que de repousser « Voir le détail » hors du
   panneau. */
.rcm-barriere-sous-libelle {
    font-size: clamp(0.95rem, 1.8vw, 1.4rem);
    max-width: 48ch;
    /* `display: -webkit-box` désactive le `min-height: auto` des éléments flex : sans ce
           `flex-shrink: 0`, le bloc se réduisait à une bande où le texte bavait. */
    flex: 0 0 auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rcm-barriere-action {
    margin-top: 0.2rem;
    padding: 0.2rem 0.8rem;
    border: 2px solid currentColor;
    border-radius: 999px;
    font-size: clamp(0.8rem, 1.4vw, 1.05rem);
    font-weight: 600;
}

/* Rangée vide non dessinée : `:not(:has(*))` plutôt que `:empty`, Blazor laissant des nœuds texte. */
.rcm-barriere-conduite:not(:has(*)) {
    display: none;
}

.rcm-barriere-conduite {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.65rem 1rem;
    border-top: 1px solid var(--neutral-stroke-rest, #e0e0e0);
    background: var(--rcm-fond-page, #f7f7f7);
}

/* Délibérément DISCRET : il ne doit jamais se confondre avec les gestes qui commandent la barrière
   devant un camion à l'arrêt. La cible tactile reste confortable, l'écran se touchant au doigt. */
.rcm-barriere-ignorer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    min-height: 2.6rem;
    padding: 0 0.9rem;
    border: 1px solid var(--neutral-stroke-rest, #c8c8c8);
    border-radius: 8px;
    background: #ffffff;
    color: var(--neutral-foreground-hint, #5a5a5a);
    font: inherit;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

/* FluentIcon peint son SVG en accent par défaut : on force la couleur du bouton. */
.rcm-barriere-ignorer svg,
.rcm-barriere-ignorer svg path {
    fill: currentColor;
}

.rcm-barriere-ignorer:hover:not(:disabled) {
    border-color: var(--rcm-barriere-bandeau-fond);
    color: var(--rcm-barriere-bandeau-fond);
}

.rcm-barriere-ignorer:focus-visible {
    outline: 3px solid var(--rcm-barriere-bandeau-fond);
    outline-offset: 3px;
}

.rcm-barriere-ignorer:disabled {
    opacity: 0.45;
    cursor: default;
}

/* La légende dit le motif enregistré, visible au toucher là où le title ne s'affiche qu'à la souris. */
.rcm-barriere-ignorer-bloc {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    flex: 0 0 auto;
}

.rcm-barriere-pastille {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.1rem;
    padding: 0.25rem 0.9rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.92rem;
    line-height: 1.25;
}

.rcm-barriere-pastille svg,
.rcm-barriere-pastille svg path {
    fill: currentColor;
}

/* Verdict indisponible : la pastille prend la place des boutons — le geste n'a pas de dossier où
   s'archiver — et emprunte l'orange du feu. */
.rcm-barriere-pastille--alerte {
    font-weight: 700;
    color: var(--rcm-feu-controle);
    background: rgba(191, 122, 0, 0.10);
    border-color: rgba(191, 122, 0, 0.35);
}

.rcm-barriere-pastille--attente {
    font-weight: 700;
    color: var(--neutral-foreground-hint, #5a5a5a);
    background: rgba(90, 90, 90, 0.08);
    border-color: rgba(90, 90, 90, 0.30);
}

.rcm-barriere-pastille-titre {
    font-weight: 700;
    color: var(--rcm-barriere-bandeau-fond);
}

.rcm-barriere-file {
    flex: 3 1 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-top: 3px solid var(--rcm-barriere-bandeau-fond);
}

.rcm-barriere-ligne {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 3.25rem;
    padding: 0.35rem 1rem;
    border: none;
    border-bottom: 1px solid var(--neutral-stroke-rest, #e0e0e0);
    background: #ffffff;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rcm-barriere-ligne:hover {
    background: var(--rcm-fond-page);
}

.rcm-barriere-ligne:focus-visible {
    outline: 3px solid var(--rcm-barriere-bandeau-fond);
    outline-offset: -3px;
}

.rcm-barriere-ligne-heure {
    flex: 0 0 auto;
    width: 9ch;
    font-size: 1.35rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rcm-barriere-ligne-plaque {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, "Cascadia Mono", "Consolas", "Menlo", monospace;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rcm-barriere-ligne-etat {
    flex: 0 0 auto;
}

.rcm-barriere-file-vide {
    margin: 0;
    padding: 1rem;
    color: var(--neutral-foreground-hint, #5a5a5a);
}

.rcm-barriere-fraicheur {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.15rem 0.75rem;
    text-align: right;
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint, #5a5a5a);
}

.rcm-barriere-nonconfigure {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    text-align: center;
    background: var(--rcm-feu-alerte);
    color: var(--rcm-feu-texte);
    font-size: clamp(1.25rem, 3.5vw, 2.5rem);
    font-weight: 700;
}

.rcm-barriere-nonconfigure svg {
    width: clamp(2.5rem, 6vw, 5rem) !important;
    height: auto;
}

/* Responsivité : ne JAMAIS laisser le panneau écraser la file, qui est ce que l'agent parcourt. */

/* Écran peu haut : le panneau est plafonné en hauteur plutôt qu'en proportion, sinon la file se
       réduit à deux lignes. Tailles réduites ET icône retirée pour que le contenu TIENNE dans ce
       plafond, le panneau étant en `overflow: hidden`. */
@media (max-height: 950px) {
    .rcm-barriere-principal {
        flex: 0 0 auto;
        max-height: 42dvh;
    }

    .rcm-barriere-plaque {
        font-size: clamp(1.9rem, 7vw, 3.5rem);
    }

    .rcm-barriere-libelle {
        font-size: clamp(1.15rem, 3vw, 2rem);
    }

    .rcm-barriere-sous-libelle {
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }

    .rcm-barriere-icone {
        display: none;
    }
}

/* Écran étroit : l'heure et la pastille passent au-dessus de la plaque plutôt que de comprimer les
       trois colonnes jusqu'à l'illisible. */
@media (max-width: 640px) {
    .rcm-barriere-bandeau {
        gap: 0.4rem;
        padding: 0 0.4rem;
        font-size: 0.72rem;
    }

    .rcm-barriere-panneau {
        padding: 0.4rem 0.6rem;
    }

        .rcm-barriere-conduite {
        padding: 0.55rem 0.7rem;
    }

    .rcm-barriere-heure {
        font-size: clamp(0.95rem, 4vw, 1.4rem);
    }

    .rcm-barriere-ligne {
        flex-wrap: wrap;
        gap: 0.2rem 0.75rem;
        padding: 0.45rem 0.7rem;
    }

    .rcm-barriere-ligne-heure {
        font-size: 1.05rem;
    }

    .rcm-barriere-ligne-plaque {
        font-size: 1.2rem;
        /* Passe en pleine largeur sous l'heure : la plaque ne doit jamais être tronquée. */
        flex: 1 0 100%;
        order: 3;
    }

    .rcm-barriere-ligne-etat {
        margin-left: auto;
    }
}

/* Très petite hauteur : le sous-libellé disparaît, jamais le libellé principal ni « Voir le détail ». */
@media (max-height: 560px) {
    .rcm-barriere-principal {
        max-height: 38dvh;
    }

    .rcm-barriere-sous-libelle {
        display: none;
    }

    .rcm-barriere-conduite {
        padding: 0.4rem 1rem;
        gap: 0.35rem 0.9rem;
    }
}


/* Curseur d'ouverture, sauf sur la colonne d'actions dont les boutons ne naviguent pas. */
.rcm-grille-cliquable tbody tr {
    cursor: pointer;
}

.rcm-grille-cliquable tbody tr .rcm-actions-grille {
    cursor: default;
}



.rcm-fil-retour {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.rcm-fiche-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 2rem;
}

.rcm-fiche-plaque {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

.rcm-fiche-mesures {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
}

.rcm-fiche-mesure {
    display: flex;
    flex-direction: column;
}

/* Posé sous son libellé : sans plafond, une raison sociale longue étirait la carte entière et
   repoussait les compteurs voisins hors de vue. */
.rcm-fiche-mesure select {
    width: auto;
    min-width: 12rem;
    max-width: 18rem;
}

.rcm-fiche-mesure span:first-child {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint, #5a5a5a);
}

.rcm-fiche-mesure span:last-child {
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Mêmes gabarits qu'une étiquette FluentUI, pour que la barre garde son alignement une fois les
   sélecteurs de dates retirés. */
.rcm-periode-figee {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-bottom: 0.35rem;
}

.rcm-periode-figee-libelle {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint, #5a5a5a);
}

.rcm-periode-figee-valeur {
    font-size: 0.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}