/* ==============================================================================================
   ÉCRAN — SAISIE DE PIÈCE (SAI-01)

   Feuille d'ÉCRAN, préfixe .sr-, portée de la passation « Saisie de pièce »
   (docs/modeles/design_handoff_saisie_piece, razor/wwwroot/css/ecran-saisie.css). Elle
   remplace la feuille du même préfixe qui habillait l'écran d'avant : le préfixe reste, son
   contenu est celui de la refonte.

   CE QUI N'EST PAS ICI : les cartes (.md-*), le cadre de liste (.tbl-*), les fenêtres
   (ModalCadre), l'ossature d'écran (EcranCompta), les boutons du gabarit. Ils viennent du
   dépôt et ne se redéfinissent pas par écran.

   CE QUI A CHANGÉ AU PORTAGE, ET RIEN D'AUTRE — la charte du dépôt, qui n'est pas négociable
   par un écran (docs/couleurs-en-dur.md) :
     · « color: #fff » n'existe pas : l'encre blanche a un nom, et lequel dépend du fond —
       --et-sur-aplat sur un aplat de contenu, --et-sur-ardoise-plein sur l'ardoise ;
     · une teinte d'état ne s'écrit JAMAIS en color: — c'est un fond, une bordure ou une
       marque, et l'encre posée dessus prend le rang -ink (--et-succes-ink, etc.) ;
     · l'ambre ne passe pas le seuil graphique de 3:1 : en bordure, en liseré ou en pastille
       il prend --et-avertissement-mark, de même teinte et de même saturation ;
     · une ombre de panneau flottant est --et-ombre-flottant, jetons de géométrie ET de
       couleur en un — une ombre n'est pas deux jetons.
   La mesure et la règle sont dans CLAUDE.md et docs/couleurs-en-dur.md.

   CE QUE LA PASSE DU 2026-09-06 A AJOUTÉ, toujours au nom de la charte et non de l'écran :
     · LE BOUTON D'ENGAGEMENT EST ORANGE (.sr-btn-engager, --et-action) — un par écran, et
       c'est « Enregistrer et enchaîner ». La maquette le posait en bleu comme les actions
       fortes secondaires (équilibrer, reprendre un brouillon), qui restent bleues ;
     · LE CORPS DE PIÈCE EST BORNÉ À LA FENÊTRE sur un poste : la grille défile dans son
       cadre, la tête reste figée, le pied — totaux, écart, bouton d'engagement — reste sous
       elle et le volet défile à côté. C'est ce que la maquette faisait (un corps en flex
       qui remplit la hauteur), et que le portage avait perdu : la coquille ne borne pas
       .et-scroll, c'est le document qui défile, et un pied « collant » ne s'y accroche à
       rien. Même mécanique que lot08-entete-fixe.css, mêmes raisons ;
     · LES LARGEURS DE COLONNE SONT ICI (.sr-col-*) et plus dans le balisage : une largeur
       écrite dans un style= n'est reprise par aucun palier (docs/conventions-responsive.md) ;
     · TROIS PALIERS SUR L'ÉCHELLE RETENUE — 1024, 720, 560 — avec la règle tactile de 44 px
       étendue à TOUTES les cibles de l'écran (sens, pavé, propositions, touches de carte), et
       le volet en deux colonnes sous la grille dès qu'il passe dessous ;
     · L'ÉCHELLE TYPOGRAPHIQUE : rien sous 12 px, 17 px → 18 px (révision du 2026-09-02) ;
     · LES ANGLES DROITS, partout où le navigateur dessine lui-même : les contrôles natifs
       (champs, listes, dates) arrondissent leurs coins quel que soit border-radius tant
       qu'on leur laisse leur rendu — on le leur retire et on redessine le chevron, comme
       la feuille kilomètre. Seules les pastilles d'état gardent leur pilule.
   ============================================================================================== */

/* ---- Bandeau de contexte : séance, prochain numéro, mode ---------------- */

.sr-contexte {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 7px var(--et-bandeau-pad-h);
  background: var(--et-surface-2);
  border-bottom: 1px solid var(--et-hairline);
}

.sr-contexte > * { flex: none; white-space: nowrap; }

.sr-seance,
.sr-corbeille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: var(--et-neutre-bg);
  border: 1px solid var(--et-hairline);
  color: var(--et-ink);
  font-size: 13px;
}

.sr-seance > .bi,
.sr-prochain > span:first-child { font-size: 12px; color: var(--et-muted); }

