/* ============================================================================================
   ecran-modeles.css — SAI-03, modèles et écritures récurrentes.

   Sa feuille, et non la queue de modele-erp.css : c'est la règle du dépôt. Elle arrive APRÈS
   modele-erp.css, dont elle ne redéfinit rien, et n'est lue que par cet écran.

   REPRISE DE LA PASSATION (docs/modeles/design_handoff_modeles_recurrentes,
   razor/wwwroot/css/ecran-modeles.css), avec quatre reprises et une seule direction : ce qui
   était écrit en valeur passe en jeton, et ce qui était une teinte d'état posée en encre passe
   au rang d'encre.

     1. LE BLOC .et-bandeau EST PARTI. Il vit dans easytech-theme.css depuis la passation
        « Pilotage comptable », et c'est EcranModule qui le rend pour les 45 écrans du module.
        Le redéfinir ici en aurait fait une seconde version, sur une seule route.
     2. LA BANDE DE SYNTHÈSE EST CELLE DU MODULE. La passation dessinait ses .mr-mesure « aux
        mêmes proportions que les vignettes du module » — ce sont donc les vignettes qu'il faut :
        easycompta-vignette.css, arbitrée au lot CPT-01, et déjà nommée pour .mr-fait. Un
        troisième gabarit de tuile dans le même module rouvrirait une décision close.
     3. AUCUNE TEINTE D'ÉTAT EN color:. Sur ses fonds pâles, --et-succes rend 3,16:1 et
        --et-avertissement 2,02:1 : sous AA pour du 12 px. L'encre posée dessus est donc
        --et-succes-ink / --et-avertissement-ink / --et-danger-ink. En marque graphique, l'ambre
        ne passe pas non plus le seuil de 3:1 (2,15:1) : le liseré de retard prend
        --et-avertissement-mark.
     4. UN SEUL BOUTON D'ENGAGEMENT. L'orange est réservé au geste qui engage — ici GÉNÉRER,
        le seul qui écrive une pièce. « Nouveau modèle » et « Enregistrer » prennent le bleu de
        contenu : ils préparent, ils n'engagent pas. Depuis le portage sur le gabarit de
        fenêtre (2026-09-07), c'est .xp-btn-cta qui le rend, et la règle est celle du gabarit —
        l'unique endroit où l'orange sort du bandeau d'écran. La feuille n'a donc plus de rang
        de bouton orange à elle.

   Le voile, l'ombre flottante et les encres blanches sont nommés : --et-voile,
   --et-ombre-flottant, --et-sur-aplat, --et-sur-ardoise-plein. Aucun rgba() écrit à la main.
   ============================================================================================ */

/* ---- Bandeau d'alerte --------------------------------------------------
   Ce que la liste ne dit pas d'elle-même : les références orphelines, les retards. */

.mr-bandeau {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  flex-shrink: 0;
  margin-bottom: 12px;
  padding: 9px var(--et-bandeau-pad-h);
  font-size: 13px;
  font-weight: 600;
}

.mr-bandeau > .bi { flex-shrink: 0; }
.mr-bandeau.est-grave { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }
.mr-bandeau.est-signal { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }

