/* =====================================================================
   adaptatif.css — Confort d'usage sur téléphone.
   Chargé APRÈS style.css : ne contient que des ajustements mobiles,
   aucune règle ne s'applique au-dessus de 760px.

   Trois principes :
   1. Un tableau à 8 colonnes ne se lit pas sur 375px. On le transforme en
      CARTES empilées : chaque ligne devient un bloc, chaque cellule une
      paire « libellé — valeur ». Plus de défilement horizontal, donc plus
      de perte de la colonne d'identification en se déplaçant.
   2. Les champs de saisie passent à 16px : en dessous, iOS zoome
      automatiquement au focus et décale toute la mise en page.
   3. Les cibles tactiles font au moins 44px : c'est la taille d'un doigt.
   ===================================================================== */

/* Résumé d'imputation d'une ligne d'appro : n'existe que sur téléphone.
   Sur grand écran les trois colonnes compte / atelier / destination sont
   visibles directement, ce résumé n'a pas lieu d'être. */
.l-imputation { display: none; }

/* =====================================================================
   CONFORT TACTILE — jusqu'à 900px
   Même seuil que le tiroir de navigation de style.css : en dessous de
   900px on est au doigt, pas à la souris. Une tablette en portrait fait
   768px : la laisser en mode bureau donnerait des cibles de 30px.
   ===================================================================== */
@media (max-width: 900px) {

    /* ---------------------------------------------------------------
       1. Saisie : plus de zoom involontaire, plus de cibles minuscules
       --------------------------------------------------------------- */
    /* 16px est le seuil en dessous duquel iOS zoome au focus et décale toute
       la page. style.css descend à 15px sur plusieurs sélecteurs de classe :
       on les reprend un à un, la spécificité doit être au moins égale pour
       que cette feuille — chargée après — l'emporte. */
    input, select, textarea,
    .carte input, .carte select, .carte textarea,
    .formulaire input, .formulaire select, .formulaire textarea,
    .form-ligne input, .form-ligne select, .form-ligne textarea,
    .tableau input, .tableau select,
    .form-recherche input, .form-date-rapport input,
    .formulaire label input, .formulaire label select, .formulaire label textarea,
    .form-ligne label input, .form-ligne label select, .form-ligne label textarea,
    .carte label input, .carte label select, .carte label textarea,
    .champ-inline input, .champ-inline select, .champ-inline textarea,
    /* style.css cible aussi par attribut (.formulaire input[type=text]) :
       spécificité supérieure, il faut la reprendre telle quelle. */
    .formulaire input[type=text], .formulaire input[type=number],
    .formulaire input[type=date], .formulaire input[type=search],
    .formulaire input[type=tel], .formulaire input[type=email],
    .formulaire input[type=password], .formulaire select, .formulaire textarea {
        font-size: 16px;
        min-height: 44px;
    }
    input[type="checkbox"], input[type="radio"] {
        min-height: 0; width: 22px; height: 22px;   /* cases : plus grandes qu'en natif */
    }
    /* Un select à contenu long garde sa largeur naturelle et déborde de sa
       carte. On le borne à la largeur disponible. */
    input, select, textarea { max-width: 100%; box-sizing: border-box; }
    .tableau td select, .tableau td input { width: 100%; }
    button, .bouton-principal, .bouton-secondaire, .onglet {
        min-height: 46px; font-size: 16px;
    }
    .mini-bouton {
        min-width: 44px; min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 18px;
    }
    .btn-menu { min-width: 44px; min-height: 44px; font-size: 22px; }

    /* Carte publique : filtres de catégorie et fermeture du panier.
       Ce sont les seules cibles de cette page, elle doit être irréprochable
       au doigt — c'est un client debout, pas un employé assis. */
    .filtre-cat { min-height: 44px; font-size: 15px; padding: 10px 16px; }
    .fermer-panier { min-width: 44px; min-height: 44px; font-size: 22px; }
    .bouton-ajout, .art-moins, .art-plus { min-width: 40px; min-height: 40px; font-size: 19px; }

    /* Les boutons d'action principaux prennent toute la largeur :
       plus faciles à viser d'une main. */
    .actions-formulaire { display: flex; flex-direction: column; gap: 10px; }
    .actions-formulaire .bouton-principal,
    .actions-formulaire .bouton-secondaire { width: 100%; }

    /* Les formulaires en ligne s'empilent au lieu de se comprimer. */
    .form-ligne {
        display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    }
    .form-ligne > * { width: 100%; max-width: none !important; }
    .form-ligne label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; }

    /* Champ de recherche + bouton : côte à côte, ils imposaient une largeur
       supérieure à celle de la carte et la faisaient déborder. Le champ
       prend la ligne, le bouton passe dessous. */
    .form-recherche {
        display: flex; flex-wrap: wrap; gap: 8px; width: 100%;
    }
    .form-recherche input { flex: 1 1 100%; min-width: 0; }
    .form-recherche button { width: 100%; }

    /* En-tête de carte : le conteneur ne doit jamais s'élargir au gabarit
       de son plus large enfant. */
    .entete-carte { min-width: 0; }
    .entete-carte > * { max-width: 100%; min-width: 0; }
}

/* =====================================================================
   MISE EN PAGE TÉLÉPHONE — jusqu'à 760px
   En dessous, un tableau ne tient plus, quelle que soit sa mise en forme :
   on change de forme plutôt que de compresser.
   ===================================================================== */
