:root {
    --encre: #16202c;
    --encre-douce: #5b6b7d;
    --trait: #e2e8ef;
    --fond: #f6f8fa;
    --surface: #ffffff;
    --accent: #1c5d99;
    --accent-clair: #eaf2fa;
    --debit: #9a3412;
    --credit: #14683f;
    --alerte: #b42318;
    --rayon: 8px;
    --barre: #b4dee3;

    /* Rouge de l'enseigne, distinct d'`--alerte` : il nomme l'entreprise, il n'annonce pas un
       problème. Les confondre ferait bouger l'un en réglant l'autre. Plus soutenu que le rouge
       d'alerte, qui ne donne que 4,54:1 sur le cyan — au ras du seuil pour ce texte de 12 px. */
    --enseigne: #a3170f;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    color: var(--encre);
    background: var(--fond);
}

h1 { font-size: 1.5rem; margin: 0; font-weight: 700; }

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

.visuellement-cache {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Ossature ---------- */

.page { display: flex; min-height: 100vh; }

.barre-laterale {
    width: 230px;
    flex-shrink: 0;
    background: var(--barre);
    color: var(--encre);
    padding: 1.25rem 0;
    border-right: 1px solid var(--trait);
}

main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.barre-haute {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    height: 56px;
    padding: 0 1.75rem;
    background: var(--surface);
    border-bottom: 1px solid var(--trait);
}

.utilisateur { display: flex; flex-direction: column; line-height: 1.2; text-align: right; }
.utilisateur .nom { font-weight: 600; }
.utilisateur .roles { font-size: .75rem; color: var(--encre-douce); }

.contenu { padding: 1.75rem; }

/* ---------- Navigation ---------- */

.marque { padding: 0 1.25rem 1.5rem; }
.marque a { color: var(--encre); font-size: 1.35rem; font-weight: 800; letter-spacing: .06em; }
.marque a:hover { text-decoration: none; }

/* L'emblème et le nom sur une ligne : l'image ne se laisse pas écraser si la barre rétrécit. */
.logo-marque { display: flex; align-items: center; gap: .5rem; }
.logo-marque img { flex: 0 0 auto; }

.logo-connexion { display: block; margin: 0 auto .75rem; }
/* Encre pleine et non `--encre-douce` : sur le cyan, le gris doux tombe à 3,77 de contraste,
   sous le seuil AA de 4,5. Il était calibré pour un fond blanc. */
/* Une raison sociale peut être longue là où « Suivi des tiers » ne l'était pas : elle est coupée
   plutôt que d'élargir la barre latérale ou de déborder sur le menu. Le titre la donne en entier. */
.marque .baseline {
    display: block;
    font-size: .8rem;
    color: var(--enseigne);
    /* L'entreprise n'est plus une baseline décorative : elle dit où l'on travaille. Le gras la pose,
       et l'opacité qui l'estompait disparaît — atténuer ce qu'on vient de mettre en gras reviendrait
       à le reprendre d'une main après l'avoir donné de l'autre. */
    font-weight: 700;
    margin-top: .15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu { display: flex; flex-direction: column; }

/* Groupes du menu, dépliables au clic sur leur titre. */
.groupe-menu { display: flex; flex-direction: column; }

/* Un bouton, pas un titre décoratif : c'est une commande. Les styles par défaut du bouton sont
   donc défaits, et seuls le curseur et l'état survolé rappellent qu'il est cliquable. */
.titre-groupe {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    margin: .55rem 0 .1rem;
    /* Aligné sur le retrait des liens, qui portent une bordure gauche de 3 px. */
    padding: .4rem 1.25rem .4rem calc(1.25rem + 3px);
    background: none;
    border: 0;
    font-family: inherit;
    font-size: .76rem;
    /* 800 et non 700 : à cette taille et en capitales, 700 se lit à peine plus épais que du
       normal. La couleur passe aussi à l'encre pleine — un titre gris pâle ne paraît pas gras,
       quel que soit son poids. */
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--encre);
    text-align: left;
    cursor: pointer;
}

.titre-groupe:hover { background: rgba(255, 255, 255, .5); }

.titre-groupe .chevron {
    font-size: .7rem;
    /* Largeur fixe : sans elle, le titre se décale d'un pixel ou deux entre ▸ et ▾. */
    width: .8rem;
    color: var(--encre-douce);
}

/* Le premier groupe suit soit la marque, soit le tableau de bord : dans les deux cas la marge
   haute ferait un trou. */
.menu > .groupe-menu:first-child .titre-groupe { margin-top: .1rem; }

.lien-menu {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem 1.25rem;
    color: var(--encre);
    border-left: 3px solid transparent;
}
/* Survol et état actif en blanc : sur le cyan de la barre, un gris ou un bleu pâle se confondrait. */
.lien-menu:hover { background: rgba(255, 255, 255, .5); color: var(--encre); text-decoration: none; }
.lien-menu.active {
    background: var(--surface);
    color: var(--accent);
    font-weight: 700;
    border-left-color: var(--accent);
}
.puce { font-size: .7rem; opacity: .7; }

/* ---------- Entêtes ---------- */

.entete-page { margin-bottom: 1.25rem; }
.sous-titre { margin: .3rem 0 0; color: var(--encre-douce); font-size: .875rem; }

.fil-ariane { margin-bottom: .75rem; font-size: .85rem; color: var(--encre-douce); }
.fil-ariane span { margin: 0 .35rem; }

.entete-fiche {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.solde-final { text-align: right; }
.solde-final .intitule {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--encre-douce);
}
.solde-final .montant {
    display: block;
    font-size: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-top: .2rem;
}
.solde-final.debiteur .montant { color: var(--debit); }
.solde-final.crediteur .montant { color: var(--credit); }

/* ---------- Filtres ---------- */

.filtres {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.champ-recherche, .champ-date, .champ {
    padding: .5rem .7rem;
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    font: inherit;
    background: var(--surface);
}
.champ-recherche { min-width: 280px; }
.champ-recherche:focus, .champ-date:focus, .champ:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.groupe-onglets { display: flex; border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; }
.onglet {
    padding: .5rem .9rem;
    border: 0;
    background: var(--surface);
    font: inherit;
    cursor: pointer;
    color: var(--encre-douce);
}
.onglet:hover { background: var(--accent-clair); }
.onglet.actif { background: var(--accent); color: #fff; }

.case-actifs { display: flex; align-items: center; gap: .4rem; color: var(--encre-douce); }

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

.table-defilante {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
}

table { width: 100%; border-collapse: collapse; }

th, td { padding: .65rem .9rem; text-align: left; border-bottom: 1px solid var(--trait); }

thead th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--encre-douce);
    background: #fbfcfd;
    white-space: nowrap;
}

tbody tr:hover { background: #fafbfc; }
tbody tr:last-child td { border-bottom: 0; }

.nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.solde { font-weight: 600; }

tfoot td {
    border-top: 2px solid var(--trait);
    border-bottom: 0;
    background: #fbfcfd;
    font-weight: 600;
}

.ligne-report td { background: var(--accent-clair); font-style: italic; color: var(--encre-douce); }
.ligne-inactive { opacity: .6; }
.echeance-depassee { color: var(--alerte); font-weight: 600; }

.code-tiers, .numero-piece {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .85rem;
}

.actions { text-align: right; white-space: nowrap; }

/* Deux boutons-liens voisins se touchaient, faute de bordure pour les séparer : « Désactiver » et
   « Supprimer » se lisaient comme un seul mot. L'écart vaut pour toutes les cellules d'action. */
.actions > * + * { margin-left: .6rem; }

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

.etiquette {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    margin-left: .35rem;
}
.etiquette.client { background: #e8f1fb; color: #1c5d99; }
.etiquette.fournisseur { background: #fdf0e6; color: #9a3412; }
.etiquette.inactif { background: #eef1f4; color: var(--encre-douce); }
.etiquette.actif { background: #e6f4ec; color: var(--credit); }
.etiquette.alerte { background: #fdeceb; color: var(--alerte); }

/* ---------- Boutons ---------- */

.bouton-principal, .bouton-secondaire {
    display: inline-block;
    padding: .5rem 1rem;
    border-radius: var(--rayon);
    font: inherit;
    cursor: pointer;
    border: 1px solid transparent;
}
.bouton-principal { background: var(--accent); color: #fff; width: 100%; margin-top: 1.25rem; }
.bouton-principal:hover:not(:disabled) { background: #17517f; }
.bouton-principal:disabled { opacity: .6; cursor: default; }

.bouton-secondaire { background: var(--surface); border-color: var(--trait); color: var(--encre); }
.bouton-secondaire:hover { background: var(--accent-clair); text-decoration: none; }

.bouton-lien {
    background: none;
    border: 0;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    padding: 0;
}
.bouton-lien:hover { text-decoration: underline; }

/* ---------- États ---------- */

.etat-chargement, .etat-vide {
    padding: 2rem;
    text-align: center;
    color: var(--encre-douce);
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
}

.message-erreur {
    padding: .75rem 1rem;
    background: #fdeceb;
    border: 1px solid #f4c7c3;
    border-radius: var(--rayon);
    color: var(--alerte);
}

.message-succes {
    padding: .75rem 1rem;
    background: #e6f4ec;
    border: 1px solid #b7dfc7;
    border-radius: var(--rayon);
    color: var(--credit);
}

.validation-message { color: var(--alerte); font-size: .8rem; display: block; margin-top: .2rem; }

/* ---------- Connexion ---------- */

.ecran-connexion {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Même teinte que la barre latérale : la connexion annonce la couleur de l'application. */
    background: var(--barre);
    padding: 1rem;
}

.carte-connexion {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border-radius: 12px;
    padding: 2rem;
    /* Le filet datait du fond blanc, où la carte se confondait avec lui. Il est conservé sur le
       fond cyan : il pose le bord de la carte au lieu de la laisser flotter. */
    border: 1px solid var(--trait);
}
.carte-connexion h1 { text-align: center; font-size: 2rem; letter-spacing: .08em; }
.carte-connexion .sous-titre { text-align: center; margin-bottom: 1.5rem; }
.carte-connexion label { display: block; margin-top: .9rem; margin-bottom: .3rem; font-size: .85rem; }
.carte-connexion .champ { width: 100%; }

/* ---------- Formulaires ---------- */

.entete-avec-action {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.carte-formulaire {
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}
.carte-formulaire h2 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    color: var(--encre-douce);
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--trait);
}

.grille-champs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.groupe-champ { display: flex; flex-direction: column; }
.groupe-champ.large { grid-column: 1 / -1; }
.groupe-champ label { font-size: .85rem; margin-bottom: .3rem; font-weight: 500; }
.groupe-champ .champ { width: 100%; }
.groupe-champ .aide { font-size: .75rem; color: var(--encre-douce); margin-top: .25rem; }

select.champ, textarea.champ { font: inherit; }
.champ:disabled { background: #f2f4f6; color: var(--encre-douce); }

table.saisie { width: 100%; table-layout: fixed; }
table.saisie td { padding: .35rem .5rem; }
table.saisie .champ.nombre { text-align: right; }

/* `min-width` sur les champs forçait la largeur du tableau au-delà de son conteneur : chaque
   colonne de saisie réclamait sa place et le tableau débordait horizontalement. Les champs
   s'ajustent désormais à leur colonne, dont la largeur est fixée par le `colgroup`. */
table.saisie .champ { padding: .35rem .5rem; width: 100%; min-width: 0; }

/* Le sélecteur d'article porte « référence — désignation » : plus large que les colonnes de
   nombres, mais borné pour que la désignation garde la place restante. */
/* Le sélecteur d'article était à 14rem : il prenait à la désignation une place dont elle a plus
   besoin que lui. La référence suffit à reconnaître l'article, la désignation complète restant
   lisible dans la liste déroulante déployée. Les colonnes de nombres sont resserrées d'autant. */
table.saisie .col-article { width: 9.5rem; }
table.saisie .col-nombre { width: 5.5rem; }
table.saisie .col-montant { width: 7.5rem; }
table.saisie .col-action { width: 5rem; }

/* <b>Aucun plancher sur la désignation, et ce n'est pas un oubli.</b> Sous `table-layout: fixed`,
   un `min-width` de cellule est ignoré ; posé sur le tableau, il fonctionne — mais fait défiler
   **la page entière** horizontalement dès que la fenêtre descend vers 1024 px, ce que la feuille
   interdit partout ailleurs. Mesuré : 300 px de désignation gagnés contre 200 px de débordement de
   page. `table-layout: auto` avec un `min-width` de cellule donne le même débordement.
   La cause est structurelle et non stylistique : huit colonnes ne tiennent pas dans les ~680 px que
   laisse une fenêtre de 1024. Élargir la désignation passe donc par retirer de la place aux autres,
   ce que font les largeurs ci-dessus — pas par un plancher qui déplacerait le problème sur la page.
   Si la saisie doit rester confortable sous 1150 px, c'est la forme du tableau qu'il faudra revoir
   (deux lignes par article, comme la mise en cartes le fait déjà sur téléphone). */

/* La désignation est la seule colonne élastique : elle absorbe la place restante, et son texte
   se coupe plutôt que d'élargir le tableau. */
table.saisie th, table.saisie td { overflow: hidden; text-overflow: ellipsis; }

/* <b>La bande étroite : entre la mise en cartes (800 px) et l'aisance (1150 px).</b>
   Là, les sept colonnes fixes consommaient toute la place et la désignation tombait à zéro —
   mesuré à 1024 px : un champ de 16 px, inutilisable. Les resserrer lui rend une centaine de
   pixels, ce qui n'est pas confortable mais reste exploitable, et surtout n'entraîne aucun
   défilement de la page. Au-dessus de 1150 px ces valeurs ne s'appliquent pas : la désignation y
   reçoit déjà 245 px à 1280 et 580 px à 1600. */
@media (min-width: 801px) and (max-width: 1150px) {
    table.saisie .col-article { width: 6rem; }
    table.saisie .col-nombre { width: 4.5rem; }
    table.saisie .col-montant { width: 6rem; }
    table.saisie .col-action { width: 4rem; }
}

.recapitulatif {
    margin: 1.25rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    max-width: 320px;
    margin-left: auto;
}
.recapitulatif > div { display: flex; justify-content: space-between; gap: 2rem; }
.recapitulatif dt { color: var(--encre-douce); }
.recapitulatif dd { margin: 0; font-variant-numeric: tabular-nums; }
.recapitulatif .fort {
    border-top: 1px solid var(--trait);
    padding-top: .35rem;
    font-weight: 600;
    font-size: 1.05rem;
}

.barre-actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    align-items: center;
    margin-top: 1rem;
}
.bouton-principal.compact { width: auto; margin-top: 0; }
.bouton-lien.danger { color: var(--alerte); }

/* Le bouton qui confirme une suppression définitive ne doit pas porter la couleur d'une action
   ordinaire : c'est la dernière occasion de reculer. */
.bouton-principal.danger { background: var(--alerte); border-color: var(--alerte); }

.etiquette.valide { background: #e6f4ec; color: var(--credit); }
.etiquette.brouillon { background: #fdf6e3; color: #8a6d1f; }

/* ---------- Tableau de bord ---------- */

.titre-section {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    color: var(--encre-douce);
    margin: 1.75rem 0 .75rem;
}

.grille-indicateurs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
}

.carte-indicateur {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-left: 3px solid var(--trait);
    border-radius: var(--rayon);
    padding: 1rem 1.25rem;
    color: var(--encre);
}
a.carte-indicateur:hover { border-color: var(--accent); text-decoration: none; }

.carte-indicateur .intitule {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--encre-douce);
}
.carte-indicateur .valeur {
    font-size: 1.6rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.carte-indicateur .detail { font-size: .8rem; color: var(--encre-douce); }

.carte-indicateur.accentuee { border-left-color: var(--accent); }
.carte-indicateur.accentuee .valeur { color: var(--accent); }
.carte-indicateur.alerte { border-left-color: var(--alerte); }
.carte-indicateur.alerte .valeur { color: var(--alerte); }

/* ---------- Modale ---------- */

.fond-modale {
    position: fixed;
    inset: 0;
    background: rgba(22, 32, 44, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 100;
}
.modale {
    background: var(--surface);
    border-radius: var(--rayon);
    padding: 1.5rem;
    width: 100%;
    max-width: 460px;
}
.modale h2 { margin-top: 0; font-size: 1.15rem; }
.modale label { display: block; margin: .75rem 0 .3rem; font-size: .85rem; font-weight: 500; }
.modale .champ { width: 100%; }

/* ---------- États ---------- */

.carte-etat {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: 1.1rem 1.25rem;
    color: var(--encre);
}
.carte-etat:hover { border-color: var(--accent); text-decoration: none; }
.carte-etat .titre { font-weight: 600; color: var(--accent); }
.carte-etat .detail { font-size: .82rem; color: var(--encre-douce); line-height: 1.4; }

.aide.avertissement {
    background: #fdf6e3;
    border: 1px solid #e8d9a8;
    border-radius: var(--rayon);
    padding: .6rem .9rem;
    color: #8a6d1f;
    margin-bottom: .75rem;
}


/* ---------- Onglets de page (Utilisateurs / Profils / Permissions) ---------- */

/* Nommés `onglet-page` et non `onglet` : ce dernier existe déjà plus haut, pour les filtres
   segmentés des listes, avec un fond accent sur l'élément retenu. Les deux se ressemblent de nom
   sans faire le même métier — l'un filtre une liste, l'autre change le contenu de la page — et la
   collision avait rendu le libellé de l'onglet courant invisible : texte accent sur fond accent. */
.onglets {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--trait);
    margin-bottom: 1.25rem;
}

.onglet-page {
    background: none;
    border: 0;
    /* Le filet du bas porte l'état courant : réservé dès le départ pour que la bascule ne décale
       pas le contenu de deux pixels. */
    border-bottom: 3px solid transparent;
    padding: .6rem 1rem;
    font: inherit;
    color: var(--encre-douce);
    cursor: pointer;
}

.onglet-page:hover { color: var(--encre); }

.onglet-page.courant {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

/* ---------- Profils ---------- */

.grille-profils {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.carte-profil {
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: 1rem;
}

.carte-profil h2 { font-size: 1.05rem; margin: 0 0 .25rem; }
.carte-profil .actions { margin-top: .75rem; }

.compte-permissions {
    color: var(--accent);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    margin: 0 0 .4rem;
}

/* Sur la ligne d'un utilisateur, le décompte passe sous le nom du profil plutôt qu'à côté :
   accolés, les deux se lisaient comme un seul libellé. */
td .compte-permissions { display: block; font-weight: 400; letter-spacing: 0; }
.profil-nom { font-weight: 600; }

/* ---------- Catalogue et composition des permissions ---------- */

.entete-permissions {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
}

.entete-permissions h3 { margin: 0; font-size: 1rem; }

.groupe-permissions {
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: .75rem 1rem 1rem;
    margin: .75rem 0 0;
}

.groupe-permissions legend,
.groupe-permissions h2 {
    font-weight: 600;
    font-size: .95rem;
    padding: 0 .4rem;
    display: flex;
    align-items: baseline;
    gap: .75rem;
}

.ligne-permission {
    display: grid;
    /* Deux colonnes : la case, puis le libellé. La troisième portait le code technique, retiré de
       l'affichage — il n'apprenait rien à qui compose un profil. */
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .6rem;
    padding: .3rem 0;
}

.ligne-permission input[disabled] + span { color: var(--encre-douce); }

.aide.avertissement {
    color: var(--debit);
    border-left: 3px solid var(--debit);
    padding-left: .6rem;
}

/* ---------- Erreurs Blazor ---------- */

#blazor-error-ui {
    background: #fff3cd;
    bottom: 0;
    display: none;
    left: 0;
    padding: .6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* Le bouton du menu n'existe que sur petit écran : au-dessus, la barre latérale est permanente et
   un bouton pour la dérouler n'aurait rien à ouvrir. */
.bouton-menu { display: none; }

@media (max-width: 800px) {
    /* Repère de positionnement pour la barre haute et pour le menu déroulé, tous deux sortis du
       flux plus bas. */
    .page { flex-direction: column; position: relative; }

    .barre-laterale {
        width: 100%;
        padding: 0;
        /* Empilée, la barre est au-dessus du contenu : le filet passe en bas. */
        border-right: 0;
        border-bottom: 1px solid var(--trait);
        position: relative;
    }

    /* ---- Bandeau ----
       Le compte et la déconnexion viennent occuper le coin haut droit, à hauteur de l'enseigne :
       ils formaient sinon une seconde bande sous la première, pour deux mots. Sortis du flux, ils
       ne repoussent rien. */
    .barre-haute {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 20;
        height: auto;
        min-height: 0;
        padding: .55rem 1rem;
        border: 0;
        background: none;
        gap: .75rem;
    }

    .barre-haute .utilisateur { text-align: right; }

    /* ---- Menu hamburger ----
       Le bouton passe **sous** l'enseigne, à gauche : la place à sa droite revient au compte. */
    .marque { display: block; padding: .6rem 1rem .5rem; }
    .marque-texte { display: block; }

    .bouton-menu {
        display: block;
        margin-top: .35rem;
        background: none;
        border: 0;
        font-size: 1.5rem;
        line-height: 1;
        color: var(--encre);
        cursor: pointer;
        /* 44 px : la cible tactile minimale confortable. Un chevron de 24 px se rate une fois sur
           trois, et rater le menu est la première chose qu'on fait sur un téléphone. */
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        text-align: left;
    }

    .menu { display: none; }

    /* Déroulé **par-dessus** le contenu et non au-dessus de lui : inséré dans le flux, il
       repoussait le formulaire de six cents pixels, et refermer le menu ramenait l'écran ailleurs
       qu'où on l'avait laissé. */
    .menu.deploye {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 30;
        background: var(--barre);
        border-top: 1px solid rgba(0, 0, 0, .08);
        box-shadow: 0 8px 16px rgba(0, 0, 0, .18);
        padding-bottom: .5rem;
        /* Onze entrées dépassent un petit écran : le menu défile en lui-même plutôt que de sortir
           de l'écran par le bas. */
        max-height: calc(100vh - 100%);
        overflow-y: auto;
    }

    /* Le liseré passe à gauche comme sur ordinateur : la liste est verticale des deux côtés, donc
       le repère de la page courante n'a aucune raison de changer de bord. */
    .lien-menu { padding: .8rem 1rem; }

    .contenu { padding: 1rem; }

    /* ---- Formulaires ----
       Deux colonnes de 220 px ne tiennent pas dans 375 : la grille passe à une colonne pleine,
       au lieu de laisser `auto-fit` produire des champs comprimés. */
    .grille-champs { grid-template-columns: 1fr; }

    .barre-actions { flex-wrap: wrap; }
    .barre-actions > * { flex: 1 1 auto; }

    /* ---- Tableaux : chaque ligne devient une carte ----
       De six à dix colonnes, aucun de ces tableaux ne tient dans 375 px. Les faire défiler
       latéralement obligeait à balayer l'écran pour lire une seule ligne, et à retenir de tête la
       colonne où l'on était. Empilée, la ligne se lit d'un coup : le nom de colonne passe devant
       sa valeur, porté par `data-libelle`, et l'en-tête disparaît puisqu'elle se répéterait. */
    .table-defilante { overflow-x: visible; border: 0; }

    table.liste { display: block; table-layout: auto; width: 100%; }
    table.liste thead { display: none; }
    table.liste tbody, table.liste tr, table.liste td { display: block; width: auto; }

    table.liste tr {
        border: 1px solid var(--trait);
        border-radius: var(--rayon);
        padding: .6rem .75rem;
        margin-bottom: .75rem;
        background: var(--surface);
    }

    table.liste td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: .3rem 0;
        border: 0;
        text-align: left;
    }

    table.liste td::before {
        content: attr(data-libelle);
        flex: 0 0 42%;
        font-size: .8rem;
        color: var(--encre-douce);
    }

    /* Une cellule sans libellé — la colonne d'actions — prend toute la largeur. */
    table.liste td:not([data-libelle])::before { content: none; }

    /* Les actions passent en bas de la carte, séparées par un filet : ce sont des boutons, pas
       une donnée de plus à lire. */
    table.liste td.actions {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: .5rem;
        margin-top: .5rem;
        padding-top: .6rem;
        border-top: 1px solid var(--trait);
    }

    /* Les montants restent alignés à droite, comme sur ordinateur : c'est ce qui les rend
       comparables d'une carte à l'autre. */
    table.liste td.nombre, table.liste td.solde { justify-content: space-between; }

    /* Une cellule à deux valeurs — le profil et son nombre de permissions — les empile plutôt que
       de les serrer côte à côte : « 39 permissions » se coupait en deux lignes et venait buter
       contre le nom du profil. */
    table.liste td { flex-wrap: wrap; }
    table.liste td .compte-permissions { flex: 1 0 100%; text-align: right; margin: 0; }

    /* ---- Saisie de lignes ----
       Même empilement, mais la valeur est un champ : il prend la place restante. */
    table.saisie .champ { flex: 1 1 auto; width: auto; }
    table.saisie .champ.nombre { text-align: left; }
    table.saisie td { justify-content: flex-start; }
    table.saisie td::before { flex: 0 0 40%; }
    table.saisie td.actions { justify-content: flex-end; }

}

/* ---------- Impression ----------
   En dernier, et c'est essentiel : sur un telephone, ce bloc et celui des petits ecrans
   s'appliquent tous les deux. A specificite egale, le dernier l'emporte. Place avant, il se
   faisait ecraser par la mise en cartes et la balance sortait en cartes sur la feuille au lieu
   du tableau attendu. L'impression est un autre media, pas un ecran plus etroit : elle tranche
   en dernier. */
@media print {
    .barre-laterale,
    .barre-haute,
    .sans-impression,
    #blazor-error-ui { display: none !important; }

    body { background: #fff; font-size: 11pt; }
    .contenu { padding: 0; }
    .page { display: block; }

    /* Le conteneur défilant tronquerait le tableau à la largeur de l'écran. */
    .table-defilante { overflow: visible; border: 0; }
    table { font-size: 10pt; }
    tr { break-inside: avoid; }

    /* ---- Annulation de la mise en cartes ----
       Sur un téléphone, le bloc des petits écrans s'applique aussi à l'impression, et ses
       sélecteurs `table.liste …` sont **plus spécifiques** que `thead` ou `table` : les remettre en
       dernier dans la feuille ne suffisait pas, la spécificité primant sur l'ordre. La balance
       sortait donc en cartes là où on attend un tableau — une carte par compte se lit à l'écran,
       jamais sur une feuille où l'on compare des colonnes de chiffres.
       Une feuille de papier n'est pas un petit écran : le tableau y reprend sa forme. */
    table.liste, table.saisie { display: table; table-layout: auto; }
    table.liste thead, table.saisie thead { display: table-header-group; }
    table.liste tbody, table.saisie tbody { display: table-row-group; }

    table.liste tr, table.saisie tr {
        display: table-row;
        border: 0;
        border-radius: 0;
        padding: 0;
        margin: 0;
        background: none;
    }

    table.liste td, table.saisie td {
        display: table-cell;
        border-bottom: 1px solid var(--trait);
        border-top: 0;
        padding: .4rem .6rem;
        margin: 0;
    }

    /* Le libellé de colonne revient dans l'en-tête : le répéter devant chaque valeur doublerait
       toute la feuille. */
    table.liste td::before, table.saisie td::before { content: none; }

    table.liste td.nombre, table.liste td.solde { text-align: right; }
    table.liste td .compte-permissions { display: block; text-align: left; }

    a { color: inherit; text-decoration: none; }
    .etiquette { border: 1px solid #999; background: none !important; color: inherit !important; }
}