/* ==============================================================================================
   ÉCRAN — IMPORT D'ÉCRITURES (SAI-04)

   Feuille d'ÉCRAN, préfixe .im-, portée de la passation « Import d'écritures »
   (docs/modeles/design_handoff_import_ecritures, razor/wwwroot/css/ecran-import.css). Elle
   REMPLACE intégralement la feuille du même préfixe qui habillait l'écran d'avant : le préfixe
   reste, son contenu est celui de la refonte.

   LE NOM DE FICHIER RESTE ecran-import-ecritures.css, et non ecran-import.css comme dans la
   passation : /app/compta/import est déjà pris par CPT-06 « Import de données », et deux
   feuilles d'écran voisines nommées l'une pour l'autre se confondent au premier correctif.
   Le <link> d'App.razor n'a donc pas bougé de place.

   CE QUI N'EST PAS ICI : le bandeau de fenêtre (.et-bandeau, easytech-theme.css — EcranCompta
   le pose pour les 45 écrans du module), le cadre de liste (.tbl-*), les cartes (.md-*),
   l'ossature d'écran (EcranCompta) et 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 ;
     · 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 pastille comme en liseré elle 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.
   ============================================================================================== */

/* ---- Fil des trois temps ----------------------------------------------- */

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

.im-fil-pas {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-right: 1px solid var(--et-hairline);
}

.im-fil-pas:last-child { border-right: 0; }

.im-fil-no {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--et-neutre-bg);
  color: var(--et-muted);
  font-family: var(--et-font-mono);
  font-size: 12px;
  font-weight: 700;
}

.im-fil-l { min-width: 0; display: flex; flex-direction: column; }
.im-fil-l > b { font-size: 13px; font-weight: 700; color: var(--et-ink); }
.im-fil-l > span { font-size: 12px; color: var(--et-muted); }

/* Le temps courant porte le liseré ; les temps passés le vert ; les temps à venir sont
   estompés. C'est ce qui dit « rien n'est encore posé » d'un regard. */
.im-fil-pas.est-actif { background: var(--et-tint); box-shadow: inset 0 -2px 0 var(--et-form-blue); }
.im-fil-pas.est-actif .im-fil-no { background: var(--et-form-blue); color: var(--et-sur-aplat); }
.im-fil-pas.est-fait .im-fil-no { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.im-fil-pas.est-avenir { opacity: .55; }

/* ---- Bande de progression ----------------------------------------------

   CE QUI TRAVAILLE, DIT PENDANT QU'IL TRAVAILLE. La barre est INDÉTERMINÉE — une
   navette, non une jauge : l'analyse et l'intégration sont un seul appel serveur,
   qui ne rend rien avant d'avoir fini. Une jauge à pourcentage y serait inventée.

   La bande se pose au même endroit et à la même densité que .im-bandeau, dont elle
   prend la place le temps du travail : deux hauteurs différentes feraient sauter la
   page à chaque phase.

   Aucune couleur écrite ici : le bleu de contenu est --et-form-blue, et l'encre de
   la bande est celle du texte ordinaire (docs/couleurs-en-dur.md). */

.im-progres {
  flex-shrink: 0;
  padding: 9px var(--et-bandeau-pad-h) 0;
  background: var(--et-tint);
  border-bottom: 1px solid var(--et-hairline);
}

.im-progres-t {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 1.45;
  color: var(--et-ink);
}

.im-progres-t > .bi {
  flex-shrink: 0;
  align-self: center;
  color: var(--et-form-blue);
  animation: im-tourne 1.4s linear infinite;
}

.im-progres-d { color: var(--et-muted); }

/* Le temps écoulé pousse à droite : c'est la seule mesure exacte de la bande, et on
   la relit sans relire la phrase. */
.im-progres-s { margin-left: auto; color: var(--et-muted); font-size: 12px; }

.im-progres-b {
  position: relative;
  height: 3px;
  margin-top: 7px;
  overflow: hidden;
  background: var(--et-piste);
}

.im-progres-b > span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32%;
  background: var(--et-form-blue);
  animation: im-navette 1.25s ease-in-out infinite;
}

@keyframes im-tourne { to { transform: rotate(360deg); } }

@keyframes im-navette {
  0%   { left: -32%; }
  100% { left: 100%; }
}

/* Un mouvement perpétuel est une gêne pour qui l'a demandé : la bande reste, elle
   cesse seulement de bouger. */
@media (prefers-reduced-motion: reduce) {
  .im-progres-t > .bi { animation: none; }
  .im-progres-b > span { animation: none; left: 0; width: 100%; opacity: .55; }
}