@media (max-width: 760px) {

    /* ---------------------------------------------------------------
       2. Tableaux de lecture : cartes empilées
       Annule le défilement horizontal hérité de style.css.
       Le libellé de colonne vient de l'attribut data-libelle, posé
       automatiquement par le script de pied.php.
       --------------------------------------------------------------- */
    .tableau {
        display: block; overflow-x: visible; white-space: normal;
        border-collapse: separate; border-spacing: 0;
    }
    .tableau thead { display: none; }          /* l'en-tête passe dans chaque cellule */
    .tableau tbody, .tableau tfoot { display: block; }

    .tableau tbody tr, .tableau tfoot tr {
        display: block;
        border: 1px solid var(--gris-bord);
        border-radius: 12px;
        padding: 4px 12px;
        margin-bottom: 10px;
        background: var(--blanc);
    }
    .tableau tfoot tr { background: var(--gris-fond); font-weight: 700; }

    /* Espacement resserré : une liste de 60 articles doit rester parcourable.
       Chaque cellule reste sur une ligne, libellé à gauche, valeur à droite. */
    .tableau tbody td, .tableau tbody th,
    .tableau tfoot td, .tableau tfoot th {
        display: flex; align-items: baseline; justify-content: space-between;
        gap: 12px; text-align: right; font-size: 14px;
        padding: 5px 0; border-bottom: none;
        white-space: normal; word-break: break-word;
    }
    .tableau tbody tr > *:last-child,
    .tableau tfoot tr > *:last-child { border-bottom: none; }

    /* Le libellé de colonne, à gauche, discret. */
    .tableau tbody td::before, .tableau tfoot td::before {
        content: attr(data-libelle);
        font-size: 12px; font-weight: 600; text-transform: uppercase;
        letter-spacing: .3px; color: var(--gris-texte);
        text-align: left; flex: 0 0 40%;
    }
    .tableau td[data-libelle=""]::before { content: none; }

    /* Première cellule : titre de la carte. C'est elle qui rend la liste
       parcourable — l'œil descend sur les noms, pas sur les chiffres. */
    .tableau tbody td:first-child {
        justify-content: flex-start; text-align: left;
        font-size: 16px; font-weight: 700;
        padding: 4px 0 8px; margin-bottom: 4px;
        border-bottom: 1px solid var(--gris-bord);
    }
    .tableau tbody td:first-child::before { content: none; }

    /* Cellule d'actions : boutons alignés à droite, bien espacés. */
    .tableau td.actions {
        justify-content: flex-end; gap: 8px; padding-top: 10px; padding-bottom: 4px;
    }
    .tableau td.actions::before { content: none; }
    .tableau td.actions form { display: inline-flex; }

    /* Une cellule vide n'occupe pas de place dans une carte. */
    .tableau tbody td:empty { display: none; }

    /* ---------------------------------------------------------------
       3. Saisie du bon d'appro : la ligne devient une fiche
       C'est l'écran utilisé debout au marché : il doit se remplir
       d'une seule main, sans jamais défiler latéralement.
       --------------------------------------------------------------- */
    /* Bordure uniforme : un liseré latéral coloré est le motif que le reste
       de l'application n'emploie nulle part. La carte se distingue déjà par
       son cadre et son espacement. */
    #tableau-lignes tbody tr {
        padding: 10px 12px 6px;
        border: 1px solid var(--gris-bord);
    }
    #tableau-lignes tbody td {
        display: block; text-align: left; padding: 7px 0; border-bottom: none;
    }
    #tableau-lignes tbody td::before {
        display: block; content: attr(data-libelle);
        font-size: 12px; font-weight: 600; text-transform: uppercase;
        letter-spacing: .3px; color: var(--gris-texte); margin-bottom: 4px;
    }
    #tableau-lignes tbody td:first-child { font-size: inherit; font-weight: inherit; padding-top: 0; }
    #tableau-lignes tbody td:first-child::before { display: block; content: attr(data-libelle); }
    #tableau-lignes input, #tableau-lignes select { width: 100%; }

    /* Quantité + unité côte à côte, prix + montant côte à côte :
       ce sont des paires qu'on lit ensemble. */
    #tableau-lignes tbody tr {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px;
    }
    #tableau-lignes tbody td:nth-child(1) { grid-column: 1 / -1; }  /* article */
    #tableau-lignes tbody td:nth-child(2) { grid-column: 1; }       /* quantité */
    #tableau-lignes tbody td:nth-child(3) { grid-column: 2; }       /* unité */
    #tableau-lignes tbody td:nth-child(4) { grid-column: 1; }       /* prix unitaire */
    #tableau-lignes tbody td:nth-child(5) { grid-column: 2; }       /* montant */

    /* Compte, atelier et destination sont déjà renseignés depuis l'article :
       on les replie derrière un résumé. Les déplier reste possible d'un
       geste, mais ce n'est pas le cas courant — et cela fait gagner plus de
       200px par ligne, soit plusieurs écrans sur un bon complet. */
    #tableau-lignes tbody td:nth-child(6),
    #tableau-lignes tbody td:nth-child(7),
    #tableau-lignes tbody td:nth-child(8) { grid-column: 1 / -1; display: none; }
    #tableau-lignes tbody tr.deplie td:nth-child(6),
    #tableau-lignes tbody tr.deplie td:nth-child(7),
    #tableau-lignes tbody tr.deplie td:nth-child(8) { display: block; }

    /* Résumé de l'imputation + bouton pour déplier. */
    #tableau-lignes tbody td.l-imputation {
        grid-column: 1 / -1;
        display: flex; align-items: center; justify-content: space-between;
        gap: 10px; padding: 8px 0 2px; border-top: 1px solid var(--gris-bord); margin-top: 4px;
    }
    #tableau-lignes tbody td.l-imputation::before { display: none; }
    .l-resume { font-size: 12.5px; color: var(--gris-texte); }
    .l-bascule {
        background: none; border: none; color: var(--rose);
        font-size: 13px; font-weight: 700; padding: 6px 4px;
        min-height: 44px; cursor: pointer;
    }

    #tableau-lignes tbody td:nth-child(10) {                         /* supprimer */
        grid-column: 1 / -1; text-align: right; padding-top: 0;
    }
    #tableau-lignes tbody td:nth-child(10)::before { display: none; }
    /* Le montant est le chiffre qu'on vérifie : on le met en avant. */
    #tableau-lignes .l-montant { font-weight: 700; font-size: 17px; }

    /* Total du bon toujours visible pendant la saisie. */
    #tableau-lignes tfoot tr {
        position: sticky; bottom: 0; z-index: 5;
        display: flex; align-items: center; justify-content: space-between;
        background: var(--blanc); border: 1px solid var(--gris-bord);
        box-shadow: 0 -4px 14px rgba(0,0,0,.10);
        border-radius: 12px; padding: 10px 14px; margin: 0;
    }
    #tableau-lignes tfoot th { display: block; padding: 0; border: none; text-align: left; }
    #tableau-lignes tfoot th::before { display: none; }
    #tableau-lignes tfoot th:empty { display: none; }

    /* ---------------------------------------------------------------
       4. Indicateurs : deux par ligne plutôt qu'un seul empilé
       Un écran de 375px affiche ainsi 4 chiffres d'un coup au lieu de 2.
       --------------------------------------------------------------- */
    .grille-cartes { grid-template-columns: 1fr 1fr !important; gap: 10px; }
    .carte-stat { padding: 12px 10px; }
    .stat-valeur { font-size: 19px; line-height: 1.15; }
    .stat-libelle { font-size: 11px; }
    .stat-icone { font-size: 20px; }

    /* ---------------------------------------------------------------
       5. Graphiques du pilotage : le libellé au-dessus, la barre
       pleine largeur, la valeur sous la barre. La grille à 3 colonnes
       écrasait la valeur à 0px sur petit écran.
       --------------------------------------------------------------- */
    .viz-rang {
        display: block !important; padding: 10px 0;
        border-bottom: 1px solid var(--gris-bord);
    }
    .viz-nom { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
    .viz-piste { width: 100%; }
    .viz-valeur { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
    .viz-groupe { display: flex; flex-direction: column; gap: 3px; }

    /* ---------------------------------------------------------------
       6. Confort général
       --------------------------------------------------------------- */
    .carte { padding: 14px; }
    .entete-carte { flex-direction: column; align-items: stretch; gap: 10px; }
    .entete-carte h2, .entete-carte h3 { margin: 0; }
    .acces-rapides { display: flex; flex-direction: column; gap: 8px; }
    .acces-rapides .bouton-principal, .acces-rapides .bouton-secondaire { width: 100%; text-align: center; }
    .texte-doux { font-size: 13.5px; line-height: 1.5; }

    /* Les blocs à défilement horizontal n'ont plus lieu d'être :
       les tableaux sont devenus des cartes. */
    .carte > div[style*="overflow-x"] { overflow-x: visible !important; }
}

/* Très petits écrans : un seul indicateur par ligne redevient plus lisible. */
@media (max-width: 360px) {
    .grille-cartes { grid-template-columns: 1fr !important; }
    #tableau-lignes tbody tr { grid-template-columns: 1fr; }
    #tableau-lignes tbody td { grid-column: 1 / -1 !important; }
}

/* =====================================================================
   LISTE DES TICKETS — téléphone
   Une carte compacte au lieu de 9 lignes libellé/valeur : on lit d'abord
   le numéro, le client et le montant, le reste est en petit dessous.
   ===================================================================== */
@media (max-width: 760px) {
    /* Filtres : recherche pleine largeur, périodes qui défilent d'un doigt. */
    .entete-carte { flex-wrap: wrap; gap: 10px; }
    .entete-carte h2 { flex: 1 0 100%; margin: 0; }
    .entete-carte .bouton-large,
    .form-recherche { flex: 1 0 100%; }
    .form-recherche { display: flex; flex-wrap: nowrap; gap: 8px; }
    .form-recherche .bouton-large { flex: none; width: auto; padding-inline: 14px; }
    .form-recherche input[type="search"] { flex: 1; min-width: 0; }
    /* Les 4 périodes tiennent sur une ligne ; la date précise passe dessous. */
    .onglets-periode { gap: 6px; }
    .onglets-periode .onglet { flex: 1 1 0; text-align: center; padding: 9px 4px; font-size: 13px; white-space: nowrap; }
    .onglets-periode .form-jour { flex: 1 0 100%; }

}


/* =====================================================================
   LISTE DES TICKETS — cartes en grille (téléphone, tablette, petit PC)
   Un tableau de 9 colonnes ne tient pas sous ~1180 px une fois le menu
   latéral ouvert : on passe en cartes, autant de colonnes que la largeur
   le permet.
   ===================================================================== */
@container liste (max-width: 1200px) {
    .tableau-tickets { display: block; overflow: visible; border-collapse: separate; }
    .tableau-tickets thead { display: none; }
    .tableau-tickets tbody {
        display: grid; gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    }
    .tableau-tickets tbody tr {
        border: 1px solid var(--gris-bord); border-radius: 12px; background: var(--blanc); margin: 0;
    }
    .tableau-tickets tbody tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "num num stat"
            "cli cli tot"
            "pla pla pla"
            "dat cai mod"
            "act act act";
        column-gap: 10px; row-gap: 2px; align-items: center;
        padding: 12px 14px 10px;
    }
    .tableau-tickets tbody td { padding: 0; font-size: 13px; text-align: left; display: block; }
    .tableau-tickets tbody td::before { content: none; }

    .tableau.tableau-tickets tbody td:nth-child(1) { grid-area: num; font-size: 12.5px; font-weight: 700; color: var(--gris-texte); border: 0; padding: 0; margin: 0; }
    .tableau-tickets td:nth-child(8) { grid-area: stat; justify-self: end; }
    .tableau-tickets td:nth-child(3) { grid-area: cli; font-size: 16px; font-weight: 700; }
    .tableau-tickets td:nth-child(7) { grid-area: tot; justify-self: end; font-size: 16px; font-weight: 800; white-space: nowrap; color: var(--rose); }
    .tableau-tickets td:nth-child(4) { grid-area: pla; margin: 4px 0 8px; padding: 7px 10px; border-radius: 8px; background: var(--gris-fond); font-size: 13px; }
    .tableau-tickets td:nth-child(2) { grid-area: dat; }
    .tableau-tickets td:nth-child(5) { grid-area: cai; }
    .tableau-tickets td:nth-child(6) { grid-area: mod; justify-self: end; }
    .tableau-tickets td:nth-child(2),
    .tableau-tickets td:nth-child(5),
    .tableau-tickets td:nth-child(6) { font-size: 11.5px; color: var(--gris-texte); }
    .tableau-tickets td:nth-child(2), .tableau-tickets td:nth-child(6) { white-space: nowrap; }
    .tableau-tickets td:nth-child(5) { line-height: 1.25; }
    .tableau-tickets td:nth-child(5)::before { content: "👤 "; }
    .tableau-tickets td:nth-child(6)::before { content: "💳 "; }
    .tableau-tickets td:nth-child(2)::before,
    .tableau-tickets td:nth-child(5)::before,
    .tableau-tickets td:nth-child(6)::before { flex: none; font-size: inherit; text-transform: none; }

    .tableau-tickets td.actions {
        grid-area: act; display: flex; justify-content: flex-end; gap: 8px;
        margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--gris-bord);
    }
    .tableau-tickets td.actions .mini-bouton { min-width: 44px; min-height: 40px; }
}

