/* =====================================================================
   Styles communs : back-office (Bootstrap 5) et application hors ligne
   ===================================================================== */

:root {
    --couleur-marque: #1f3a5f;
    --couleur-marque-claire: #e8eef6;
    --couleur-accent: #e8a33d;

    /* menu latéral */
    --menu-largeur: 264px;
    --menu-largeur-replie: 76px;
    --menu-fond: #14263d;
    --menu-fond-2: #10203a;
    --menu-texte: rgba(255, 255, 255, .72);
    --menu-texte-faible: rgba(255, 255, 255, .42);
    --menu-survol: rgba(255, 255, 255, .06);
    --menu-actif: rgba(255, 255, 255, .11);
    --menu-bordure: rgba(255, 255, 255, .08);

    /* zone de contenu */
    --fond-app: #f4f6f9;
    --surface: #ffffff;
    --bordure: #e4e8ee;
    --texte: #1b2433;
    --texte-2: #5b6576;
    --texte-3: #8a93a3;
    --ombre-carte: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --rayon: 12px;

    /* données (graphiques) — palette validée, voir tableau_de_bord.php */
    --donnee-principale: #2f6db5;
    --etat-disponible: #1f8a5b;
    --etat-en-service: #2f6db5;
    --etat-maintenance: #c98a12;
    --etat-hors-service: #c2410c;

    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-primary: #2563b0;
    --bs-primary-rgb: 37, 99, 176;
    --bs-link-color: #2563b0;
    --bs-link-color-rgb: 37, 99, 176;
}

/* =====================================================================
   STRUCTURE GÉNÉRALE
   ===================================================================== */
.corps-app {
    background: var(--fond-app);
    color: var(--texte);
    font-size: .9rem;
    -webkit-font-smoothing: antialiased;
}

.btn-primary {
    --bs-btn-bg: #2563b0;
    --bs-btn-border-color: #2563b0;
    --bs-btn-hover-bg: #1d4f8f;
    --bs-btn-hover-border-color: #1d4f8f;
    --bs-btn-active-bg: #1a4680;
    --bs-btn-active-border-color: #1a4680;
}

.lien-evitement {
    position: fixed;
    top: .5rem;
    left: .5rem;
    z-index: 1100;
    background: #fff;
    padding: .5rem 1rem;
    border-radius: 8px;
}

.zone-principale {
    margin-left: var(--menu-largeur);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left .2s ease;
}

.contenu {
    flex: 1;
    padding: 1.75rem 2rem 2rem;
    max-width: 1600px;
    width: 100%;
}
.contenu:focus { outline: none; }

.pied-page {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 2rem;
    font-size: .78rem;
    color: var(--texte-3);
    border-top: 1px solid var(--bordure);
}

/* =====================================================================
   MENU LATÉRAL
   ===================================================================== */
.menu-lateral {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--menu-largeur);
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--menu-fond) 0%, var(--menu-fond-2) 100%);
    color: var(--menu-texte);
    z-index: 1040;
    transition: width .2s ease, transform .25s ease;
}

.menu-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1rem 1rem 1.1rem;
}

.menu-marque {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    color: #fff;
    text-decoration: none;
}
.menu-logo {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    color: #fff;
    background: linear-gradient(135deg, #3b7bd0 0%, #2556a0 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 176, .35), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.menu-marque-texte {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.menu-marque-nom {
    font-weight: 600;
    font-size: .92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.menu-marque-sous-titre {
    font-size: .72rem;
    color: var(--menu-texte-faible);
    white-space: nowrap;
}
.menu-fermer {
    border: 0;
    background: transparent;
    color: var(--menu-texte);
    font-size: 1.1rem;
    padding: .25rem;
}

/* --- sélecteur de point de vente --- */
.menu-pdv {
    padding: 0 .9rem .9rem;
    border-bottom: 1px solid var(--menu-bordure);
}
.menu-pdv-libelle {
    display: block;
    font-size: .66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--menu-texte-faible);
    margin: 0 0 .35rem .25rem;
}
.menu-pdv-champ {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--menu-bordure);
    border-radius: 9px;
    transition: border-color .15s, background .15s;
}
.menu-pdv-champ:hover,
.menu-pdv-champ:focus-within {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .18);
}
.menu-pdv-champ > .bi-shop {
    position: absolute;
    left: .7rem;
    color: var(--couleur-accent);
    pointer-events: none;
}
.menu-pdv-champ select {
    width: 100%;
    appearance: none;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: .84rem;
    font-weight: 500;
    padding: .5rem 2rem .5rem 2.1rem;
    cursor: pointer;
    text-overflow: ellipsis;
}
.menu-pdv-champ select:disabled { cursor: default; opacity: 1; }
.menu-pdv-champ select:focus { outline: none; }
.menu-pdv-champ option { color: var(--texte); }
.menu-pdv-fleche {
    position: absolute;
    right: .6rem;
    font-size: .8rem;
    color: var(--menu-texte-faible);
    pointer-events: none;
}

/* --- navigation --- */
.menu-navigation {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .75rem .75rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .15) transparent;
}
.menu-navigation::-webkit-scrollbar { width: 6px; }
.menu-navigation::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); border-radius: 3px; }

.menu-groupe + .menu-groupe { margin-top: .9rem; }

.menu-groupe-titre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 0;
    background: transparent;
    padding: .3rem .6rem .35rem;
    font-size: .66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--menu-texte-faible);
    border-radius: 6px;
}
.menu-groupe-titre:hover { color: var(--menu-texte); }
.menu-groupe-titre .bi {
    font-size: .7rem;
    transition: transform .2s ease;
}
.menu-groupe.ferme .menu-groupe-titre .bi { transform: rotate(-90deg); }
.menu-groupe.ferme .menu-liste { display: none; }

.menu-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-lien {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .52rem .65rem;
    margin: 1px 0;
    border-radius: 8px;
    color: var(--menu-texte);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.menu-lien:hover {
    background: var(--menu-survol);
    color: #fff;
}
.menu-lien:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .5);
    outline-offset: -2px;
}
.menu-lien.actif {
    background: var(--menu-actif);
    color: #fff;
}
.menu-lien.actif::before {
    content: "";
    position: absolute;
    left: -.75rem;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--couleur-accent);
}
.menu-lien.actif .menu-icone { color: var(--couleur-accent); }