/* ---- Bandeau d'alerte -------------------------------------------------- */

.im-bandeau {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 9px var(--et-bandeau-pad-h);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.im-bandeau > .bi { flex-shrink: 0; }
.im-bandeau.est-grave { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }
.im-bandeau.est-signal { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.im-bandeau-l { flex: 1; min-width: 0; }
.im-bandeau a { color: inherit; text-decoration: underline; }

.im-bandeau-a {
  flex: none;
  height: 28px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* ---- Zone de dépôt ---------------------------------------------------- */

.im-depot { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; padding: 16px; }
.im-depot-l { flex: 1 1 340px; min-width: 0; }
.im-depot-r { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; }

.im-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  min-height: 210px;
  padding: 24px 20px;
  background: var(--et-surface-2);
  border: 1px dashed var(--et-filet-fort);
  color: var(--et-muted);
  text-align: center;
  cursor: pointer;
}

.im-zone.est-survol { background: var(--et-tint); border-color: var(--et-form-blue); color: var(--et-form-blue); }
.im-zone > .bi { font-size: 28px; color: var(--et-inerte); }
.im-zone.est-survol > .bi { color: var(--et-form-blue); }
.im-zone-t { font-size: 14px; font-weight: 600; color: var(--et-ink); }
.im-zone-d { max-width: 360px; font-size: 12px; line-height: 1.5; }

/* Le champ natif couvre la zone : cliquer n'importe où l'ouvre. */
.im-zone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.im-depot-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; }

/* ---- Champs ----------------------------------------------------------- */

.im-champ-bloc { padding: 10px 14px; }

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

/* 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. */
.im-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.im-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;
}

.im-champ:focus { border-color: var(--et-form-blue); box-shadow: inset 0 0 0 1px var(--et-form-blue); }
.im-plein { width: 100%; }
.im-zone-texte { height: auto; padding: 8px; font-size: 12px; line-height: 1.5; resize: vertical; white-space: pre; overflow-x: auto; }
.im-champ.mono, .im-depot .mono { font-family: var(--et-font-mono); }
.im-num { font-family: var(--et-font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.im-coche { display: flex; align-items: center; gap: 7px; 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. */

/* ---- Synthèse ---------------------------------------------------------- */

.im-synthese {
  display: flex;
  flex-shrink: 0;
  background: var(--et-surface);
  border-bottom: 2px solid var(--et-filet-fort);
}

.im-mesure {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 14px;
  border-right: 1px solid var(--et-hairline);
}

.im-mesure:last-child { border-right: 0; }

/* Mêmes proportions que les vignettes du module : clé 11 px mono en capitales, valeur
   16 px mono. */
.im-mesure > .n {
  font-family: var(--et-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--et-muted);
}

.im-mesure > .v { font-family: var(--et-font-mono); font-size: 16px; font-weight: 600; }

/* Les quatre rangs d'encre d'une mesure. La passation les écrivait en style inline, avec la
   teinte d'état elle-même : la charte veut le rang -ink, et le veut dans la feuille. */
.im-mesure > .v.est-encre { color: var(--et-ink); }
.im-mesure > .v.est-succes { color: var(--et-succes-ink); }
.im-mesure > .v.est-danger { color: var(--et-danger-ink); }
.im-mesure > .v.est-bleu { color: var(--et-form-blue); }

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

/* LE CORPS EST BORNÉ À LA FENÊTRE sur un poste — même mécanique et mêmes raisons que les
   saisies (ecran-saisie-piece.css, .sr-corps) : la coquille ne borne pas .et-scroll, c'est
   le document qui défile, et cent lignes de contrôle emportaient les totaux, l'état et le
   bouton d'intégration sous le bord. La table défile dans son cadre, tête figée et colonne
   d'ancrage tenue par le lot 03, le pied reste dessous, le volet à côté. Ce qui est posé
   au-dessus — barre, fil, dépôt ouvert, lots, synthèse — est plus haut que sur les autres
   écrans (~440 px). Levé sous 1100 px, où le volet passe sous la table. */
.im-corps {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 380px;
  max-height: calc(100vh - var(--im-au-dessus, 440px));
}
/* Le cadre de liste du gabarit rend son défilement au scroller : lui n'est pas borné, et il
   serait le scrollport de la tête figée comme de la colonne ancrée. */
.im-scroller .tbl-defile { overflow: visible; }
.im-scroller .im-table-controle > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 3;
  box-shadow: inset 0 -1px 0 var(--et-table-head-fonce);
}
.im-scroller .im-table-controle.tbl-ancree[data-ancre="1"] > thead > tr > :nth-child(1) {
  z-index: 4;
  box-shadow: 1px 0 0 var(--et-hairline), inset 0 -1px 0 var(--et-table-head-fonce);
}
.im-colonne { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--et-surface-2); }
.im-scroller { flex: 1 1 auto; min-height: 0; overflow: auto; }
.im-bloc { padding: 0 16px 16px; }
.im-bloc-t { margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--et-table-head-encre); }