.mr-bandeau-a {
  margin-left: auto;
  flex-shrink: 0;
  height: 28px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.mr-bandeau-a:disabled { opacity: .55; cursor: not-allowed; }

/* ---- Onglets ----------------------------------------------------------- */

.mr-onglets {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  background: var(--et-surface);
  border-bottom: 1px solid var(--et-hairline);
}

.mr-onglets > button {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--et-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.mr-onglets > button:hover { background: var(--et-surface-3); color: var(--et-form-blue); }
.mr-onglets > button.est-actif { color: var(--et-form-blue); border-bottom-color: var(--et-form-blue); }
.mr-onglets > button:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; }
.mr-compteur { font-size: 12px; color: var(--et-inerte); }
.mr-onglets > button.est-actif .mr-compteur { color: var(--et-form-blue); }

/* Ce que le compteur ne dit pas : les retards, les échecs. Un aplat et son encre — la teinte
   d'état ne s'écrit pas en color: sur le fond de l'onglet, qui est celui de la surface. */
.mr-compteur-ko {
  padding: 1px 6px;
  background: var(--et-danger-badge-bg);
  color: var(--et-danger-ink);
  font-size: 12px;
  font-weight: 700;
}

/* ---- Filtres et champs -------------------------------------------------
   La bande de vignettes qui les précède est celle du module (easycompta-vignette.css,
   .mr-faits / .mr-fait) : rien à dessiner ici. */

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

.mr-champ-bloc { padding: 10px 12px; border-right: 1px solid var(--et-hairline); }
.mr-champ-bloc:last-child { border-right: 0; }

.mr-champ-bloc > label:not(.mr-coche) {
  display: block;
  margin-bottom: 4px;
  color: var(--et-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.mr-coche { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--et-ink); cursor: pointer; }
/* Taille retiree le 2026-09-10 : la case prend les 17 px du gabarit (app.css),
   et 24 px sous 1024 px (lot02). Voir docs/cibles-tactiles.md. */

/* Les contrôles natifs sont dessinés par le navigateur, qui leur arrondit les coins quel que
   soit border-radius : on lui retire le rendu et on redessine le chevron. */
.mr-champ {
  box-sizing: border-box;
  height: 30px;
  padding: 0 7px;
  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;
  outline: none;
}

select.mr-champ {
  padding-right: 26px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--et-muted) 50%),
    linear-gradient(135deg, var(--et-muted) 50%, transparent 50%);
  background-position: right 13px center, right 8px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.mr-champ:focus { border-color: var(--et-form-blue); box-shadow: inset 0 0 0 1px var(--et-form-blue); }
.mr-champ:disabled { background: var(--et-surface-2); color: var(--et-muted); }
.mr-champ.mono { font-family: var(--et-font-mono); }
.mr-num { font-family: var(--et-font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.mr-plein { width: 100%; }
.mr-champ-doux { height: 28px; border-color: var(--et-hairline); }
.mr-champ-nu { height: 26px; margin-top: 3px; border-color: transparent; font-size: 12px; }
.mr-code-champ { flex: 0 0 150px; font-weight: 600; }

/* Ce que la maquette écrivait en attribut style, descendu dans la feuille : un bloc de champ
   qui prend la place restante, un qui prend la ligne entière, et la paire mois/année. */
.mr-champ-large { flex: 1 1 260px; min-width: 0; }
.mr-champ-ligne { flex: 1 1 100%; min-width: 0; }
.mr-periode { display: flex; gap: 6px; }
.mr-periode > .mr-champ:first-child { width: 74px; }
.mr-periode > .mr-champ:last-child { width: 86px; }

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

/* La fiche n'y vit plus (2026-09-07) : le corps ne porte QUE la liste. Le .mr-liste
   intermédiaire, qui n'existait que pour partager la hauteur avec le panneau de fiche, a été
   retiré — un conteneur à un seul enfant, dont la seule règle était un fond, est un niveau
   de plus à traverser pour rien. */
.mr-corps { display: flex; flex-direction: column; min-height: 380px; background: var(--et-surface-2); }
.mr-scroller { flex: 1 1 auto; min-width: 0; min-height: 0; padding: 14px 16px; }

/* ---- Table ------------------------------------------------------------- */

.mr-table { width: 100%; border: 1px solid var(--et-hairline); background: var(--et-surface); }

/* ---- Tri du téléphone --------------------------------------------------
   Le sélecteur est TOUJOURS DANS LE BALISAGE ; c'est LA FEUILLE qui l'affiche, sous 720 px
   seulement — là où le <thead> est masqué et où il n'y a donc plus d'en-tête à cliquer.

   C'EST LA FEUILLE ET NON LE COMPOSANT parce qu'un composant Blazor Server ne connaît pas la
   largeur du navigateur sans un aller-retour JavaScript, et parce que la convention du dépôt
   est celle-là : un palier s'écrit dans une feuille, jamais une largeur en dur dans une page
   (docs/conventions-responsive.md). Le composant, lui, ne porte aucun état — tout lui vient
   en paramètre — donc rien ne se perd d'un palier à l'autre.

   Un display:none et non une opacité : ce que la CSS masque ainsi sort aussi de l'ordre de
   tabulation et de ce que lit un lecteur d'écran. Il n'y a donc jamais deux commandes de tri
   en concurrence, ni à l'œil ni au clavier. */

.mr-tri-mobile { display: none; }

/* LE TRI PAR COLONNE N'A PAS DE STYLE ICI, et c'est voulu (le sélecteur du téléphone
   ci-dessus est autre chose : il n'existe pas au gabarit) : .tbl-triable, .tbl-actif et
   .tbl-fleche vivent dans easytime-shell.css, avec le gabarit de liste — c'est ce que
   Tableau<T> rend pour les écrans qui l'emploient. Ces deux tables sont écrites à la main
   (rangs à boutons, cellules composées, marque d'orphelin) mais n'ont aucune raison de trier
   d'une autre façon ; EnteteTri ne fait que poser les mêmes classes. Redessiner la flèche ici
   en aurait fait une seconde, sur une seule route. */

/* ---- Colonnes des cinq tables ------------------------------------------
   La passation les posait en style inline sur chaque <th> — trente-quatre largeurs en dur
   dans cinq composants, qu'aucun palier ne pouvait reprendre. Têtes à gauche, montants à
   droite ; les tables de la fiche (lignes du modèle, lignes de l'abonnement) partagent le
   montant et le libellé avec les listes. */
.mr-table th, .tbl th.mr-col-libelle { text-align: left; }
.mr-col-code { width: 130px; }
.mr-col-code-abo { width: 120px; }
.mr-col-famille { width: 130px; }
/* 72 et non 56 depuis que l'en-tête se trie (2026-09-07) : la flèche s'ajoute au libellé, et
   .tbl thead th ne renvoie pas à la ligne. */
.mr-col-jrn { width: 72px; }
.mr-col-mode { width: 180px; }
.mr-col-montant { width: 130px; text-align: right; }
.mr-col-etat { width: 160px; }
.mr-col-etat-abo { width: 180px; }
.mr-col-gestes { width: 140px; }
.mr-col-gestes-abo { width: 104px; }
.mr-col-gestes-journal { width: 130px; }
.mr-col-modele { width: 130px; }
.mr-col-rythme { width: 120px; }
.mr-col-prochaine { width: 110px; }
.mr-col-quand { width: 150px; }
.mr-col-abonnement { width: 120px; }
.mr-col-periode { width: 100px; }
.mr-col-resultat { width: 120px; }
.mr-col-origine { width: 150px; }
.mr-col-sens { width: 70px; }
.mr-col-jours { width: 100px; }
.mr-col-retrait { width: 34px; }
.mr-col-compte { width: 110px; }
.mr-col-echeance { width: 110px; }
.mr-champ-jours { width: 70px; }

.mr-rang { cursor: pointer; border-bottom: 1px solid var(--et-hairline); }
.mr-rang:hover { background: var(--et-surface-3); }
.mr-rang.est-visee { background: var(--et-tint); }
.mr-rang.est-inactif { opacity: .62; }

/* Le liseré dit le retard sans repeindre la ligne : un fond ambre sur cinq rangs rend la table
   illisible. En marque graphique, l'ambre du thème ne passe pas le seuil de 3:1 — d'où le rang
   -mark, même teinte, luminosité descendue. */
.mr-rang.est-retard { box-shadow: inset 3px 0 0 var(--et-avertissement-mark); }

.mr-nue::before { display: none !important; }
.mr-tronque { min-width: 0; overflow: hidden; }
.mr-code { font-size: 12px; font-weight: 600; color: var(--et-form-blue); }
.mr-muet { color: var(--et-muted); font-size: 12px; }
.mr-fort { font-weight: 600; }
.mr-sous { margin-top: 3px; font-size: 12px; color: var(--et-muted); line-height: 1.4; }
.mr-mode { font-size: 12px; color: var(--et-ink); }
.mr-vide-cell { padding-left: 7px; font-size: 12px; color: var(--et-inerte); }
.mr-origine { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--et-muted); }

/* Une référence orpheline : lue sur un rang qui bouge au survol, elle prend le rang d'encre —
   --et-danger tombe à 4,13:1 sur --et-rang, sous AA. */
.mr-orphelin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--et-danger-ink);
}

