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

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

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

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

/* Nouvelle commande (ajoutée le matin) : carte jaune pour la faire ressortir.
   Placée avant « posée » : le vert d'une palette posée prime sur le jaune. */
.palette.palette-nouvelle .palette-corps {
    background-color: rgba(255, 193, 7, 0.22);
    border-color: #ffc107;
    color: #997404;
}

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

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