/* ---- Barre de filtre --------------------------------------------------- */

.im-filtre-barre {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--et-surface);
  border-bottom: 1px solid var(--et-hairline);
}

.im-jeton-filtre {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 2px 4px 2px 10px;
  background: var(--et-tint);
  border: 1px solid var(--et-form-blue);
  color: var(--et-form-blue);
  font-size: 12px;
  font-weight: 600;
}

.im-jeton-filtre > button { background: none; border: 0; border-radius: 0; padding: 2px 4px; color: inherit; font-size: 12px; cursor: pointer; }

/* ---- Tables ------------------------------------------------------------ */

.im-table { border: 1px solid var(--et-hairline); background: var(--et-surface); }

/* Dix colonnes modifiables ne tiennent pas sous 1180 px : la table défile plutôt que de se
   comprimer. La largeur est ICI et non dans la page — docs/conventions-responsive.md :
   jamais une largeur en dur dans un écran. */
.im-table-controle { min-width: 1180px; }
.im-table-lots { width: 100%; }

/* ---- Colonnes des deux tables et bloc de dépôt ---------------------------
   La passation les posait en style inline sur chaque <th> — dix-huit largeurs en dur, plus
   un bloc, qu'aucun palier ne pouvait reprendre. */
.im-table th { text-align: left; }
.im-col-no { width: 52px; text-align: center; }
.im-col-jrn { width: 70px; }
.im-col-date { width: 120px; }
.im-col-reference { width: 140px; }
.im-col-compte { width: 120px; }
.im-col-tiers { width: 100px; }
.im-col-montant { width: 120px; text-align: right; }
.im-col-retrait { width: 34px; }
.im-col-lot { width: 70px; }
.im-col-etat { width: 150px; }
.im-col-compteur { width: 90px; text-align: right; }
.im-col-total { width: 150px; text-align: right; }
.im-col-quand { width: 180px; }
.im-col-gestes { width: 120px; }
.im-bloc-souple { flex: 1 1 auto; }

.im-row { border-bottom: 1px solid var(--et-hairline); }
.im-row:hover { background: var(--et-surface-3); }
/* Le liseré dit la faute sans repeindre la ligne : un fond rouge sur cent lignes d'un
   fichier de quatre cents rend la table illisible. En marque, --et-danger passe le seuil
   graphique de 3:1 — c'est en encre qu'il ne le passerait pas. */
.im-row.est-fautive { box-shadow: inset 3px 0 0 var(--et-danger); }

.im-rang { border-bottom: 1px solid var(--et-hairline); }
.im-rang:hover { background: var(--et-surface-3); }
.im-rang.est-inerte { opacity: .62; }

.im-nue::before { display: none !important; }
.im-no { color: var(--et-inerte); text-align: center; }
.im-tronque { min-width: 0; overflow: hidden; }
.im-cell { position: relative; }
.im-cell-large { min-width: 0; }
.im-piece { font-size: 12px; font-weight: 600; color: var(--et-form-blue); }
.im-muet { color: var(--et-muted); font-size: 12px; }
.im-sous { margin-top: 3px; font-size: 12px; color: var(--et-muted); line-height: 1.4; }

.im-cell input,
.im-cell select {
  box-sizing: border-box;
  width: 100%;
  height: 28px;
  padding: 0 6px;
  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;
}

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

/* Le défaut est écrit sous la ligne, avec son geste : une liste d'erreurs à part obligerait
   à faire l'aller-retour sur quatre cents lignes. */
.im-defaut {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.4;
}

.im-defaut > .bi { flex-shrink: 0; }

/* Trois rangs d'encre, jamais la teinte d'état elle-même. Le signalement — ce qui se lit sans
   retenir l'intégration — porte l'encre neutre : lui donner l'ambre le ferait chercher parmi
   les refus. */
.im-defaut.est-danger { color: var(--et-danger-ink); }
.im-defaut.est-alerte { color: var(--et-avertissement-ink); }
.im-defaut.est-signal { color: var(--et-muted); }

.im-corr {
  padding: 1px 7px;
  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;
}

.im-corr:hover { background: var(--et-tint); }

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

.im-jeton > .bi { font-size: 12px; }