.mr-jeton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.mr-jeton > .bi { font-size: 12px; }
.mr-jeton.est-ok { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.mr-jeton.est-ko { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }
.mr-jeton.est-neutre { background: var(--et-neutre-bg); color: var(--et-neutre); }

.mr-vide { padding: 30px 16px !important; text-align: center !important; }
.mr-vide > .bi { font-size: 24px; color: var(--et-inerte); }
.mr-vide-t { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--et-ink); }
.mr-vide-d { margin: 4px auto 0; max-width: 440px; font-size: 13px; color: var(--et-muted); line-height: 1.5; }

/* ---- Sens -------------------------------------------------------------- */

.mr-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);
  color: var(--et-ink);
  font-family: var(--et-font-mono);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.mr-sens.est-debit { background: var(--et-tint); border-color: var(--et-form-blue); color: var(--et-form-blue); }

/* Le crédit prend l'ambre : sa bordure au rang -mark (seuil graphique), sa lettre au rang
   d'encre (seuil de texte). Ce sont deux seuils différents, et deux jetons. */
.mr-sens.est-credit {
  background: var(--et-avertissement-bg);
  border-color: var(--et-avertissement-mark);
  color: var(--et-avertissement-ink);
}

/* ---- Fiche ------------------------------------------------------------- */

