/* J3 — thème sombre. Feuille unique, aucune dépendance externe. */

:root {
    /* Surfaces, du plus profond au plus clair */
    --fond:        #0e1318;
    --surface:     #161d25;
    --surface-2:   #1d2732;
    --surface-3:   #253141;

    --bord:        #2b3745;
    --bord-clair:  #3a4859;

    /* Textes */
    --texte:       #e4eaf1;
    --texte-doux:  #93a2b4;
    --texte-faible:#6b7a8c;

    /* Accent */
    --accent:      #4da3dd;
    --accent-fonce:#2f7aab;
    --accent-voile:rgba(77, 163, 221, .12);

    /* États */
    --ok:          #4ec98a;
    --ok-fond:     rgba(78, 201, 138, .12);
    --erreur:      #f0736f;
    --erreur-fond: rgba(240, 115, 111, .12);
    --alerte:      #e0b054;
    --alerte-fond: rgba(224, 176, 84, .12);

    /* Jaune de mise en avant — utilisé pour le code article sur la fiche.
       Choisi assez clair pour rester lisible sur le fond sombre, et distinct
       de l'ambre des alertes. */
    --jaune:       #f5c84c;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .87em;
    background: var(--surface-3);
    color: var(--accent);
    padding: .12em .38em;
    border-radius: 3px;
}

a { color: var(--accent); }

/* ---------- En-tête ---------- */

.entete {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex-wrap: wrap;
    padding: .85rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--bord);
    position: sticky;
    top: 0;
    z-index: 10;
}

.marque {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    text-decoration: none;
    color: inherit;
}

/* Logo de l'en-tête. Hauteur bornée pour que l'en-tête garde la même hauteur
   quelle que soit la taille du fichier fourni ; la largeur suit le ratio.
   Le logo est carré (300 x 300) : la hauteur pilote donc aussi la largeur. */
.marque-logo {
    display: block;
    height: 2.5rem;
    width: auto;
    max-width: 12rem;
    flex: 0 0 auto;
}

/* Quand le logo est affiché, le nom textuel disparaît : les deux ensemble
   feraient doublon, le logo portant déjà la marque. Le sous-titre reste, il
   rappelle le nom complet de l'entreprise. */
.marque:has(.marque-logo) .marque-sous {
    font-size: .78rem;
}

.marque-nom {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--accent);
}

.marque-sous {
    font-size: .82rem;
    color: var(--texte-faible);
}

.nav-principale {
    display: flex;
    gap: .25rem;
    flex-wrap: wrap;
}

.nav-principale a {
    text-decoration: none;
    color: var(--texte-doux);
    padding: .4rem .75rem;
    border-radius: 6px;
    font-size: .93rem;
    transition: background .12s, color .12s;
}

.nav-principale a:hover {
    color: var(--texte);
    background: var(--surface-2);
}

.nav-principale a.actif {
    color: var(--accent);
    background: var(--accent-voile);
}

/* ---------- Contenu ---------- */

.contenu {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.75rem 1.5rem 3rem;
}

.contenu-etroit { max-width: 620px; }

h1 {
    font-size: 1.45rem;
    margin: 0 0 1rem;
    font-weight: 650;
}

h2 {
    font-size: .82rem;
    margin: 0 0 .85rem;
    color: var(--texte-faible);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}

.aide {
    color: var(--texte-doux);
    font-size: .88rem;
    margin: .25rem 0 1rem;
}

.fil { margin: 0 0 1rem; font-size: .9rem; }
.fil a { text-decoration: none; }
.fil a:hover { text-decoration: underline; }

/* ---------- Cartes ---------- */

.cartes {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.carte {
    flex: 1 1 210px;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 1.1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: 10px;
}

.carte-valeur {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.carte-libelle { font-weight: 600; font-size: .95rem; }

.carte-note {
    font-size: .82rem;
    color: var(--texte-faible);
}

/* ---------- Blocs ---------- */

.bloc {
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.liste { margin: 0; padding-left: 1.1rem; color: var(--texte-doux); }
.liste li { margin-bottom: .4rem; }

/* ---------- Tableaux ---------- */

.tableau {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: 10px;
    overflow: hidden;
}

.tableau th,
.tableau td {
    text-align: left;
    padding: .58rem .8rem;
    border-bottom: 1px solid var(--bord);
    vertical-align: top;
}

.tableau thead th {
    background: var(--surface-2);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texte-faible);
    font-weight: 600;
    position: sticky;
    top: 0;
}

.tableau tbody tr:last-child td { border-bottom: none; }
.tableau tbody tr:hover { background: var(--surface-2); }
.tableau .droite { text-align: right; }
.tableau .mono {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: .87em;
    color: var(--texte-doux);
}
.tableau .nombre { font-variant-numeric: tabular-nums; }

.tableau-fiche {
    width: 100%;
    border-collapse: collapse;
}

.tableau-fiche th {
    text-align: left;
    font-weight: 500;
    color: var(--texte-faible);
    padding: .45rem .9rem .45rem 0;
    width: 190px;
    vertical-align: top;
    font-size: .9rem;
}

.tableau-fiche td {
    padding: .45rem 0;
    border-bottom: 1px solid var(--bord);
}

.tableau-fiche tr:last-child td { border-bottom: none; }

.vide-cellule { color: var(--texte-faible); }

/* ---------- Recherche ---------- */

.recherche {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.recherche input[type="search"],
.recherche input[type="text"] {
    flex: 1 1 300px;
    padding: .58rem .8rem;
    border: 1px solid var(--bord-clair);
    background: var(--surface);
    color: var(--texte);
    border-radius: 7px;
    font-size: .95rem;
}

.recherche input::placeholder { color: var(--texte-faible); }

.recherche input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-voile);
}

.recherche button {
    padding: .58rem 1.15rem;
    border: 1px solid var(--accent-fonce);
    background: var(--accent-fonce);
    color: #fff;
    border-radius: 7px;
    font-size: .95rem;
    cursor: pointer;
    font-weight: 500;
}

.recherche button:hover { background: var(--accent); border-color: var(--accent); }

.lien-effacer { color: var(--texte-doux); font-size: .9rem; }

/* ---------- Pagination ---------- */

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    font-size: .9rem;
    color: var(--texte-doux);
}