.menu-icone {
    flex: 0 0 auto;
    width: 1.25rem;
    text-align: center;
    font-size: 1.05rem;
}
.menu-texte {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-badge {
    flex: 0 0 auto;
    min-width: 1.35rem;
    padding: .1rem .4rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.2rem;
    text-align: center;
}
.menu-badge-danger { background: #e5484d; color: #fff; }
.menu-badge-warning { background: var(--couleur-accent); color: #2a1a00; }
.menu-badge-secondary { background: rgba(255, 255, 255, .18); color: #fff; }

/* --- pied du menu --- */
.menu-pied {
    padding: .75rem;
    border-top: 1px solid var(--menu-bordure);
}
.menu-lien-hors-ligne { margin-bottom: .5rem; }

.menu-utilisateur {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    border: 0;
    background: rgba(255, 255, 255, .05);
    border-radius: 10px;
    padding: .55rem .6rem;
    color: #fff;
    text-align: left;
    transition: background .15s;
}
.menu-utilisateur:hover,
.menu-utilisateur[aria-expanded="true"] { background: rgba(255, 255, 255, .1); }

.avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .78rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #e8a33d 0%, #c97a1a 100%);
}
.menu-utilisateur-texte {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}
.menu-utilisateur-nom {
    font-size: .84rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.menu-utilisateur-email {
    font-size: .72rem;
    color: var(--menu-texte-faible);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.menu-utilisateur-plus { color: var(--menu-texte-faible); }

/* --- menu replié (ordinateur) --- */
@media (min-width: 992px) {
    .menu-replie .menu-lateral { width: var(--menu-largeur-replie); }
    .menu-replie .zone-principale { margin-left: var(--menu-largeur-replie); }

    .menu-replie .menu-entete { justify-content: center; padding: 1.1rem .5rem 1rem; }
    .menu-replie .menu-marque-texte,
    .menu-replie .menu-texte,
    .menu-replie .menu-utilisateur-texte,
    .menu-replie .menu-utilisateur-plus,
    .menu-replie .menu-pdv-libelle,
    .menu-replie .menu-pdv-fleche { display: none; }

    .menu-replie .menu-pdv { padding: 0 .75rem .9rem; }
    .menu-replie .menu-pdv-champ { justify-content: center; height: 38px; }
    .menu-replie .menu-pdv-champ select { position: absolute; inset: 0; opacity: 0; padding: 0; }
    .menu-replie .menu-pdv-champ > .bi-shop { position: static; }

    .menu-replie .menu-navigation { padding: .75rem .9rem 1rem; }
    .menu-replie .menu-groupe-titre { justify-content: center; padding: .3rem 0; }
    .menu-replie .menu-groupe-titre span { display: none; }
    .menu-replie .menu-groupe-titre .bi { display: none; }
    .menu-replie .menu-groupe-titre::before {
        content: "";
        display: block;
        width: 18px;
        height: 1px;
        background: var(--menu-bordure);
    }
    .menu-replie .menu-groupe.ferme .menu-liste { display: block; }

    .menu-replie .menu-lien { justify-content: center; padding: .6rem 0; }
    .menu-replie .menu-lien.actif::before { left: -.9rem; }
    .menu-replie .menu-icone { font-size: 1.15rem; }
    .menu-replie .menu-badge {
        position: absolute;
        top: 2px;
        right: 2px;
        min-width: 1rem;
        padding: 0 .25rem;
        font-size: .6rem;
        line-height: 1rem;
    }
    .menu-replie .menu-pied { padding: .75rem .9rem; }
    .menu-replie .menu-utilisateur { justify-content: center; padding: .5rem 0; background: transparent; }
}

.infobulle-menu {
    position: fixed;
    z-index: 1080;
    transform: translateY(-50%);
    background: #0b1626;
    color: #fff;
    font-size: .8rem;
    font-weight: 500;
    padding: .35rem .65rem;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    pointer-events: none;
    white-space: nowrap;
}

/* --- menu sur mobile / tablette --- */
.menu-voile { display: none; }

@media (max-width: 991.98px) {
    .menu-lateral {
        transform: translateX(-100%);
        box-shadow: none;
    }
    .menu-ouvert .menu-lateral {
        transform: translateX(0);
        box-shadow: 0 0 40px rgba(0, 0, 0, .35);
    }
    .menu-ouvert .menu-voile {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1030;
        background: rgba(11, 22, 38, .5);
        backdrop-filter: blur(2px);
    }
    .zone-principale { margin-left: 0; }
    .contenu { padding: 1.25rem 1rem 1.5rem; }
    .pied-page { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .menu-lateral, .zone-principale, .menu-groupe-titre .bi { transition: none; }
}

/* =====================================================================
   BARRE DU HAUT
   ===================================================================== */
.barre-haut {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 64px;
    padding: 0 2rem;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--bordure);
}
@media (max-width: 991.98px) {
    .barre-haut { padding: 0 1rem; }
}

.bouton-icone {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--bordure);
    border-radius: 9px;
    background: var(--surface);
    color: var(--texte-2);
    font-size: 1.05rem;
    transition: background .15s, color .15s;
}
.bouton-icone:hover { background: #f0f3f7; color: var(--texte); }

.barre-haut-titre {
    min-width: 0;
    line-height: 1.2;
}
.fil-ariane {
    font-size: .72rem;
    font-weight: 500;
    color: var(--texte-3);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.barre-haut-page {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--texte);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.barre-haut-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.pastille-pdv {
    align-items: center;
    gap: .35rem;
    padding: .3rem .65rem;
    border-radius: 999px;
    background: var(--couleur-marque-claire);
    color: var(--couleur-marque);
    font-size: .78rem;
    font-weight: 600;
}

/* =====================================================================
   COMPOSANTS DE PAGE
   ===================================================================== */
.entete-page {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.entete-page h1 {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0;
}
.entete-page-sous-titre {
    color: var(--texte-2);
    margin: .25rem 0 0;
}

.carte {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-carte);
}
.carte-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.25rem .25rem;
}
.carte-titre {
    font-size: .95rem;
    font-weight: 600;
    margin: 0;
}
.carte-sous-titre {
    font-size: .78rem;
    color: var(--texte-3);
    margin: .1rem 0 0;
}
.carte-corps { padding: 1rem 1.25rem 1.25rem; }
.carte-lien {
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.carte-lien:hover { text-decoration: underline; }

/* --- indicateurs (tuiles) --- */
.indicateur {
    height: 100%;
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.indicateur-haut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.indicateur-libelle {
    font-size: .8rem;
    font-weight: 500;
    color: var(--texte-2);
}
.indicateur-icone {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 1rem;
}
.indicateur-icone.bleu { background: #e8f0fb; color: #2563b0; }
.indicateur-icone.vert { background: #e6f4ed; color: #1f8a5b; }
.indicateur-icone.ambre { background: #fdf3e2; color: #a86d07; }
.indicateur-icone.rouge { background: #fdecea; color: #c0362c; }
.indicateur-icone.violet { background: #f0ebfb; color: #6b46c1; }

.indicateur-valeur {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.indicateur-valeur small {
    font-size: .8rem;
    font-weight: 500;
    color: var(--texte-3);
    margin-left: .25rem;
}
.indicateur-pied {
    font-size: .78rem;
    color: var(--texte-3);
}
.indicateur.alerte { border-color: #f3c4c0; background: linear-gradient(180deg, #fff 0%, #fff8f7 100%); }
.indicateur.alerte .indicateur-valeur { color: #c0362c; }

.variation {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    font-weight: 600;
}
.variation.hausse { color: #1f8a5b; }
.variation.baisse { color: #c0362c; }

/* --- actions rapides --- */
.actions-rapides {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.action-rapide {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .85rem;
    border-radius: 9px;
    border: 1px solid var(--bordure);
    background: var(--surface);
    color: var(--texte);
    font-size: .84rem;
    font-weight: 500;
    text-decoration: none;
    box-shadow: var(--ombre-carte);
    transition: border-color .15s, transform .15s;
}
.action-rapide:hover { border-color: #b9c6d8; color: var(--texte); transform: translateY(-1px); }
.action-rapide .bi { color: #2563b0; }
.action-rapide.principale { background: #2563b0; border-color: #2563b0; color: #fff; }
.action-rapide.principale .bi { color: #fff; }
.action-rapide.principale:hover { background: #1d4f8f; color: #fff; }

/* --- graphique en colonnes --- */
.graphique {
    position: relative;
}
.graphique svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
.graphique .grille { stroke: #edf0f4; stroke-width: 1; }
.graphique .axe-texte { fill: var(--texte-3); font-size: 11px; font-family: inherit; }
.graphique .colonne { fill: var(--donnee-principale); transition: opacity .15s; }
.graphique .colonne.aujourdhui { fill: #1d4f8f; }
.graphique .zone-survol { fill: transparent; cursor: default; outline: none; }
.graphique .zone-survol.survole { fill: rgba(37, 99, 176, .06); }
.graphique:has(.survole) .colonne { opacity: .55; }
.graphique .groupe-colonne:has(.survole) .colonne { opacity: 1; }

.infobulle-graphique {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    background: #0b1626;
    color: #fff;
    padding: .4rem .65rem;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(11, 22, 38, .25);
    white-space: nowrap;
}
.infobulle-graphique-titre { font-size: .72rem; color: rgba(255, 255, 255, .7); }
.infobulle-graphique-valeur { font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.chiffre-cle {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
}

/* --- barre d'état du parc --- */
.barre-etat {
    display: flex;
    gap: 2px;
    height: 12px;
    border-radius: 4px;
    overflow: hidden;
    background: #edf0f4;
}
.barre-etat span { display: block; height: 100%; min-width: 3px; }
.etat-disponible { background: var(--etat-disponible); }
.etat-en-service { background: var(--etat-en-service); }
.etat-maintenance { background: var(--etat-maintenance); }
.etat-hors-service { background: var(--etat-hors-service); }

.legende-etat {
    list-style: none;
    margin: 0;
    padding: 0;
}
.legende-etat li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 0;
    border-bottom: 1px solid #f0f2f5;
    font-size: .85rem;
}
.legende-etat li:last-child { border-bottom: 0; }
.legende-etat .pastille { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.legende-etat .valeur { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.legende-etat .part { width: 3.2rem; text-align: right; color: var(--texte-3); font-size: .78rem; font-variant-numeric: tabular-nums; }

/* --- listes et tableaux dans les cartes --- */
.liste-carte {
    list-style: none;
    margin: 0;
    padding: 0;
}
.liste-carte li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1.25rem;
    border-top: 1px solid #f0f2f5;
}
.liste-carte li:first-child { border-top: 0; }
.liste-carte-principal { flex: 1; min-width: 0; }
.liste-carte-titre {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.liste-carte-detail {
    font-size: .78rem;
    color: var(--texte-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.liste-carte-droite { text-align: right; flex: 0 0 auto; font-size: .82rem; }

.puce-date {
    flex: 0 0 auto;
    width: 44px;
    text-align: center;
    border-radius: 9px;
    background: #f0f3f7;
    padding: .25rem 0;
    line-height: 1.1;
}
.puce-date .jour { display: block; font-weight: 700; font-size: 1rem; }
.puce-date .mois { display: block; font-size: .65rem; text-transform: uppercase; color: var(--texte-3); letter-spacing: .04em; }
.puce-date.retard { background: #fdecea; color: #c0362c; }
.puce-date.retard .mois { color: #c0362c; }

.tableau-carte { margin: 0; font-size: .85rem; }
.tableau-carte > :not(caption) > * > * { padding: .65rem 1.25rem; border-color: #f0f2f5; }
.tableau-carte thead th {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texte-3);
    background: #fafbfc;
    border-bottom: 1px solid var(--bordure);
}
.tableau-carte tbody tr:last-child td { border-bottom: 0; }

.statut {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .18rem .55rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}
.statut::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.statut-gris { background: #f0f2f5; color: #5b6576; }
.statut-bleu { background: #e8f0fb; color: #1d4f8f; }
.statut-vert { background: #e6f4ed; color: #17663f; }
.statut-ambre { background: #fdf3e2; color: #8a5800; }
.statut-rouge { background: #fdecea; color: #a52a20; }

.etat-vide {
    text-align: center;
    padding: 2rem 1.25rem;
    color: var(--texte-3);
    font-size: .85rem;
}
.etat-vide .bi {
    display: block;
    font-size: 1.6rem;
    margin-bottom: .4rem;
    color: #c3cad5;
}

/* --- page « module en préparation » --- */
.module-bientot {
    max-width: 560px;
    margin: 3rem auto;
    text-align: center;
    padding: 2.5rem 2rem;
}
.module-bientot-icone {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    color: #2563b0;
    background: #e8f0fb;
}

/* =====================================================================
   CONNEXION
   ===================================================================== */
.page-connexion {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #14263d 0%, #2556a0 100%);
    padding: 1rem;
    font-family: var(--bs-body-font-family);
}
.carte-connexion {
    width: 100%;
    max-width: 400px;
    background: var(--bs-body-bg);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
}
.logo-connexion {
    width: 56px;
    height: 56px;
    margin: 0 auto .75rem;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    color: #fff;
    background: linear-gradient(135deg, #3b7bd0 0%, #2556a0 100%);
}

/* =====================================================================
   APPLICATION HORS LIGNE (public/hors-ligne)
   ===================================================================== */
.barre-app { background: var(--couleur-marque); }

.etat-reseau {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .15);
    color: #fff;
}
.etat-reseau::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #3ddc84;
}
.etat-reseau.hors-ligne::before { background: var(--couleur-accent); }
.ligne-en-attente { border-left: 3px solid var(--couleur-accent); }

.tourne {
    display: inline-block;
    animation: tourner 1s linear infinite;
}
@keyframes tourner {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .tourne { animation: none; }
}

/* avis réseau (en ligne / hors ligne) : en bas à gauche, pleine largeur sur téléphone */
.zone-toasts-reseau { left: 0; z-index: 1090; max-width: 100%; }
@media (min-width: 992px) {
    /* à côté du menu latéral, pas par-dessus */
    .corps-app .zone-toasts-reseau { left: var(--menu-largeur); }
    .menu-replie .corps-app .zone-toasts-reseau { left: var(--menu-largeur-replie); }
}
@media (max-width: 575.98px) {
    .zone-toasts-reseau { right: 0; }
    .zone-toasts-reseau .toast { width: 100%; }
}

#zone-messages {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    max-width: 360px;
}

/* =====================================================================
   MODULE PRODUITS : onglets, filtres, formulaires, documents à lignes
   ===================================================================== */
.onglets-module {
    display: flex;
    gap: .25rem;
    margin: -.5rem 0 1.5rem;
    padding-bottom: 1px;
    border-bottom: 1px solid var(--bordure);
    overflow-x: auto;
    scrollbar-width: none;
}
.onglets-module::-webkit-scrollbar { display: none; }
.onglet-module {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .65rem .85rem;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--texte-2);
    font-size: .86rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
}
.onglet-module:hover { color: var(--texte); border-bottom-color: #c9d2de; }
.onglet-module.actif { color: #2563b0; border-bottom-color: #2563b0; }
.onglet-module .bi { font-size: 1rem; }

/* --- barre de filtres --- */
.filtres {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .75rem;
    align-items: center;
}
.filtres .form-select, .filtres input[type="date"] { width: auto; min-width: 0; flex: 0 1 auto; }
.filtres .form-select, .filtres .form-control, .filtres .btn { font-size: .875rem; }
.filtres .form-select { padding-top: .45rem; padding-bottom: .45rem; }
.filtres-recherche {
    position: relative;
    flex: 1 1 220px;
}
.filtres-recherche .bi {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--texte-3);
    pointer-events: none;
}
.filtres-recherche .form-control { padding-left: 2.2rem; }

/* --- tableaux --- */
.lien-produit { color: var(--texte); font-weight: 600; text-decoration: none; }
.lien-produit:hover { color: #2563b0; text-decoration: underline; }
.ligne-cliquable { cursor: pointer; }
.ligne-active > td { background: #f5f8fd; }
.ligne-annulee > td { opacity: .55; }
.tableau-carte tfoot td { background: #fafbfc; border-top: 1px solid var(--bordure); }
.zone-defilante { max-height: 420px; overflow-y: auto; }
.zone-defilante thead th { position: sticky; top: 0; z-index: 1; }

/* --- fiche produit --- */
.vignette-produit {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    color: #2563b0;
    background: #e8f0fb;
}
.liste-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .55rem 1rem;
    margin: 0;
    padding: 1rem 1.25rem 1.25rem;
    font-size: .86rem;
}
.liste-details dt { color: var(--texte-3); font-weight: 500; }
.liste-details dd { margin: 0; }
.pastille-mouvement {
    flex: 0 0 auto;
    min-width: 48px;
    text-align: center;
    padding: .2rem .4rem;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pastille-mouvement.entree { background: #e6f4ed; color: #17663f; }
.pastille-mouvement.sortie { background: #fdecea; color: #a52a20; }

/* --- formulaires --- */
.barre-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: 1rem 0 0;
}
.formulaire-produit .barre-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0 -2rem -2rem;
    padding: .9rem 2rem;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--bordure);
}
@media (max-width: 991.98px) {
    .formulaire-produit .barre-actions { margin: 0 -1rem -1.5rem; padding: .9rem 1rem; }
}

.choix-mode { display: grid; gap: .5rem; }
.choix-mode-option, .choix-type-option {
    position: relative;
    display: block;
    padding: .75rem .9rem .75rem 2.4rem;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.choix-mode-option input, .choix-type-option input { position: absolute; left: .9rem; top: .95rem; }
.choix-mode-option:hover, .choix-type-option:hover { border-color: #b9c6d8; }
.choix-mode-option.choisi, .choix-type-option.choisi { border-color: #2563b0; background: #f5f8fd; }
.choix-mode-option.desactive { cursor: not-allowed; opacity: .7; }
.choix-mode-titre, .choix-type-titre { display: block; font-weight: 600; font-size: .88rem; }
.choix-mode-titre .bi { margin-right: .35rem; color: #2563b0; }
.choix-mode-texte, .choix-type-texte { display: block; font-size: .78rem; color: var(--texte-3); margin-top: .1rem; }

.choix-type { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .5rem; }
.choix-type-option { padding-left: 2.6rem; }
.choix-type-option > .bi {
    position: absolute;
    right: .9rem;
    top: .8rem;
    font-size: 1.1rem;
    color: var(--texte-3);
}
.choix-type-option.choisi > .bi { color: #2563b0; }

.info-produit {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    font-size: .85rem;
}
.resume-operation { background: #f5f8fd; border-color: #d6e2f3; }

.liste-unites {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: .35rem;
    max-height: 260px;
    overflow-y: auto;
    padding: .5rem;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    background: #fafbfc;
}
.liste-unites.compacte { max-height: 180px; }
.unite-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .5rem;
    border-radius: 7px;
    background: var(--surface);
    border: 1px solid transparent;
    font-size: .82rem;
    cursor: pointer;
}
.unite-option:hover { border-color: #c9d2de; }
.unite-option:has(input:checked) { border-color: #2563b0; background: #f5f8fd; }
.unite-option.prise { opacity: .4; cursor: not-allowed; }

/* --- documents à lignes (vente, transfert) --- */
.lignes-document { display: grid; gap: .6rem; }
.ligne-document {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px auto;
    grid-template-areas: "produit quantite suppr" "unites unites unites";
    gap: .6rem .75rem;
    align-items: start;
    padding: .75rem;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    background: #fff;
}
/* vente : le produit occupe toute la première ligne, les montants la seconde */
[data-formulaire-lignes="vente"] .ligne-document {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    grid-template-areas: "produit produit produit produit suppr" "quantite prix remise total ." "unites unites unites unites unites";
}
[data-formulaire-lignes="vente"][data-peut-remiser="0"] .ligne-document {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    grid-template-areas: "produit produit produit suppr" "quantite prix total ." "unites unites unites unites";
}
.ligne-document-produit { grid-area: produit; min-width: 0; }
.ligne-document-quantite { grid-area: quantite; }
.ligne-document-prix { grid-area: prix; }
.ligne-document-remise { grid-area: remise; }
.ligne-document-total { grid-area: total; }
.ligne-document-supprimer { grid-area: suppr; }
.ligne-document-unites { grid-area: unites; }
.ligne-document.en-erreur { border-color: #f3c4c0; background: #fffafa; }
.ligne-document-info { margin-top: .3rem; min-height: 1.2em; }
[data-formulaire-lignes="transfert"] .ligne-document-produit .form-select,
[data-formulaire-lignes="transfert"] .ligne-document-supprimer { margin-top: 1.55rem; }
/* produit suivi à l'unité : la zone quantité disparaît, les unités s'affichent sur la ligne de la quantité */
[data-formulaire-lignes="vente"] .ligne-document:has([data-zone-quantite][hidden]) {
    grid-template-areas: "produit produit produit produit suppr" "unites prix remise total ." "unites unites unites unites unites";
}
[data-formulaire-lignes="vente"][data-peut-remiser="0"] .ligne-document:has([data-zone-quantite][hidden]) {
    grid-template-areas: "produit produit produit suppr" "unites prix total ." "unites unites unites unites";
}
.ligne-document [hidden] { display: none !important; }
@media (max-width: 767.98px) {
    .ligne-document,
    [data-formulaire-lignes="vente"] .ligne-document,
    [data-formulaire-lignes="vente"][data-peut-remiser="0"] .ligne-document {
        grid-template-columns: 1fr 1fr auto;
        grid-template-areas: "produit produit suppr" "quantite prix ." "remise total ." "unites unites unites";
    }
    [data-formulaire-lignes="vente"] .ligne-document:has([data-zone-quantite][hidden]),
    [data-formulaire-lignes="vente"][data-peut-remiser="0"] .ligne-document:has([data-zone-quantite][hidden]) {
        grid-template-areas: "produit produit suppr" "prix total ." "remise remise ." "unites unites unites";
    }
    [data-formulaire-lignes="transfert"] .ligne-document-produit .form-select,
    [data-formulaire-lignes="transfert"] .ligne-document-supprimer { margin-top: 0; }
    [data-formulaire-lignes="transfert"] .ligne-document { grid-template-areas: "produit produit suppr" "quantite quantite ." "unites unites unites"; }
}

/* --- caisse --- */
.totaux {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .45rem 1rem;
    margin: 0;
    align-items: center;
    font-size: .9rem;
}
.totaux dt { font-weight: 400; color: var(--texte-2); }
.totaux dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.totaux dd .form-control { max-width: 140px; margin-left: auto; }
.totaux .total-libelle { font-weight: 700; color: var(--texte); font-size: 1rem; padding-top: .5rem; border-top: 1px solid var(--bordure); }
.totaux .total-valeur { font-weight: 700; font-size: 1.35rem; padding-top: .5rem; border-top: 1px solid var(--bordure); }
.caisse { position: sticky; top: 80px; }
.moyens-paiement { display: flex; flex-wrap: wrap; gap: .35rem; }
.retour-caisse { font-size: .88rem; color: var(--texte-3); min-height: 1.3em; }
.retour-caisse.rendu { color: #17663f; }
.retour-caisse.credit { color: #a52a20; }

.badge-sens {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    margin-right: .35rem;
    font-size: .8rem;
}
.badge-sens.sortant { background: #fdf3e2; color: #8a5800; }
.badge-sens.entrant { background: #e6f4ed; color: #17663f; }

/* =====================================================================
   TABLEAU DE BORD FILTRABLE, BARRE DE FILTRES, DÉPENSES
   ===================================================================== */
.barre-filtres .carte-corps { padding: .85rem 1.25rem; }
.barre-filtres .form-select-sm, .barre-filtres .form-control-sm { min-width: 150px; }
.barre-filtres input[type="date"] { min-width: 140px; }
.bascule-vue .btn { display: inline-flex; align-items: center; }
.titre-section {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texte-3);
    margin: 0 0 .65rem;
}
.indicateur-pied a { text-decoration: none; }
.indicateur-pied a:hover { text-decoration: underline; }
@media (max-width: 575.98px) {
    .barre-filtres .carte-corps > div { flex: 1 1 100%; }
    .barre-filtres .form-select-sm, .barre-filtres .form-control-sm { width: 100%; }
    .barre-filtres [data-dates-perso] > div { flex: 1; }
    .indicateur-valeur { font-size: 1.5rem; }
}
/* l'attribut hidden doit l'emporter sur les utilitaires d-flex de Bootstrap */
.barre-filtres [hidden], #avertissement-devise[hidden] { display: none !important; }

/* =====================================================================
   VENTE : recherche rapide de produit et de client, choix du point de vente
   ===================================================================== */
.choix-pdv-vente { min-width: 240px; }
.recherche-produit, .recherche-client { position: relative; }
.suggestions {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 360px;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(20, 38, 61, .15);
    border-radius: 10px;
}
.suggestions mark { padding: 0; background: #fff3c4; color: inherit; }
.suggestions .active mark { background: rgba(255, 255, 255, .3); }
.client-choisi {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .75rem;
    border: 1px solid #b9d3f1;
    background: #f1f6fd;
    border-radius: 8px;
}
.client-choisi > .bi { color: #2563b0; }
.ligne-document.ligne-ajoutee { animation: ligne-ajoutee .9s ease-out; }
@keyframes ligne-ajoutee { from { background: #e6f4ed; } to { background: transparent; } }

/* tuile d'indicateur cliquable (ex. remises → rapport détaillé) */
.indicateur.cliquable { transition: border-color .15s, box-shadow .15s; }
.indicateur.cliquable:hover { border-color: #b9d3f1; box-shadow: 0 4px 14px rgba(37, 99, 176, .12); }
.lien-indicateur { color: inherit; text-decoration: none; }
.lien-indicateur .bi-chevron-right { font-size: .9rem; color: #2563b0; vertical-align: middle; }
.lien-indicateur:hover { color: #2563b0; }
.lignes-proforma td:first-child { min-width: 260px; }
.lignes-proforma td { padding-left: .3rem; padding-right: .3rem; }
.lignes-proforma .form-control-sm { padding-left: .4rem; padding-right: .4rem; }

/* =====================================================================
   ADMINISTRATION : utilisateurs, rôles & permissions, points de vente
   ===================================================================== */
.avatar-initiales {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: #e8f0fb;
    color: #1d4f8f;
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .02em;
}
.avatar-initiales.grand { width: 56px; height: 56px; font-size: 1.15rem; }
.badge-role {
    --couleur-role: #6c757d;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .55rem;
    margin: .1rem .15rem .1rem 0;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--couleur-role);
    background: color-mix(in srgb, var(--couleur-role) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--couleur-role) 35%, #fff);
}
.badge-role::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--couleur-role); }
.pastille-role {
    --couleur-role: #6c757d;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: .45rem;
    background: var(--couleur-role);
    vertical-align: middle;
}
.pastille-role.grande { width: 16px; height: 16px; margin-right: 0; }
.carte-role { border-top: 4px solid var(--couleur-role, #6c757d); }
.carte-role .pastille-role { background: var(--couleur-role); }
.carte-role.inactive, .carte-pdv.inactive { opacity: .65; }
.carte-pdv { transition: border-color .15s, box-shadow .15s; }
.carte-pdv:hover { border-color: #b9d3f1; box-shadow: 0 4px 14px rgba(37, 99, 176, .12); }

.groupe-permissions { border: 1px solid var(--bordure); border-radius: 10px; overflow: hidden; height: 100%; }
.groupe-permissions-titre {
    display: flex;
    align-items: center;
    padding: .6rem .8rem;
    background: #f6f8fa;
    border-bottom: 1px solid var(--bordure);
    font-weight: 600;
    font-size: .88rem;
    cursor: pointer;
    margin: 0;
}
.permission-ligne {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .5rem .8rem;
    border-bottom: 1px solid #f0f2f5;
    cursor: pointer;
    margin: 0;
    font-size: .88rem;
}
.permission-ligne:last-child { border-bottom: 0; }
.permission-ligne:hover { background: #fafbfc; }
.permission-ligne .form-check-input { margin-top: .2rem; flex: 0 0 auto; }
.permission-ligne.heritee { background: #f3f8f4; }
.permission-ligne.interdite { opacity: .5; cursor: not-allowed; }
.matrice-droits th, .matrice-droits td { white-space: nowrap; }
.matrice-droits td:first-child { white-space: normal; min-width: 200px; }

/* =====================================================================
   CLIENTS : liste responsive (cartes sur téléphone) et création rapide
   ===================================================================== */
.liste-clients { list-style: none; margin: 0; padding: 0; }
.client-mobile { padding: .85rem 1rem; border-bottom: 1px solid #f0f2f5; }
.client-mobile:last-child { border-bottom: 0; }
.client-mobile .min-w-0 { min-width: 0; }
.client-mobile-details { display: flex; flex-direction: column; gap: .3rem; margin-top: .45rem; font-size: .85rem; }
.client-mobile-details a, .client-mobile-details span { display: flex; align-items: flex-start; gap: .5rem; color: var(--texte-2); text-decoration: none; }
.client-mobile-details .bi { color: var(--texte-3); margin-top: .1rem; }
.client-mobile .statut + .statut { margin-top: .25rem; }
.client-mobile .text-end { display: flex; flex-direction: column; align-items: flex-end; }
@media (max-width: 575.98px) {
    .filtres .btn { flex: 1 1 auto; }
    nav[aria-label="Pagination"] { flex-direction: column; gap: .5rem; }
}
/* « Aucun client trouvé » + bouton d'enregistrement dans les suggestions */
.suggestion-nouveau-client { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.bouton-nouveau-client { white-space: nowrap; }

/* =====================================================================
   LOCATIONS : onglets de filtre, lignes du formulaire, retour, planning
   ===================================================================== */
.text-pre { white-space: pre-line; }
.min-w-0 { min-width: 0; }
.onglets-filtre { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.onglet-filtre {
    display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
    padding: .4rem .8rem; border-radius: 999px; font-size: .85rem; font-weight: 500;
    color: var(--texte-2); background: var(--surface); border: 1px solid var(--bordure); text-decoration: none;
}
.onglet-filtre:hover { border-color: #b9d3f1; color: var(--texte); }
.onglet-filtre.actif { background: var(--couleur-marque); border-color: var(--couleur-marque); color: #fff; }
.onglet-filtre .compteur { font-size: .72rem; font-weight: 700; padding: 0 .45rem; border-radius: 999px; background: #e8eef6; color: #1f3a5f; }
.onglet-filtre.actif .compteur { background: rgba(255, 255, 255, .2); color: #fff; }
.onglet-filtre.alerte:not(.actif) .compteur { background: #fdecea; color: #a52a20; }

.duree-location { font-size: .88rem; color: var(--texte-2); min-height: 1.3em; }
.lignes-location { display: flex; flex-direction: column; gap: .75rem; }
.ligne-location { border: 1px solid var(--bordure); border-radius: 10px; padding: .75rem .85rem; background: #fbfcfd; }
.ligne-location.ligne-ajoutee { animation: ligne-ajoutee .9s ease-out; }
.ligne-location.ligne-en-erreur { border-color: #f3c4c0; background: #fff8f7; }
.ligne-location-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin-bottom: .5rem; }
.ligne-location-champs { display: grid; grid-template-columns: minmax(150px, 1.6fr) repeat(auto-fit, minmax(84px, 1fr)); gap: .5rem; align-items: end; }
.ligne-location-champs .champ-total > div { padding: .3rem 0; font-variant-numeric: tabular-nums; }
.unites-location { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.unite-choix {
    display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; cursor: pointer;
    padding: .25rem .55rem; border: 1px solid var(--bordure); border-radius: 8px; background: #fff;
}
.unite-choix:has(input:checked) { border-color: #2563b0; background: #e8f0fb; }
.unite-choix .form-check-input { margin: 0; }
.unite-choix.occupee { opacity: .6; cursor: not-allowed; background: #f6f7f9; }
.unite-choix.occupee:has(input:checked) { opacity: 1; border-color: #c0362c; background: #fdecea; }
.unite-motif { color: #a52a20; }
.sortie-immediate { padding: .65rem .75rem .65rem 2.9rem; border: 1px solid #b9d3f1; border-radius: 10px; background: #f1f6fd; }
@media (max-width: 575.98px) {
    .ligne-location-champs { grid-template-columns: 1fr 1fr; }
    .ligne-location-champs .champ-unite { grid-column: 1 / -1; }
}

.ligne-retour { border: 1px solid var(--bordure); border-radius: 10px; padding: .75rem .85rem; }
.liste-retours { list-style: none; margin: 0; padding: 0; }
.liste-retours li { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.25rem; border-top: 1px solid #f0f2f5; }
.liste-retours li:first-child { border-top: 0; }
@media (max-width: 575.98px) { .liste-retours li { padding: .7rem .9rem; } }

/* --- planning --- */
.planning-barre .btn-group { flex: 0 0 auto; }
.planning-barre .filtres-recherche { flex: 1 1 180px; }
.planning-defilement { overflow-x: auto; }
.planning-grille { min-width: 760px; }
.planning-entete, .planning-ligne { display: grid; grid-template-columns: 200px 1fr; border-bottom: 1px solid #f0f2f5; }
.planning-entete { position: sticky; top: 0; background: #fafbfc; z-index: 1; border-bottom: 1px solid var(--bordure); }
.planning-libelle { padding: .5rem .75rem; min-width: 0; font-size: .85rem; border-right: 1px solid #f0f2f5; }
.planning-entete .planning-libelle { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-3); align-self: center; }
.planning-jours { display: grid; grid-template-columns: repeat(var(--jours), 1fr); }
.planning-jour { text-align: center; padding: .35rem 0; font-size: .7rem; color: var(--texte-3); border-left: 1px solid #f0f2f5; line-height: 1.2; }
.planning-jour strong { display: block; font-size: .9rem; color: var(--texte); }
.planning-jour.weekend { background: #f6f7f9; }
.planning-jour.aujourdhui { background: #e8f0fb; }
.planning-jour.aujourdhui strong { color: #2563b0; }
.planning-piste {
    position: relative; min-height: 46px;
    background-image: linear-gradient(to right, #f0f2f5 1px, transparent 1px);
    background-size: calc(100% / var(--jours)) 100%;
}
.planning-barre-loc {
    position: absolute; top: 9px; bottom: 9px; border-radius: 6px; padding: 0 .45rem;
    display: flex; align-items: center; font-size: .72rem; font-weight: 600; color: #fff; text-decoration: none; overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .15);
}
.planning-barre-loc span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planning-barre-loc:hover { filter: brightness(1.08); color: #fff; }
.barre-bleu { background: #2563b0; }
.barre-vert { background: #17803f; }
.barre-ambre { background: #c27c0e; }
.barre-rouge { background: #c0362c; }
.barre-gris { background: #9aa3b2; }
.planning-case {
    display: grid; place-items: center; min-height: 40px; font-size: .78rem; font-weight: 600;
    border-left: 1px solid #f0f2f5; font-variant-numeric: tabular-nums;
}
.niveau-1 { background: #e6f4ed; color: #17663f; }
.niveau-2 { background: #fdf3e2; color: #8a5800; }
.niveau-3 { background: #fbe0c2; color: #8a4a00; }
.niveau-4 { background: #fdecea; color: #a52a20; }
.planning-legende { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: .75rem 1.25rem; font-size: .8rem; border-top: 1px solid var(--bordure); }
.planning-legende span { display: inline-flex; align-items: center; gap: .35rem; }
.planning-legende i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }
@media (max-width: 767.98px) {
    .planning-entete, .planning-ligne { grid-template-columns: 130px 1fr; }
}

/* =====================================================================
   INVENTAIRE, SYNCHRONISATION, JOURNAL D'ACTIVITÉ
   ===================================================================== */
.comptage-barre { position: sticky; top: 70px; z-index: 5; }
.comptage-progression { font-size: .88rem; color: var(--texte-2); white-space: nowrap; }
.bloc-comptage .carte-corps { padding-top: .25rem; }
.unite-inventaire:has(input:not(:checked)) { border-style: dashed; }
.barre-actions-comptage {
    position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end;
    padding: .75rem 0; background: var(--fond-app); border-top: 1px solid var(--bordure);
}
.barre-actions-comptage .btn-outline-primary { background: var(--surface); }
.barre-actions-comptage .btn-outline-primary:hover { background: var(--bs-primary, #0d6efd); }
@media (max-width: 575.98px) { .barre-actions-comptage .btn { flex: 1 1 100%; } .comptage-barre { top: 60px; } }

.sync-valeur { white-space: pre-wrap; word-break: break-word; font: inherit; max-height: 220px; overflow: auto; }

.journal { list-style: none; margin: 0; padding: 0; }
.journal-ligne { display: flex; gap: .75rem; padding: .75rem 1.25rem; border-top: 1px solid #f0f2f5; }
.journal-ligne:first-child { border-top: 0; }
.journal-icone {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: #e8f0fb; color: #2563b0; font-size: 1.2rem;
}
.journal-icone.connexion { background: #e6f4ed; color: #17663f; font-size: .95rem; }
.journal-icone.danger { background: #fdecea; color: #a52a20; }
.journal-details summary { cursor: pointer; color: #2563b0; margin-top: .25rem; }
.journal-details table td { padding: .2rem .4rem; }
@media (max-width: 575.98px) { .journal-ligne { padding: .7rem .9rem; } }

/* =====================================================================
   RAPPORTS
   ===================================================================== */
.liste-rapports { list-style: none; margin: 0; padding: 0 0 .5rem; }
.liste-rapports a {
    display: flex; align-items: center; gap: .75rem; padding: .6rem 1.25rem; color: var(--texte); text-decoration: none;
    border-top: 1px solid #f0f2f5;
}
.liste-rapports li:first-child a { border-top: 0; }
.liste-rapports a:hover { background: #f5f8fd; }
.liste-rapports a > .bi:first-child { font-size: 1.1rem; color: #2563b0; }
.liste-rapports span { display: flex; flex-direction: column; min-width: 0; }
.liste-rapports small { color: var(--texte-3); font-size: .78rem; line-height: 1.3; }
.liste-rapports .bi-chevron-right { color: var(--texte-3); }
.onglet-filtre .bi { font-size: .9em; }
.tableau-rapport thead th { white-space: nowrap; }
.tableau-rapport button.tri {
    all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
}
.tableau-rapport button.tri .bi { opacity: .35; font-size: .8em; }
.tableau-rapport th[aria-sort] button.tri { color: #2563b0; }
.tableau-rapport th[aria-sort] button.tri .bi { opacity: 1; }
.tableau-rapport button.tri:focus-visible { outline: 2px solid #2563b0; outline-offset: 2px; border-radius: 3px; }
.tableau-rapport tfoot td { font-variant-numeric: tabular-nums; }
.tableau-rapport td { font-variant-numeric: tabular-nums; }
.rapport-sous-total > td { background: #fafbfc; font-weight: 600; border-top: 1px solid var(--bordure); }
.rapport-total > td { background: #eef3fb; font-weight: 700; font-size: .95rem; border-top: 2px solid #1f3a5f; }

/* en-tête de l'entreprise (logo, nom, adresse, téléphone) : seulement à l'impression */
.entete-impression { display: none; }
@media print {
    .entete-impression { display: block; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid #14263d; }
    .toast-container, #zone-messages { display: none !important; }
    .menu-lateral, .barre-haut, .pied-page, .no-print, .actions-rapport, .barre-filtres, .alert .btn-close, nav[aria-label="Pagination"] { display: none !important; }
    .zone-principale { margin: 0 !important; padding: 0 !important; }
    .contenu { padding: 0 !important; max-width: none !important; }
    body { background: #fff !important; }
    .carte { box-shadow: none !important; border: 1px solid #dde3ea !important; break-inside: avoid; }
    .tableau-rapport-zone { overflow: visible !important; }
    .tableau-rapport { font-size: 10.5px; }
    .tableau-rapport > :not(caption) > * > * { padding: .3rem .45rem !important; }
    .tableau-rapport thead { display: table-header-group; }
    a { color: inherit !important; text-decoration: none !important; }
    .d-print-block { display: block !important; }
    @page { size: A4 landscape; margin: 10mm; }
}
.tableau-rapport tbody td:first-child, .tableau-rapport tfoot td:first-child { min-width: 170px; }
.tableau-rapport tbody td:first-child:has(.lien-produit), .tableau-rapport tbody td.text-end:first-child { min-width: 0; }
@media (max-width: 575.98px) { .tableau-rapport tbody td:first-child, .tableau-rapport tfoot td:first-child { min-width: 130px; } }

/* =====================================================================
   ESPACE PLATEFORME (super administrateurs) — dans l'application ou seul
   ===================================================================== */
.pastille-plateforme { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; background: #f2b134; color: #0f1b2d; border-radius: 999px; padding: .15rem .55rem; font-weight: 700; }
.chiffre-plateforme { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.table-plateforme td, .table-plateforme th { vertical-align: middle; }
.zone-plateforme .carte > .table-responsive > .table > :is(thead, tbody) > tr > :first-child { padding-left: 1rem; }
.zone-plateforme .carte > .table-responsive > .table > :is(thead, tbody) > tr > :last-child { padding-right: 1rem; }
.acces-unique { font-family: Consolas, ui-monospace, monospace; font-size: 1.15rem; letter-spacing: .04em; }