/* Il n'y a plus de .mr-fiche : la fiche EST le corps d'une fenêtre (2026-09-07), qui porte
   déjà sa surface, son filet et son ombre. Ses bandes — tête, champs, contrôles — restent
   telles quelles : c'est le cadre qui a changé, pas la fiche. */

.mr-fiche-tete {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 14px;
  border-bottom: 1px solid var(--et-hairline);
}

.mr-fiche-tete > .mr-plein { flex: 1 1 240px; min-width: 0; }
.mr-fiche-tete > .mr-ico { margin-left: auto; }

/* Ce que le modèle porte au-delà de lui-même : la note le dit à l'endroit du geste. */
.mr-note-transverse {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 9px 14px;
  background: var(--et-tint);
  border-bottom: 1px solid var(--et-hairline);
  font-size: 12px;
  color: var(--et-ink);
  line-height: 1.45;
}

.mr-note-transverse > .bi { flex-shrink: 0; color: var(--et-form-blue); }
.mr-note-transverse > .mr-lien { margin-left: auto; flex-shrink: 0; }
.mr-note-transverse.est-grave { background: var(--et-danger-badge-bg); }
.mr-note-transverse.est-grave > .bi { color: var(--et-danger-ink); }
.mr-note-transverse.est-signal { background: var(--et-avertissement-bg); }
.mr-note-transverse.est-signal > .bi { color: var(--et-avertissement-ink); }

.mr-fiche-champs { display: flex; align-items: flex-end; flex-wrap: wrap; border-bottom: 1px solid var(--et-hairline); }
.mr-fiche-champs > .mr-champ-bloc { flex: 0 0 180px; border-bottom: 1px solid var(--et-hairline); }

/* L'aperçu du libellé : ce que la prochaine pièce portera réellement. */
.mr-apercu { display: flex; align-items: baseline; gap: 7px; margin-top: 5px; font-size: 12px; }
.mr-apercu > b { color: var(--et-form-blue); }

/* Sous la table de lignes : le bouton qui ajoute un rang, et la règle d'équilibre du mode à
   côté des totaux qu'elle juge. Les boutons qui ENGAGENT sont au pied de la fenêtre, hors du
   défilement — ce ne sont pas les mêmes gestes, ce ne sont plus les mêmes barres. */