/* Les quatre états d'un lot, fond et encre. L'écran ne nomme qu'un rôle — la teinte vit ici. */
.im-jeton.est-integre { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.im-jeton.est-analyse { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.im-jeton.est-rejete { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }
.im-jeton.est-annule { background: var(--et-neutre-bg); color: var(--et-muted); }

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

/* ---- Pied d'intégration ------------------------------------------------ */

.im-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);
}

.im-total { display: flex; align-items: baseline; gap: 7px; }

.im-total > .n {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--et-muted);
}

.im-total > .v { font-size: 15px; font-weight: 600; color: var(--et-ink); }

/* La couleur est portée par la pastille, jamais par le chiffre. Marque graphique : l'ambre
   y prend --et-avertissement-mark, qui passe le seuil de 3:1 là où l'ambre pur ne le passe
   pas (2,15:1). */
.im-pastille { width: 8px; height: 8px; flex: none; align-self: center; }
.im-pastille.est-debit { background: var(--et-form-blue); }
.im-pastille.est-credit { background: var(--et-avertissement-mark); }

.im-etat { display: flex; align-items: center; gap: 7px; padding: 3px 10px; font-size: 13px; font-weight: 600; }
.im-etat.est-ok { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.im-etat.est-ko { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }

.im-pied-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Le motif du refus, à côté du bouton éteint : un bouton gris sans raison fait chercher
   pendant cinq minutes. */
.im-blocage,
.im-annonce {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-basis: 100%;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.im-blocage { color: var(--et-danger-ink); }
/* L'annonce n'est pas un refus : le lot reste intégrable. Encre neutre, donc — l'ambre la
   ferait lire comme un défaut de plus. */
.im-annonce { color: var(--et-muted); }
.im-blocage > .bi,
.im-annonce > .bi { flex-shrink: 0; }

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

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

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

.im-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-encre);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.im-note { margin: 8px 0 0; font-size: 12px; color: var(--et-muted); line-height: 1.5; }

.im-familles { display: flex; flex-direction: column; gap: 6px; }

.im-famille {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  width: 100%;
  padding: 8px 10px;
  background: var(--et-surface);
  border: 1px solid var(--et-hairline);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.im-famille:hover { background: var(--et-tint); border-color: var(--et-form-blue); }
.im-famille.est-actif { background: var(--et-tint); border-color: var(--et-form-blue); box-shadow: inset 2px 0 0 var(--et-form-blue); }
.im-famille-l { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; }
.im-famille-l.est-danger { color: var(--et-danger-ink); }
.im-famille-l.est-alerte { color: var(--et-avertissement-ink); }
.im-famille-n { flex: none; font-family: var(--et-font-mono); font-size: 13px; font-weight: 700; color: var(--et-ink); }
.im-famille-c { flex-basis: 100%; font-size: 12px; color: var(--et-form-blue); }

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

.im-colonnes { display: flex; flex-direction: column; gap: 7px; }
.im-colonne-l { display: flex; flex-direction: column; gap: 2px; }
.im-colonne-n { display: flex; align-items: baseline; gap: 7px; font-family: var(--et-font-mono); font-size: 12px; font-weight: 600; color: var(--et-form-blue); }
.im-colonne-r { font-size: 12px; color: var(--et-muted); line-height: 1.4; }

.im-fac {
  padding: 0 5px;
  background: var(--et-neutre-bg);
  color: var(--et-muted);
  font-family: var(--et-font-body, inherit);
  font-size: 12px;
  font-weight: 600;
}

.im-regles { display: flex; flex-direction: column; gap: 7px; }
.im-regle { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--et-ink); line-height: 1.45; }
.im-regle > .bi { flex-shrink: 0; color: var(--et-succes-ink); }

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

.im-btn,
.im-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;
  cursor: pointer;
}

.im-btn-fort { background: var(--et-action); border-color: var(--et-action); color: var(--et-sur-aplat); }
.im-btn:hover { border-color: var(--et-form-blue); color: var(--et-form-blue); }
.im-btn-fort:disabled { background: var(--et-action-off); border-color: var(--et-action-off); color: var(--et-sur-aplat); cursor: not-allowed; }  /* délavé, non gris : modele-erp.css, .mx-btn-cta */
.im-btn-bloc { width: 100%; margin-top: 10px; justify-content: center; }
.im-btn:focus-visible,
.im-btn-fort:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 2px; }

