/* 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;
    --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);
}

.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;
}

/* Arrangement du quai : une colonne par traverse, resserrée sur mobile */
.colonne-traverse {
    width: 14rem;
}

@media (max-width: 575.98px) {
    .colonne-traverse {
        width: 11rem;
    }
}

/* 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 traverse : 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 traverse, 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;
}

.orientation-bas .camion-svg {
    transform: scaleY(-1);
}

.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;
}

.camion-svg {
    color: var(--lm-vert-fonce);
    display: block;
    margin: 0 auto;
}

/* Mise en place : case à cocher en coin de palette, état « posée » en vert */
.palette {
    position: relative;
}

.palette .palette-corps {
    width: 100%;
}

.palette-posee {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    z-index: 2;
    width: 1.4rem;
    height: 1.4rem;
    cursor: pointer;
}

.palette-posee:checked {
    background-color: var(--lm-vert);
    border-color: var(--lm-vert-fonce);
}

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

/* Progression de la traverse : barre + compteur, traverse 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-traverse.traverse-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);
}