.pagination-liens { display: flex; gap: .4rem; align-items: center; }

.pagination a,
.pagination span.page {
    padding: .38rem .7rem;
    border: 1px solid var(--bord-clair);
    border-radius: 6px;
    text-decoration: none;
    color: var(--texte-doux);
    background: var(--surface);
}

.pagination a:hover { border-color: var(--accent); color: var(--accent); }

.pagination span.page-courante {
    background: var(--accent-fonce);
    border-color: var(--accent-fonce);
    color: #fff;
}

.pagination span.inactif {
    padding: .38rem .7rem;
    color: var(--texte-faible);
    border: 1px solid transparent;
}

/* ---------- Messages ---------- */

.alerte {
    padding: .8rem 1rem;
    border-radius: 8px;
    margin: 0 0 1.25rem;
    font-size: .93rem;
}

.alerte-erreur {
    background: var(--erreur-fond);
    color: var(--erreur);
    border: 1px solid rgba(240, 115, 111, .3);
}

.vide {
    padding: 1.75rem;
    text-align: center;
    color: var(--texte-doux);
    background: var(--surface);
    border: 1px dashed var(--bord-clair);
    border-radius: 10px;
}

/* ---------- Étiquettes ---------- */

.etiquette {
    display: inline-block;
    padding: .16rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    background: var(--surface-3);
    color: var(--texte-doux);
    letter-spacing: .02em;
}

.etiquette-ok      { background: var(--ok-fond);     color: var(--ok); }
.etiquette-erreur  { background: var(--erreur-fond); color: var(--erreur); }
.etiquette-alerte  { background: var(--alerte-fond); color: var(--alerte); }

/* ---------- Pied ---------- */

.pied {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem 1.5rem 2rem;
    color: var(--texte-faible);
    font-size: .82rem;
}

.pied-serveur { font-family: ui-monospace, Menlo, monospace; }

/* ---------- Compte connecté ---------- */

.compte {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    margin-left: auto;
    font-size: .87rem;
}

.compte-nom {
    font-weight: 600;
    color: var(--texte);
}

.compte-societe {
    color: var(--texte-faible);
    font-size: .82rem;
}

.compte-quitter {
    text-decoration: none;
    color: var(--texte-doux);
    border: 1px solid var(--bord-clair);
    padding: .28rem .7rem;
    border-radius: 6px;
    font-size: .82rem;
}

.compte-quitter:hover {
    color: var(--erreur);
    border-color: var(--erreur);
}

/* ---------- Page de connexion ---------- */

.page-connexion {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
}

.connexion {
    width: 100%;
    max-width: 360px;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: 12px;
    padding: 2rem 1.75rem 1.5rem;
}

.connexion-marque {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin-bottom: 1.5rem;
    justify-content: center;
}

.connexion-formulaire {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.connexion-formulaire label {
    font-size: .82rem;
    color: var(--texte-faible);
    margin-top: .6rem;
}

.connexion-formulaire input {
    padding: .62rem .8rem;
    border: 1px solid var(--bord-clair);
    background: var(--fond);
    color: var(--texte);
    border-radius: 7px;
    font-size: .98rem;
}

.connexion-formulaire input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-voile);
}

.connexion-formulaire button {
    margin-top: 1.25rem;
    padding: .68rem 1rem;
    border: 1px solid var(--accent-fonce);
    background: var(--accent-fonce);
    color: #fff;
    border-radius: 7px;
    font-size: .98rem;
    font-weight: 600;
    cursor: pointer;
}

.connexion-formulaire button:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.connexion-note {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: .8rem;
    color: var(--texte-faible);
}

/* ---------- Tableau des articles ---------- */

/* La liste des articles porte jusqu'à onze colonnes. Le défilement horizontal
   est confiné au tableau : la page elle-même ne défile jamais latéralement. */
.tableau-defilant {
    overflow-x: auto;
    border: 1px solid var(--bord);
    border-radius: 10px;
}

.tableau-defilant .tableau {
    border: none;
    border-radius: 0;
    min-width: 900px;
}

.tableau-articles td,
.tableau-articles th {
    white-space: nowrap;
}

/* La description est le seul champ long : elle peut se replier sur deux
   lignes, ce qui évite d'étirer le tableau à l'infini. */