.mr-sous-table {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--et-hairline);
}

.mr-sous-table > .mr-muet { margin-left: auto; text-align: right; }

.mr-sec { border-top: 1px solid var(--et-hairline); }
.mr-sec-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 11px 14px; }

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

/* ---- Contrôles ---------------------------------------------------------
   Tout ce qui empêche d'utiliser le modèle, d'un coup. */

.mr-controles { padding: 12px 14px; border-top: 1px solid var(--et-hairline); background: var(--et-surface-2); }
.mr-controle { display: flex; gap: 8px; margin-bottom: 6px; font-size: 12px; line-height: 1.45; color: var(--et-ink); }
.mr-controle > .bi { flex-shrink: 0; color: var(--et-avertissement-ink); }
.mr-controle:last-child { margin-bottom: 0; }

.mr-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;
}

/* ---- Boutons -----------------------------------------------------------
   DEUX RANGS DEPUIS LE PORTAGE (2026-09-07), et ils servent la PAGE : .mr-btn pour un geste
   qui compose (ajouter une ligne de modèle), .mr-btn-fort pour « Nouveau modèle », dans le
   bandeau d'écran. Les boutons des FENÊTRES sont ceux du gabarit — .xp-btn, .xp-btn-fort,
   .xp-btn-cta, .xp-btn-danger — parce que c'est le pied du gabarit qui les range, et qu'un
   bouton d'écran y aurait perdu l'alignement en même temps que le repli sous 720 px.

   Le troisième rang d'ici, .mr-btn-action (l'orange), est parti avec eux : le seul geste qui
   engage sur cet écran est « Générer », il vit dans une fenêtre, et il prend .xp-btn-cta. */

.mr-btn,
.mr-btn-fort {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  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;
  text-decoration: none;
  cursor: pointer;
}

.mr-btn:hover { border-color: var(--et-form-blue); color: var(--et-form-blue); }

.mr-btn-fort { background: var(--et-form-blue); border-color: var(--et-form-blue); color: var(--et-sur-aplat); }
.mr-btn-fort:hover { background: var(--et-form-blue-d); border-color: var(--et-form-blue-d); color: var(--et-sur-aplat); text-decoration: none; }

.mr-btn:disabled { background: var(--et-surface); border-color: var(--et-hairline); color: var(--et-inerte); cursor: not-allowed; }
.mr-btn-fort:disabled { background: var(--et-inerte); border-color: var(--et-inerte); color: var(--et-sur-aplat); cursor: not-allowed; }

.mr-btn:focus-visible,
.mr-btn-fort:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 2px; }

.mr-ico {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--et-filet-fort);
  border-radius: 0;
  color: var(--et-ink);
  font-size: 12px;
  cursor: pointer;
}

.mr-ico + .mr-ico { margin-left: 4px; }
.mr-ico:hover { background: var(--et-tint); border-color: var(--et-form-blue); color: var(--et-form-blue); }
.mr-ico:disabled { color: var(--et-inerte); border-color: var(--et-hairline); cursor: not-allowed; }
.mr-ico-nu { width: 24px; height: 24px; background: transparent; border: 0; color: var(--et-inerte); font-size: 12px; cursor: pointer; }
.mr-ico-nu:hover { color: var(--et-danger-ink); }

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

/* ---- Ce que la fenêtre de l'écran ajoute au gabarit ---------------------
   La fenêtre est celle du MODULE (easycompta-modal.css : .xp-voile, .xp-modal, .xp-tete,
   .xp-corps, .xp-pied), et non un vocabulaire d'écran. Ce bloc portait autrefois une fenêtre
   entière — voile, cadre, tête, croix, pied, repli — écrite pour le seul rapport de
   rattrapage puis étendue aux deux fiches. C'était une douzième façon de dessiner ce que
   quatre-vingts appelants dessinaient déjà, et le portage (2026-09-07) l'a retirée.

   IL RESTE TROIS RÈGLES, et elles sont ici parce qu'elles ne servent qu'à cet écran. Aucune
   ne redéfinit le gabarit : elles se posent à côté de ses classes.
   -------------------------------------------------------------------------------------- */

