/* Thème Leroy Merlin */

@font-face {
    font-family: 'LeroyMerlinSans';
    src: url("../fonts/LeroyMerlinSans-Web-Regular/LeroyMerlinSans-Web-Regular-iKQsL9k.woff2") format('woff2'),
         url("../fonts/LeroyMerlinSans-Web-Regular/LeroyMerlinSans-Web-Regular-FHRS3Pc.woff") format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LeroyMerlinSans';
    src: url("../fonts/LeroyMerlinSans-Web-SemiBold/LeroyMerlinSans-Web-SemiBold-GB4Q_dL.woff2") format('woff2'),
         url("../fonts/LeroyMerlinSans-Web-SemiBold/LeroyMerlinSans-Web-SemiBold-A4gMm0y.woff") format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    --lm-vert: #78be20;
    --lm-vert-fonce: #5e9619;
    /* Le camion est du décor : peint en vert, il concourait avec les états.
       Il passe en tôle neutre, et le vert ne dit plus que l'avancement. */
    --camion-tole: #66727e;
    --camion-vitre: #cfe0ee;
    --camion-caisse: #c3ccd4;
    --bs-font-sans-serif: 'LeroyMerlinSans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

body {
    font-family: var(--bs-font-sans-serif);
}

/* Boutons et liens principaux aux couleurs LM */
.btn-primary {
    --bs-btn-bg: var(--lm-vert);
    --bs-btn-border-color: var(--lm-vert);
    --bs-btn-hover-bg: var(--lm-vert-fonce);
    --bs-btn-hover-border-color: var(--lm-vert-fonce);
    --bs-btn-active-bg: var(--lm-vert-fonce);
    --bs-btn-active-border-color: var(--lm-vert-fonce);
}

.btn-outline-primary {
    --bs-btn-color: var(--lm-vert-fonce);
    --bs-btn-border-color: var(--lm-vert);
    --bs-btn-hover-bg: var(--lm-vert);
    --bs-btn-hover-border-color: var(--lm-vert);
    --bs-btn-active-bg: var(--lm-vert-fonce);
    --bs-btn-active-border-color: var(--lm-vert-fonce);
}

.navbar-lm {
    background-color: var(--lm-vert);
}

/* Instance de démo (APP_INSTANCE=demo) : bandeau bleu, pour ne pas la confondre avec la prod */
.navbar-lm.navbar-demo {
    background-color: #0d6efd;
}

.navbar-lm .navbar-brand,
.navbar-lm .nav-link {
    color: #fff;
    font-weight: 600;
}

.navbar-lm .nav-link.active,
.navbar-lm .nav-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* Peu d'entrées : on agrandit les liens du menu pour les rendre plus cliquables */
.navbar-lm .navbar-nav .nav-link {
    font-size: 1.15rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Bandeau : logo + titre à gauche. Le camion garde son aspect, rogné à droite si besoin. */
.navbar-lm .navbar-brand.brand-lm {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.navbar-lm .brand-camion {
    overflow: hidden;
}

.navbar-lm .brand-camion img {
    display: block;
}

/* Sur mobile : grille [logo | titre | menu]. La colonne du bouton menu est
   réservée (largeur auto) → il reste en haut à droite et ne redescend plus.
   Logo et titre se partagent le reste, le titre passant sur 2 lignes au besoin. */
@media (max-width: 767.98px) {
    .navbar-lm .container-fluid {
        display: grid;
        grid-template-columns: 1fr auto; /* brand | bouton menu */
        grid-template-areas:
            "brand toggler"
            "menu  menu";
        align-items: center;
        column-gap: 0.5rem;
        row-gap: 0.5rem;
    }

    .navbar-lm .navbar-toggler {
        grid-area: toggler;
    }

    .navbar-lm .navbar-collapse {
        grid-area: menu;
    }

    .navbar-lm .navbar-brand.brand-lm {
        grid-area: brand;
        display: grid;
        grid-template-columns: 25% 1fr; /* logo | titre — ajuster ce % à la largeur du camion voulue */
        gap: 0.5rem;
        min-width: 0;
        margin: 0;
    }

    .navbar-lm .brand-camion {
        max-width: 100%; /* remplit sa colonne, la remorque déborde et est rognée */
    }

    .navbar-lm .brand-titre {
        font-size: 0.95rem;
        line-height: 1.05;
        white-space: normal;
        min-width: 0;
    }

    /* Menu ⚙ : dans la barre repliée, Bootstrap ne le place plus avec Popper ;
       aligné sur le bouton centré, il sortait de l'écran par la gauche.
       On l'accroche au bord droit de la barre, juste en dessous. */
    .navbar-lm .dropdown {
        position: static;
    }

    .navbar-lm .dropdown-menu-end {
        right: 0.5rem;
    }
}

/* Utilisateurs sur mobile : une carte par compte au lieu d'un tableau trop large. */
@media (max-width: 767.98px) {
    .table-comptes thead {
        display: none;
    }

    .table-comptes tr {
        display: block;
        padding: 0.5rem 0;
        border-bottom: var(--bs-border-width) solid var(--bs-border-color);
    }

    .table-comptes td {
        display: block;
        padding: 0.25rem 0;
        border: 0;
    }

    .table-comptes td:first-child {
        font-weight: 600;
    }

    .table-comptes td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.8rem;
        color: var(--bs-secondary-color);
    }

    .table-comptes td.text-end {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: start !important;
    }

    .table-comptes td.text-end::before {
        display: inline;
    }
}

/* Mes Travées : barre d'onglets pour sauter de travée en travée */
.travee-nav {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: #fff;
}

.travee-nav .travee-onglet.active {
    color: #fff;
    background-color: var(--lm-vert-fonce);
    border-color: var(--lm-vert-fonce);
}

/* Une colonne par travée ; accrochage horizontal au défilement */
.colonne-travee {
    width: 14rem;
    scroll-snap-align: start;
}

@media (max-width: 575.98px) {
    .arrangement-quai {
        scroll-snap-type: x mandatory;
        scroll-padding-left: 0.5rem;
    }

    /* Une travée occupe l'écran, léger aperçu de la suivante = scroll possible */
    .colonne-travee {
        width: 85vw;
    }
}

/* Camion + ses palettes : empilés, l'orientation « camion en bas » inverse le bloc */
.camion-bloc {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Camions empilés sur une même travée : le suivant passe après le précédent */
.camion-bloc + .camion-bloc {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 3px dashed rgba(0, 0, 0, 0.2);
}

/* Orientation « camion en bas » : la travée, puis les commandes, puis le camion
   qui a reculé au quai (cul vers le haut, cabine vers le bas). */
.orientation-bas .camion-bloc {
    flex-direction: column-reverse;
}

.camion-palettes {
    display: flex;
    flex-direction: column;
}

/* Le camion étant retourné, la première palette à charger reste au plus près
   de ses portes : l'ordre de chargement s'inverse avec lui. */
.orientation-bas .camion-palettes {
    flex-direction: column-reverse;
}

/* Le camion vu de dessus, d'un seul tenant : capot, cabine et remorque se
   touchent, sans jour entre eux, sinon on ne lit plus un camion. Le conteneur
   sert de repère aux pièces qui débordent — rétroviseurs et roues. */
.camion-vehicule {
    position: relative;
    display: flex;
    flex-direction: column;
}

.orientation-bas .camion-vehicule {
    flex-direction: column-reverse;
}

/* L'avant du camion. Le tracé s'étire en largeur mais garde sa hauteur : le
   décor ne prend jamais plus de place qu'on ne lui en donne ici. */
.camion-capot {
    display: block;
    width: 100%;
    height: 1.6rem;
}

.camion-capot-tole {
    fill: var(--camion-tole);
}

.camion-capot-pare-brise {
    fill: var(--camion-vitre);
}

/* Camion reculé au quai : l'avant bascule en bas, le capot avec. */
.orientation-bas .camion-capot {
    transform: rotate(180deg);
}

/* Les rétroviseurs dépassent à l'avant : c'est ce qui dit de quel côté le
   camion est tourné. Portés par le véhicule, la cabine ayant ses roues. */
.camion-vehicule::before,
.camion-vehicule::after {
    content: '';
    position: absolute;
    top: 1.15rem;
    /* Plus courts que le padding du corps de carte : ils dépassent sans aller
       toucher son bord, sinon les deux se lisent comme un trait qui traverse. */
    width: 0.35rem;
    height: 5px;
    border-radius: 1px;
    background-color: var(--camion-tole);
}

.camion-vehicule::before {
    left: -0.35rem;
}

.camion-vehicule::after {
    right: -0.35rem;
}

.orientation-bas .camion-vehicule::before,
.orientation-bas .camion-vehicule::after {
    top: auto;
    bottom: 1.15rem;
}

/* La cabine prolonge le capot : même tôle, pleine largeur. Elle porte qui
   conduit — on reconnaît le camion à son chauffeur, pas à un dessin — et
   l'essieu avant, qui déborde de chaque côté. */
.camion-cabine {
    position: relative;
    text-align: center;
    padding: 0.15rem 0.5rem 0.4rem;
    line-height: 1.25;
    background-color: var(--camion-tole);
    color: #fff;
}

.camion-cabine::before,
.camion-cabine::after {
    content: '';
    position: absolute;
    top: 0.1rem;
    width: 0.4rem;
    height: 1.35rem;
    border-radius: 0.2rem;
    background-color: #1a1a1a;
}

.camion-cabine::before {
    left: -0.4rem;
}

.camion-cabine::after {
    right: -0.4rem;
}

.camion-immatriculation {
    display: inline-block;
    margin-top: 0.15rem;
    padding: 0 0.3rem;
    border-radius: 0.2rem;
    background-color: #f8f9fa;
    color: #212529;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* La caisse blanche prolonge la cabine et grandit à mesure qu'on y monte des
   commandes. Elle porte l'essieu arrière et, tout en bas, ses portes ouvertes. */
.camion-remorque {
    position: relative;
    border: 3px solid var(--camion-caisse);
    border-top: none;
    border-radius: 0 0 0.35rem 0.35rem;
    padding: 0.35rem;
    min-height: 3rem;
    background-color: #fff;
}

.orientation-bas .camion-remorque {
    border-top: 3px solid var(--camion-caisse);
    border-bottom: none;
    border-radius: 0.35rem 0.35rem 0 0;
}

/* Essieu arrière : deux roues jumelées, la seconde posée par l'ombre — pas
   besoin d'un élément de plus dans la page. */
.camion-remorque::before,
.camion-remorque::after {
    content: '';
    position: absolute;
    bottom: 0.8rem;
    width: 0.4rem;
    height: 1.35rem;
    border-radius: 0.2rem;
    background-color: #1a1a1a;
    box-shadow: 0 -1.6rem 0 #1a1a1a;
}

.camion-remorque::before {
    left: -0.4rem;
}

.camion-remorque::after {
    right: -0.4rem;
}

.orientation-bas .camion-remorque::before,
.orientation-bas .camion-remorque::after {
    bottom: auto;
    top: 0.8rem;
    box-shadow: 0 1.6rem 0 #1a1a1a;
}

/* La frontière entre le camion et le quai : elle nomme ce qui commence en
   dessous, là où des portes dessinées mordaient sur la première commande. Elle
   s'efface quand il ne reste plus rien au sol — et le CSS le rejuge tout seul
   quand une tuile déménage dans la remorque. Écrite dans ce sens, un navigateur
   sans `:has()` la garde affichée plutôt que de la perdre. */
.camion-frontiere {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.15rem 0 0.1rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #adb5bd;
}

.camion-bloc:not(:has(.camion-palettes > .palette)) .camion-frontiere {
    display: none;
}

.camion-frontiere::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background-color: #dee2e6;
}

.camion-chargees {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Même règle que le sol : la remorque se retourne avec le camion, la première
   commande chargée reste au plus près des portes. */
.orientation-bas .camion-chargees {
    flex-direction: column-reverse;
}

.camion-chargees:empty::after {
    content: 'Camion vide';
    display: block;
    text-align: center;
    padding: 0.5rem 0;
    font-size: 0.8125rem;
    font-style: italic;
    color: #adb5bd;
}

/* Dans la remorque, la tuile se réduit à une pastille : le numéro et la forme de
   la commande suffisent à recompter ce qui est monté. Le reste (état, gestes,
   positions, badges) n'a plus d'objet — la commande a quitté le quai. Rien n'est
   retiré du DOM : c'est la même tuile qui reviendra au sol si on la ressort. */
.camion-chargees .palette .palette-pied,
.camion-chargees .palette .palette-corps .small,
.camion-chargees .palette .palette-corps .badge,
.camion-chargees .palette .palette-corps br {
    display: none;
}

/* La pastille tient sur une ligne : positions à gauche, numéro au milieu,
   composition à droite. L'ordre du DOM est celui de la tuile au sol, le flux
   d'écriture est rétabli ici par `order`. */
.camion-chargees .palette .palette-corps {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.15rem 0.4rem;
    border-radius: var(--bs-border-radius-sm, 0.25rem);
}

.camion-chargees .palette .palette-positions {
    order: 1;
    display: inline;
}

.camion-chargees .palette .palette-numero {
    order: 2;
}

.camion-chargees .palette .palette-conditionnement {
    order: 3;
    float: none;
    margin-left: auto;
}

/* Mise en place : pied de tuile soudé au corps de la carte palette —
   étiquette d'état (non cliquable) à gauche, bouton d'action à droite */
.palette {
    position: relative;
}

.palette .palette-corps {
    width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.palette .palette-pied {
    display: flex;
    align-items: stretch;
    margin-top: -1px;
}

.palette .palette-etat {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid;
    border-bottom-left-radius: var(--bs-border-radius-sm, 0.25rem);
}

.palette .palette-action {
    flex: 0 0 auto;
    margin-left: -1px;
    border-radius: 0 0 var(--bs-border-radius-sm, 0.25rem) 0;
}

/* Positions abrégées « C7 L1 » : au sol on lit déjà « Chargement 7 · Livraison 1 »
   sous le numéro, elles ne servent que dans la pastille du camion. */
.palette-positions {
    display: none;
    font-size: 0.75rem;
    color: #6c757d;
    white-space: nowrap;
}

/* Retour en arrière : discret et à gauche, à l'écart du geste principal, pour
   qu'on ne défasse pas son travail en visant « Chargé ». */
.palette .palette-undo {
    flex: 0 0 auto;
    margin-right: -1px;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    font-size: 1rem;
    border: 1px solid #adb5bd;
    border-radius: 0 0 0 var(--bs-border-radius-sm, 0.25rem);
    background-color: #fff;
    color: #6c757d;
}

.palette .palette-undo:hover,
.palette .palette-undo:focus-visible {
    background-color: #e9ecef;
    color: #212529;
}

/* Le pied commence alors par la flèche : l'étiquette perd son arrondi gauche. */
.palette .palette-undo + .palette-etat {
    border-bottom-left-radius: 0;
}

/* Bouton « Fait » : bleu d'action, distinct du vert LM qui signifie « en place » */
.btn-fait {
    --bs-btn-color: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0d6efd;
    --bs-btn-hover-border-color: #0d6efd;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a58ca;
}

/* Couleurs d'étiquette d'état : mêmes teintes que les fonds de carte par statut */
.etat-a-placer {
    background-color: #fff;
    border-color: #6c757d;
    color: #495057;
}

.etat-en-place {
    background-color: rgba(120, 190, 32, 0.18);
    border-color: var(--lm-vert);
    color: var(--lm-vert-fonce);
}

/* Chargé : le vert LM en plein, plus soutenu que le vert clair « en place » —
   la palette a quitté le quai. */
.etat-chargee {
    background-color: var(--lm-vert-fonce);
    border-color: var(--lm-vert-fonce);
    color: #fff;
}

.etat-chargee-texte {
    color: var(--lm-vert-fonce);
}

.etat-a-deplacer {
    background-color: rgba(255, 152, 0, 0.22);
    border-color: #fd7e14;
    color: #995c00;
}

.etat-a-retirer {
    background-color: rgba(220, 53, 69, 0.16);
    border-color: #dc3545;
    color: #a02834;
}

/* Fiche scan : même pied état + action, en plus grand */
.scan-pied {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.scan-etat {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    border: 1px solid;
    border-radius: var(--bs-border-radius, 0.375rem);
}

/* Même flèche de retour arrière que sur le quai, à la taille de la fiche scan. */
.scan-undo {
    flex: 0 0 auto;
    border: 1px solid #adb5bd;
    background-color: #fff;
    color: #6c757d;
}

.scan-undo:hover,
.scan-undo:focus-visible {
    background-color: #e9ecef;
    color: #212529;
}

/* Nouvelle commande (ajoutée le matin) : carte jaune pour la faire ressortir.
   Placée avant les statuts : leur couleur prime sur le jaune. */
.palette.palette-nouvelle .palette-corps {
    background-color: rgba(255, 193, 7, 0.22);
    border-color: #ffc107;
    color: #997404;
}

.palette.palette-en-place .palette-corps {
    background-color: rgba(120, 190, 32, 0.18);
    border-color: var(--lm-vert);
    color: var(--lm-vert-fonce);
}

/* Chargée dans le camion : même vert que « en place », mais saturé — on doit
   distinguer d'un coup d'œil ce qui est parti de ce qui attend encore. */
.palette.palette-chargee .palette-corps {
    background-color: rgba(94, 150, 25, 0.42);
    border-color: var(--lm-vert-fonce);
    color: #34540e;
}

/* À déplacer : l'import du matin a changé l'emplacement de la palette */
.palette.palette-a-deplacer .palette-corps {
    background-color: rgba(255, 152, 0, 0.22);
    border-color: #fd7e14;
    color: #995c00;
}

/* D'où vient la palette à déplacer → où elle doit aller. Sur le quai comme sur
   la fiche de scan : c'est la consigne d'action, elle prime sur le reste du
   pied de tuile. */
.palette-origine {
    display: inline-block;
    margin-top: 0.15rem;
    padding: 0.05rem 0.35rem;
    border: 1px solid #fd7e14;
    border-radius: 0.25rem;
    background-color: rgba(255, 152, 0, 0.3);
    color: #7a4a00;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.scan-origine .palette-origine {
    font-size: 1.35rem;
    padding: 0.2rem 0.7rem;
}

/* À retirer : la commande a disparu du fichier, la palette occupe encore le quai */
.palette.palette-a-retirer .palette-corps {
    background-color: rgba(220, 53, 69, 0.16);
    border-color: #dc3545;
    color: #a02834;
}

/* Palette de plus de 700 kg : bordure rouge d'alerte, visible sans ouvrir le détail */
.palette.palette-surchargee .palette-corps {
    border-color: #dc3545;
    box-shadow: inset 0 0 0 1px #dc3545;
}

/* Palette ciblée depuis un scan : surlignage bleu, prime sur le vert « posée » */
.palette.palette-surlignee .palette-corps {
    background-color: rgba(13, 110, 253, 0.18);
    border-color: #0d6efd;
    color: #0a58ca;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.35);
}

/* Progression de la travée : barre + compteur, travée complète en vert plein */
.progression {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.progression .progress {
    flex: 1;
    height: 0.5rem;
}

.progression .progress-bar {
    width: 0;
    background-color: var(--lm-vert);
}

.colonne-travee.travee-complete .card-header {
    background-color: rgba(120, 190, 32, 0.35);
}

.border-success {
    --bs-border-color: var(--lm-vert) !important;
    border-color: var(--lm-vert) !important;
}

.card .card-header {
    background-color: rgba(120, 190, 32, 0.12);
}

/* État du quai : une tuile par travée, tout l'entrepôt sur un écran. Une
   travée n'est large que de son camion — le reste serait du vide. */
.etat-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
    align-items: start;
    gap: 0.6rem;
}

.etat-travee {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.35rem;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.etat-travee-numero {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.etat-travee-compteur {
    color: #6c757d;
}

.etat-travee.travee-complete {
    background-color: rgba(120, 190, 32, 0.35);
    border-color: var(--lm-vert);
}

/* Un camion de la travée : le véhicule, puis ce qui attend encore au sol
   sous ses portes. Deux camions sur une travée s'empilent l'un sous l'autre. */
.etat-camion {
    display: block;
    width: 100%;
}

.etat-camion + .etat-camion {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 2px dashed rgba(0, 0, 0, 0.15);
}

/* Le camion de l'écran d'affichage n'est plus qu'un pictogramme : un nez, une
   caisse à peine plus large que les commandes qu'on y monte, ouverte en bas.
   Il doit dire « camion » en prenant le moins de pixels possible — le dessin
   détaillé est l'affaire de la page des travées. */
.etat-camion-vehicule {
    display: block;
    width: 1.7rem;
    margin: 0 auto;
}

.etat-camion-cabine {
    display: block;
    height: 0.6rem;
    border-radius: 0.35rem 0.35rem 0 0;
    background-color: var(--camion-tole);
}

/* La caisse : les commandes montées dedans, empilées dans l'ordre de
   chargement, la première au plus près des portes qui ferment le bas. */
.etat-camion-remorque {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.15rem;
    min-height: 0.9rem;
    border: 2px solid var(--camion-caisse);
    border-top: none;
    /* Portes ouvertes sur le quai : le bas de la caisse reste en pointillés. */
    border-bottom-style: dashed;
    border-radius: 0 0 0.25rem 0.25rem;
    background-color: #fff;
}

/* Ce qui reste sur le quai, sous le camion : une colonne, dans l'ordre de
   chargement — la prochaine à monter juste sous les portes. */
.etat-sol {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding-top: 0.3rem;
}

.etat-sol:empty {
    display: none;
}

/* Une pastille par palette : mêmes teintes que les états, en pleine saturation
   pour rester lisibles de loin */
.etat-pastille {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border: 1px solid;
    border-radius: 0.2rem;
    vertical-align: text-bottom;
}

/* Dans la tuile d'affichage, la pastille se serre : une travée chargée doit
   tenir dans la hauteur d'écran. */
.etat-camion .etat-pastille {
    width: 0.75rem;
    height: 0.75rem;
}

.etat-pastille.etat-en-place {
    background-color: var(--lm-vert);
    border-color: var(--lm-vert-fonce);
}

.etat-pastille.etat-chargee {
    background-color: var(--lm-vert-fonce);
    border-color: #34540e;
}

.etat-pastille.etat-a-deplacer {
    background-color: #fd7e14;
    border-color: #995c00;
}

.etat-pastille.etat-a-retirer {
    background-color: #dc3545;
    border-color: #a02834;
}

/* Aide de la page travées : une ligne par état, pastille alignée sur le texte */
.aide-etats li {
    margin-bottom: 0.15rem;
}

.aide-etats .etat-pastille {
    margin-right: 0.25rem;
}

/* Tableau des anomalies : la pastille d'état du tableur tenu à la main. */
.point-statut {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    flex: none;
}

.point-pas-traite { background-color: #dc3545; }
.point-en-cours { background-color: #fd7e14; }
.point-termine { background-color: #198754; }

/* Palette sous anomalie : un anneau rouge autour de la pastille, quel que soit
   son état — on la repère de loin sans perdre la couleur de son avancement. */
.etat-pastille.etat-pastille-anomalie {
    outline: 2px solid #dc3545;
    outline-offset: 1px;
}

/* Tuile anomalies : elle ne dessine pas de camion, mais doit garder de quoi
   écrire son libellé — deux colonnes de travée. */
.etat-anomalies {
    grid-column: span 2;
}

/* Tuile anomalies : neutre à vide, ambre si en cours, rouge si une anomalie attend d'être prise en main */
.etat-anomalies.anomalies-en-cours {
    background-color: rgba(255, 152, 0, 0.22);
    border-color: #fd7e14;
}

.etat-anomalies.anomalies-alerte {
    background-color: rgba(220, 53, 69, 0.16);
    border-color: #dc3545;
}

@media (max-width: 575.98px) {
    .etat-travee-numero {
        font-size: 1.5rem;
    }
}

/* Composition de la commande (« P3 L2 C1 ») : en haut à droite de la tuile,
   lue d'un coup d'œil sans lire le reste. Masquée tant que personne ne l'a
   décrite. */
.palette .palette-conditionnement {
    float: right;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #495057;
}

.palette .palette-conditionnement[hidden] {
    display: none;
}

/* Saisie du colisage : compteurs à gros boutons, utilisables avec des gants. */
.compteur-unite {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.compteur-unite:last-child {
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.compteur-unite .compteur-libelle {
    flex: 1 1 auto;
    line-height: 1.2;
}

.compteur-unite .compteur-bouton {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    line-height: 1;
}

.compteur-unite .compteur-valeur {
    flex: 0 0 2.5rem;
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
}