/* Ticket annulé : visiblement « éteint », mais lisible et restaurable. */
.tableau-tickets .ligne-annulee td:not(.actions) { opacity: .62; }
.tableau-tickets .ligne-annulee td:nth-child(7) { text-decoration: line-through; }
.tableau-tickets td.actions { white-space: nowrap; }
.tableau-tickets td.actions form { display: inline-flex; margin: 0; }
.mini-bouton.restaurer { width: auto; padding: 0 12px; gap: 6px; font-size: 13px; font-weight: 700; color: var(--vert, #1b8a4b); }
@container liste (min-width: 1201px) {
    .tableau-tickets td:nth-child(1), .tableau-tickets td:nth-child(2) { white-space: nowrap; }
}
/* =====================================================================
   CAISSE — téléphone
   Plats en trois colonnes compactes, catégories sur un seul rail, et le
   ticket en cours devient un volet qui monte du bas : le caissier garde
   les plats sous le pouce et voit son total en permanence.
   ===================================================================== */
@media (max-width: 900px) {
    .caisse { gap: 0; }

    .caisse .filtres-categories {
        flex-wrap: nowrap; overflow-x: auto; gap: 6px;
        margin: 0 -12px 10px; padding: 2px 12px 6px; scrollbar-width: none;
        position: sticky; top: 0; z-index: 20; background: var(--gris-fond);
    }
    .caisse .filtres-categories::-webkit-scrollbar { display: none; }
    .caisse .filtre-cat { flex: 0 0 auto; padding: 8px 14px; font-size: 13px; white-space: nowrap; }

    .caisse .grille-plats { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
    .caisse .plat-bouton { padding: 8px 6px 9px; gap: 4px; border-radius: 12px; }
    .caisse .plat-bouton img { width: 100%; height: auto; aspect-ratio: 1; }
    .caisse .plat-emoji { font-size: 34px; line-height: 1; padding: 10px 0; }
    .caisse .plat-nom {
        font-size: 12px; line-height: 1.2; font-weight: 700;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .caisse .plat-prix { font-size: 12.5px; }
    .caisse-plats { padding-bottom: 76px; }

    /* Ticket en cours : volet du bas. */
    .caisse-panier {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60;
        width: auto; max-height: 88vh; overflow-y: auto; overflow-x: hidden;
        border: none; border-radius: 18px 18px 0 0; box-sizing: border-box;
        padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
        box-shadow: 0 -8px 28px rgba(0,0,0,.2);
        transform: translateY(110%); transition: transform .28s ease;
    }
    .caisse-panier.ouvert { transform: translateY(0); }
    .caisse-panier h2 { margin: 0; font-size: 17px; }
    .caisse-panier .fermer-panier { display: block; min-width: 44px; min-height: 44px; }
    .caisse-panier .lignes-panier { max-height: 30vh; padding-right: 8px; }
    .caisse-panier .ligne-article { grid-template-columns: 1fr auto; row-gap: 4px; }
    .caisse-panier .art-soustotal { grid-column: 2; grid-row: 1; justify-self: end; }
    .caisse-panier .art-quantite { grid-column: 1 / -1; grid-row: 2; }
    .caisse-panier .qte-moins, .caisse-panier .qte-plus { width: 38px; height: 38px; }
    .caisse-panier .champ-inline { margin: 8px 0 0; }
    .caisse-panier .champ-inline input, .caisse-panier .champ-inline select { min-height: 44px; width: 100%; box-sizing: border-box; }
    .caisse-panier .actions-caisse { position: sticky; bottom: 0; background: var(--blanc); padding-top: 10px; }

    .voile-caisse.visible { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.45); }

    /* Barre flottante : nombre d'articles à gauche, net à payer à droite. */
    .fab-caisse.visible {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        position: fixed; left: 12px; right: 12px; z-index: 50;
        bottom: calc(12px + env(safe-area-inset-bottom));
        height: 54px; padding: 0 18px; border: 0; border-radius: 14px;
        background: var(--rose); color: #fff; font-size: 15px; cursor: pointer;
        box-shadow: 0 10px 26px rgba(0,0,0,.28);
    }
    .fab-caisse strong { font-size: 17px; white-space: nowrap; }
}

/* =====================================================================
   COMMANDES EN LIGNE — téléphone
   Lignes de plats en liste compacte (« 2×  Plat ........ 1 000 FCFA »),
   étiquettes sur une ligne, boutons de validation pleine largeur.
   ===================================================================== */
@media (max-width: 760px) {
    .commande-carte { padding: 14px; }
    .commande-carte .entete-carte { align-items: flex-start; gap: 8px; }
    .commande-carte .entete-carte > div:first-child { flex: 1 1 100%; }
    .commande-carte .titre-commande { font-size: 16px; line-height: 1.3; }
    .commande-carte .texte-doux { font-size: 12.5px; line-height: 1.5; margin: 4px 0 0; }
    .commande-carte .entete-carte .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 100%; }
    .commande-carte .entete-carte .actions .etiquette { font-size: 12px; }
    .commande-carte .entete-carte .actions .mini-bouton { margin-left: auto; }
    .commande-carte .entete-carte .actions .mini-bouton + .mini-bouton { margin-left: 0; }

    .commande-carte .tableau tbody tr {
        display: grid; grid-template-columns: auto 1fr auto; column-gap: 10px; align-items: baseline;
        margin: 0; padding: 9px 0; border: 0; border-bottom: 1px dashed var(--gris-bord);
        border-radius: 0; background: none;
    }
    .commande-carte .tableau tbody td { display: block; padding: 0; border: 0; font-size: 14px; text-align: left; }
    .commande-carte .tableau tbody td::before { content: none; }
    .commande-carte .tableau tbody td:nth-child(1) { grid-column: 2; grid-row: 1; font-size: 14px; font-weight: 600; margin: 0; padding: 0; }
    .commande-carte .tableau tbody td:nth-child(2) { display: none; }
    .commande-carte .tableau tbody td:nth-child(3) {
        grid-column: 1; grid-row: 1; min-width: 30px; font-weight: 800; color: var(--rose);
    }
    .commande-carte .tableau tbody td:nth-child(3)::after { content: "×"; }
    .commande-carte .tableau tbody td:nth-child(4) { grid-column: 3; grid-row: 1; font-weight: 700; white-space: nowrap; text-align: right; }

    .commande-carte .bloc-validation { margin-top: 12px; }
    .commande-carte .validation-boutons { display: grid; gap: 8px; }
}
@media (max-width: 760px) {
    .commande-carte .validation-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
    .commande-carte .validation-champs .champ-net { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; }
    .commande-carte .validation-champs input, .commande-carte .validation-champs select { min-height: 44px; width: 100%; box-sizing: border-box; }
}

/* Une ligne masquée par [hidden] doit le rester, même quand le tableau passe en cartes. */
.tableau tr[hidden] { display: none !important; }

/* =====================================================================
   PRÉSENCE — cartes de pointage (téléphone, tablette, petit PC)
   Un salarié = une carte : nom et statut en haut, arrivée et départ côte
   à côte (gros champs d'heure), note, puis « Enregistrer ».
   ===================================================================== */
@container liste (max-width: 980px) {
    .tableau-presence { display: block; overflow: visible; border-collapse: separate; }
    .tableau-presence thead { display: none; }
    .tableau-presence tbody {
        display: grid; gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    }
    .tableau-presence tbody tr.ligne-pointage {
        display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; align-content: start;
        grid-template-areas: "nom stat" "poste poste" "arr dep" "note note" "act act";
        margin: 0; padding: 12px 14px; border: 1px solid var(--gris-bord); border-radius: 12px; background: var(--blanc);
    }
    .tableau-presence tbody tr.ligne-fiche { grid-column: 1 / -1; padding: 12px; border: 1px dashed var(--gris-bord); border-radius: 12px; }
    .tableau-presence tbody tr.ligne-fiche td { display: block; padding: 0; }
    .tableau-presence tbody tr.ligne-fiche .form-ligne { display: grid; gap: 8px; }

    .tableau-presence tr.ligne-pointage td { display: block; padding: 0; border: 0; text-align: left; font-size: 14px; }
    .tableau-presence tr.ligne-pointage td:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(7))::before { content: none; }
    .tableau-presence td:nth-child(1) { grid-area: nom; align-self: center; font-size: 16px; font-weight: 700; margin: 0; }
    .tableau-presence td:nth-child(1) .lien-salarie { margin-right: 6px; }
    .tableau-presence td:nth-child(2) { grid-area: poste; font-size: 12.5px; color: var(--gris-texte); margin-top: -4px; }
    .tableau-presence td:nth-child(3) { grid-area: stat; justify-self: end; }
    .tableau-presence td:nth-child(4) { grid-area: arr; }
    .tableau-presence td:nth-child(5) { grid-area: dep; }
    .tableau-presence td:nth-child(6) { grid-area: note; }
    .tableau-presence tr.ligne-pointage td:is(:nth-child(4), :nth-child(5), :nth-child(6))::before {
        content: attr(data-libelle); display: block; flex: none; margin-bottom: 3px;
        font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--gris-texte);
    }
    .tableau-presence td input, .tableau-presence td select { width: 100%; min-height: 44px; box-sizing: border-box; font-size: 16px; }
    .tableau-presence td:nth-child(3) select { min-width: 120px; min-height: 40px; font-size: 14px; font-weight: 600; }
    .tableau-presence td.actions { grid-area: act; display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--gris-bord); }
    .tableau-presence td.actions form { display: inline-flex; margin: 0; }
    .tableau-presence td.actions .mini-bouton { min-height: 42px; min-width: 44px; }
    .tableau-presence td.actions > button.mini-bouton:not(.danger) {
        flex: 1; width: auto; font-size: 14px; font-weight: 700; background: var(--rose); color: #fff; border-color: var(--rose);
    }
    .tableau-presence td.actions > button.mini-bouton:not(.danger)::after { content: "Enregistrer"; margin-left: 6px; }
}