.tableau-articles .description {
    white-space: normal;
    min-width: 240px;
    max-width: 380px;
}

.tableau-articles .mono {
    color: var(--texte-doux);
}

/* ---------- Vignettes d'articles ---------- */

.tableau-articles .colonne-image {
    width: 3.2rem;
    padding: .35rem .4rem;
    text-align: center;
}

/* Fond blanc : les visuels produits sont détourés sur blanc. */
.vignette-article {
    display: block;
    width: 2.6rem;
    height: 2.6rem;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid var(--bord);
    border-radius: 5px;
}

/* Emplacement vide, pour que les lignes sans image gardent la même hauteur
   et que la colonne ne « saute » pas d'une ligne à l'autre. */
.vignette-vide {
    display: block;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px dashed var(--bord);
    border-radius: 5px;
}

/* ==========================================================================
   Tableau des achats et ventes par année et par mois
   ========================================================================== */

.tableau-periodes {
    min-width: 760px;
    font-variant-numeric: tabular-nums;
}

/* La colonne des années reste visible pendant le défilement horizontal : sans
   elle, on ne sait plus à quelle année appartient la ligne qu'on lit. */
.tableau-periodes .colonne-annee {
    text-align: left;
    white-space: nowrap;
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
}

.tableau-periodes thead .colonne-annee {
    background: var(--surface-2);
    z-index: 3;
}

.tableau-periodes tbody th.colonne-annee {
    font-weight: 600;
    color: var(--texte);
}

/* Deux valeurs empilées par cellule : la vente au-dessus, l'achat en dessous.
   La ligne du haut est mise en avant, c'est la lecture principale. */
.cellule-double {
    padding: .3rem .5rem;
    line-height: 1.25;
}

.valeur-ventes {
    display: block;
    font-weight: 600;
    color: var(--texte);
}

.valeur-achats {
    display: block;
    font-size: .82em;
    color: var(--texte-doux);
}

/* La colonne des totaux reprend le jaune de mise en avant, comme dans l'ancien
   ERP : c'est le chiffre qu'on cherche en premier. */
.tableau-periodes .total-colonne {
    background: var(--jaune);
    color: #11161c;
    border-left: 1px solid var(--bord);
}

.tableau-periodes .total-colonne .valeur-ventes {
    color: #11161c;
    font-weight: 700;
}

.tableau-periodes .total-colonne .valeur-achats {
    color: rgba(17, 22, 28, .72);
    font-weight: 600;
}

.tableau-periodes .total-colonne .vide-cellule {
    color: rgba(17, 22, 28, .5);
}

.tableau-periodes thead .total-colonne {
    color: #11161c;
    font-weight: 700;
}

/* Seconde ligne d'en-tête : part de chaque mois dans les ventes totales. */
.ligne-pourcentages th {
    background: var(--surface-2);
    font-size: .72rem;
    color: var(--texte-faible);
    font-weight: 500;
    padding: .15rem .5rem .35rem;
    border-bottom: 1px solid var(--bord);
}

.tableau-periodes tfoot td,
.tableau-periodes tfoot th {
    border-top: 2px solid var(--bord-clair);
    background: var(--surface-2);
    font-weight: 700;
}

.tableau-periodes tfoot .total-colonne {
    background: var(--jaune);
}

/* L'année en cours est signalée : sans cela, on confond la ligne courante avec
   la précédente quand leurs chiffres se ressemblent. */
.tableau-periodes tbody tr.annee-courante th.colonne-annee {
    color: var(--accent);
}

.tableau-periodes .vide-cellule {
    opacity: .45;
}

.marqueur-ventes,
.marqueur-achats {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: 4px;
    font-size: .78rem;
    margin-right: .4rem;
}

.marqueur-ventes {
    background: var(--surface-3);
    color: var(--texte);
    font-weight: 600;
}

.marqueur-achats {
    background: var(--surface-3);
    color: var(--texte-doux);
}

.legende {
    margin-top: .75rem;
}

.legende code {
    margin-left: .35rem;
}

/* ---------- Autocomplétion ---------- */

/* Le bloc de résultats est remplacé par le JavaScript. Un fondu léger pendant
   le chargement signale que la liste est en cours de mise à jour, sans faire
   sauter la mise en page. */
.resultats {
    transition: opacity .15s ease;
}

.resultats-chargement {
    opacity: .45;
}

/* Ligne parcourue aux flèches. Le repère ne repose pas sur la seule couleur :
   un liseré et un fond distinct la font ressortir même en niveaux de gris. */
.tableau tbody tr.selectionne > td {
    background: var(--accent-voile);
}

.tableau tbody tr.selectionne > td:first-child {
    box-shadow: inset 3px 0 0 var(--accent);
}

.tableau tbody tr.selectionne:hover > td {
    background: var(--accent-voile);
}

/* ---------- Tableau transposé des mouvements ---------- */

/* Les lignes sont les natures de mouvement — stock, réservés, commandés — et
   les colonnes les sociétés. La première colonne est donc un en-tête de ligne,
   pas une cellule ordinaire : elle reste lisible même sur fond de survol. */
.tableau-mouvements tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--texte);
    background: var(--surface-2);
    width: 150px;
    white-space: nowrap;
    padding: .58rem .8rem;
    border-bottom: 1px solid var(--bord);
}