/* 1. LE JETON « NON ENREGISTRÉ » de l'en-tête. Il n'y a pas d'équivalent au gabarit : aucune
      autre fenêtre du module ne travaille sur un brouillon qu'on peut perdre. Sur l'aplat
      bleu de .xp-tete, l'encre est celle des surfaces de marque et le fond celui que la
      pastille d'icône de .xp-tete emploie déjà — pas une couleur de plus. */
.mr-jeton-modifie {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 2px 8px;
  background: var(--et-fond-marine);
  color: var(--et-sur-aplat);
  font-size: 12px;
  font-weight: 600;
}

.mr-jeton-modifie > .bi { font-size: 10px; }

/* 2. LA GARDE DE FERMETURE prend .xp-alerte.est-signal pour ses couleurs, mais se pose ENTRE
      la tête et le corps, et non dans le corps : elle ne doit pas défiler avec ce qu'elle
      protège. Hors du corps, elle perd le rembourrage que .xp-corps lui aurait donné — ces
      deux lignes le lui rendent, et rien d'autre. */
/* flex-wrap et align-items : l'alerte du gabarit est faite d'une icône et d'un texte, jamais
   de boutons — sans le retour à la ligne, « Reprendre » et « Fermer sans enregistrer » se
   comprimeraient sur un écran étroit au lieu de passer dessous. */
.mr-garde {
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 10px var(--et-modal-pad);
}

.mr-garde > span { flex: 1 1 240px; min-width: 0; }
.mr-garde > .bi { margin-top: 0; }

/* 3. LE CORPS D'UNE FICHE EST NU. Le gabarit rembourre son corps pour une grille de champs ;
      une fiche est une pile de bandes pleine largeur séparées par des filets (la forme du
      gabarit de page). Rembourré, chaque bande serait insérée et ses filets n'atteindraient
      plus les bords. Le rapport de rattrapage, lui, est un contenu de fenêtre ordinaire et
      garde le rembourrage. */
.mr-corps-nu { padding: 0; }

/* Et un écart de grammaire, assumé : le gabarit cale à DROITE tout ce qui n'est pas une note,
   bouton de suppression compris. Sur la fiche d'abonnement, Supprimer ouvre le pied — ce qui
   défait se tient à l'écart du geste qu'on répète, et c'est ce qui l'y met. Seulement quand il
   est le premier : ailleurs, la grammaire du gabarit vaut. */
.xp-pied > .xp-btn-danger:first-child { margin-left: 0; }

/* Les lignes du rapport de rattrapage — le seul contenu de fenêtre propre à cet écran. Elles
   n'ont plus de marge latérale depuis qu'elles vivent dans un .xp-corps rembourré. */
.mr-rapport-l {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 5px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
}