/* =====================================================================
   CLIENTS — fiches contact (téléphone, tablette, petit PC)
   Initiale dans un rond, nom et téléphone cliquable (appel direct),
   badge « Abonné », puis trois gros boutons d'action.
   ===================================================================== */
.tableau-clients .avatar {
    display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 10px;
    border-radius: 50%; background: color-mix(in srgb, var(--rose) 12%, #fff); color: var(--rose);
    font-weight: 800; font-size: 15px; vertical-align: middle;
}
.tableau-clients .lien-tel { color: inherit; text-decoration: none; white-space: nowrap; }
@container liste (max-width: 720px) {
    .tableau-clients { display: block; overflow: visible; border-collapse: separate; }
    .tableau-clients thead { display: none; }
    .tableau-clients tbody {
        display: grid; gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    }
    .tableau-clients tbody tr {
        display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px;
        grid-template-areas: "nom abo" "tel abo" "act act";
        margin: 0; padding: 14px; border: 1px solid var(--gris-bord); border-radius: 14px; background: var(--blanc);
    }
    .tableau-clients tbody td { display: block; padding: 0; border: 0; text-align: left; font-size: 14px; }
    .tableau-clients tbody td::before { content: none; }
    .tableau-clients td:nth-child(1) { grid-area: nom; display: flex; align-items: center; font-size: 16px; font-weight: 700; margin: 0; }
    .tableau-clients td:nth-child(2) { grid-area: tel; padding-left: 44px; color: var(--gris-texte); font-size: 13.5px; }
    .tableau-clients td:nth-child(3) { grid-area: abo; align-self: start; }
    .tableau-clients td:nth-child(3) .texte-doux { display: none; }
    .tableau-clients td.actions {
        grid-area: act; display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gris-bord);
    }
    .tableau-clients td.actions > *, .tableau-clients td.actions form { flex: 1; display: flex; margin: 0; }
    .tableau-clients td.actions .mini-bouton { flex: 1; justify-content: center; min-height: 44px; }
}
@container liste (max-width: 720px) {
    .tableau.tableau-clients tbody td:nth-child(1) { border: 0; padding: 0; margin: 0; gap: 12px; }
    .tableau.tableau-clients .avatar { margin-right: 0; flex: none; width: 36px; height: 36px; }
    .tableau.tableau-clients tbody td:nth-child(2) { padding-left: 48px; }
}

/* Conteneur de requête : les listes réagissent à leur propre largeur (menu latéral déduit),
   jamais à celle de l'écran. Aucun défilement horizontal, à aucune largeur. */
.liste-adaptative { container: liste / inline-size; width: 100%; min-width: 0; }
.liste-adaptative .tableau { width: 100%; }
/* Large mais pas immense : le bouton « Restaurer » ne garde que son icône. */
@container liste (min-width: 1201px) and (max-width: 1450px) { .mini-bouton.restaurer span { display: none; } }

/* =====================================================================
   TABLEAUX EN CARTES (générique) — classe posée par pied.php dès qu'un
   tableau ne tient plus dans sa zone. Même rendu que sur téléphone.
   ===================================================================== */
.contenu, .carte { min-width: 0; max-width: 100%; }
.tableau.tableau-cartes { display: block; overflow: visible; border-collapse: separate; white-space: normal; }
.tableau-cartes thead { display: none; }
.tableau-cartes tbody, .tableau-cartes tfoot {
    display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.tableau-cartes tbody tr, .tableau-cartes tfoot tr {
    display: block; margin: 0; padding: 6px 14px; border: 1px solid var(--gris-bord);
    border-radius: 12px; background: var(--blanc);
}
.tableau-cartes tfoot tr { background: var(--gris-fond); font-weight: 700; }
.tableau-cartes tr[hidden] { display: none; }
.tableau-cartes td, .tableau-cartes th {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 6px 0; border: 0; text-align: right; font-size: 14px;
    text-transform: none; letter-spacing: 0; color: inherit; overflow-wrap: anywhere;
}
.tableau-cartes td::before {
    content: attr(data-libelle); flex: 0 0 38%; text-align: left; font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .3px; color: var(--gris-texte);
}
.tableau-cartes td[data-libelle=""]::before, .tableau-cartes td.actions::before, .tableau-cartes td:first-child::before { content: none; }
.tableau-cartes td:first-child {
    justify-content: flex-start; text-align: left; font-size: 16px; font-weight: 700;
    padding: 6px 0 8px; margin-bottom: 4px; border-bottom: 1px solid var(--gris-bord);
}
.tableau-cartes td.actions { justify-content: flex-end; gap: 8px; padding-top: 10px; }
.tableau-cartes td.actions form { display: inline-flex; margin: 0; }
.tableau-cartes td:empty { display: none; }

/* =====================================================================
   DÉPENSES · APPROVISIONNEMENTS · UTILISATEURS · TICKETS DES RAPPORTS
   Quatre listes, une même logique : une fiche par ligne, l'essentiel
   (nom / montant) en haut, le détail en petit dessous, actions en bas.
   Seuil : la largeur de la zone, pas celle de l'écran.
   ===================================================================== */
@container liste (max-width: 900px) {
    .tableau:is(.tableau-depenses, .tableau-appros, .tableau-utilisateurs, .tableau-rtickets) {
        display: block; overflow: visible; border-collapse: separate;
    }
    .tableau:is(.tableau-depenses, .tableau-appros, .tableau-utilisateurs, .tableau-rtickets) thead { display: none; }
    .tableau:is(.tableau-depenses, .tableau-appros, .tableau-utilisateurs, .tableau-rtickets) tbody {
        display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    }
    .tableau:is(.tableau-depenses, .tableau-appros, .tableau-utilisateurs, .tableau-rtickets) tbody tr {
        display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; align-content: start;
        margin: 0; padding: 12px 14px; border: 1px solid var(--gris-bord); border-radius: 12px; background: var(--blanc);
    }
    .tableau:is(.tableau-depenses, .tableau-appros, .tableau-utilisateurs, .tableau-rtickets) tbody td {
        display: block; padding: 0; margin: 0; border: 0; text-align: left; font-size: 13px; color: var(--gris-texte);
    }
    .tableau:is(.tableau-depenses, .tableau-appros, .tableau-utilisateurs, .tableau-rtickets) tbody td::before { content: none; }
    .tableau:is(.tableau-depenses, .tableau-appros, .tableau-utilisateurs, .tableau-rtickets) td.actions {
        display: flex; gap: 8px; justify-content: flex-end; color: inherit;
    }
    .tableau:is(.tableau-depenses, .tableau-appros, .tableau-utilisateurs, .tableau-rtickets) td.actions form { display: inline-flex; margin: 0; }
    .tableau:is(.tableau-depenses, .tableau-appros, .tableau-utilisateurs, .tableau-rtickets) td.actions .mini-bouton { min-height: 42px; min-width: 44px; }

    /* Dépenses : catégorie + montant, détail, puis date · mode · auteur */
    .tableau-depenses tbody tr { grid-template-areas: "cat mon" "det det" "dat mod" "par act"; }
    .tableau.tableau-depenses tbody td:nth-child(1) { grid-area: dat; }
    .tableau.tableau-depenses tbody td:nth-child(2) { grid-area: cat; color: var(--noir); font-size: 15px; font-weight: 700; line-height: 1.3; }
    .tableau.tableau-depenses tbody td:nth-child(2) .texte-doux { font-weight: 400; font-size: 12px; }
    .tableau.tableau-depenses tbody td:nth-child(3) { grid-area: det; padding: 6px 10px; margin: 2px 0 4px; border-radius: 8px; background: var(--gris-fond); color: var(--noir); }
    .tableau.tableau-depenses tbody td:nth-child(4) { grid-area: mod; justify-self: end; }
    .tableau.tableau-depenses tbody td:nth-child(5) { grid-area: mon; justify-self: end; color: var(--rouge); font-size: 16px; font-weight: 800; white-space: nowrap; }
    .tableau.tableau-depenses tbody td:nth-child(6) { grid-area: par; }
    .tableau.tableau-depenses tbody td:nth-child(6)::before { content: "Par "; }
    .tableau.tableau-depenses tbody td.actions { grid-area: act; }

    /* Bons d'achat : numéro + total, fournisseur, date · atelier, lignes + actions */
    .tableau-appros tbody tr { grid-template-areas: "num tot" "fou fou" "dat ate" "lig act"; }
    .tableau.tableau-appros tbody td:nth-child(1) { grid-area: dat; }
    .tableau.tableau-appros tbody td:nth-child(2) { grid-area: num; color: var(--gris-texte); font-weight: 700; }
    .tableau.tableau-appros tbody td:nth-child(3) { grid-area: fou; color: var(--noir); font-size: 16px; font-weight: 700; }
    .tableau.tableau-appros tbody td:nth-child(4) { grid-area: ate; justify-self: end; }
    .tableau.tableau-appros tbody td:nth-child(5) { grid-area: lig; }
    .tableau.tableau-appros tbody td:nth-child(5)::after { content: " ligne(s)"; }
    .tableau.tableau-appros tbody td:nth-child(6) { grid-area: tot; justify-self: end; color: var(--rose); font-size: 16px; white-space: nowrap; }
    .tableau.tableau-appros tbody td.actions { grid-area: act; }

    /* Utilisateurs : nom + statut, e-mail, rôle · connexion, actions */
    .tableau-utilisateurs tbody tr { grid-template-areas: "nom sta" "mail mail" "rol rol" "der der" "act act"; }
    .tableau.tableau-utilisateurs tbody td:nth-child(1) { grid-area: nom; color: var(--noir); font-size: 16px; font-weight: 700; }
    .tableau.tableau-utilisateurs tbody td:nth-child(2) { grid-area: mail; overflow-wrap: anywhere; }
    .tableau.tableau-utilisateurs tbody td:nth-child(3) { grid-area: rol; color: var(--noir); font-weight: 600; }
    .tableau.tableau-utilisateurs tbody td:nth-child(4) { grid-area: sta; justify-self: end; }
    .tableau.tableau-utilisateurs tbody td:nth-child(5) { grid-area: der; font-size: 12px; }
    .tableau.tableau-utilisateurs tbody td:nth-child(5)::before { content: "Connexion : "; }
    .tableau.tableau-utilisateurs tbody td.actions { grid-area: act; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--gris-bord); }

    /* Tickets des rapports : numéro + total, date · mode, caissier + voir */
    .tableau-rtickets tbody tr { grid-template-areas: "num tot" "dat mod" "cai act"; }
    .tableau.tableau-rtickets tbody td:nth-child(1) { grid-area: num; color: var(--noir); font-weight: 700; }
    .tableau.tableau-rtickets tbody td:nth-child(2) { grid-area: dat; }
    .tableau.tableau-rtickets tbody td:nth-child(3) { grid-area: cai; }
    .tableau.tableau-rtickets tbody td:nth-child(4) { grid-area: mod; justify-self: end; }
    .tableau.tableau-rtickets tbody td:nth-child(5) { grid-area: tot; justify-self: end; color: var(--rose); font-size: 16px; font-weight: 800; white-space: nowrap; }
    .tableau.tableau-rtickets tbody td:nth-child(6) { grid-area: act; justify-self: end; }
}
@container liste (max-width: 900px) {
    .tableau.tableau-appros tbody td:nth-child(2), .tableau.tableau-rtickets tbody td:nth-child(1) { white-space: nowrap; font-size: 12.5px; }
}
@container liste (max-width: 900px) {
    .tableau-utilisateurs .cellule-personne { display: flex; width: 100%; min-width: 0; flex-wrap: nowrap; }
    .tableau-utilisateurs .badge-compte { white-space: nowrap; }
    .tableau-utilisateurs .photo-utilisateur { flex: none; }
}

