/*
 * DematixV2 : styles communes, pensées pour Mac/Windows, iPad et smartphones iOS/Android.
 * Repères : < 768 px = smartphone, 768-991 px = tablette portrait, ≥ 992 px = ordinateur et tablette paysage.
 */
:root {
    --tms-onglets-h: 62px;
    --tms-bord: #d0d7de;
    --tms-fond: #f6f8fa;
    --tms-texte-doux: #57606a;
}
body { background: var(--tms-fond); -webkit-text-size-adjust: 100%; }
.text-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; word-break: break-all; }
.card { border: 1px solid var(--tms-bord); box-shadow: none; }
.table td, .table th { vertical-align: middle; }
.table > :not(caption) > * > * { padding-top: .6rem; padding-bottom: .6rem; }
.pastille { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; vertical-align: -1px; flex-shrink: 0; }
.carte { height: 420px; border-radius: .375rem; border: 1px solid var(--tms-bord); }
.kpi .valeur { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.ligne-cliquable { cursor: pointer; }

/* En-tête de page : titre + actions, qui passent à la ligne proprement */
/* Logo DEMAT Express du bandeau (version claire pour fond sombre) */
.logo-bandeau { height: 36px; width: auto; display: block; }
@media (max-width: 575.98px) { .logo-bandeau { height: 30px; } }
.entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.entete h1 { margin: 0; font-size: 1.6rem; }
.entete .sous-titre { color: var(--tms-texte-doux); }
.entete .actions { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Filtre actif : bien visible, pour ne pas croire qu'il manque des courses */
.filtre-actif.form-select, .filtre-actif.form-control { border-color: #0969da; background-color: #ddf4ff; font-weight: 600; }
.form-check.filtre-actif { background: #ddf4ff; border-radius: .375rem; padding-right: .5rem; font-weight: 600; }
/* Smartphone : outils de l'entête repliés tant qu'on ne les demande pas */
@media (max-width: 767.98px) {
    .actions-repliables:not(.ouvert) { display: none !important; }
    .actions-repliables.ouvert { width: 100%; }
    .actions-repliables.ouvert .form-select { flex: 1 1 100%; width: 100% !important; }
}

/* ---------- Navigation ---------- */
.barre-haut { background: #1f2328; }
.barre-haut .navbar-brand { font-weight: 700; letter-spacing: .02em; }
.barre-haut .nav-link { display: flex; align-items: center; gap: .4rem; padding-left: .7rem !important; padding-right: .7rem !important; white-space: nowrap; }
.barre-haut .nav-link .bi { font-size: 1.05rem; opacity: .85; }
.barre-haut .dropdown-menu { font-size: .95rem; }
.btn-icone { flex-shrink: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 1.3rem; }

.onglets {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; background: #fff; border-top: 1px solid var(--tms-bord);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 10px rgba(31, 35, 40, .06);
}
.onglets a, .onglets button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    height: var(--tms-onglets-h); color: var(--tms-texte-doux); text-decoration: none; font-size: .72rem; font-weight: 500;
    background: none; border: 0; -webkit-tap-highlight-color: transparent;
}
.onglets .bi { font-size: 1.35rem; line-height: 1; }
.onglets .actif { color: #0969da; }
.onglets .actif .bi { transform: translateY(-1px); }
@media (max-width: 991.98px) {
    body.avec-onglets { padding-bottom: calc(var(--tms-onglets-h) + env(safe-area-inset-bottom) + 1rem); }
    main { padding-left: max(1rem, env(safe-area-inset-left)) !important; padding-right: max(1rem, env(safe-area-inset-right)) !important; }
    .entete h1 { font-size: 1.35rem; }
}
.feuille-plus .list-group-item { display: flex; align-items: center; gap: .75rem; min-height: 52px; font-size: 1.05rem; }
.feuille-plus .list-group-item .bi { font-size: 1.25rem; width: 1.5rem; text-align: center; color: var(--tms-texte-doux); }
.offcanvas-bottom.feuille-plus { height: auto; max-height: 80vh; max-height: 75dvh; border-top-left-radius: 1rem; border-top-right-radius: 1rem; padding-bottom: calc(env(safe-area-inset-bottom) + 1rem); }

/* ---------- Tactile : iPad, iPhone, Android ---------- */
@media (pointer: coarse), (max-width: 991.98px) {
    /* 16 px minimum : en dessous, Safari iOS zoome à chaque saisie */
    .form-control, .form-select, .form-control-sm, .form-select-sm, .input-group-text { font-size: 16px; }
}
@media (pointer: coarse) {
    .btn, .form-control, .form-select { min-height: 44px; }
    .btn-sm, .form-control-sm, .form-select-sm { min-height: 40px; }
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
    .form-check { min-height: 44px; display: flex; align-items: center; gap: .6rem; padding-left: 0; }
    .form-check .form-check-input { width: 1.5rem; height: 1.5rem; margin: 0; flex-shrink: 0; float: none; }
    .form-switch .form-check-input { width: 2.75rem; }
    .lien-tactile { display: inline-flex; align-items: center; min-height: 44px; }
    .leaflet-container.leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 22px; }
    .list-group-item-action { padding-top: .8rem; padding-bottom: .8rem; }
}

/* ---------- Tableaux transformés en cartes sur smartphone ---------- */
@media (max-width: 767.98px) {
    .table-cartes thead { display: none; }
    .table-cartes, .table-cartes tbody, .table-cartes tr, .table-cartes td { display: block; width: 100%; }
    .table-cartes tr { padding: .8rem 1rem; border-bottom: 1px solid var(--tms-bord); }
    .table-cartes tr:last-child { border-bottom: 0; }
    .table-cartes td { border: 0 !important; padding: .1rem 0 !important; display: flex; justify-content: space-between; gap: 1rem; text-align: right !important; }
    .table-cartes td[data-label]::before { content: attr(data-label); color: var(--tms-texte-doux); font-size: .85rem; text-align: left; flex-shrink: 0; }
    .table-cartes td.titre { font-weight: 600; font-size: 1.05rem; justify-content: flex-start; flex-wrap: wrap; gap: .4rem; text-align: left !important; margin-bottom: .2rem; }
    .table-cartes td.titre a { text-decoration: none; }
    .table-cartes td.sous-titre { color: var(--tms-texte-doux); justify-content: flex-start; text-align: left !important; }
    .table-cartes td.masque-mobile, .table-cartes td:empty { display: none; }
    .table-cartes td.vide { justify-content: center; }
    .table-responsive:has(> .table-cartes) { overflow-x: visible; }
}

/* ---------- Cartes géographiques ---------- */
@media (max-width: 767.98px) {
    .carte { height: 55vh; min-height: 300px; }
}

/* ---------- Divers ---------- */
.badge { font-weight: 600; }
.alerte-liste li + li { margin-top: .25rem; }

/* Formulaire long sur mobile : le bouton Enregistrer reste accessible au-dessus des onglets */
@media (max-width: 1199.98px) {
    .barre-enregistrer {
        position: sticky; bottom: 0; z-index: 1020; background: var(--tms-fond);
        padding: .75rem 0; border-top: 1px solid var(--tms-bord);
    }
}
@media (max-width: 991.98px) {
    .avec-onglets .barre-enregistrer { bottom: calc(var(--tms-onglets-h) + env(safe-area-inset-bottom)); }
}
@media (min-width: 768px) { .border-end-md { border-right: 1px solid var(--tms-bord); } }

/* Grille tarifaire : clients à cocher dans une zone défilante */
.liste-clients { max-height: 280px; overflow-y: auto; border: 1px solid var(--tms-bord); border-radius: .375rem; padding: .5rem .75rem; }

/* Formulaire de course : dépôt du PDF du donneur d'ordre */
.zone-depot { border: 2px dashed var(--tms-bord); transition: background-color .15s; }
.zone-depot.border-success { border-color: var(--bs-success); }