.im-btn-mini {
  height: 26px;
  padding: 0 10px;
  background: var(--et-surface);
  border: 1px solid var(--et-filet-fort);
  border-radius: 0;
  color: var(--et-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.im-btn-mini:hover { border-color: var(--et-form-blue); color: var(--et-form-blue); }
.im-btn-mini:disabled { color: var(--et-inerte); border-color: var(--et-hairline); cursor: not-allowed; }

.im-ico-nu { width: 24px; height: 24px; background: transparent; border: 0; border-radius: 0; color: var(--et-inerte); font-size: 12px; cursor: pointer; }
.im-ico-nu:hover { color: var(--et-danger-ink); }

/* ---- Retour immédiat --------------------------------------------------- */

.im-toast {
  position: fixed;
  z-index: 1090;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 440px;
  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;
}

/* Le liseré est une marque, pas une encre : c'est le seul rang où la teinte d'état passe
   telle quelle. Le glyphe, lui, prend le rang -ink. */
.im-toast.est-succes { border-left-color: var(--et-succes); }
.im-toast.est-danger { border-left-color: var(--et-danger); }
.im-toast.est-succes > .bi { color: var(--et-succes-ink); }
.im-toast.est-danger > .bi { color: var(--et-danger-ink); }

/* ==============================================================================================
   PALIERS — sur l'échelle retenue (docs/conventions-responsive.md) : 1100, 1024, 720, 560.
   Le 768 px de la passation n'en fait pas partie : ce qu'il portait passe à 720.
   ============================================================================================== */

@media (max-width: 1100px) {
  /* Sous 1100 px la page défile d'un bloc : rien n'est borné, sinon la table et le volet
     se disputent une colonne trop courte et l'un des deux tombe à zéro. Sans cadre borné,
     la tête n'a rien contre quoi se figer. */
  .im-corps { flex-direction: column; align-items: stretch; min-height: 0; max-height: none; }
  .im-colonne { flex: 0 0 auto; }
  .im-scroller { flex: 0 0 auto; min-height: 0; overflow-x: auto; }
  .im-scroller .im-table-controle > thead > tr > th { position: static; }
  .im-aside { flex: 0 0 auto; width: 100%; border-left: 0; border-top: 2px solid var(--et-filet-fort); overflow: visible; }
  .im-synthese { flex-wrap: wrap; }
  .im-mesure { flex: 1 1 33%; }
  .im-fil { flex-wrap: wrap; }
  .im-fil-pas { flex: 1 1 200px; }
}

@media (max-width: 1024px) {
  /* CIBLES TACTILES (docs/cibles-tactiles.md) : sous 1024 px, rien sous 44 × 44 px, TOUTES
     les cibles — champs, boutons, mini-boutons, gestes, corrections proposées, bascule,
     action du bandeau, croix du jeton de filtre, familles du volet. */
  .im-champ { height: 44px; }
  .im-zone-texte { height: auto; }
  .im-btn { min-width: 44px; }
  .im-btn,
  .im-btn-fort,
  .im-btn-mini,
  .im-bandeau-a,
  .im-coche,
  .im-corr,
  .im-famille { min-height: 44px; }
  .im-ico-nu { width: 44px; height: 44px; }
  .im-jeton-filtre > button { min-width: 44px; min-height: 44px; }
    /* Marche tactile retiree le 2026-09-10 : lot02 la pose une fois pour toutes
       les cases natives du back-office, a 24 px. Voir docs/cibles-tactiles.md. */
  .im-cell input,
  .im-cell select { height: 44px; }
}

@media (max-width: 720px) {
  .im-mesure { flex: 1 1 50%; }

  /* La table des LOTS passe en rangées empilées : huit colonnes ne tiennent pas.
     La table de CONTRÔLE, non — elle se lit en colonnes, et cent lignes empilées à dix
     champs chacune sont illisibles ; elle défile horizontalement. 720 et non 768 : 768 est
     une largeur de recette, pas un palier. */
  .im-bloc .im-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 lots
     se chevauchaient sur un téléphone (même défaut qu'au brouillard). */
  .im-bloc .im-table tbody tr { display: block; height: auto; padding: 9px 12px; border-bottom: 2px solid var(--et-filet-fort); }
  .im-bloc .im-table tbody td { display: flex; align-items: baseline; gap: 10px; padding: 3px 0 !important; text-align: left !important; }
  .im-bloc .im-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 88px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--et-muted);
  }
  .im-bloc .im-table tbody td:empty { display: none; }
}

@media (max-width: 560px) {
  .im-depot,
  .im-bloc,
  .im-carte { padding-left: 12px; padding-right: 12px; }
  .im-depot-actions,
  .im-pied-actions { margin-left: 0; width: 100%; flex-direction: column; align-items: stretch; }
  .im-pied-actions > .im-btn-fort,
  .im-depot-actions > .im-btn,
  .im-depot-actions > .im-btn-fort { justify-content: center; }
}