/* =====================================================================
   STOCK · MOUVEMENTS · OPÉRATIONS · PRODUCTIONS · FICHES TECHNIQUES
   Fiches à six colonnes : l'identité en haut (nom + valeur clé), les
   chiffres secondaires en petites cellules « libellé / valeur ».
   Le libellé vient de data-libelle (posé par pied.php depuis l'en-tête).
   ===================================================================== */
@container liste (max-width: 1000px) {
    .tableau:is(.tableau-stock, .tableau-mouv, .tableau-ops, .tableau-prod, .tableau-fiches) {
        display: block; overflow: visible; border-collapse: separate;
    }
    .tableau:is(.tableau-stock, .tableau-mouv, .tableau-ops, .tableau-prod, .tableau-fiches) thead { display: none; }
    .tableau:is(.tableau-stock, .tableau-mouv, .tableau-ops, .tableau-prod, .tableau-fiches) tbody {
        display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
    }
    .tableau:is(.tableau-stock, .tableau-mouv, .tableau-ops, .tableau-prod, .tableau-fiches) tbody tr {
        display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px 10px; align-items: center; align-content: start;
        margin: 0; padding: 12px 14px; border: 1px solid var(--gris-bord); border-radius: 12px; background: var(--blanc);
    }
    .tableau:is(.tableau-stock, .tableau-mouv, .tableau-ops, .tableau-prod, .tableau-fiches) tbody td {
        display: block; padding: 0; margin: 0; border: 0; text-align: left; font-size: 13px; color: var(--noir); overflow-wrap: anywhere;
    }
    .tableau:is(.tableau-stock, .tableau-mouv, .tableau-ops, .tableau-prod, .tableau-fiches) tbody td::before { content: none; }
    .tableau:is(.tableau-stock, .tableau-mouv, .tableau-ops, .tableau-prod, .tableau-fiches) td.actions {
        display: flex; gap: 8px; justify-content: flex-end;
    }
    .tableau:is(.tableau-stock, .tableau-mouv, .tableau-ops, .tableau-prod, .tableau-fiches) td.actions form { display: inline-flex; margin: 0; }
    .tableau:is(.tableau-stock, .tableau-mouv, .tableau-ops, .tableau-prod, .tableau-fiches) td.actions .mini-bouton { min-height: 40px; min-width: 44px; }

    /* Petites cellules « libellé au-dessus, valeur dessous » */
    .tableau.tableau-stock tbody td:is(:nth-child(5), :nth-child(6), :nth-child(7))::before,
    .tableau.tableau-mouv  tbody td:is(:nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9))::before,
    .tableau.tableau-ops   tbody td:is(:nth-child(5), :nth-child(6), :nth-child(7))::before,
    .tableau.tableau-prod  tbody td:is(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9))::before,
    .tableau.tableau-fiches tbody td:is(:nth-child(4), :nth-child(5), :nth-child(7))::before {
        content: attr(data-libelle); display: block; margin-bottom: 1px;
        font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--gris-texte);
    }

    /* Articles de stock */
    .tableau-stock tbody tr { grid-template-areas: "art art art stk stk uni" "ate ate ate seu seu seu" "cum cum val val act act"; }
    .tableau.tableau-stock tbody td:nth-child(1) { grid-area: art; font-size: 15px; }
    .tableau.tableau-stock tbody td:nth-child(2) { grid-area: ate; color: var(--gris-texte); }
    .tableau.tableau-stock tbody td:nth-child(3) { grid-area: stk; justify-self: end; text-align: right; font-size: 17px; }
    .tableau.tableau-stock tbody td:nth-child(4) { grid-area: uni; color: var(--gris-texte); }
    .tableau.tableau-stock tbody td:nth-child(5) { grid-area: cum; }
    .tableau.tableau-stock tbody td:nth-child(6) { grid-area: val; font-weight: 700; }
    .tableau.tableau-stock tbody td:nth-child(7) { grid-area: seu; justify-self: end; text-align: right; }
    .tableau.tableau-stock tbody td.actions { grid-area: act; }

    /* Mouvements d'un article */
    .tableau-mouv tbody tr { grid-template-areas: "art art art art qte qte" "typ typ typ dat dat dat" "mot mot mot mot mot mot" "cum cum val val sap sap" "ate ate ate cpt cpt cpt"; }
    .tableau.tableau-mouv tbody td:nth-child(1) { grid-area: dat; justify-self: end; color: var(--gris-texte); }
    .tableau.tableau-mouv tbody td:nth-child(2) { grid-area: art; font-weight: 700; font-size: 14.5px; }
    .tableau.tableau-mouv tbody td:nth-child(3) { grid-area: typ; }
    .tableau.tableau-mouv tbody td:nth-child(4) { grid-area: qte; justify-self: end; text-align: right; font-size: 15px; }
    .tableau.tableau-mouv tbody td:nth-child(5) { grid-area: cum; }
    .tableau.tableau-mouv tbody td:nth-child(6) { grid-area: val; }
    .tableau.tableau-mouv tbody td:nth-child(7) { grid-area: sap; }
    .tableau.tableau-mouv tbody td:nth-child(8) { grid-area: ate; }
    .tableau.tableau-mouv tbody td:nth-child(9) { grid-area: cpt; }
    .tableau.tableau-mouv tbody td:nth-child(10) { grid-area: mot; padding: 6px 10px; border-radius: 8px; background: var(--gris-fond); }

    /* Dernières opérations de stock */
    .tableau-ops tbody tr { grid-template-areas: "art art art art qte qte" "typ typ typ dat dat dat" "mot mot mot mot mot mot" "val val ate ate cpt cpt"; }
    .tableau.tableau-ops tbody td:nth-child(1) { grid-area: dat; justify-self: end; color: var(--gris-texte); }
    .tableau.tableau-ops tbody td:nth-child(2) { grid-area: art; font-weight: 700; font-size: 14.5px; }
    .tableau.tableau-ops tbody td:nth-child(3) { grid-area: typ; color: var(--gris-texte); }
    .tableau.tableau-ops tbody td:nth-child(4) { grid-area: qte; justify-self: end; font-weight: 800; font-size: 15px; }
    .tableau.tableau-ops tbody td:nth-child(5) { grid-area: val; }
    .tableau.tableau-ops tbody td:nth-child(6) { grid-area: ate; }
    .tableau.tableau-ops tbody td:nth-child(7) { grid-area: cpt; }
    .tableau.tableau-ops tbody td:nth-child(8) { grid-area: mot; padding: 6px 10px; border-radius: 8px; background: var(--gris-fond); }

    /* Productions */
    .tableau-prod tbody tr { grid-template-areas: "lib lib lib lib sta sta" "dat dat ate ate typ typ" "nbp nbp the the ree ree" "eqa eqa epr epr act act"; }
    .tableau.tableau-prod tbody td:nth-child(1) { grid-area: dat; color: var(--gris-texte); }
    .tableau.tableau-prod tbody td:nth-child(2) { grid-area: lib; font-weight: 700; font-size: 15px; }
    .tableau.tableau-prod tbody td:nth-child(3) { grid-area: ate; }
    .tableau.tableau-prod tbody td:nth-child(4) { grid-area: typ; }
    .tableau.tableau-prod tbody td:nth-child(5) { grid-area: nbp; }
    .tableau.tableau-prod tbody td:nth-child(6) { grid-area: the; }
    .tableau.tableau-prod tbody td:nth-child(7) { grid-area: ree; }
    .tableau.tableau-prod tbody td:nth-child(8) { grid-area: eqa; }
    .tableau.tableau-prod tbody td:nth-child(9) { grid-area: epr; }
    .tableau.tableau-prod tbody td:nth-child(10) { grid-area: sta; justify-self: end; }
    .tableau.tableau-prod tbody td:nth-child(11) { grid-area: act; }

    /* Fiches techniques */
    .tableau-fiches tbody tr { grid-template-areas: "plt plt plt plt fco fco" "cat cat cat fic fic fic" "cou cou pri pri con con" "act act act act act act"; }
    .tableau.tableau-fiches tbody td:nth-child(1) { grid-area: plt; font-size: 15px; }
    .tableau.tableau-fiches tbody td:nth-child(2) { grid-area: cat; color: var(--gris-texte); }
    .tableau.tableau-fiches tbody td:nth-child(3) { grid-area: fic; justify-self: end; text-align: right; font-size: 12px; }
    .tableau.tableau-fiches tbody td:nth-child(4) { grid-area: cou; }
    .tableau.tableau-fiches tbody td:nth-child(5) { grid-area: pri; }
    .tableau.tableau-fiches tbody td:nth-child(6) { grid-area: fco; justify-self: end; text-align: right; font-size: 17px; }
    .tableau.tableau-fiches tbody td:nth-child(7) { grid-area: con; }
    .tableau.tableau-fiches tbody td.actions { grid-area: act; padding-top: 8px; border-top: 1px solid var(--gris-bord); }
}
@container liste (max-width: 1000px) {
    /* Stock : l'unité garde la largeur de son texte (« paquet » ne se coupe plus). */
    .tableau.tableau-stock tbody tr { grid-template-columns: 1fr auto auto; grid-template-areas: "art stk uni" "ate seu seu" "cum val act"; }
    .tableau.tableau-stock tbody td:nth-child(6) { justify-self: end; text-align: right; }
}