.tableau-mouvements tbody tr:last-child th {
    border-bottom: none;
}

.tableau-mouvements thead th {
    text-align: right;
}

.tableau-mouvements thead th:first-child {
    text-align: left;
}

/* Lignes de détail — « dont compositions ». Retrait et teinte atténuée : elles
   décomposent la ligne du dessus, elles ne sont pas au même niveau. */
.tableau-mouvements tbody tr.ligne-detail th {
    font-weight: 400;
    font-size: .84rem;
    color: var(--texte-faible);
    padding-left: 1.7rem;
}

.tableau-mouvements tbody tr.ligne-detail td {
    font-size: .88rem;
    color: var(--texte-faible);
}

/* ---------- Tableau des fournisseurs ---------- */

.tableau-fournisseurs {
    min-width: 900px;
    font-variant-numeric: tabular-nums;
}

.tableau-fournisseurs td,
.tableau-fournisseurs th {
    white-space: nowrap;
}

/* Le fournisseur principal est signalé par un liseré, sans changer l'ordre
   alphabétique demandé. */
.tableau-fournisseurs tbody tr.fournisseur-principal td {
    background: var(--accent-voile);
}

.tableau-fournisseurs tbody tr.fournisseur-principal td:first-child {
    box-shadow: inset 3px 0 0 var(--accent);
}

.tableau-fournisseurs .etiquette {
    margin-left: .4rem;
    font-size: .7rem;
}

/* Marge : verte si positive, rouge si négative. Le signe est porté par la
   couleur ET par la valeur, jamais par la seule couleur. */
.marge-positive {
    color: var(--ok);
    font-weight: 600;
}

.marge-negative {
    color: var(--erreur);
    font-weight: 600;
}

.marge-pourcent {
    display: block;
    font-size: .78rem;
    color: var(--texte-faible);
}

/* ---------- Commandes fournisseur ---------- */

.tableau-commandes {
    min-width: 860px;
    font-variant-numeric: tabular-nums;
}

.tableau-commandes td,
.tableau-commandes th {
    white-space: nowrap;
}

/* En-têtes triables : le lien couvre toute la cellule, avec un indicateur de
   sens qui distingue la colonne active des autres. */
.tableau-commandes thead a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.tableau-commandes thead a:hover {
    color: var(--accent);
}

.tri-actif {
    color: var(--accent);
    font-weight: 700;
}

.tri-inactif {
    color: var(--texte-faible);
    opacity: .5;
}

/* La ligne des articles suit immédiatement sa commande et ne porte pas de
   bordure haute : elle appartient visuellement à la ligne du dessus. */
.tableau-commandes tr.ligne-articles td {
    padding: .2rem .8rem .5rem;
    border-bottom: 1px solid var(--bord);
    white-space: normal;
}

.cde-details > summary {
    cursor: pointer;
    font-size: .82rem;
    color: var(--texte-doux);
    padding: .15rem 0;
    user-select: none;
}

.cde-details > summary:hover {
    color: var(--accent);
}

.tableau-cde-lignes {
    margin-top: .4rem;
    background: var(--surface-2);
    border-radius: 8px;
    overflow: hidden;
}

.tableau-cde-lignes th,
.tableau-cde-lignes td {
    padding: .35rem .6rem;
    font-size: .84rem;
}

/* ---------- Étiquettes d'état de commande ---------- */

.etiquette-commande {
    display: inline-block;
    padding: .16rem .55rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    background: var(--surface-3);
    color: var(--texte-doux);
    cursor: help;
    white-space: nowrap;
}

.etat-reception { background: var(--alerte-fond); color: var(--alerte); }
.etat-ouverte   { background: var(--accent-voile); color: var(--accent); }
.etat-envoyee   { background: var(--surface-3);    color: var(--texte); }
.etat-soldee    { background: var(--ok-fond);      color: var(--ok); }

.legende .etiquette-commande {
    margin-right: .3rem;
}

/* ==========================================================================
   Tickets de caisse
   ========================================================================== */

/* Barre de filtres : plusieurs critères sur une ligne qui passe à la ligne
   quand la place manque, sans jamais écraser les champs. */
.filtres {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem 1rem;
    align-items: flex-end;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    margin-bottom: 1.25rem;
}

.filtre {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
}

.filtre label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texte-faible);
    font-weight: 600;
}

.filtre select,
.filtre input {
    background: var(--surface-2);
    border: 1px solid var(--bord-clair);
    color: var(--texte);
    border-radius: 6px;
    padding: .45rem .6rem;
    font: inherit;
    font-size: .9rem;
    min-width: 11rem;
}

.filtre input[type="search"] { min-width: 15rem; }

.filtre select:focus,
.filtre input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.filtre-large { flex: 1 1 15rem; }
.filtre-large input { width: 100%; }

.filtre-actions {
    flex-direction: row;
    align-items: center;
    gap: .6rem;
}

