/* ==========================================================================
   Recette V9 — passe mobile globale (réunion du 22/10 : « plus digeste pour le
   client »). Commerciaux sur le terrain, téléphone de 360 à 430 px.
   Tout est sous media query : rien ne bouge au-dessus de 768 px.
   ========================================================================== */

@media (max-width: 767.98px) {
    /* ---------- Barre du haut ----------
       Les actions de la page (Références client, Modifier, PDF…) étaient
       alignées à droite du titre et du dossier : la barre dépassait l'écran
       (fiche client à 405-417 px de large). Elles passent sur une seconde
       rangée, pleine largeur, qui revient à la ligne si besoin. */
    .app-topbar { flex-wrap: wrap; gap: .45rem .55rem; padding: .5rem .85rem; }
    .app-topbar > [data-action="sidebar#toggle"] { order: 0; width: 40px; height: 40px; flex: 0 0 auto; display: inline-grid; place-items: center; font-size: 1.15rem; border-radius: 12px; }
    .app-topbar .topbar-title { order: 1; flex: 1 1 0; font-size: .98rem; }
    .topbar-right { display: contents; }
    .app-topbar .dossier-switch { order: 2; }
    .app-topbar .dossier-pill { min-height: 40px; max-width: 9.5rem; }
    .app-topbar .topbar-actions { order: 3; flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem; }
    .app-topbar .topbar-actions:not(:has(*)) { display: none; }
    .app-topbar .topbar-actions form { margin: 0; }

    /* ---------- Cibles tactiles : 40 px minimum au doigt ---------- */
    .app-content .btn, .app-topbar .btn, .modal .btn:not(.btn-close) { min-height: 40px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
    .app-content .btn.py-0, .modal .btn.py-0 { min-width: 40px; }
    .app-content .table .btn, .app-content .lignes-tableau .btn, .modal .lignes-tableau .btn { min-height: 0; }
    .modal .btn-close { width: 40px; height: 40px; padding: 0; background-size: .9rem; }
    .liste-action { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; }
    .app-content .btn.type-pastille__case, .app-content .page-link { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
    /* 16 px : en dessous, iOS zoome la page au moindre champ touché. */
    .app-content .form-control, .app-content .form-select,
    .modal .form-control, .modal .form-select, .ts-control, .ts-control input { font-size: 16px !important; }
    .app-content .form-control:not(textarea), .app-content .form-select,
    .modal .form-control:not(textarea), .modal .form-select { min-height: 44px; }

    /* ---------- En-tête de page ---------- */
    .app-content { padding: .9rem .85rem 2rem; }
    .page-head { gap: .6rem; margin-bottom: 1rem; align-items: stretch; }
    .page-head h1 { font-size: 1.35rem; flex: 1 1 100%; overflow-wrap: anywhere; }
    .page-head form.flex-grow-1 { max-width: none !important; flex: 1 1 100%; }
    /* Bouton principal « Ajouter » : pleine largeur, à portée de pouce. */
    .page-head > .btn-primary { flex: 1 1 auto; }

    /* ---------- Barres de filtres en pastilles ----------
       Trente pastilles (commerciaux, types d'échange, statuts) empilées sur six
       rangées repoussaient la liste sous la ligne de flottaison : elles
       défilent désormais sur une seule rangée, au doigt. */
    .app-content :is(.d-flex.flex-wrap:has(> a.btn-sm + a.btn-sm), .dossier-emetteurs, .types-liste) {
        flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
        margin-inline: -.85rem; padding: 2px .85rem .35rem;
        mask-image: linear-gradient(90deg, transparent 0, #000 .85rem, #000 calc(100% - 1.6rem), transparent);
    }
    .app-content :is(.d-flex.flex-wrap:has(> a.btn-sm + a.btn-sm), .dossier-emetteurs, .types-liste)::-webkit-scrollbar { display: none; }
    .app-content :is(.d-flex.flex-wrap:has(> a.btn-sm + a.btn-sm), .dossier-emetteurs, .types-liste) > * { flex: 0 0 auto; white-space: nowrap; }
    /* Le compteur (« 724 compte(s)-rendu(s) ») ne doit pas partir hors champ. */
    .app-content :is(.d-flex.flex-wrap:has(> a.btn-sm + a.btn-sm), .dossier-emetteurs, .types-liste) > .ms-auto.text-muted { margin-left: .4rem !important; }
    .app-content .dossier-emetteurs > .dossier-emetteurs-note { white-space: normal; width: 80vw; }
    /* « Ctrl+clic » n'a pas de sens au doigt : la case ☐ de chaque type suffit. */
    .types-liste__aide, .types-liste__sep { display: none !important; }

    /* ---------- Listes en cartes : titres lisibles ----------
       Le titre était tronqué à 12 signes (« DECATHLON QU… ») par la date et
       le statut placés à sa droite : il revient à la ligne (2 lignes max). */
    .collection-item { padding: .75rem .85rem; gap: .7rem; align-items: flex-start; }
    .collection-item .ci-chip { width: 38px; height: 38px; border-radius: 12px; font-size: .95rem; }
    .ci-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; line-height: 1.25; font-size: .96rem; }
    .ci-sub { font-size: .82rem; }
    .ci-side { gap: .2rem; max-width: 40%; }
    .ci-side .ci-right { font-size: .86rem; }
    .ci-side .badge, .ci-eyebrow { font-size: .62rem; }
    .ci-arrow, .ci-arrow-link { align-self: center; }
    .collection-item.ci-callable, .collection-item.ci-checkable { align-items: center; }
    .ci-callable .ci-link, .ci-checkable .ci-link { align-items: flex-start; gap: .7rem; }
    .task-check { width: 40px; height: 40px; }
    .ci-call { min-width: 40px; min-height: 40px; }

    /* ---------- Fiche client : onglets défilants ----------
       Onze onglets sur cinq rangées : une seule rangée qui défile au doigt. */
    .client-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin-inline: -.85rem; padding-inline: .85rem; }
    .client-tabs::-webkit-scrollbar { display: none; }
    .client-tabs .nav-item { flex: 0 0 auto; }
    .client-tabs .nav-link { white-space: nowrap; min-height: 42px; display: inline-flex; align-items: center; gap: .3rem; }
    .client-map { height: 260px; }

    /* ---------- Tableau de bord : indicateurs sur deux colonnes ---------- */
    .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
    .stat-card { padding: .85rem .9rem; border-radius: var(--r-md); }
    .stat-card::after { width: 70px; height: 70px; right: -24px; top: -24px; }
    .stat-card .sc-label { font-size: .74rem; line-height: 1.25; }
    .stat-card .sc-icon { width: 30px; height: 30px; border-radius: 10px; font-size: .9rem; }
    .stat-card .sc-value { font-size: 1.4rem; margin-top: .2rem; }
    .stat-card .sc-sub { font-size: .72rem; line-height: 1.3; }
    .dash-hero { padding: 1.25rem 1.2rem; margin-bottom: 1.2rem; }

    /* ---------- Modales : plein écran ---------- */
    #app-modal .modal-dialog { margin: 0; max-width: none; width: 100%; height: 100%; min-height: 100%; --bs-modal-width: 100%; }
    #app-modal .modal-content { border-radius: 0; height: 100%; min-height: 100dvh; border: 0; }
    #app-modal.modal-dialog-scrollable .modal-content, #app-modal .modal-dialog-scrollable .modal-content { max-height: 100dvh; }
    /* En-tête : le titre garde la première rangée (avec la croix), les actions
       (Modifier, PDF, Marquer terminée…) passent dessous au lieu de l'écraser. */
    .modal-header { flex-wrap: wrap; gap: .5rem; padding: .7rem .85rem .7rem 1rem; position: relative; }
    .modal-header .modal-title { flex: 1 1 calc(100% - 52px); padding-right: 44px; font-size: 1.05rem; overflow-wrap: anywhere; }
    .modal-header .modal-actions { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; margin-left: 0 !important; }
    .modal-header .modal-actions:not(:has(> :not(.btn-close))) { flex: 0 0 0; }
    .modal-header .modal-actions .btn-close { position: absolute; top: .55rem; right: .55rem; }
    .modal-header .btn-modal-back { order: -1; }
    .modal-body { padding: .9rem .85rem; }

    /* ---------- Documents de vente : liste en cartes ----------
       Le tableau de 8 à 12 colonnes défilait de côté ; chaque document devient
       une carte : numéro en tête, valeurs libellées (data-label) sur 2 colonnes. */
    .liste-docs .card.table-responsive { overflow: visible; background: transparent; border: 0; box-shadow: none; }
    .liste-docs .table-factures, .liste-docs .table-factures tbody { display: block; }
    .liste-docs .table-factures thead { display: none; }
    .liste-docs .table-factures tr.liste-ligne {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .9rem;
        position: relative; margin-bottom: .6rem; padding: .75rem .85rem .8rem;
        background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm);
    }
    .liste-docs .table-factures tr.liste-ligne > td { display: block; padding: 0 !important; border: 0; background: transparent !important; box-shadow: none !important; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere; max-width: none; min-width: 0; font-size: .86rem; }
    .liste-docs .table-factures tr.liste-ligne > td:not(.liste-td-numero) .text-nowrap { white-space: normal !important; }
    .liste-docs .table-factures tr.liste-ligne > td[data-label]::before { content: attr(data-label); display: block; font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
    .liste-docs .table-factures tr.liste-ligne > td.liste-td-numero { grid-column: 1 / -1; padding-right: 92px !important; font-size: .98rem; }
    .liste-docs .table-factures tr.liste-ligne > td.liste-td-numero::before { display: none; }
    .liste-docs .table-factures tr.liste-ligne > td.liste-td-client { grid-column: 1 / -1; }
    .liste-docs .table-factures tr.liste-ligne > td.liste-td-actions { position: absolute; top: .45rem; right: .45rem; width: auto; }
    .liste-docs .table-factures tr:not(.liste-ligne) { display: block; }
    .liste-docs .table-factures tr:not(.liste-ligne) > td { display: block; }

    /* ---------- Fiche document : lignes en cartes ---------- */
    .doc-lignes, .doc-lignes tbody, .doc-lignes tfoot { display: block; }
    .doc-lignes thead { display: none; }
    .doc-lignes tr { display: flex; justify-content: space-between; gap: .6rem; }
    .doc-lignes tr > td:empty { display: none; }
    .doc-lignes tr.doc-ligne { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem .6rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
    .doc-lignes tr.doc-ligne > td { display: block; padding: 0; border: 0; text-align: left !important; white-space: normal; font-size: .85rem; }
    .doc-lignes tr.doc-ligne > td[data-label]::before { content: attr(data-label); display: block; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
    .doc-lignes tr.doc-ligne > td:nth-child(1) { grid-column: 1 / 3; }
    .doc-lignes tr.doc-ligne > td:nth-child(1)::before, .doc-lignes tr.doc-ligne > td:nth-child(2)::before { display: none; }
    .doc-lignes tr.doc-ligne > td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-weight: 600; color: var(--ink); font-size: .92rem; }
    .doc-lignes tr.doc-ligne > td:nth-child(7) { grid-column: 3 / -1; grid-row: 1; text-align: right !important; font-size: .95rem; }
    .doc-lignes tr.doc-ligne > td:nth-child(7)::before { display: none; }
    .doc-lignes tr:not(.doc-ligne) > td { white-space: normal; }
    .doc-lignes tfoot tr > td { border: 0; padding: .4rem .9rem; }

    .doc-lignes tfoot tr { background: var(--bs-tertiary-bg, #f8f9fa); }
    .doc-lignes tfoot tr > td { background: transparent !important; }
    .doc-lignes tfoot tr > td:first-child { flex: 1 1 auto; text-align: left !important; }

    /* ---------- « Enregistrer » toujours à portée de pouce ----------
       Formulaire long (fiche client : 40 champs) : le bouton reste collé au bas
       de l'écran pendant la saisie au lieu d'attendre en fin de page. */
    :is(.app-content, .modal-body) form button.btn-primary.w-100:not([type="button"]) {
        position: sticky; bottom: calc(.6rem + env(safe-area-inset-bottom)); z-index: 6;
        min-height: 48px; box-shadow: 0 12px 28px rgba(90, 70, 220, .35);
    }
    .modal-body form > .d-flex:last-child:has(> button.btn-primary) {
        position: sticky; bottom: 0; z-index: 6; padding: .6rem 0 calc(.6rem + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, transparent, var(--surface) 35%);
    }

    /* ---------- Fiches (détail) ---------- */
    .detail-grid { gap: .1rem; }
    .card-header { overflow-wrap: anywhere; }
}

/* ---------- Très petits écrans (360 px) ---------- */
@media (max-width: 399.98px) {
    .app-topbar .dossier-pill { max-width: 7.6rem; }
    .stat-card .sc-value { font-size: 1.25rem; }
    .doc-lignes tr.doc-ligne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .doc-lignes tr.doc-ligne > td:nth-child(1) { grid-column: 1 / 2; }
    .doc-lignes tr.doc-ligne > td:nth-child(7) { grid-column: 2 / -1; }
}

/* ---------- Menu latéral (tiroir) sur téléphone ---------- */
@media (max-width: 992px) {
    .sidebar { width: min(300px, 86vw); height: 100dvh; display: flex; flex-direction: column; }
    .sidebar .sidebar-nav { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
    .sidebar .nav-link { min-height: 44px; }
    .sidebar-footer .btn { min-height: 40px; display: flex; align-items: center; justify-content: center; gap: .35rem; }
}
/* Pied du tiroir : les quatre boutons (menu, tableau de bord, mot de passe,
   déconnexion) sur deux colonnes, pour laisser la hauteur aux entrées du menu. */
@media (max-width: 767.98px) {
    .sidebar-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; padding: .7rem .8rem calc(.8rem + env(safe-area-inset-bottom)); }
    .sidebar-footer .user-chip { grid-column: 1 / -1; margin-bottom: .2rem; }
    .sidebar-footer .btn { margin-top: 0 !important; font-size: .76rem; line-height: 1.15; padding: .3rem .4rem; white-space: normal; text-align: center; }
}