/* Fiche technique : une ligne d'ingrédient = une fiche compacte à deux colonnes. */
@media (max-width: 760px) {
    #tableau tbody tr {
        display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; align-items: end; padding: 12px;
        grid-template-areas: "ing ing" "qte uni" "cum cou" "obl del";
    }
    #tableau tbody td { display: block; padding: 0; border: 0; text-align: left; }
    #tableau tbody td::before { content: none; }
    #tableau tbody td:is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5))::before {
        content: attr(data-libelle); display: block; margin-bottom: 3px; flex: none;
        font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--gris-texte);
    }
    #tableau tbody td:nth-child(1) { grid-area: ing; margin: 0; padding: 0; border: 0; font-size: 14px; }
    #tableau tbody td:nth-child(2) { grid-area: qte; }
    #tableau tbody td:nth-child(3) { grid-area: uni; }
    #tableau tbody td:nth-child(4) { grid-area: cum; color: var(--gris-texte); }
    #tableau tbody td:nth-child(5) { grid-area: cou; font-weight: 700; }
    #tableau tbody td:nth-child(6) { grid-area: obl; display: flex; align-items: center; gap: 8px; }
    #tableau tbody td:nth-child(6)::before { content: attr(data-libelle); display: inline; flex: none; font-size: 13px; font-weight: 600; color: var(--gris-texte); text-transform: none; letter-spacing: 0; margin: 0; }
    #tableau tbody td:nth-child(7) { grid-area: del; justify-self: end; }
    #tableau tbody td input:not([type="checkbox"]), #tableau tbody td select { width: 100%; min-height: 44px; box-sizing: border-box; }
}

/* =====================================================================
   DOCUMENTS · RESTAURANTS (super-admin) · PLATS DU MENU · CLÔTURES
   Même principe que les autres listes : l'essentiel en haut, le détail
   en petit, les actions en bas. Seuil = largeur de la zone, pas de l'écran.
   ===================================================================== */
@container liste (max-width: 820px) {
    .tableau:is(.tableau-docs, .tableau-resto, .tableau-plats, .tableau-clot) {
        display: block; overflow: visible; border-collapse: separate;
    }
    .tableau:is(.tableau-docs, .tableau-resto, .tableau-plats, .tableau-clot) thead { display: none; }
    .tableau:is(.tableau-docs, .tableau-resto, .tableau-plats, .tableau-clot) tbody {
        display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    }
    .tableau:is(.tableau-docs, .tableau-resto, .tableau-plats, .tableau-clot) tbody tr {
        display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; align-content: start;
        margin: 0; padding: 12px 14px; border: 1px solid var(--gris-bord); border-radius: 12px; background: var(--blanc);
    }
    .tableau:is(.tableau-docs, .tableau-resto, .tableau-plats, .tableau-clot) tbody td {
        display: block; padding: 0; margin: 0; border: 0; text-align: left; font-size: 13px; color: var(--gris-texte);
    }
    .tableau:is(.tableau-docs, .tableau-resto, .tableau-plats, .tableau-clot) tbody td::before { content: none; }
    .tableau:is(.tableau-docs, .tableau-resto, .tableau-plats, .tableau-clot) td.actions {
        display: flex; gap: 8px; justify-content: flex-end; color: inherit;
        margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--gris-bord);
    }
    .tableau:is(.tableau-docs, .tableau-resto, .tableau-plats, .tableau-clot) td.actions form { display: inline-flex; margin: 0; }
    .tableau:is(.tableau-docs, .tableau-resto, .tableau-plats, .tableau-clot) td.actions .mini-bouton { min-height: 42px; min-width: 44px; }

    /* Documents : numéro + montant, client, type · date */
    .tableau-docs tbody tr { grid-template-areas: "num mon" "cli cli" "typ dat" "act act"; }
    .tableau.tableau-docs tbody td:nth-child(1) { grid-area: num; color: var(--noir); font-weight: 700; white-space: nowrap; }
    .tableau.tableau-docs tbody td:nth-child(2) { grid-area: typ; }
    .tableau.tableau-docs tbody td:nth-child(3) { grid-area: cli; color: var(--noir); font-size: 16px; font-weight: 700; }
    .tableau.tableau-docs tbody td:nth-child(4) { grid-area: dat; justify-self: end; }
    .tableau.tableau-docs tbody td:nth-child(5) { grid-area: mon; justify-self: end; color: var(--rose); font-size: 16px; font-weight: 800; white-space: nowrap; }
    .tableau.tableau-docs tbody td.actions { grid-area: act; }

    /* Restaurants : nom + statut, plan · échéance, depuis */
    .tableau-resto tbody tr { grid-template-areas: "nom sta" "pla ech" "dep dep" "act act"; }
    .tableau.tableau-resto tbody td:nth-child(1) { grid-area: nom; color: var(--noir); font-size: 16px; font-weight: 700; }
    .tableau.tableau-resto tbody td:nth-child(2) { grid-area: pla; color: var(--noir); font-weight: 600; }
    .tableau.tableau-resto tbody td:nth-child(3) { grid-area: ech; justify-self: end; }
    .tableau.tableau-resto tbody td:nth-child(3)::before { content: "Échéance : "; }
    .tableau.tableau-resto tbody td:nth-child(4) { grid-area: sta; justify-self: end; }
    .tableau.tableau-resto tbody td:nth-child(5) { grid-area: dep; font-size: 12px; }
    .tableau.tableau-resto tbody td:nth-child(5)::before { content: "Client depuis le "; }
    .tableau.tableau-resto tbody td.actions { grid-area: act; }

    /* Plats : photo + nom + prix, puis les deux interrupteurs côte à côte */
    .tableau-plats tbody tr { grid-template-columns: 1fr 1fr; grid-template-areas: "plt pri" "sto jou" "act act"; }
    .tableau.tableau-plats tbody td:nth-child(1) { grid-area: plt; display: flex; align-items: center; gap: 10px; color: var(--noir); font-size: 15px; font-weight: 700; }
    .tableau.tableau-plats tbody td:nth-child(2) { grid-area: pri; justify-self: end; color: var(--rose); font-size: 16px; font-weight: 800; white-space: nowrap; }
    .tableau.tableau-plats tbody td:nth-child(3) { grid-area: sto; }
    .tableau.tableau-plats tbody td:nth-child(4) { grid-area: jou; }
    .tableau.tableau-plats tbody td:is(:nth-child(3), :nth-child(4))::before {
        content: attr(data-libelle); display: block; margin-bottom: 3px;
        font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--gris-texte);
    }
    .tableau.tableau-plats tbody td:is(:nth-child(3), :nth-child(4)) button { min-height: 40px; width: 100%; justify-content: center; }
    .tableau.tableau-plats tbody td.actions { grid-area: act; }
    .tableau-plats .vignette { flex: none; }

    /* Clôtures : date + écart, ventes · dépenses, auteur + impression */
    .tableau-clot tbody tr { grid-template-areas: "dat eca" "ven dep" "par act"; }
    .tableau.tableau-clot tbody td:nth-child(1) { grid-area: dat; color: var(--noir); font-size: 16px; font-weight: 700; }
    .tableau.tableau-clot tbody td:nth-child(2) { grid-area: ven; }
    .tableau.tableau-clot tbody td:nth-child(2)::before { content: "Ventes : "; }
    .tableau.tableau-clot tbody td:nth-child(3) { grid-area: dep; justify-self: end; }
    .tableau.tableau-clot tbody td:nth-child(3)::before { content: "Dépenses : "; }
    .tableau.tableau-clot tbody td:nth-child(4) { grid-area: eca; justify-self: end; font-size: 15px; font-weight: 800; }
    .tableau.tableau-clot tbody td:nth-child(5) { grid-area: par; align-self: center; }
    .tableau.tableau-clot tbody td:nth-child(5)::before { content: "Par "; }
    .tableau.tableau-clot tbody td.actions { grid-area: act; margin-top: 0; padding-top: 0; border-top: 0; }
}