.filtre-actions button {
    background: var(--accent);
    color: #0b1015;
    border: none;
    border-radius: 6px;
    padding: .5rem 1rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.filtre-actions button:hover { background: #6bb6e8; }

.tableau-tickets {
    min-width: 1000px;
    font-variant-numeric: tabular-nums;
}

.tableau-tickets td,
.tableau-tickets th {
    white-space: nowrap;
}

.tableau-tickets td:nth-child(4),
.tableau-tickets td:nth-child(5) {
    white-space: normal;
}

/* Type de document et de paiement : le code en pastille, le libellé à côté.
   Le code seul serait illisible, le libellé seul empêcherait de filtrer. */
.etiquette-doc {
    display: inline-block;
    min-width: 1.6rem;
    text-align: center;
    padding: .08rem .35rem;
    border-radius: 4px;
    background: var(--surface-3);
    color: var(--texte-doux);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .76rem;
    font-weight: 700;
    cursor: help;
}

/* Solde : dû quand le client doit encore payer, avoir quand il a trop payé.
   La couleur double le signe, elle ne le remplace pas. */
.solde-du    { color: var(--alerte);  font-weight: 600; }
.solde-avoir { color: var(--accent);  font-weight: 600; }

/* Lien d'appoint, à côté d'un lien principal : même destination, mais il
   annonce ce qu'on va y trouver. Volontairement discret. */
.lien-secondaire {
    margin-left: .6rem;
    font-size: .82rem;
    color: var(--texte-faible);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}

.lien-secondaire:hover {
    color: var(--accent);
    border-bottom-style: solid;
}

/* ==========================================================================
   Onglets de la fiche article
   ========================================================================== */

/* Onglets par liens, pas par script : l'onglet ouvert se partage par URL et
   fonctionne sans JavaScript. La barre reste visible en haut de la fiche. */
.onglets-fiche {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 0 0 1.4rem;
    border-bottom: 2px solid var(--bord);
    padding-bottom: 0;
}

.onglet-fiche {
    display: inline-block;
    padding: .5rem 1rem;
    border-radius: 8px 8px 0 0;
    text-decoration: none;
    color: var(--texte-doux);
    font-size: .92rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -2px;
    transition: background .12s, color .12s;
}

.onglet-fiche:hover {
    color: var(--texte);
    background: var(--surface-2);
}

/* L'onglet actif est marqué par le fond ET par un trait : le repère ne repose
   pas sur la seule couleur. */
.onglet-fiche.actif {
    color: var(--accent);
    background: var(--surface);
    border-color: var(--bord);
    border-bottom: 2px solid var(--surface);
}

.tableau-achats,
.tableau-ventes {
    min-width: 900px;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Mouvements de stock depuis le dernier inventaire
   ========================================================================== */

.bloc-societe {
    border: 1px solid var(--bord);
    border-radius: 10px;
    padding: .9rem 1rem 1rem;
    margin-bottom: 1rem;
    background: var(--surface);
}

.titre-societe {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    font-size: .95rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--texte);
    margin: 0 0 .7rem;
}

.tableau-inventaire {
    min-width: 1000px;
    font-variant-numeric: tabular-nums;
}

.tableau-inventaire td,
.tableau-inventaire th {
    white-space: nowrap;
}

/* La ligne d'inventaire est le point de départ du solde : elle est mise en
   avant, sans être confondue avec un mouvement. */
.tableau-inventaire tr.ligne-inventaire td {
    background: var(--surface-3);
    border-top: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
}

.tableau-inventaire tr.ligne-ecart th,
.tableau-inventaire tr.ligne-ecart td {
    border-top: 1px dashed var(--alerte);
    color: var(--alerte);
}

/* Entrée et sortie : la couleur double le signe, elle ne le remplace pas. */
.quantite-entree { color: var(--ok); }
.quantite-sortie { color: var(--erreur); }

.etiquette-source {
    display: inline-block;
    padding: .08rem .4rem;
    border-radius: 4px;
    font-size: .72rem;
    font-weight: 600;
    background: var(--surface-3);
    color: var(--texte-doux);
}

.etiquette-source-vente        { background: var(--accent-voile); color: var(--accent); }
.etiquette-source-modification { background: var(--alerte-fond);  color: var(--alerte); }
.etiquette-source-réception    { background: var(--ok-fond);      color: var(--ok); }

/* ---------- Champs de contact complémentaires ---------- */

/* Les champs cli_tel2, cli_gsm, cli_fax, cli_mail2 ne sont pas repris dans
   cli_num et cli_mail : ils restent affichés, mais à part, pour que la liste
   principale reste lisible. */
.contact-secondaire {
    display: inline-block;
    margin-right: .9rem;
    white-space: nowrap;
}

/* ---------- Critères de tri ---------- */

/* Grille de couples libellé/valeur. auto-fill permet d'occuper la largeur
   disponible sans fixer de nombre de colonnes : un article à 2 critères et un
   article à 132 se présentent correctement. */
.liste-criteres {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: .35rem .9rem;
    margin: 0;
}

.critere {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .3rem .5rem;
    border-bottom: 1px solid var(--bord);
    min-width: 0;
}

.critere dt {
    flex: 0 0 45%;
    color: var(--texte-faible);
    font-size: .85rem;
    overflow-wrap: anywhere;
}

.critere dd {
    flex: 1 1 auto;
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Un critère sans libellé ou sans valeur signale un défaut de données : il est
   montré, pas masqué, mais discrètement. */
.critere-incomplet dt,
.critere-incomplet dd {
    font-style: italic;
    opacity: .75;
}


.recherche-etat {
    font-size: .82rem;
    color: var(--texte-faible);
    min-width: 0;
    flex: 0 1 auto;
}

/* ---------- Annuaire : accordéons et pastilles ---------- */

/* Les accordéons sont des <details>/<summary> natifs : ouverts et fermés par
   le navigateur, sans JavaScript, et accessibles au clavier d'origine. */

.annuaire {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.accordion {
    border: 1px solid var(--bord);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
}

.accordion-ste {
    /* Le liseré reprend la couleur de la société, définie dans eregroupe.ste. */
    border-left: 3px solid var(--accent-societe, var(--accent));
}

.accordion-division {
    background: var(--surface-2);
    border-left: 3px solid var(--accent-division, var(--bord-clair));
    margin: .5rem 0 .5rem .75rem;
}

.accordion > summary {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
    padding: .7rem .9rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

/* Masque le marqueur natif, remplacé par un chevron explicite. */
.accordion > summary::-webkit-details-marker { display: none; }
.accordion > summary::marker { content: ''; }

.accordion > summary::before {
    content: '▸';
    color: var(--texte-faible);
    font-size: .9rem;
    transition: transform .15s ease;
    flex: 0 0 auto;
}

.accordion[open] > summary::before {
    transform: rotate(90deg);
}

.accordion > summary:hover {
    background: var(--surface-3);
}

.accordion > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.accordion-titre {
    font-weight: 600;
}

.accordion-compteur {
    margin-left: auto;
    font-size: .82rem;
    color: var(--texte-faible);
    font-variant-numeric: tabular-nums;
}

.accordion-contacts {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: .84rem;
    color: var(--texte-doux);
}

.accordion-corps {
    padding: 0 .6rem .6rem .6rem;
}

/* Pastille de couleur d'une société ou d'une division. La couleur de texte
   est calculée côté serveur selon la luminance du fond. */
.pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.1rem;
    padding: .16rem .45rem;
    border-radius: 5px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.pastille-petite {
    min-width: 0;
    width: .85rem;
    height: .85rem;
    padding: 0;
    border-radius: 50%;
}

/* ---------- Liste des personnes ---------- */

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

.liste-personnes li {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .42rem .9rem;
    border-top: 1px solid var(--bord);
}

.liste-personnes li:hover {
    background: var(--surface-3);
}

.personne-nom {
    flex: 1 1 220px;
}

.personne-contacts {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    font-size: .85rem;
}

.contact {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--texte-doux);
    text-decoration: none;
    white-space: nowrap;
}

a.contact:hover {
    color: var(--accent);
    text-decoration: underline;
}

.contact-icone {
    opacity: .7;
    font-size: .9em;
}

/* Petite barre de rappel de la couleur de l'application, issue de app.app_col. */
.marqueur-app {
    display: inline-block;
    width: 2.2rem;
    height: .55rem;
    border-radius: 3px;
    vertical-align: middle;
    margin: 0 .4rem;
}

/* En-tête de colonne de stock, teinté par la couleur de la société.
   Seul un liseré supérieur porte la couleur : teinter le fond ou le texte
   nuirait à la lisibilité, les couleurs allant du bleu très clair au rouge
   soutenu. */
.tableau-articles thead th.colonne-societe {
    border-top: 3px solid var(--accent-societe, var(--bord-clair));
    padding-top: .42rem;
}

/* ==========================================================================
   Fiche article : recherche, fil d'Ariane, en-tête
   ========================================================================== */

/* ---------- Recherche de la fiche ---------- */

/* Le champ sert à passer d'un article à l'autre. Il est pré-rempli avec le
   code courant, contenu sélectionné : taper remplace. */
.recherche-fiche {
    margin-bottom: .5rem;
}

.recherche-fiche input[type="search"] {
    flex: 1 1 240px;
    font-variant-numeric: tabular-nums;
}

/* Zone de suggestions : repliée tant qu'il n'y a rien à proposer. */
.resultats-fiche:empty {
    display: none;
}

.resultats-fiche {
    margin-bottom: 1.25rem;
}

.resultats-fiche .tableau {
    margin-bottom: 0;
}

/* ---------- Fil d'Ariane de nomenclature ---------- */

.fil-ariane {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    font-size: .85rem;
    color: var(--texte-doux);
    margin-bottom: .6rem;
}

.fil-etape {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.fil-etape code {
    font-size: .82em;
}

.fil-separateur {
    color: var(--texte-faible);
}

/* ---------- En-tête de fiche ---------- */

.fiche-entete {
    display: flex;
    align-items: flex-start;
    gap: 1.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--bord);
}

/* Le texte occupe la place restante, l'image une colonne fixe. min-width: 0
   est indispensable : sans lui, un titre long empêcherait la colonne de se
   réduire et pousserait l'image hors de l'écran. */
.fiche-entete-texte {
    flex: 1 1 22rem;
    min-width: 0;
}

.fiche-entete-image {
    flex: 0 0 18rem;
    max-width: 18rem;
}

/* ---------- Image et galerie ---------- */

.fiche-image-lien {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--bord);
    background: #ffffff;
}

.fiche-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.fiche-vignettes {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-top: .6rem;
}

.fiche-vignette {
    padding: 0;
    width: 3.2rem;
    height: 3.2rem;
    border: 1px solid var(--bord);
    border-radius: 7px;
    background: #ffffff;
    cursor: pointer;
    overflow: hidden;
}

.fiche-vignette img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fiche-vignette:hover {
    border-color: var(--accent);
}

.fiche-vignette.active {
    border-color: var(--jaune);
    box-shadow: 0 0 0 2px rgba(245, 200, 76, .25);
}

/* Fond blanc : les visuels produits sont détourés sur blanc, un fond sombre
   les rendrait illisibles. */
.image-absente {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    aspect-ratio: 1 / 1;
    margin: 0;
    border: 1px dashed var(--bord-clair);
    border-radius: 10px;
    color: var(--texte-faible);
    font-size: .85rem;
    text-align: center;
}

.image-absente-icone {
    font-size: 2rem;
    opacity: .5;
}

/* Le code article est la clé de lecture de la fiche : jaune et gras, pour
   qu'on le retrouve d'un coup d'œil, y compris en parcourant plusieurs onglets. */
.fiche-code {
    margin: 0 0 .2rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--jaune);
}

.fiche-description {
    margin: 0 0 .85rem;
    font-size: 1.5rem;
    font-weight: 650;
    line-height: 1.25;
}

.fiche-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* ---------- État de l'article ---------- */

.etat-article {
    position: relative;
}

.etat-bouton {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .7rem;
    border: 1px solid var(--bord-clair);
    border-radius: 7px;
    background: var(--surface);
    color: var(--texte);
    cursor: pointer;
    font-size: .88rem;
}

.etat-bouton:hover {
    border-color: var(--accent);
}

.etat-valeur {
    font-weight: 700;
    font-family: ui-monospace, Menlo, monospace;
    color: var(--accent);
}

.etat-libelle {
    color: var(--texte-doux);
}

.etat-chevron {
    color: var(--texte-faible);
    font-size: .8rem;
}

.etat-options {
    position: absolute;
    top: calc(100% + .3rem);
    left: 0;
    z-index: 20;
    list-style: none;
    margin: 0;
    padding: .25rem;
    min-width: 12rem;
    background: var(--surface-2);
    border: 1px solid var(--bord-clair);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}

.etat-options button {
    display: block;
    width: 100%;
    text-align: left;
    padding: .4rem .6rem;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--texte);
    cursor: pointer;
    font-size: .88rem;
}

.etat-options button:hover {
    background: var(--accent-voile);
    color: var(--accent);
}

.etat-note {
    position: absolute;
    top: calc(100% + .3rem);
    left: 0;
    z-index: 15;
    margin: 0;
    padding: .45rem .65rem;
    min-width: 16rem;
    max-width: 24rem;
    background: var(--alerte-fond);
    border: 1px solid rgba(224, 176, 84, .3);
    border-radius: 8px;
    color: var(--alerte);
    font-size: .82rem;
}

/* ---------- Prix de vente ---------- */

.fiche-prix {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    flex-wrap: wrap;
}

.prix-valeur {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--texte);
    font-variant-numeric: tabular-nums;
}