.sr-seance-select {
  height: 26px;
  padding: 0 4px;
  background: transparent;
  border: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  color: var(--et-ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.sr-compteur { color: var(--et-form-blue); font-weight: 600; font-size: 12px; }

.sr-prochain { display: flex; align-items: baseline; gap: 7px; font-size: 13px; }

.sr-corbeille { background: var(--et-avertissement-bg); border-color: var(--et-avertissement-mark); cursor: pointer; }

.sr-etiquette {
  padding: 1px 7px;
  background: var(--et-tint);
  color: var(--et-form-blue);
  font-size: 12px;
  font-weight: 600;
}

/* ---- Mode de saisie ---------------------------------------------------- */

.sr-mode { display: inline-flex; }

.sr-mode > button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 13px;
  background: var(--et-surface);
  border: 1px solid var(--et-filet-fort);
  border-radius: 0;
  color: var(--et-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.sr-mode > button + button { border-left: 0; }
.sr-mode > button.est-actif {
  background: var(--et-table-head);
  border-color: var(--et-table-head);
  color: var(--et-sur-ardoise-plein);
  box-shadow: inset 0 -2px 0 var(--et-form-blue);
}
.sr-mode > button:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 2px; }

.sr-kbd {
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  background: var(--et-neutre-bg);
  border: 1px solid var(--et-hairline);
  border-radius: 0;
  border-bottom-width: 2px;
  color: var(--et-ink);
  font-family: var(--et-font-mono);
  font-size: 12px;
  text-align: center;
}

/* La touche posée SUR un aplat coloré. Son encre est --et-sur-aplat ; son fond et son filet
   sont un VOILE BLANC SUR UN APLAT DE MARQUE, exactement le rôle que la charte a nommé pour
   la marine — et la famille --et-fond-marine existe précisément parce que ce voile-là se
   recopiait à la main à treize opacités. En écrire deux de plus ici, à .22 et .40, aurait
   été la quatorzième et la quinzième. */
.sr-kbd-clair {
  background: var(--et-fond-marine-survol);
  border-color: var(--et-filet-marine);
  color: var(--et-sur-aplat);
}

/* ---- Bandeaux --------------------------------------------------------- */

.sr-bandeau {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 8px 20px;
  color: var(--et-ink);
  font-size: 13px;
}

.sr-bandeau.est-info { background: var(--et-tint); }
.sr-bandeau.est-info > .bi { color: var(--et-form-blue); }
.sr-bandeau.est-signal { background: var(--et-avertissement-bg); }
.sr-bandeau.est-signal > .bi { color: var(--et-avertissement-ink); }
.sr-bandeau.est-danger { background: var(--et-danger-badge-bg); }
.sr-bandeau.est-danger > .bi { color: var(--et-danger-ink); }
.sr-bandeau.est-neutre { background: var(--et-neutre-bg); color: var(--et-muted); }

.sr-bandeau-actions { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; }

/* ---- En-tête de pièce -------------------------------------------------- */

.sr-entete-piece {
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
  background: var(--et-surface);
  border-bottom: 1px solid var(--et-hairline);
}

.sr-entete-piece > div { padding: 10px 14px; border-right: 1px solid var(--et-hairline); }
/* Le journal est le champ le plus large : c'est lui qui commande le sens de la pièce. */
.sr-entete-piece > div:nth-child(1) { flex: 1 1 380px; min-width: 300px; }
.sr-entete-piece > div:nth-child(2) { flex: 0 0 160px; }
.sr-entete-piece > div:nth-child(3) { flex: 1 1 260px; min-width: 0; }
.sr-entete-piece > div:nth-child(4) { flex: 0 0 170px; }
.sr-entete-piece > div:nth-child(5) { flex: 0 0 120px; }
.sr-entete-piece > div:nth-child(6) { flex: 0 0 150px; }
/* Le dernier champ de la bande ferme le filet, quel que soit leur nombre : la devise et le
   cours n'apparaissent que sur un dossier qui déclare des parités. */
.sr-entete-piece > div:last-child { border-right: 0; }

.sr-lab {
  display: block;
  margin-bottom: 4px;
  color: var(--et-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sr-input {
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  padding: 0 9px;
  background: var(--et-surface);
  border: 1px solid var(--et-filet-fort);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  color: var(--et-ink);
  font: inherit;
  font-size: 13px;
}

/* Une liste sans rendu natif n'a plus de chevron : il est redessiné, deux traits obliques
   dans l'encre secondaire, à droite du champ. */
select.sr-input,
.sr-cell select,
.sr-seance-select {
  padding-right: 24px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--et-muted) 50%),
    linear-gradient(135deg, var(--et-muted) 50%, transparent 50%);
  background-position: right 12px center, right 7px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.sr-input:focus { outline: 0; border-color: var(--et-form-blue); box-shadow: inset 0 0 0 1px var(--et-form-blue); }
.sr-input.mono { font-family: var(--et-font-mono); }
.sr-input.num { text-align: right; font-family: var(--et-font-mono); font-variant-numeric: tabular-nums; }

/* ---- Panneau de pièce guidée ------------------------------------------ */

.sr-guide { padding: 14px 16px; background: var(--et-surface); border-bottom: 1px solid var(--et-hairline); }

.sr-guide-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, .9fr);
  gap: 12px;
  align-items: start;
}

.sr-champ { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sr-champ > .sr-input { height: 34px; font-size: 14px; }
.sr-champ > .sr-input.num { font-size: 18px; font-weight: 600; }

.sr-fil {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin-top: 12px;
  padding: 8px 10px;
  background: var(--et-surface);
  border: 1px solid var(--et-hairline);
  border-radius: 0;
  color: var(--et-ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.sr-fil:hover { background: var(--et-tint); border-color: var(--et-form-blue); }
.sr-fil-t { display: block; font-weight: 600; }
.sr-fil-d { display: block; font-size: 12px; color: var(--et-muted); }

/* ---- Grille ----------------------------------------------------------- */

/* LE CORPS EST BORNÉ À LA FENÊTRE, et c'est la condition de tout le reste. La colonne de
   contenu n'est pas bornée par la coquille : .et-scroll porte overflow:auto mais grandit
   avec son contenu, c'est le DOCUMENT qui défile — et un « position: sticky » posé sur le
   pied se mesure contre un scrollport qui ne défile jamais (lot08-entete-fixe.css explique
   le même piège pour les têtes de table). La borne rend à l'écran ce que la maquette
   dessinait : la grille défile dans son cadre, le pied reste sous elle, le volet défile
   à côté, et une pièce de trente lignes s'enregistre sans chercher le bouton.

   max-height ET NON height : le corps ne dépasse jamais la fenêtre, et garde son minimum
   de 380 px sur une fenêtre trop basse — la page défile alors un peu, plutôt qu'une grille
   de trois lignes. La valeur retire ce qui est posé AU-DESSUS du corps — barre de coquille,
   marge de .et-scroll, bandeau d'écran, bande de contexte, en-tête de pièce (~360 px) ; un
   bandeau de plus (brouillon, doublon, plafond) fait déborder d'autant, ce qui est le prix
   d'une variable plutôt que d'un calcul par écran. Sous 1024 px la borne est levée : un
   cadre qui défile dans une page qui défile est le pire des deux sur un doigt. */
.sr-corps {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 380px;
  max-height: calc(100vh - var(--sr-au-dessus, 360px));
}
.sr-colonne { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--et-surface-2); }
.sr-scroller { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* La tête de grille se fige dans le cadre borné — z 3 : au-dessus des cellules ancrées à
   gauche (2, lot 03), au-dessous de la cellule de coin (4). Le filet inférieur voyage AVEC
   la cellule, en ombre intérieure : sous border-collapse la bordure appartient à la table
   et resterait en arrière (lot 08, même raisonnement). La cellule de coin — le compte, qui
   est aussi la colonne d'ancrage — réunit les deux filets : le lot 03 pèse (0,3,2) et
   l'emporterait sur une règle à (0,2,2) avec son seul filet droit. */
.sr-grille .tbl > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 3;
  box-shadow: inset 0 -1px 0 var(--et-table-head-fonce);
}
.sr-grille .tbl-ancree[data-ancre="2"] > thead > tr > :nth-child(2) {
  z-index: 4;
  box-shadow: 1px 0 0 var(--et-hairline), inset 0 -1px 0 var(--et-table-head-fonce);
}

/* Le menu des comptes doit sortir du cadre, sans quoi il est rogné dès la deuxième ligne.
   La table garde donc son min-width en attribut : sans lui elle se comprime au lieu de
   déborder et tronque ses cellules. Le défilement appartient au scroller. */
.sr-grille .tbl-cadre,
.sr-grille .tbl-defile { overflow: visible; }

.sr-cell input,
.sr-cell select {
  width: 100%;
  height: 30px;
  padding: 0 7px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  color: var(--et-ink);
  font: inherit;
  font-size: 13px;
  outline: none;
}

.sr-cell input:hover { border-color: var(--et-hairline); }
.sr-cell input:focus,
.sr-cell select:focus { border-color: var(--et-form-blue); background: var(--et-surface); box-shadow: inset 0 0 0 1px var(--et-form-blue); }
.sr-cell input.mono { font-family: var(--et-font-mono); }
.sr-cell input.num { text-align: right; font-family: var(--et-font-mono); font-variant-numeric: tabular-nums; }
.sr-cell input.faute { border-color: var(--et-danger); background: var(--et-danger-badge-bg); }

.sr-cell-compte { position: relative; }
.sr-rang { color: var(--et-inerte); }
.sr-vide { padding-left: 7px; font-size: 12px; color: var(--et-inerte); }
.sr-row:hover { background: var(--et-surface-3); }
.sr-row:hover .sr-sens { border-color: var(--et-form-blue); }

.sr-grille-pied { display: flex; align-items: center; gap: 10px; padding: 10px 16px; }

/* LA DENSITÉ SERRÉE. Le bouton existait dans la maquette, la classe qu'il pose n'existait
   nulle part — ni dans la feuille de la passation, ni dans le dépôt : le bouton ne faisait
   rien. Elle est écrite ici, et elle ne touche QUE la hauteur des cellules et des champs :
   une densité qui change aussi les tailles de texte redessine l'écran au lieu de le resserrer.
   Elle ne descend pas sous 1024 px, où le lot des cibles tactiles impose 44 px. */
.sr-grille .tbl.est-dense tbody td { padding-top: 2px; padding-bottom: 2px; }
.sr-grille .tbl.est-dense .sr-cell input,
.sr-grille .tbl.est-dense .sr-cell select { height: 26px; }

/* ---- Colonnes de la grille et des écritures produites ----------------- */
/* Les largeurs étaient des attributs style= sur les <th> — dix-huit largeurs en dur dans
   deux pages, qu'aucun palier ne pouvait reprendre. Elles sont ici, par rôle de colonne ;
   la table des écritures produites, qui n'a ni échéance, ni taxe, ni actions, resserre les
   siennes sous .sr-produites. Le min-width de la grille reste SUR la balise <table> : c'est
   lui que lit la garde des tables larges (tools/paliers-responsive.ps1) pour exiger la
   colonne d'ancrage, et une table qui ne le déclare pas se comprime au lieu de déborder. */
.sr-col-rang { width: 30px; }
.sr-col-compte { width: 240px; }
.sr-col-tiers { width: 160px; }
.sr-col-echeance { width: 116px; }
.sr-col-taxe { width: 128px; }
.sr-col-montant { width: 150px; }
.sr-col-sens { width: 64px; }
.sr-col-actions { width: 86px; }

.sr-produites .sr-col-rang { width: 34px; }
.sr-produites .sr-col-compte { width: 230px; }
.sr-produites .sr-col-tiers { width: 150px; }
.sr-produites .sr-col-sens { width: 60px; }

/* ---- Menu des comptes ------------------------------------------------- */
/* Posé en absolu sous le champ : c'est le rendu du panneau guidé, et le repli de la grille
   quand l'interop manque. Dans la GRILLE, ecran-saisie-piece.js le passe en fixe après le
   rendu, aux coordonnées du champ, retourné vers le haut si la place manque en bas : un cadre
   qui défile rogne ce qui en sort, et les dernières lignes visibles n'avaient plus de menu. */

.sr-menu {
  position: absolute;
  z-index: 30;
  left: 2px;
  top: 34px;
  width: 360px;
  max-height: 240px;
  overflow: auto;
  background: var(--et-surface);
  border: 1px solid var(--et-filet-fort);
  box-shadow: var(--et-ombre-flottant);
}

.sr-menu-tete {
  padding: 6px 10px;
  background: var(--et-surface-2);
  border-bottom: 1px solid var(--et-hairline);
  color: var(--et-muted);
  font-size: 12px;
  font-weight: 600;
}

.sr-sugg {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--et-hairline);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sr-sugg.est-habituel { background: var(--et-surface); }
.sr-sugg:hover,
.sr-sugg.est-vise { background: var(--et-tint); }
/* La proposition visée au clavier porte un liseré : on doit voir ce qu'Entrée va prendre. */
.sr-sugg.est-vise { box-shadow: inset 2px 0 0 var(--et-form-blue); }

.sr-sugg-num { flex: none; color: var(--et-form-blue); font-size: 12px; font-weight: 600; }
.sr-sugg-lib { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.sr-sugg-note { flex: none; font-size: 12px; color: var(--et-muted); }
.sr-sugg-note.est-habituel { color: var(--et-form-blue); }

/* ---- Sens et actions de ligne ----------------------------------------- */

.sr-sens {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  background: var(--et-neutre-bg);
  border: 1px solid var(--et-hairline);
  border-radius: 0;
  color: var(--et-ink);
  font-family: var(--et-font-mono);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.sr-sens.est-debit { background: var(--et-tint); border-color: var(--et-form-blue); color: var(--et-form-blue); }
.sr-sens.est-credit { background: var(--et-avertissement-bg); border-color: var(--et-avertissement-mark); color: var(--et-avertissement-ink); }

.sr-actions-ligne { display: flex; align-items: center; gap: 7px; }

.sr-ico { background: none; border: 0; padding: 0; color: var(--et-inerte); font-size: 12px; cursor: pointer; }
.sr-ico:hover { color: var(--et-form-blue); }
.sr-ico.est-pose { color: var(--et-form-blue); }

/* ---- Pied de pièce ---------------------------------------------------- */

.sr-pied {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 10px 16px;
  background: var(--et-surface);
  border-top: 2px solid var(--et-filet-fort);
}

.sr-total { display: flex; align-items: center; gap: 7px; }
/* La couleur est portée par la pastille, jamais par le chiffre : les jetons d'état sont
   des teintes claires, illisibles en encre sur blanc. */
.sr-total > .sr-pastille { width: 8px; height: 8px; flex: none; }
.sr-total > .sr-pastille.est-debit { background: var(--et-form-blue); }
.sr-total > .sr-pastille.est-credit { background: var(--et-avertissement-mark); }
.sr-total > .mono { font-size: 15px; font-weight: 600; }

.sr-etat-equilibre { display: flex; align-items: baseline; gap: 7px; padding: 3px 9px; }
.sr-etat-equilibre.est-nul { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.sr-etat-equilibre.est-signal { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.sr-etat-equilibre.est-vide { background: var(--et-neutre-bg); color: var(--et-muted); }

.sr-pied-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---- Aside ------------------------------------------------------------- */

.sr-aside {
  flex: 0 0 306px;
  min-height: 0;
  overflow: auto;
  background: var(--et-surface);
  border-left: 1px solid var(--et-filet-fort);
}

.sr-carte { padding: 14px 16px; border-bottom: 1px solid var(--et-hairline); }
.sr-carte:last-child { border-bottom: 0; }

.sr-carte-t {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  padding-left: 8px;
  border-left: 3px solid var(--et-form-blue);
  color: var(--et-table-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sr-carte-t > .sr-kbd { margin-left: auto; }

/* Le titre d'une carte qui se replie est un BOUTON : il faut lui rendre l'aplat, la largeur
   et l'alignement que le <div> avait, sinon le bouton du navigateur reprend la main. */
.sr-carte-bascule {
  width: 100%;
  background: none;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.sr-carte-bascule:hover { color: var(--et-form-blue); }
.sr-carte-bascule:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 2px; }
.sr-carte-bascule > .bi { font-size: 12px; }

/* Le compteur d'une carte repliée : ce qu'elle contient sans avoir à l'ouvrir. */
.sr-carte-compte {
  padding: 0 6px;
  background: var(--et-neutre-bg);
  color: var(--et-neutre);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}
.sr-carte-ligne { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }

.sr-ecart { font-size: 15px; font-weight: 700; }
.sr-ecart.est-nul { color: var(--et-succes-ink); }
.sr-ecart.est-signal { color: var(--et-avertissement-ink); }

.sr-jauge { height: 6px; margin-bottom: 12px; background: var(--et-piste); }
.sr-jauge > span { display: block; height: 100%; }

.sr-contrepartie { padding: 10px 11px; background: var(--et-tint); border: 1px solid var(--et-form-blue); }

.sr-accuse {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  background: var(--et-succes-bg);
  border: 1px solid var(--et-succes);
  color: var(--et-succes-ink);
  font-size: 13px;
  font-weight: 600;
}

.sr-controle { display: flex; gap: 8px; margin-bottom: 6px; font-size: 12px; line-height: 1.4; }
.sr-note { font-size: 12px; color: var(--et-muted); line-height: 1.45; }
.sr-muet { color: var(--et-muted); }
.sr-lien { color: var(--et-form-blue); text-decoration: none; }
.sr-lien:hover { color: var(--et-form-blue-d); text-decoration: underline; }

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

.sr-btn,
.sr-btn-fort,
.sr-btn-engager,
.sr-btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--et-filet-fort);
  border-radius: 0;
  background: var(--et-surface);
  color: var(--et-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.sr-btn-fort { background: var(--et-form-blue); border-color: var(--et-form-blue); color: var(--et-sur-aplat); }
.sr-btn-danger { background: var(--et-danger); border-color: var(--et-danger); color: var(--et-sur-aplat); }
.sr-btn-bloc { width: 100%; margin-top: 9px; }
.sr-btn:focus-visible,
.sr-btn-fort:focus-visible,
.sr-btn-engager:focus-visible,
.sr-btn-danger:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 2px; }
.sr-btn-fort:disabled { background: var(--et-inerte); border-color: var(--et-inerte); cursor: not-allowed; }

/* LE bouton d'engagement — un par écran, et il est orange : c'est la règle de la charte
   (modele-erp.css, .mx-btn-cta), pas un choix d'écran. Ici c'est « Enregistrer et
   enchaîner » ; « Équilibrer » et « Reprendre » sont des actions fortes, elles restent
   bleues. Le même rendu que les écrans voisins (.kl-btn-fort, .br-btn-fort, .ss-btn-fort).
   Éteint, il est DÉLAVÉ et non transparent : un bouton à demi effacé se lit comme un défaut
   d'affichage, alors qu'il dit « il manque quelque chose » — la carte Contrôles dit quoi. */
.sr-btn-engager { background: var(--et-action); border-color: var(--et-action); color: var(--et-sur-aplat); }
.sr-btn-engager:hover:enabled { background: var(--et-action-d); border-color: var(--et-action-d); color: var(--et-sur-aplat); }
.sr-btn-engager:disabled { background: var(--et-action-off); border-color: var(--et-action-off); color: var(--et-sur-aplat); cursor: not-allowed; }

/* ---- Pavé de montant -------------------------------------------------- */

.sr-pave { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }

.sr-pave > button {
  height: 40px;
  background: var(--et-surface);
  border: 1px solid var(--et-filet-fort);
  border-radius: 0;
  color: var(--et-ink);
  font-family: var(--et-font-mono);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.sr-pave > button.est-verbe { background: var(--et-neutre-bg); font-family: inherit; font-size: 12px; font-weight: 700; }
.sr-pave > button:hover { background: var(--et-tint); border-color: var(--et-form-blue); color: var(--et-form-blue); }
.sr-pave > button:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 1px; }

.sr-pave-cible {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 9px;
  padding: 6px 10px;
  background: var(--et-surface-2);
  border: 1px solid var(--et-hairline);
}

.sr-pave-cible > .mono { margin-left: auto; font-size: 16px; font-weight: 600; }

/* ---- Dépôt de justificatif -------------------------------------------- */

/* REVENU AVEC LA FONCTION. La zone de dépôt était sortie au portage faute de table pour
   recevoir le fichier ; compta.EcriturePieceJointe existe désormais, et le réglage
   « exiger une pièce jointe » (CPT-05) la lit à la comptabilisation. Ce qui n'est
   toujours pas là est la LECTURE du document — les champs restent saisis à la main. */

.sr-depot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 16px 12px;
  background: var(--et-surface-2);
  border: 1px dashed var(--et-filet-fort);
  color: var(--et-muted);
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}

.sr-depot:hover { border-color: var(--et-form-blue); color: var(--et-form-blue); }

/* L'InputFile de Blazor est un <input type=file> qu'on ne peut pas styler : il se pose
   par-dessus la zone, transparent, et c'est lui qui reçoit le clic. */
.sr-depot-cadre { position: relative; }
.sr-depot-cadre > input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.sr-justificatif {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  background: var(--et-surface-2);
  border: 1px solid var(--et-hairline);
  font-size: 13px;
}

/* L'ICÔNE DU FICHIER PASSE AU RANG -ink (2026-09-08). Elle portait
   `color: var(--et-danger)`, DERNIER site du dépôt à écrire une couleur d'état
   en color: — ce que la charte interdit sans exception (CLAUDE.md).

   CE N'ÉTAIT PAS UN DÉFAUT DE CONTRASTE, et il faut le dire : à 4,46:1 sur
   --et-surface-2, le fond que la règle juste au-dessus pose, l'icône clairait
   le seuil GRAPHIQUE de 3:1 avec de la marge. C'est une mise en conformité de
   RÈGLE, pas une correction de mesure.

   Elle se fait quand même, et pour le motif que CLAUDE.md donne lui-même après
   avoir converti cinq sites « grand texte » qui étaient exemptés depuis deux
   lots : « une règle qu'il faut retenir par numéro de ligne n'est pas une
   règle ». Un site restant, c'est une exception à se rappeler ; zéro site,
   c'est une règle que la garde peut vérifier.

   Mesure après : 7,35:1 en clair, 8,30:1 en sombre — sur le même sol. */
.sr-justificatif > .bi { flex: none; color: var(--et-danger-ink); }
.sr-justificatif-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-justificatif-taille { margin-left: auto; flex: none; color: var(--et-muted); font-size: 12px; }

/* LA LECTURE DU JUSTIFICATIF. Le bouton n'existe que si le serveur a un moteur ; la
   proposition se lit comme une fiche courte — libellé à gauche, valeur à droite — et
   n'entre dans la pièce que par « Reprendre ». Sa confiance faible se dit en pastille,
   sur le fond d'avertissement et son encre : c'est un doute, pas une erreur. */
.sr-lecture-lire {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  margin-top: 8px;
  padding: 0 12px;
  background: var(--et-surface);
  border: 1px solid var(--et-form-blue);
  color: var(--et-form-blue);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.sr-lecture-lire:hover { background: var(--et-tint); }
.sr-lecture-lire:disabled { border-color: var(--et-hairline); color: var(--et-inerte); cursor: progress; }

.sr-lecture { margin-top: 10px; padding: 10px 12px; background: var(--et-surface-2); border: 1px solid var(--et-hairline); }
.sr-lecture-t { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--et-table-head); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sr-lecture-t > .bi { color: var(--et-form-blue); }
.sr-lecture-hesite { margin-left: auto; padding: 1px 7px; background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
/* Lecture reprise : le même fichier avait déjà été lu, rien n'a coûté — une information, pas un état. */
.sr-lecture-reprise { margin-left: auto; padding: 1px 7px; background: var(--et-info-bg); color: var(--et-info); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.sr-lecture-reprise + .sr-lecture-hesite { margin-left: 0; }

.sr-lecture-champs { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 3px 10px; margin: 0; font-size: 12px; }
.sr-lecture-champs > dt { color: var(--et-muted); font-weight: 600; }
.sr-lecture-champs > dd { margin: 0; min-width: 0; color: var(--et-ink); overflow-wrap: anywhere; }
.sr-lecture-champs > dd.mono { font-family: var(--et-font-mono); }
.sr-lecture-tiers { display: block; color: var(--et-succes-ink); font-weight: 600; }
.sr-lecture-absent { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--et-faint); font-style: italic; }
.sr-lecture-creer {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px;
  background: var(--et-surface); border: 1px solid var(--et-filet-fort);
  color: var(--et-ink); font: inherit; font-size: 12px; font-style: normal; font-weight: 600; cursor: pointer;
}
.sr-lecture-creer:hover { border-color: var(--et-form-blue); color: var(--et-form-blue); }
.sr-lecture-creer:disabled { color: var(--et-inerte); border-color: var(--et-hairline); cursor: progress; }
.sr-lecture-remarque { margin: 6px 0 0; }
.sr-lecture-erreur { color: var(--et-danger-ink); }

.sr-lecture-gestes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sr-lecture-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  background: var(--et-surface);
  border: 1px solid var(--et-filet-fort);
  color: var(--et-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.sr-lecture-btn:hover { border-color: var(--et-form-blue); color: var(--et-form-blue); }
.sr-lecture-btn.est-fort { background: var(--et-form-blue); border-color: var(--et-form-blue); color: var(--et-sur-aplat); }
.sr-lecture-btn.est-fort:hover { background: var(--et-form-blue-d); border-color: var(--et-form-blue-d); color: var(--et-sur-aplat); }
.sr-lecture-btn:disabled { color: var(--et-inerte); border-color: var(--et-hairline); cursor: not-allowed; }

/* ---- Chargement ------------------------------------------------------- */

.sr-skel {
  background: linear-gradient(90deg, var(--et-surface-2) 25%, var(--et-rang) 37%, var(--et-surface-2) 63%);
  background-size: 400% 100%;
  animation: sr-shimmer 1.3s ease infinite;
}

@keyframes sr-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* ==============================================================================================
   CE QUE LA MAQUETTE ÉCRIVAIT EN LIGNE

   Ces classes n'étaient pas dans la feuille de la passation : elles étaient des attributs
   « style » dans le fichier .dc.html, ce qui est le mode normal d'une maquette et le mode
   interdit d'une page du dépôt (« ne jamais écrire une couleur dans une page »). Elles
   descendent donc ici, à l'identique de ce que la maquette rendait.
   ============================================================================================== */

/* ---- Encre des icônes de contrôle -------------------------------------- */
/* Une teinte d'état ne s'écrit jamais en color: — c'est le rang -ink qui s'y pose. */
.sr-encre-signal { color: var(--et-avertissement-ink); }
.sr-encre-info { color: var(--et-form-blue); }

/* ---- Jauge d'équilibre -------------------------------------------------- */
/* La barre est une MARQUE, pas de l'encre : l'ambre y prend sa variante de marque. */
.sr-jauge > span.est-nul { background: var(--et-succes); }
.sr-jauge > span.est-signal { background: var(--et-avertissement-mark); }

/* ---- Écritures produites (mode guidé) ---------------------------------- */

.sr-produites-tete { display: flex; align-items: baseline; gap: 9px; padding: 11px 16px 8px; }

.sr-produites-t {
  color: var(--et-table-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sr-reprendre {
  margin-left: auto;
  padding: 0;
  background: none;
  border: 0;
  color: var(--et-form-blue);
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.sr-produites-vide { padding: 22px 14px; color: var(--et-muted); font-size: 13px; }

/* ---- Listes des cartes -------------------------------------------------- */

.sr-liste { display: flex; flex-direction: column; gap: 6px; }
.sr-carte-note { margin: 9px 0 0; }
.sr-liste .sr-fil { margin-top: 0; }

.sr-raccourcis { display: flex; flex-direction: column; gap: 7px; }
.sr-raccourci { display: flex; align-items: center; gap: 10px; }
.sr-raccourci > .sr-kbd { flex-shrink: 0; }

.sr-seance-ligne,
.sr-corbeille-ligne {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  background: var(--et-surface-2);
  font-size: 12px;
}

/* La pièce annulée reste au fil : elle et son miroir sont tous deux au journal. */
.sr-seance-ligne.est-annulee { color: var(--et-muted); text-decoration: line-through; }
.sr-seance-mnt { margin-left: auto; flex: none; }
.sr-corbeille-ligne { border-left: 2px solid var(--et-avertissement-mark); }
.sr-corbeille-ligne > .sr-btn { flex: none; }

/* ---- Fenêtre de ventilation -------------------------------------------- */
/* Le cadre, l'en-tête, le corps et le pied viennent d'easycompta-modal.css ; le rail
   d'onglets d'easycompta-onglets.css. Ne descend ici que ce qui est propre à la fenêtre. */

.sr-vent { max-width: 720px; }
.sr-vent-titre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-vent-meta { flex: none; color: var(--et-sur-aplat-doux); font-size: 12px; font-weight: 400; white-space: nowrap; }

.sr-vent-pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  background: var(--et-form-blue);
  border-radius: var(--et-r-pill);
  color: var(--et-sur-aplat);
  font-size: 12px;
  font-weight: 700;
}

.sr-vent-axes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 11px; }
.sr-vent-espace { flex: 1; }

/* Une puce d'axe est un CHOIX, pas une pastille d'état : la charte ne garde la pilule que
   pour les pastilles d'état, et celle-ci prend les angles droits de tout le reste. */
.sr-vent-axe {
  height: 28px;
  padding: 0 11px;
  background: var(--et-surface);
  border: 1px solid var(--et-form-border);
  border-radius: 0;
  color: var(--et-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.sr-vent-axe:hover { border-color: var(--et-form-blue); color: var(--et-form-blue); }
.sr-vent-axe.est-actif { background: var(--et-tint); border-color: var(--et-form-blue); color: var(--et-form-blue-d); }
/* Un axe entamé qui ne boucle pas : la bordure suffit, l'encre reste lisible. */
.sr-vent-axe.est-faux { border-color: var(--et-danger); }

.sr-vent-rang { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sr-vent-rang > .xp-champ:first-child { flex: 1; min-width: 0; }
.sr-vent-montant { width: 124px; flex: none; text-align: right; }
.sr-vent-calcule { display: flex; align-items: center; justify-content: flex-end; background: var(--et-neutre-bg); }
.sr-vent-part { width: 54px; flex: none; text-align: right; color: var(--et-muted); font-size: 12px; }

.sr-vent-bilan {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 9px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.sr-vent-bilan.est-nul { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.sr-vent-bilan.est-signal { background: var(--et-neutre-bg); color: var(--et-ink); }

.sr-vent-lien {
  padding: 0;
  background: none;
  border: 0;
  color: var(--et-form-blue);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.sr-vent-ech {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 5px;
  padding: 7px 9px;
  background: var(--et-surface);
  border: 1px solid var(--et-hairline);
  font-size: 12px;
  cursor: pointer;
}

.sr-vent-ech:hover { background: var(--et-surface-3); }
.sr-vent-ech.est-actif { background: var(--et-tint); border-color: var(--et-form-blue); }
.sr-vent-restant { margin-left: auto; }

/* ==============================================================================================
   PALIERS — sur l'échelle retenue (docs/conventions-responsive.md) : 1024, 720, 560.
   Recette aux quatre largeurs, 390 / 768 / 1280 / 1600 ; à 1600 rien de ce qui suit ne
   s'applique. Un palier impose une apparence, jamais un état : la densité serrée et le
   mode de saisie restent ceux que l'utilisateur a choisis.
   ============================================================================================== */

/* ---- 1024 px : le volet passe sous la grille, et tout se touche au doigt ------------------ */

@media (max-width: 1024px) {
  .sr-corps { flex-direction: column; max-height: none; }
  .sr-colonne { flex: 0 0 auto; }
  .sr-scroller { flex: 0 0 auto; min-height: 0; overflow-x: auto; }
  /* Sans cadre borné, la tête n'a rien contre quoi se figer : elle redevient une rangée. */
  .sr-grille .tbl > thead > tr > th { position: static; }

  /* Le volet sous la grille, EN DEUX COLONNES : une colonne de 306 px étirée à toute la
     largeur laissait les deux tiers de l'écran vides et empilait sept cartes sur deux
     hauteurs d'écran. Le filet vertical sépare les deux colonnes, le filet horizontal
     les rangées ; la dernière carte ferme sans filet quel que soit son rang. */
  .sr-aside {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 0 0 auto;
    width: 100%;
    border-left: 0;
    border-top: 2px solid var(--et-filet-fort);
    overflow: visible;
  }
  .sr-carte { border-bottom: 1px solid var(--et-hairline); }
  .sr-carte:nth-child(odd) { border-right: 1px solid var(--et-hairline); }
  .sr-carte:last-child { border-bottom: 0; }

  /* Grille explicite à deux colonnes : le Journal prend la rangée entière — il est le plus
     large par construction — et chaque autre champ obtient une demi-largeur, assez pour
     « Achats fournisseurs — 31/08/2026 » comme pour « XAF — devise de tenue ».
     Les séparations passent en horizontal : un filet vertical pend dès qu'une rangée n'est
     pas pleine, un filet horizontal jamais. */
  .sr-entete-piece { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .sr-entete-piece > div {
    flex: none;
    min-width: 0;
    border-right: 0;
    border-bottom: 1px solid var(--et-hairline);
  }
  .sr-entete-piece > div:first-child { grid-column: 1 / -1; }

  /* La pièce guidée : deux champs par rangée — tiers et montant, compte et taxe — avant la
     colonne unique du palier suivant. Quatre champs de 240 px tenaient à 1024, pas en
     dessous ; un seul par rangée à 1000 px gaspillait trois quarts de la largeur. */
  .sr-guide-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* CIBLES TACTILES (docs/cibles-tactiles.md) : sous 1024 px, rien sous 44 × 44 px, et une
     cible ne rétrécit pas. Le lot 02 ne couvre que la coquille et le gabarit .tbl-* ; les
     cibles propres à l'écran prennent la règle ici, TOUTES — les champs, mais aussi le sens
     d'une ligne, les touches du pavé, les propositions de compte, les bascules de carte et
     les lignes de la fenêtre de ventilation. La densité serrée est reprise EXPLICITEMENT :
     sa règle est plus spécifique que celle-ci, et sans cette ligne elle gagnait. */
  .sr-cell input,
  .sr-cell select,
  .sr-grille .tbl.est-dense .sr-cell input,
  .sr-grille .tbl.est-dense .sr-cell select,
  .sr-input,
  .sr-seance-select { height: 44px; }
  .sr-seance { padding-top: 0; padding-bottom: 0; }
  /* Le bouton de densité n'a qu'une icône : 37 px de large sans cette ligne. */
  .sr-btn { min-width: 44px; }
  .sr-btn,
  .sr-btn-fort,
  .sr-btn-engager,
  .sr-btn-danger,
  .sr-mode > button,
  .sr-corbeille,
  .sr-fil,
  .sr-sugg,
  .sr-carte-bascule,
  .sr-reprendre,
  .sr-depot,
  .sr-vent-axe,
  .sr-vent-ech,
  .sr-vent-lien,
  .sr-vent .xp-champ { min-height: 44px; }
  /* La croix du gabarit de fenêtre fait 32 px : c'est la seule cible de la fenêtre sous la
     règle, et la plus regrettable à manquer du pouce. */
  .sr-vent .xp-fermer { width: 44px; height: 44px; }
  .sr-ico,
  .sr-sens { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; }
  .sr-actions-ligne { gap: 0; }
  .sr-pave > button { height: 44px; }

  /* Une ligne du fil de séance porte trois icônes : à 44 px chacune, elles chassaient le
     libellé de la pièce et la dernière sortait de la carte. La ligne se replie — numéro,
     libellé et montant d'abord, les gestes en dessous. */
  .sr-seance-ligne,
  .sr-corbeille-ligne { flex-wrap: wrap; }
  .sr-seance-ligne > .sr-sugg-lib { flex: 1 1 140px; }
}

/* ---- 720 px : une colonne pour la pièce guidée et le volet ------------------------------- */

@media (max-width: 720px) {
  .sr-guide-grille { grid-template-columns: minmax(0, 1fr); }
  .sr-aside { grid-template-columns: minmax(0, 1fr); }
  .sr-carte:nth-child(odd) { border-right: 0; }

  /* Le pied garde ses totaux sur une rangée et ses actions sur la suivante, le bouton
     d'engagement prenant la largeur qui reste : c'est lui qu'on cherche du pouce. */
  .sr-pied { gap: 10px 16px; }
  .sr-pied-actions { margin-left: 0; width: 100%; }
  .sr-pied-actions > .sr-btn-engager { flex: 1 1 auto; justify-content: center; }

  /* Le menu des comptes ne dépasse pas la fenêtre : 360 px sur un écran de 390 en sortaient. */
  .sr-menu { width: min(360px, calc(100vw - 40px)); }
}

/* ---- 560 px : le téléphone — tout en une colonne, les rembourrages rendus --------------- */

@media (max-width: 560px) {
  .sr-entete-piece { grid-template-columns: minmax(0, 1fr); }

  .sr-contexte { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .sr-seance,
  .sr-corbeille { max-width: 100%; }
  .sr-seance-select { min-width: 0; flex: 1 1 auto; }
  .sr-mode { width: 100%; }
  .sr-mode > button { flex: 1 1 0; justify-content: center; }

  .sr-bandeau,
  .sr-guide,
  .sr-carte,
  .sr-pied,
  .sr-grille-pied,
  .sr-produites-tete { padding-left: 12px; padding-right: 12px; }
  .sr-entete-piece > div { padding-left: 12px; padding-right: 12px; }

  .sr-pied-actions { flex-direction: column; align-items: stretch; }
  .sr-pied-actions > .sr-btn { justify-content: center; }

  /* La rangée de ventilation se replie : la valeur prend sa ligne entière, le montant, la
     part et le geste la suivante — resserrée entre eux, la liste ne montrait plus que « DG ». */
  .sr-vent-rang { flex-wrap: wrap; }
  .sr-vent-rang > .xp-champ:first-child { flex: 1 1 100%; }
}