/* =====================================================================
   DÉCLARATIONS · CORBEILLE · CONTRATS · SALAIRES
   Mêmes principes : identité et chiffre clé en haut, détails en petites
   cellules « libellé / valeur » (data-libelle), actions en bas.
   Seuil = largeur de la zone, pas de l'écran.
   ===================================================================== */
@container liste (max-width: 980px) {
    .tableau:is(.tableau-decl, .tableau-corb, .tableau-ech, .tableau-cont, .tableau-sal) {
        display: block; overflow: visible; border-collapse: separate; white-space: normal;
    }
    .tableau:is(.tableau-decl, .tableau-corb, .tableau-ech, .tableau-cont, .tableau-sal) thead { display: none; }
    .tableau:is(.tableau-decl, .tableau-corb, .tableau-ech, .tableau-cont, .tableau-sal) tbody {
        display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    }
    .tableau:is(.tableau-decl, .tableau-corb, .tableau-ech, .tableau-cont, .tableau-sal) tbody tr {
        display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; align-items: center; align-content: start;
        margin: 0; padding: 12px 14px; border: 1px solid var(--gris-bord); border-radius: 12px; background: var(--blanc);
    }
    .tableau:is(.tableau-decl, .tableau-corb, .tableau-ech, .tableau-cont, .tableau-sal) tbody td {
        display: block; padding: 0; margin: 0; border: 0; text-align: left; font-size: 13.5px; color: var(--noir); overflow-wrap: anywhere;
    }
    .tableau:is(.tableau-decl, .tableau-corb, .tableau-ech, .tableau-cont, .tableau-sal) tbody td::before { content: none; }
    .tableau:is(.tableau-decl, .tableau-corb, .tableau-ech, .tableau-cont, .tableau-sal) td.actions {
        grid-column: 1 / -1; order: 9; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center;
        margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--gris-bord);
    }
    .tableau:is(.tableau-decl, .tableau-corb, .tableau-ech, .tableau-cont, .tableau-sal) td.actions form { display: inline-flex; margin: 0; }
    .tableau:is(.tableau-decl, .tableau-corb, .tableau-ech, .tableau-cont, .tableau-sal) td.actions .mini-bouton { min-height: 42px; min-width: 44px; }

    /* Petites cellules avec libellé au-dessus */
    .tableau.tableau-decl tbody td:not(:first-child):not(.actions):not([data-libelle="État"])::before,
    .tableau.tableau-cont tbody td:is(:nth-child(2), :nth-child(4), :nth-child(5))::before,
    .tableau.tableau-sal  tbody td:is(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6))::before,
    .tableau.tableau-ech  tbody td:is(:nth-child(2), :nth-child(3))::before {
        content: attr(data-libelle); display: block; margin-bottom: 2px;
        font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--gris-texte);
    }

    /* Déclarations : mois + état en tête, puis les montants (nombre de colonnes variable) */
    .tableau.tableau-decl tbody td:first-child { order: 0; font-size: 16px; }
    .tableau.tableau-decl tbody td[data-libelle="État"] { order: 1; justify-self: end; text-align: right; }
    .tableau.tableau-decl tbody td[data-libelle="État"]::before { content: none; }
    .tableau.tableau-decl tbody td:is([data-libelle="Encaissé"], [data-libelle="TVA collectée"], [data-libelle="TVA à payer"], [data-libelle="Charges"]) { order: 2; }

    /* Corbeille : élément + date, actions à droite */
    .tableau-corb tbody tr { grid-template-columns: 1fr auto; grid-template-areas: "nom act" "dat act"; }
    .tableau.tableau-corb tbody td:nth-child(1) { grid-area: nom; font-weight: 700; font-size: 14.5px; }
    .tableau.tableau-corb tbody td:nth-child(2) { grid-area: dat; color: var(--gris-texte); font-size: 12px; }
    .tableau.tableau-corb tbody td:nth-child(2)::before { content: "Supprimé le "; }
    .tableau.tableau-corb tbody td.actions { grid-area: act; grid-column: auto; order: 0; margin: 0; padding: 0; border: 0; flex-wrap: nowrap; }

    /* Échéances de contrats : salarié + échéance, contrat · fin */
    .tableau.tableau-ech tbody td:nth-child(1) { font-size: 15px; grid-column: 1 / -1; }
    .tableau.tableau-ech tbody td:nth-child(4) { grid-column: 1 / -1; order: 5; }
    .tableau.tableau-ech tbody td:nth-child(4)::before { content: none; }

    /* Contrats : type + rémunération, poste, période, état */
    .tableau.tableau-cont tbody td:nth-child(1) { font-weight: 700; font-size: 15px; }
    .tableau.tableau-cont tbody td:nth-child(3) { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; }
    .tableau.tableau-cont tbody td:nth-child(2) { grid-column: 1 / -1; }
    .tableau.tableau-cont tbody td:nth-child(6) { grid-column: 1 / -1; }
    .tableau.tableau-cont tbody td:nth-child(6)::before { content: none; }

    /* Salaires : salarié + net à payer en gros, contrat, pointage · brut, primes · retenues (champs pleine largeur) */
    .tableau.tableau-sal tbody td:nth-child(1) { font-size: 15px; }
    .tableau.tableau-sal tbody td:nth-child(7) { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; font-size: 17px; color: var(--rose); }
    .tableau.tableau-sal tbody td:nth-child(2) { grid-column: 1 / -1; }
    .tableau.tableau-sal tbody td:nth-child(2)::before { content: none; }
    .tableau.tableau-sal tbody td:is(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6)) { order: 3; }
    .tableau.tableau-sal tbody td input { width: 100% !important; min-height: 44px; box-sizing: border-box; }
}

/* =====================================================================
   CLIENTS (abonnés, marges, fiche) · INVENTAIRE (saisie)
   Même logique que les autres listes : l'essentiel en haut (nom +
   montant), le détail en petit dessous, les actions en bas.
   ===================================================================== */