.prix-ttc {
    color: var(--texte-doux);
    font-size: 1.05rem;
}

.prix-libelle {
    font-size: .78rem;
    color: var(--texte-faible);
    margin-right: .8rem;
}

/* ---------- Promotion ---------- */

/* Le prix normal est barré, le prix promotionnel mis en avant. Les deux sont
   affichés : masquer le prix de départ empêcherait de mesurer la remise. */
.prix-barre {
    font-size: 1.05rem;
    color: var(--texte-faible);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    font-variant-numeric: tabular-nums;
}

.prix-promo {
    color: var(--ok);
}

.etiquette-promo {
    display: inline-block;
    padding: .1rem .4rem;
    margin-left: .25rem;
    border-radius: 4px;
    background: var(--ok-fond);
    color: var(--ok);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: help;
}

/* Origine de la promotion — nom et système source. Discrète mais présente :
   une remise doit rester traçable jusqu'à sa source. */
.prix-source {
    flex-basis: 100%;
    font-size: .78rem;
    color: var(--texte-faible);
    cursor: help;
}

.fiche-prix-absent {
    margin: 0;
}

/* ==========================================================================
   Coque de l'application : en-tête, menu latéral, onglets, contenu
   ========================================================================== */

html { height: 100%; }

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---------- En-tête ---------- */