.mr-rapport-l > .bi { flex-shrink: 0; }
.mr-rapport-l:last-child { margin-bottom: 0; }
.mr-rapport-l.est-ok { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.mr-rapport-l.est-ko { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }

/* ---- Retour immédiat ---------------------------------------------------
   Le liseré porte le sort du geste ; le texte reste à l'encre courante, qui se lit sur le
   fond de surface quel que soit le thème. */

.mr-toast {
  position: fixed;
  z-index: 1090;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 430px;
  padding: 12px 14px;
  background: var(--et-surface);
  border: 1px solid var(--et-hairline);
  border-left: 3px solid var(--et-inerte);
  box-shadow: var(--et-ombre-flottant);
  font-size: 13px;
  color: var(--et-ink);
  line-height: 1.45;
}

.mr-toast.est-ok { border-left-color: var(--et-succes); }
.mr-toast.est-ok > .bi { color: var(--et-succes-ink); }
.mr-toast.est-ko { border-left-color: var(--et-danger); }
.mr-toast.est-ko > .bi { color: var(--et-danger-ink); }

/* ---- Repli -------------------------------------------------------------
   Paliers de l'échelle retenue (docs/conventions-responsive.md) : 1024 et 720. */

@media (max-width: 1024px) {
  .mr-fiche-champs > .mr-champ-bloc { flex: 1 1 50%; }

  /* Cibles tactiles : lot02-cibles-tactiles.css impose 44 px sous 1024 px, et une cible ne
     rétrécit jamais. */
  .mr-champ { height: 44px; }
  .mr-champ-doux, .mr-champ-nu { height: 44px; }
  .mr-onglets > button { height: 44px; }
  .mr-ico { width: 44px; height: 44px; }
  .mr-ico-nu { width: 44px; height: 44px; }
  .mr-sens { width: 44px; height: 44px; }
  .mr-btn { min-width: 44px; }
  .mr-btn,
  .mr-btn-fort,
  .mr-lien { min-height: 44px; }
  .mr-bandeau-a { height: 44px; }

  /* Les en-têtes des deux listes sont devenus cliquables : ce sont des cibles tactiles comme
     les autres. La règle est posée sur .mr-table et non sur .tbl — relever la hauteur d'en-tête
     du gabarit repeindrait les quarante écrans qui l'emploient, ce qui est une décision de
     charte, pas une reprise d'écran. */
  .mr-table thead th { height: 44px; }
  .mr-toast { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}

@media (max-width: 720px) {
  /* Les trois tables passent en rangées empilées, chaque cellule portant son libellé : huit
     colonnes ne tiennent pas, et un défilement horizontal sur une liste qu'on parcourt à la
     verticale se perd. */
  .mr-table thead { display: none; }
  /* height:auto, ET C'EST UN CORRECTIF (2026-09-06) : le gabarit pose « .tbl tbody tr
     { height: 1px } », qu'une rangée passée en bloc prend au pied de la lettre — les modèles
     se chevauchaient sur un téléphone (même défaut qu'au brouillard et aux sessions). */
  .mr-table tbody tr { display: block; height: auto; padding: 9px 12px; border-bottom: 2px solid var(--et-filet-fort); }
  .mr-table tbody td { display: flex; align-items: baseline; gap: 10px; padding: 3px 0 !important; text-align: left !important; }
  .mr-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 92px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--et-muted);
  }
  .mr-table tbody td:empty { display: none; }
  .mr-scroller { padding: 10px 8px; }
  .mr-champ-bloc { flex: 1 1 100%; border-right: 0; }

  /* L'en-tête vient d'être masqué, deux règles plus haut : le tri passe ici. Une ligne — le
     libellé, la colonne, le sens — et la règle de la colonne choisie en dessous quand elle en
     a une, parce qu'il n'y a pas de survol au doigt pour la lire. */
  .mr-tri-mobile {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 10px 12px;
    background: var(--et-surface);
    border: 1px solid var(--et-hairline);
  }

  .mr-tri-mobile-l { flex: 1 1 200px; min-width: 0; }

  .mr-tri-mobile-l > span {
    display: block;
    margin-bottom: 4px;
    color: var(--et-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  /* La note prend la ligne entière : elle explique, elle ne se met pas en concurrence avec
     les deux commandes. */
  .mr-tri-mobile-n {
    flex: 1 1 100%;
    color: var(--et-muted);
    font-size: 12px;
    line-height: 1.45;
  }
}

/* ---- 560 px : le téléphone — actions de fiche empilées ------------------------------- */

@media (max-width: 560px) {
  /* Le pied et sa mise en colonne viennent du gabarit, qui empile déjà ses boutons sous
     720 px. Reste le sous-titre de l'en-tête : à 360 px il ne tient pas à côté du titre, et
     c'est le titre qui porte le code. */
  .xp-tete-sous { display: none; }
  .mr-sous-table { flex-direction: column; align-items: stretch; }
  .mr-sous-table > .mr-btn { justify-content: center; }
  .mr-sous-table > .mr-muet { margin-left: 0; text-align: left; }
  .mr-fiche-tete,
  .mr-fiche-champs > .mr-champ-bloc { padding-left: 12px; padding-right: 12px; }
}