@container liste (max-width: 900px) {
    .tableau:is(.tableau-conso, .tableau-paie, .tableau-tarif, .tableau-perte, .tableau-marg, .tableau-abos, .tableau-inv) {
        display: block; overflow: visible; border-collapse: separate; white-space: normal;
    }
    .tableau:is(.tableau-conso, .tableau-paie, .tableau-tarif, .tableau-perte, .tableau-marg, .tableau-abos, .tableau-inv) thead { display: none; }
    .tableau:is(.tableau-conso, .tableau-paie, .tableau-tarif, .tableau-perte, .tableau-marg, .tableau-abos, .tableau-inv) tbody {
        display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    }
    .tableau:is(.tableau-conso, .tableau-paie, .tableau-tarif, .tableau-perte, .tableau-marg, .tableau-abos, .tableau-inv) tbody tr {
        display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; align-content: start;
        margin: 0; padding: 12px 14px; border: 1px solid var(--gris-bord); border-radius: 12px; background: var(--blanc);
    }
    .tableau:is(.tableau-conso, .tableau-paie, .tableau-tarif, .tableau-perte, .tableau-marg, .tableau-abos, .tableau-inv) tbody td {
        display: block; padding: 0; margin: 0; border: 0; text-align: left; font-size: 13px; color: var(--gris-texte); overflow-wrap: anywhere;
    }
    .tableau:is(.tableau-conso, .tableau-paie, .tableau-tarif, .tableau-perte, .tableau-marg, .tableau-abos, .tableau-inv) tbody td::before { content: none; }
    .tableau:is(.tableau-conso, .tableau-paie, .tableau-tarif, .tableau-perte, .tableau-marg, .tableau-abos, .tableau-inv) td.actions {
        display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; color: inherit;
        margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--gris-bord);
    }
    .tableau:is(.tableau-conso, .tableau-paie, .tableau-tarif, .tableau-perte, .tableau-marg, .tableau-abos, .tableau-inv) td.actions form { display: inline-flex; margin: 0; }
    .tableau:is(.tableau-conso, .tableau-paie, .tableau-tarif, .tableau-perte, .tableau-marg, .tableau-abos, .tableau-inv) td.actions .mini-bouton { min-height: 42px; min-width: 44px; }

    /* Petites cellules avec libellé au-dessus (data-libelle posé par pied.php) */
    .tableau.tableau-conso tbody td:is(:nth-child(4), :nth-child(5))::before,
    .tableau.tableau-paie  tbody td:is(:nth-child(3), :nth-child(4))::before,
    .tableau.tableau-tarif tbody td:is(:nth-child(4), :nth-child(5), :nth-child(6))::before,
    .tableau.tableau-perte tbody td:is(:nth-child(5), :nth-child(6), :nth-child(7))::before,
    .tableau.tableau-marg  tbody td:is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(6), :nth-child(7))::before,
    .tableau.tableau-abos  tbody td:is(:nth-child(2), :nth-child(3))::before,
    .tableau.tableau-inv   tbody td:is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8))::before {
        content: attr(data-libelle); display: block; margin-bottom: 2px;
        font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--gris-texte);
    }

    /* Consommations : plat + montant, catégorie · date, quantité · prix unitaire */
    .tableau-conso tbody tr { grid-template-areas: "pla mon" "cat dat" "qte pu" "act act"; }
    .tableau.tableau-conso tbody td:nth-child(1) { grid-area: dat; justify-self: end; text-align: right; }
    .tableau.tableau-conso tbody td:nth-child(2) { grid-area: cat; }
    .tableau.tableau-conso tbody td:nth-child(3) { grid-area: pla; color: var(--noir); font-size: 15px; font-weight: 700; }
    .tableau.tableau-conso tbody td:nth-child(4) { grid-area: qte; }
    .tableau.tableau-conso tbody td:nth-child(5) { grid-area: pu; justify-self: end; text-align: right; }
    .tableau.tableau-conso tbody td:nth-child(6) { grid-area: mon; justify-self: end; color: var(--rose); font-size: 16px; font-weight: 800; white-space: nowrap; }
    .tableau.tableau-conso tbody td.actions { grid-area: act; }

    /* Paiements : montant + date, mode, note */
    .tableau-paie tbody tr { grid-template-areas: "mon dat" "mod mod" "not not" "act act"; }
    .tableau.tableau-paie tbody td:nth-child(1) { grid-area: dat; justify-self: end; }
    .tableau.tableau-paie tbody td:nth-child(2) { grid-area: mon; color: var(--vert); font-size: 17px; font-weight: 800; white-space: nowrap; }
    .tableau.tableau-paie tbody td:nth-child(3) { grid-area: mod; }
    .tableau.tableau-paie tbody td:nth-child(4) { grid-area: not; }
    .tableau.tableau-paie tbody td.actions { grid-area: act; }

    /* Tarifs négociés : catégorie + prix, plat, période, quantité · état */
    .tableau-tarif tbody tr { grid-template-areas: "cat pri" "pla pla" "deb fin" "qte eta" "act act"; }
    .tableau.tableau-tarif tbody td:nth-child(1) { grid-area: cat; color: var(--noir); font-size: 15px; font-weight: 700; }
    .tableau.tableau-tarif tbody td:nth-child(2) { grid-area: pla; }
    .tableau.tableau-tarif tbody td:nth-child(3) { grid-area: pri; justify-self: end; color: var(--rose); font-size: 16px; font-weight: 800; white-space: nowrap; }
    .tableau.tableau-tarif tbody td:nth-child(4) { grid-area: qte; }
    .tableau.tableau-tarif tbody td:nth-child(5) { grid-area: deb; }
    .tableau.tableau-tarif tbody td:nth-child(6) { grid-area: fin; justify-self: end; text-align: right; }
    .tableau.tableau-tarif tbody td:nth-child(7) { grid-area: eta; justify-self: end; }
    .tableau.tableau-tarif tbody td.actions { grid-area: act; }

    /* Plats vendus à perte : plat + perte, abonné · catégorie, date · quantité, facturé · coût */
    .tableau-perte tbody tr { grid-template-areas: "pla per" "abo cat" "dat qte" "fac cou"; }
    .tableau.tableau-perte tbody td:nth-child(1) { grid-area: dat; }
    .tableau.tableau-perte tbody td:nth-child(2) { grid-area: abo; color: var(--noir); font-weight: 600; }
    .tableau.tableau-perte tbody td:nth-child(3) { grid-area: cat; justify-self: end; }
    .tableau.tableau-perte tbody td:nth-child(4) { grid-area: pla; color: var(--noir); font-size: 15px; font-weight: 700; }
    .tableau.tableau-perte tbody td:nth-child(5) { grid-area: qte; justify-self: end; }
    .tableau.tableau-perte tbody td:nth-child(6) { grid-area: fac; }
    .tableau.tableau-perte tbody td:nth-child(7) { grid-area: cou; justify-self: end; }
    .tableau.tableau-perte tbody td:nth-child(8) { grid-area: per; justify-self: end; font-size: 16px; white-space: nowrap; }

    /* Marges par abonné */
    .tableau-marg tbody tr { grid-template-areas: "abo mar" "ca cou" "lig tau" "foo foo" "act act"; }
    .tableau.tableau-marg tbody td:nth-child(1) { grid-area: abo; color: var(--noir); font-size: 15px; font-weight: 700; }
    .tableau.tableau-marg tbody td:nth-child(2) { grid-area: lig; }
    .tableau.tableau-marg tbody td:nth-child(3) { grid-area: ca; }
    .tableau.tableau-marg tbody td:nth-child(4) { grid-area: cou; justify-self: end; text-align: right; }
    .tableau.tableau-marg tbody td:nth-child(5) { grid-area: mar; justify-self: end; font-size: 16px; font-weight: 800; white-space: nowrap; }
    .tableau.tableau-marg tbody td:nth-child(5)::before { content: none; }
    .tableau.tableau-marg tbody td:nth-child(6) { grid-area: tau; justify-self: end; text-align: right; }
    .tableau.tableau-marg tbody td:nth-child(7) { grid-area: foo; }
    .tableau.tableau-marg tbody td.actions { grid-area: act; }

    /* Abonnements d'un client */
    .tableau-abos tbody tr { grid-template-areas: "for sta" "res val" "act act"; }
    .tableau.tableau-abos tbody td:nth-child(1) { grid-area: for; color: var(--noir); font-size: 15px; font-weight: 700; }
    .tableau.tableau-abos tbody td:nth-child(2) { grid-area: res; color: var(--noir); }
    .tableau.tableau-abos tbody td:nth-child(3) { grid-area: val; justify-self: end; text-align: right; }
    .tableau.tableau-abos tbody td:nth-child(4) { grid-area: sta; justify-self: end; }
    .tableau.tableau-abos tbody td.actions { grid-area: act; }

    /* Inventaire : champs « Compté » et « Motif » en pleine largeur */
    .tableau-inv tbody tr { grid-template-columns: 1fr 1fr; grid-template-areas: "art art" "ate cum" "the cpt" "eca eav" "mot mot"; }
    .tableau.tableau-inv tbody td:nth-child(1) { grid-area: art; color: var(--noir); font-size: 15px; font-weight: 700; }
    .tableau.tableau-inv tbody td:nth-child(2) { grid-area: ate; }
    .tableau.tableau-inv tbody td:nth-child(3) { grid-area: the; color: var(--noir); }
    .tableau.tableau-inv tbody td:nth-child(4) { grid-area: cpt; }
    .tableau.tableau-inv tbody td:nth-child(5) { grid-area: eca; color: var(--noir); }
    .tableau.tableau-inv tbody td:nth-child(6) { grid-area: cum; }
    .tableau.tableau-inv tbody td:nth-child(7) { grid-area: eav; color: var(--noir); }
    .tableau.tableau-inv tbody td:nth-child(8) { grid-area: mot; }
    .tableau.tableau-inv tbody td input { width: 100% !important; min-height: 44px; box-sizing: border-box; }
}

/* =====================================================================
   INDICATEURS (cartes de chiffres) ET SÉLECTEUR DE PÉRIODE
   Le chiffre s'adapte à la largeur de SA carte (container query units) :
   « 3 665 000 FCFA » tient sur une ligne, que la carte fasse 130 ou 300 px.
   ===================================================================== */
.carte-stat { container-type: inline-size; }
.carte-stat .stat-valeur { font-size: clamp(17px, 9.4cqw, 28px); line-height: 1.15; text-wrap: balance; }

/* Sélecteur de période : liste + date côte à côte, bouton en dessous, date de fin pleine largeur. */
@media (max-width: 760px) {
    .selecteur-periode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
    .selecteur-periode select, .selecteur-periode input[type="date"] { width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; }
    .selecteur-periode .bouton-secondaire, .selecteur-periode .champ-date-fin { grid-column: 1 / -1; }
    .selecteur-periode .champ-date-fin:not([hidden]) { display: flex; align-items: center; gap: 8px; }
    .selecteur-periode .champ-date-fin input { flex: 1; }
}
.selecteur-periode select { border: 1px solid var(--gris-bord); border-radius: 10px; background: #fff; padding: 0 10px; }

/* Filtre « liste + recherche + bouton » : le champ et le bouton partagent une ligne. */
@media (max-width: 760px) {
    .form-ligne.form-filtre { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
    .form-ligne.form-filtre > select { grid-column: 1 / -1; }
    .form-ligne.form-filtre > button { width: auto; padding-inline: 20px; }
}

/* Formulaires en ligne : les champs courts (date, quantité, montant) se placent
   deux par deux ; les listes déroulantes et zones de texte gardent toute la largeur. */
@media (max-width: 760px) {
    .formulaire .form-ligne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 4px 10px; align-items: end; }
    .formulaire .form-ligne > label { margin-bottom: 8px; min-width: 0; }
    .formulaire .form-ligne > label:has(select, textarea),
    .formulaire .form-ligne > :not(label) { grid-column: 1 / -1; }
}

/* Barres de période suivies de boutons d'export (aperçu, PDF, export) : même largeur, sans soulignement. */
@media (max-width: 760px) {
    .onglets-periode > a[class*="bouton"] { flex: 1 1 100%; justify-content: center; text-align: center; text-decoration: none; }
}

/* =====================================================================
   TABLEAU DE BORD — accueil
   Un mot d'accueil, le chiffre du jour en grand, les autres en quatre cases égales.
   ===================================================================== */
.accueil-tb { margin: 0 0 16px; }
.accueil-tb h2 { margin: 0; font-size: clamp(20px, 5vw, 27px); line-height: 1.2; }
.accueil-tb p { margin: 4px 0 0; color: var(--gris-texte); font-size: 14px; }
.stat-lien { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
    /* La carte « Ventes du jour » prend toute la largeur ; les quatre autres forment un 2 × 2. */
    .grille-tb > :first-child { grid-column: 1 / -1; }
    .grille-tb .carte-stat-rose .stat-valeur { font-size: clamp(24px, 11cqw, 34px); }
    .grille-tb .carte-stat { min-width: 0; }
}
@media (min-width: 761px) {
    /* Grand écran : le chiffre du jour sur deux cases, les quatre autres en dessous sur trois colonnes. */
    .grille-tb { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grille-tb > :first-child { grid-column: span 2; }
}