.entete {
    position: sticky;
    top: 0;
    z-index: 40;
    flex: 0 0 auto;
}

.bascule-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 1px solid var(--bord-clair);
    border-radius: 7px;
    background: var(--surface-2);
    color: var(--texte-doux);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.bascule-menu:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Corps ---------- */

.corps {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    min-height: 0;
}

/* ---------- Menu latéral ---------- */

.menu-lateral {
    flex: 0 0 15.5rem;
    width: 15.5rem;
    background: var(--surface);
    border-right: 1px solid var(--bord);
    overflow-y: auto;
    overflow-x: hidden;
    transition: flex-basis .16s ease, width .16s ease;
}

/* Replié : la largeur tombe à zéro. Le contenu est masqué par overflow, ce qui
   évite de devoir le retirer du DOM et donc de perdre l'état des accordéons. */
html.menu-replie .menu-lateral {
    flex-basis: 0;
    width: 0;
    border-right-color: transparent;
}

.menu-nav {
    padding: .75rem .5rem 1.5rem;
}

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

/* Entrée fixe du haut — le tableau de bord, absent du menu de la base. */
.menu-fixe {
    margin-bottom: .45rem;
    padding-bottom: .45rem;
    border-bottom: 1px solid var(--bord);
}

/* Les niveaux imbriqués sont décalés et marqués d'un trait vertical, pour que
   la hiérarchie reste lisible sans compter sur la seule indentation. */
.menu-niveau[data-niveau="1"],
.menu-niveau[data-niveau="2"] {
    margin-left: .55rem;
    padding-left: .55rem;
    border-left: 1px solid var(--bord);
}

.menu-entree {
    margin: .05rem 0;
}

.menu-lien {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .38rem .55rem;
    border-radius: 6px;
    color: var(--texte-doux);
    text-decoration: none;
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-lien:hover {
    background: var(--surface-2);
    color: var(--texte);
}

.menu-entree.actif > .menu-lien {
    background: var(--accent-voile);
    color: var(--accent);
    font-weight: 600;
}

/* Un parent dont un enfant est actif reste signalé, sans prendre l'accent
   plein : c'est l'enfant qui indique où l'on se trouve. */
.menu-entree.contient-actif > .menu-lien {
    color: var(--texte);
}

.menu-lien.inactif {
    color: var(--texte-faible);
    cursor: default;
}

.menu-marque {
    margin-left: auto;
    font-size: .8em;
    opacity: .65;
}

.menu-vide,
.menu-note {
    padding: .6rem .55rem;
    font-size: .8rem;
    color: var(--texte-faible);
    line-height: 1.45;
}

.menu-note {
    border-top: 1px solid var(--bord);
    margin: 1rem .25rem 0;
    padding-top: .75rem;
}

/* ---------- Zone principale ---------- */

.zone-principale {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ---------- Barre d'onglets ---------- */

.barre-onglets {
    flex: 0 0 auto;
    position: sticky;
    top: 3.35rem;
    z-index: 30;
    background: var(--fond);
    border-bottom: 1px solid var(--bord);
}

.onglets {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .75rem;
}

.onglets-liste {
    display: flex;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    flex: 1 1 auto;
}

.onglets-liste::-webkit-scrollbar { height: 6px; }
.onglets-liste::-webkit-scrollbar-thumb {
    background: var(--bord-clair);
    border-radius: 3px;
}

.onglet {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    max-width: 15rem;
    border: 1px solid var(--bord);
    border-radius: 7px 7px 0 0;
    background: var(--surface);
    overflow: hidden;
}

.onglet.actif {
    background: var(--surface-3);
    border-color: var(--bord-clair);
    border-bottom-color: transparent;
}

.onglet-lien {
    padding: .35rem .55rem;
    color: var(--texte-doux);
    text-decoration: none;
    font-size: .84rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12rem;
}

.onglet.actif .onglet-lien {
    color: var(--texte);
    font-weight: 600;
}

.onglet-fermer {
    padding: .35rem .5rem .35rem .2rem;
    color: var(--texte-faible);
    text-decoration: none;
    font-size: 1rem;
    line-height: 1;
}

.onglet-fermer:hover {
    color: var(--erreur);
}

.onglets-fermer-tout {
    flex: 0 0 auto;
    font-size: .78rem;
    color: var(--texte-faible);
    text-decoration: none;
    padding: .3rem .5rem;
    border-radius: 6px;
    white-space: nowrap;
}

.onglets-fermer-tout:hover {
    color: var(--erreur);
    background: var(--surface-2);
}

.onglets-vide {
    font-size: .82rem;
    color: var(--texte-faible);
}

/* ---------- Contenu ---------- */

/* Le contenu occupe la place restante : la largeur maximale de l'ancienne
   mise en page n'a plus lieu d'être, la colonne étant déjà bornée par le menu. */
.contenu {
    max-width: none;
    margin: 0;
    flex: 1 1 auto;
    padding: 1.5rem 1.5rem 2rem;
}

.pied {
    max-width: none;
    margin: 0;
}

/* ---------- Écran étroit : le menu devient une surcouche ---------- */

@media (max-width: 900px) {
    .menu-lateral {
        position: fixed;
        top: 3.35rem;
        bottom: 0;
        left: 0;
        z-index: 50;
        width: 16rem;
        flex-basis: auto;
        box-shadow: 0 0 2rem rgba(0, 0, 0, .5);
        transition: transform .18s ease;
    }

    /* Sur mobile, replié signifie hors écran : la largeur nulle ne convient
       pas, le menu recouvrirait le contenu au lieu de disparaître. */
    html.menu-replie .menu-lateral {
        width: 16rem;
        flex-basis: auto;
        transform: translateX(-100%);
        box-shadow: none;
    }

    .contenu { padding: 1.1rem 1rem 2rem; }
}






@media (max-width: 700px) {
    .entete { gap: 1rem; padding: .75rem 1rem; }
    .contenu { padding: 1.25rem 1rem 2rem; }
    .tableau-large { display: block; overflow-x: auto; white-space: nowrap; }
    .tableau-fiche th { width: auto; }
    .compte { margin-left: 0; width: 100%; }
}