/* ===========================================================================
   ASSISTANT D'IMPORTATION UNIVERSEL — Components/Pages/App/ImportUniversel.razor
   Préfixe .iu-  (vérifié libre avant emploi)

   *** CE QUE CETTE FEUILLE A REPRIS, ET POURQUOI D'UN SEUL BLOC ***
   Le composant portait 179 attributs style= en ligne et n'avait qu'une feuille
   d'amorce de quarante lignes. Ce n'est pas un écran de plus : il est monté par
   SEPT écrans de SIX modules — vente, stock, achat, paie, comptabilité,
   pointage, administration — et la charte ne pouvait donc l'atteindre nulle
   part. Un style en ligne l'emporte sur toute règle, ne suit aucun palier, ne
   se bascule pas en thème sombre et échappe à chaque campagne de charte : c'est
   très exactement ce qui s'est passé ici, et ce fichier le montre plus bas.

   Les sélecteurs sont bornés à .appgrid : les sept montages sont tous dans la
   coquille du back-office.

   *** TROIS CHOSES QUE LE PORTAGE A CORRIGÉES, ET NON DÉPLACÉES ***

   1. DEUX PASTILLES SOUS LE SEUIL AA. La méthode C# StyleCat rendait
      « --et-succes sur --et-succes-bg » et « --et-danger sur
      --et-danger-badge-bg » — 3,16:1 et 4,22:1, en 12 px gras, sous le seuil AA
      de 4,5. La charte le dit depuis le 2026-09-03 : une couleur d'état n'est
      jamais l'encre posée sur son propre fond pâle, le texte prend le rang
      -ink. Ces deux-là ont survécu à la campagne parce qu'elles étaient dans un
      FICHIER C#, où « color: » et le nom du jeton ne sont pas sur la même
      ligne. Elles sont ici, en classes, avec les rangs -ink.

   2. L'ÉCHELLE TYPOGRAPHIQUE. La révision du 2026-09-02 ne porte pas de
      fraction et rien sous 12 px : 17 → 18, 19 → 20, 22 et 26 → 24. Le
      composant portait les quatre. Appliqué.

   3. DES GRAISSES QUI N'EXISTENT PAS. Le composant demandait 550, 620, 650 et
      750. App.razor ne charge Open Sans qu'en 400, 600 et 700 : le navigateur
      rabat sur la plus proche fournie, donc 550/620/650 rendaient déjà 600 et
      750 rendait 700. Les écrire donnait l'illusion d'un réglage fin qui
      n'existait pas. Normalisé sur ce qui est réellement chargé.

   AUCUNE COULEUR LITTÉRALE : tout vient des jetons d'easytech-theme.css, donc
   le thème sombre suit sans qu'on réécrive une règle.

   *** CE QUE LA MISE AU GABARIT DU 2026-09-10 A RETIRÉ DE CETTE FEUILLE ***
   Le portage ci-dessus avait ramené les 179 styles en ligne dans une feuille ;
   il n'avait pas posé la question suivante, qui est de savoir si l'objet
   dessiné existe DÉJÀ dans le gabarit. Cinq y existaient : l'en-tête d'écran,
   le fil d'étapes, la carte, les bandeaux d'état, les boutons d'engagement.
   Ils sont rendus au gabarit, et cette feuille ne garde que ce qui n'appartient
   qu'à cet écran — la correspondance colonne par colonne, l'aperçu du contrôle,
   le bilan. Chaque section retirée dit à sa place ce qu'elle est devenue.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. COQUILLE ET EN-TÊTE
   --------------------------------------------------------------------------- */

.appgrid .iu-page { min-height: 100%; color: var(--et-ink); }

/* Le fichier chargé, rappelé à toutes les étapes — après l'étape 1, sa carte
   n'est plus à l'écran.

   CE QUI OCCUPAIT CETTE PLACE (retiré le 2026-09-10, mise au gabarit) : un
   en-tête de composant portant le logo EasyTech, le titre « Importation de
   données » et « Point d'entrée universel ». Les sept écrans qui montent ce
   composant écrivent déjà leur titre, donc on le lisait deux fois ; le logo
   n'apparaît nulle part ailleurs qu'en tête de coquille ; et « universel »
   disait le contraire de ce que font les six montages FILTRÉS par module. Le
   rappel du fichier, lui, était la seule information de cet en-tête que
   l'écran ne portait pas ailleurs — il reste, seul, et se pose à gauche. */
.appgrid .iu-rappel {
    display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--et-surface-2); border: 1px solid var(--et-form-border);
    padding: 7px 12px; margin-bottom: 14px;
    font-size: 13px; color: var(--et-muted);
}
.appgrid .iu-mono { font-family: var(--et-font-mono); }

/* ---------------------------------------------------------------------------
   2. LE FIL DES QUATRE ÉTAPES — IL N'EST PLUS DESSINÉ ICI (2026-09-10)

   Il l'était : douze règles pour une barre d'onglets numérotés, avec ses trois
   états à elle. Le gabarit porte le même objet depuis le 2026-09-08 —
   FilEtapes / .mx-etapes (modele-erp.css §11.x) — né aux deux écrans de
   connecteur qui devaient compter pareil ; c'était le troisième écran à
   étapes du produit, et le seul à les compter autrement.

   CE QUE LE CHANGEMENT APPORTE, au-delà de la cohérence : une étape fermée dit
   CE QUI L'OUVRE. La barre d'ici grisait les étapes suivantes sans un mot — on
   cliquait, rien ne se passait, et rien ne disait qu'il fallait d'abord charger
   un fichier.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   3. BANDEAUX D'ÉTAT
   Le fond teinté porte le signal ; l'encre prend le rang -ink (charte
   2026-09-03), jamais la couleur d'état elle-même.
   --------------------------------------------------------------------------- */

/* ILS NE SONT PLUS DESSINÉS ICI (2026-09-10) : l'erreur et l'avertissement
   prennent .mx-blocage et sa variante .est-erreur (modele-erp.css §11), qui
   portent le même signal avec le liseré épais du gabarit. Les deux règles
   d'ici avaient les bons jetons et leurs propres mesures — c'est la façon la
   plus discrète de faire diverger deux écrans.

   Ce qui reste sous ce titre : le refus d'accès et le conseil d'ordre, qui ne
   sont ni l'un ni l'autre un état — voir plus bas. */

/* ---------------------------------------------------------------------------
   4. CARTES ET COLONNES — l'ossature commune aux quatre étapes
   --------------------------------------------------------------------------- */

.appgrid .iu-colonnes { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.appgrid .iu-col-large { flex: 1 1 560px; min-width: 320px; display: flex; flex-direction: column; gap: 20px; }
.appgrid .iu-col-corresp { flex: 1 1 620px; min-width: 320px; }
.appgrid .iu-col-cote { flex: 0 1 340px; min-width: 280px; }
.appgrid .iu-col-cote-pile { flex: 0 1 320px; min-width: 280px; display: flex; flex-direction: column; gap: 16px; }

/* LES CARTES SONT CELLES DU GABARIT (2026-09-10) — .mx-carte, son bandeau de
   titre et sa note (modele-erp.css §2). Elles étaient DESSINÉES ICI : même
   fond, mais un filet pris sur --et-form-border quand le gabarit prend
   --et-hairline, et le titre posé dans le rembourrage au lieu du bandeau. Un
   objet que la charte nomme déjà n'a pas à être redessiné dans la feuille d'un
   écran : c'est ainsi qu'on obtient deux cartes qui ne se ressemblent qu'à peu
   près, et l'écart ne se voit que les deux écrans côte à côte.

   CE QUI RESTE LOCAL EST LE REMBOURRAGE DU CORPS. Le corps du gabarit
   (.mx-carte-corps) ne porte pas de rembourrage horizontal, parce qu'il attend
   une GRILLE DE FORMULAIRE dense, qui porte le sien ; les cartes d'ici portent
   des contrôles libres — un sélecteur, une zone de dépôt, trois cartes de mode.
   D'où cette classe, et non une surcharge de .mx-carte-corps : surcharger une
   classe du gabarit depuis une feuille d'écran la change pour l'écran, mais
   fait croire qu'elle a changé partout. */
.appgrid .iu-corps { padding: 18px; }

.appgrid .iu-volet-sous  { font-size: 13px; color: var(--et-muted); line-height: 1.5; margin-bottom: 12px; }

/* Le titre d'une étape qui occupe toute la largeur (Correspondance, Contrôle). */
.appgrid .iu-etape-titre { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.appgrid .iu-etape-sous  { font-size: 14px; color: var(--et-muted); margin-top: 5px; max-width: 620px; }

.appgrid .iu-pile { display: flex; flex-direction: column; gap: 10px; }

/* ---------------------------------------------------------------------------
   5. ÉTAPE 1 — FICHIER
   --------------------------------------------------------------------------- */

/* Aucune entité accordée au rôle : un encart qui le DIT, plutôt qu'un sélecteur
   vide qu'on prendrait pour une panne. */
.appgrid .iu-refus {
    border: 1px solid var(--et-form-border); background: var(--et-surface-2);
    padding: 14px 16px; font-size: 13px; color: var(--et-muted);
}
.appgrid .iu-refus strong { color: var(--et-ink); }

.appgrid .iu-select-entite { max-width: 420px; }

/* L'ORDRE CONSEILLÉ (maquette CPT-06), sous le sélecteur d'entité — rendu par le
   seul écran qui n'a pas de module, /admin/import.

   AUCUNE COULEUR D'ÉTAT : un conseil d'ordre n'est ni un avertissement ni une
   erreur. Le prendre pour de l'ambre ferait lire « quelque chose ne va pas » là
   où l'on dit seulement « commencez par là ». C'est une note : elle prend le rang
   d'encre secondaire, le filet ordinaire, et le bleu de contenu pour sa marque. */
.appgrid .iu-conseil {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 12px; padding: 9px 12px; max-width: 620px;
    background: var(--et-surface-2); border: 1px solid var(--et-form-border);
    border-left: 3px solid var(--et-form-blue);
    font-size: 13px; line-height: 1.45; color: var(--et-muted);
}
.appgrid .iu-conseil strong { color: var(--et-ink); font-weight: 600; }
.appgrid .iu-conseil .bi { flex: none; margin-top: 2px; font-size: 14px; color: var(--et-form-blue); }

.appgrid .iu-gabarit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.appgrid .iu-gabarit-note { font-size: 12px; color: var(--et-muted); flex: 1; min-width: 220px; }

/* La zone de dépôt. Le filet TIRETÉ est le seul de l'écran : il dit « rien
   n'est encore là », et cesse dès qu'un fichier est chargé. */
.appgrid .iu-depot {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    border: 1px dashed var(--et-info-bord); background: var(--et-surface-2);
    padding: 26px;
}
/* 28 px : c'est un GLYPHE, pas du texte — l'échelle typographique ne le régit
   pas, et à cette taille il clôt de toute façon le palier « grand texte ».
   --et-form-blue et non --et-info : les deux valent le même bleu de contenu,
   et cette feuille ne le nomme que d'une façon. */
.appgrid .iu-depot-ico { font-size: 28px; color: var(--et-form-blue); }
.appgrid .iu-depot-lbl { font-size: 14px; }
.appgrid .iu-depot-champ { max-width: 360px; }

.appgrid .iu-fichier {
    display: flex; align-items: center; gap: 16px;
    border: 1px solid var(--et-form-border); background: var(--et-surface-2);
    padding: 16px;
}
.appgrid .iu-fichier-ico {
    width: 42px; height: 42px; flex: none;
    background: var(--et-succes-bg); color: var(--et-succes-ink);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700;
}
.appgrid .iu-fichier-corps { flex: 1; min-width: 160px; }
.appgrid .iu-fichier-nom { font-size: 14px; font-weight: 600; font-family: var(--et-font-mono); }
.appgrid .iu-fichier-meta { font-size: 13px; color: var(--et-muted); margin-top: 3px; }

/* Les modes d'import : des cartes à choisir, pas des radios déguisées — le
   texte de chacune est ce qui décide, et il ne tiendrait pas sur une étiquette. */
.appgrid .iu-modes {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px;
}
.appgrid .iu-mode {
    text-align: left; cursor: pointer;
    background: var(--et-surface); border: 1.5px solid var(--et-form-border);
    padding: 14px 16px;
    display: flex; gap: 12px; align-items: flex-start;
}
.appgrid .iu-mode.est-choisi { background: var(--et-tint); border-color: var(--et-form-blue); }
.appgrid .iu-mode-puce {
    width: 16px; height: 16px; flex: none; margin-top: 2px;
    border: 1.5px solid var(--et-form-border); background: var(--et-surface);
}
.appgrid .iu-mode.est-choisi .iu-mode-puce {
    border-color: var(--et-form-blue); background: var(--et-form-blue);
    box-shadow: inset 0 0 0 3px var(--et-sur-aplat);
}
.appgrid .iu-mode-lbl  { display: block; font-size: 14px; font-weight: 600; }
.appgrid .iu-mode-desc { display: block; font-size: 13px; color: var(--et-muted); margin-top: 3px; line-height: 1.45; }

/* Les modèles de correspondance déjà enregistrés. */
.appgrid .iu-modele {
    border: 1px solid var(--et-form-border); padding: 12px 14px;
    display: flex; align-items: center; gap: 10px;
}
.appgrid .iu-modele-corps { flex: 1; }
.appgrid .iu-modele-nom  { font-size: 13px; font-weight: 600; }
.appgrid .iu-modele-meta { font-size: 12px; color: var(--et-muted); margin-top: 3px; }
.appgrid .iu-modele-note { font-size: 13px; color: var(--et-muted); }
.appgrid .iu-modele-pied { font-size: 12px; color: var(--et-muted); margin-top: 10px; }

/* Le lien d'action d'une ligne de modèle. C'est le bleu de CONTENU, pas une
   couleur d'état : un lien a le droit de le porter en encre. */
.appgrid .iu-lien { color: var(--et-form-blue); font-weight: 700; }

/* ---------------------------------------------------------------------------
   6. ÉTAPE 2 — CORRESPONDANCE
   --------------------------------------------------------------------------- */

.appgrid .iu-barre-etape {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.appgrid .iu-barre-actions { display: flex; gap: 8px; }

.appgrid .iu-resume { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.appgrid .iu-resume-case {
    display: flex; align-items: center; gap: 8px;
    background: var(--et-surface); border: 1px solid var(--et-form-border);
    padding: 7px 14px; font-size: 13px;
}
.appgrid .iu-resume-case.est-manquant {
    background: var(--et-avertissement-bg); border-color: var(--et-avertissement-bord);
    color: var(--et-avertissement-ink);
}
.appgrid .iu-resume-nb  { font-weight: 600; }
.appgrid .iu-resume-lbl { color: var(--et-muted); }
.appgrid .iu-resume-case.est-manquant .iu-resume-lbl { color: inherit; }

/* La pastille de 8 px. Comme MARQUE et non comme encre, la couleur d'état
   garde sa valeur pleine — la charte ne l'interdit que dans « color: ». */
.appgrid .iu-puce { width: 8px; height: 8px; flex: none; }
.appgrid .iu-puce.est-ok       { background: var(--et-succes); }
.appgrid .iu-puce.est-neutre   { background: var(--et-muted); }
.appgrid .iu-puce.est-manquant { background: var(--et-avertissement-mark); }
.appgrid .iu-puce.est-vide     { background: var(--et-form-border); }

/* Le bloc des champs obligatoires sans source. Le liseré gauche prend
   --et-avertissement-mark et non --et-avertissement : en marque graphique,
   l'ambre de charte ne tient pas le seuil de 3:1 (2,15:1). */
.appgrid .iu-manquants {
    background: var(--et-surface);
    border: 1px solid var(--et-avertissement-bord);
    border-left: 4px solid var(--et-avertissement-mark);
    margin-bottom: 18px;
}
.appgrid .iu-manquants-tete {
    padding: 14px 18px;
    border-bottom: 1px solid var(--et-avertissement-bord);
    background: var(--et-avertissement-bg);
}
.appgrid .iu-manquants-titre { font-size: 14px; font-weight: 700; color: var(--et-avertissement-ink); }
.appgrid .iu-manquants-sous  { font-size: 13px; color: var(--et-avertissement-ink); margin-top: 4px; line-height: 1.5; }

.appgrid .iu-manquant { padding: 16px 18px; border-bottom: 1px solid var(--et-hairline); }
.appgrid .iu-manquant:last-child { border-bottom: 0; }
.appgrid .iu-manquant-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.appgrid .iu-manquant-cle  { font-size: 14px; font-weight: 700; }
.appgrid .iu-manquant-corps { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; }
.appgrid .iu-manquant-col  { flex: 1 1 240px; min-width: 200px; }
.appgrid .iu-manquant-col.est-defaut { flex: 1 1 260px; min-width: 220px; }
.appgrid .iu-manquant-duo  { display: flex; gap: 8px; }
.appgrid .iu-sans-defaut {
    flex: 1 1 260px; min-width: 220px; font-size: 13px;
    color: var(--et-avertissement-ink); background: var(--et-avertissement-bg);
    border: 1px solid var(--et-avertissement-bord); padding: 10px 12px;
}

/* Le libellé de sous-champ, en capitales espacées. */
.appgrid .iu-lbl {
    font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--et-muted); margin-bottom: 6px;
}

/* Les étiquettes de type et de contrainte. */
.appgrid .iu-etiq {
    padding: 3px 7px; font-size: 12px; font-weight: 700; text-transform: uppercase;
    background: var(--et-surface-2); color: var(--et-muted);
}
.appgrid .iu-etiq.est-requise { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }
.appgrid .iu-etiq.est-attendue { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.appgrid .iu-etiq.est-auto { background: var(--et-info-bg); color: var(--et-form-blue); text-transform: none; }

/* Les valeurs par défaut appliquées, en jetons retirables. */
.appgrid .iu-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.appgrid .iu-chips-lbl { font-size: 13px; color: var(--et-muted); font-weight: 600; }
.appgrid .iu-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--et-info-bg); border: 1px solid var(--et-info-bord);
    color: var(--et-form-blue);
    padding: 5px 10px; font-size: 13px; font-weight: 600;
}
.appgrid .iu-chip-x {
    background: transparent; border: 0; color: var(--et-form-blue);
    font-weight: 700; cursor: pointer; padding: 0 2px;
}

/* Le tableau de correspondance. Ce n'est pas une <table> : chaque rangée porte
   un sélecteur et un aperçu multi-lignes, et se replie en colonne sur mobile —
   ce qu'une table ne fait pas sans réécrire son modèle de mise en page. */
.appgrid .iu-corresp-tete {
    display: flex; gap: 16px; padding: 12px 18px;
    background: var(--et-surface-2); border-bottom: 1px solid var(--et-form-border);
    font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--et-muted);
}
.appgrid .iu-corresp-ligne {
    display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap;
    padding: 14px 18px; border-bottom: 1px solid var(--et-hairline);
    background: var(--et-surface);
}
.appgrid .iu-corresp-ligne.est-ignoree { background: var(--et-surface-2); }
.appgrid .iu-corresp-ligne:last-child { border-bottom: 0; }

.appgrid .iu-c-source { flex: 1 1 220px; min-width: 180px; display: flex; gap: 10px; align-items: flex-start; }
.appgrid .iu-c-champ  { flex: 1 1 240px; min-width: 200px; }
.appgrid .iu-c-apercu { flex: 1 1 220px; min-width: 200px; display: flex; flex-direction: column; gap: 5px; }
.appgrid .iu-corresp-tete .iu-c-source,
.appgrid .iu-corresp-tete .iu-c-champ,
.appgrid .iu-corresp-tete .iu-c-apercu { min-width: 0; display: block; }

.appgrid .iu-c-source .iu-puce { margin-top: 6px; }
.appgrid .iu-c-nom  { display: block; font-size: 14px; font-weight: 600; color: var(--et-ink); }
.appgrid .iu-corresp-ligne.est-ignoree .iu-c-nom { color: var(--et-muted); }
.appgrid .iu-c-rang { display: block; font-size: 12px; color: var(--et-muted); margin-top: 3px; font-family: var(--et-font-mono); }
.appgrid .iu-c-etiqs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 7px; }
.appgrid .iu-c-val {
    font-family: var(--et-font-mono); font-size: 13px; color: var(--et-muted);
    background: var(--et-surface-2); padding: 4px 9px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* La liste de contrôle des champs obligatoires, en volet. */
.appgrid .iu-check { display: flex; flex-direction: column; gap: 12px; }
.appgrid .iu-check-ligne { display: flex; align-items: flex-start; gap: 10px; }
.appgrid .iu-check-ico {
    width: 18px; height: 18px; flex: none; margin-top: 1px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    background: var(--et-avertissement-bg); color: var(--et-avertissement-ink);
}
.appgrid .iu-check-ligne.est-ok .iu-check-ico { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.appgrid .iu-check-cle  { display: block; font-size: 13px; font-weight: 600; color: var(--et-avertissement-ink); }
.appgrid .iu-check-ligne.est-ok .iu-check-cle { color: var(--et-muted); }
.appgrid .iu-check-type { display: block; font-size: 12px; color: var(--et-muted); margin-top: 2px; }
.appgrid .iu-check-src  { display: block; font-size: 12px; margin-top: 3px; color: var(--et-avertissement-ink); }
.appgrid .iu-check-ligne.est-ok .iu-check-src { color: var(--et-succes-ink); }

.appgrid .iu-modeles-liste { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.appgrid .iu-modele-mini {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--et-form-border); padding: 8px 12px;
}
.appgrid .iu-modele-mini-nom {
    flex: 1; font-size: 13px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   7. ÉTAPE 3 — CONTRÔLE
   --------------------------------------------------------------------------- */

.appgrid .iu-controle { max-width: 900px; }
.appgrid .iu-controle-sous { font-size: 14px; color: var(--et-muted); margin-top: 5px; margin-bottom: 20px; }

.appgrid .iu-bloc { background: var(--et-surface); border: 1px solid var(--et-form-border); margin-bottom: 18px; }
.appgrid .iu-bloc-tete {
    padding: 16px 20px; border-bottom: 1px solid var(--et-form-border);
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.appgrid .iu-bloc-titre { font-size: 14px; font-weight: 700; }
.appgrid .iu-bloc-sous  { font-size: 13px; color: var(--et-muted); margin-top: 3px; }
.appgrid .iu-bloc-pied  { padding: 12px 20px; font-size: 13px; color: var(--et-muted); }

.appgrid .iu-filtres { display: flex; gap: 6px; flex-wrap: wrap; }
.appgrid .iu-filtre {
    display: flex; align-items: center; gap: 7px; cursor: pointer;
    padding: 7px 12px; font-size: 13px; font-weight: 600;
    background: var(--et-surface); border: 1px solid var(--et-form-border);
    color: var(--et-form-label);
}
.appgrid .iu-filtre.est-actif {
    background: var(--et-form-blue); border-color: var(--et-form-blue);
    color: var(--et-sur-aplat);
}
.appgrid .iu-filtre-nb { font-weight: 600; color: var(--et-muted); }
.appgrid .iu-filtre.est-actif .iu-filtre-nb { color: var(--et-sur-ardoise); }

.appgrid .iu-liste-defile { overflow-x: auto; }
.appgrid .iu-liste { min-width: 640px; }
.appgrid .iu-liste-tete {
    display: flex; gap: 14px; padding: 10px 20px;
    background: var(--et-surface-2); border-bottom: 1px solid var(--et-form-border);
    font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--et-muted);
}
.appgrid .iu-liste-ligne {
    display: flex; gap: 14px; align-items: center;
    padding: 12px 20px; border-bottom: 1px solid var(--et-hairline); font-size: 13px;
}
.appgrid .iu-liste-vide { padding: 18px 20px; font-size: 13px; color: var(--et-muted); }

.appgrid .iu-l-rang   { flex: 0 0 56px; font-family: var(--et-font-mono); color: var(--et-muted); font-size: 12px; }
.appgrid .iu-l-code   { flex: 0 0 130px; font-family: var(--et-font-mono); font-weight: 600; color: var(--et-ink);
                        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appgrid .iu-l-detail { flex: 1 1 240px; color: var(--et-muted);
                        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appgrid .iu-l-sort   { flex: 0 0 120px; }
.appgrid .iu-liste-ligne.est-erreur .iu-l-code,
.appgrid .iu-liste-ligne.est-erreur .iu-l-detail { color: var(--et-danger-ink); }

/* LA PASTILLE DE SORT, ET LES DEUX CONTRASTES QUE CE LOT CORRIGE.
   Avant ce portage, « À créer » posait --et-succes sur --et-succes-bg (3,16:1)
   et « Anomalie » --et-danger sur --et-danger-badge-bg (4,22:1) : sous AA pour
   du 12 px gras. Le rang -ink est fait pour ça. */
.appgrid .iu-sort {
    display: inline-block; padding: 3px 8px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
    background: var(--et-surface-2); color: var(--et-muted);
}
.appgrid .iu-sort.est-creation { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.appgrid .iu-sort.est-maj      { background: var(--et-info-bg); color: var(--et-form-blue); }
.appgrid .iu-sort.est-anomalie { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }

/* La bascule « ignorer les lignes en anomalie » : même grammaire qu'une carte
   de mode, parce que c'est le même geste — un choix qui se lit avant de se
   cocher. */
.appgrid .iu-bascule {
    width: 100%; text-align: left; cursor: pointer;
    background: var(--et-surface); border: 1.5px solid var(--et-form-border);
    padding: 16px 18px; display: flex; gap: 12px; align-items: flex-start;
}
.appgrid .iu-bascule.est-active { border-color: var(--et-form-blue); }
.appgrid .iu-bascule-case {
    width: 18px; height: 18px; flex: none; margin-top: 1px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--et-form-border); background: var(--et-surface);
    color: var(--et-sur-aplat); font-size: 12px; font-weight: 700;
}
.appgrid .iu-bascule.est-active .iu-bascule-case {
    border-color: var(--et-form-blue); background: var(--et-form-blue);
}
.appgrid .iu-bascule-lbl  { display: block; font-size: 14px; font-weight: 600; }
.appgrid .iu-bascule-note { display: block; font-size: 13px; color: var(--et-muted); margin-top: 3px; }

/* ---------------------------------------------------------------------------
   8. ÉTAPE 4 — RÉSULTAT
   --------------------------------------------------------------------------- */

.appgrid .iu-bilan {
    max-width: 720px; margin: 10px auto 0;
    background: var(--et-surface); border: 1px solid var(--et-form-border);
    padding: 40px; text-align: center;
}
.appgrid .iu-bilan-ico {
    width: 56px; height: 56px; margin: 0 auto 18px;
    background: var(--et-succes-bg); color: var(--et-succes-ink);
    font-size: 24px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.appgrid .iu-bilan-titre { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; }
.appgrid .iu-bilan-sous  { font-size: 14px; color: var(--et-muted); margin-top: 6px; }

.appgrid .iu-bilan-grille {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px; margin: 26px 0;
}
.appgrid .iu-bilan-case {
    background: var(--et-surface-2); border: 1px solid var(--et-form-border); padding: 16px;
}
.appgrid .iu-bilan-nb  { font-size: 24px; font-weight: 700; color: var(--et-muted); }
.appgrid .iu-bilan-nb.est-cree    { color: var(--et-succes-ink); }
.appgrid .iu-bilan-nb.est-maj     { color: var(--et-form-blue); }
.appgrid .iu-bilan-nb.est-rejet   { color: var(--et-avertissement-ink); }
.appgrid .iu-bilan-lbl { font-size: 13px; color: var(--et-muted); margin-top: 3px; }
.appgrid .iu-bilan-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   9. PIED D'ACTIONS, BOUTON D'ENGAGEMENT, TOAST
   --------------------------------------------------------------------------- */

.appgrid .iu-pied {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--et-form-border);
}
.appgrid .iu-pied-note { flex: 1; min-width: 40px; font-size: 13px; color: var(--et-muted); }

/* Le bouton qui engage l'étape suivante. Un seul par vue — c'est la règle de la
   charte —, et il porte le bleu de contenu parce que l'écriture n'a lieu qu'à
   la dernière étape, où le libellé la nomme.

   REBASÉ SUR .mx-btn LE 2026-09-08 : ces deux règles étaient portées par `.btn`,
   c'est-à-dire qu'elles empruntaient à Bootstrap leur hauteur, leur rembourrage
   et leur rayon, et n'en repeignaient que le fond. L'écran ayant quitté `.btn`,
   elles auraient cessé de s'appliquer sans rien signaler — un bouton
   d'engagement redevenu gris passe inaperçu jusqu'à ce qu'on le cherche.

   LE BLEU EST CONSERVÉ, et ce n'est pas un oubli : la charte réserve l'orange au
   geste qui engage, et l'écriture n'a lieu qu'à la dernière étape de cet
   assistant. Un « Suivant » orange à l'étape 1 promettrait ce qu'il ne fait pas. */
/* DEUX BOUTONS DESSINÉS ICI ONT DISPARU (2026-09-10) : .iu-btn-primaire, un
   aplat bleu plein, et .iu-btn-doux, son cousin délavé. Le gabarit nomme déjà
   ces deux rôles — .mx-btn-cta pour LE geste d'engagement de l'écran, un seul,
   et .mx-btn-blanc pour une action réelle mais secondaire — et la charte réserve
   l'orange au premier. Un second aplat plein, d'une autre couleur, ne dit plus
   lequel des deux fait avancer. */

/* Retirer un modèle enregistré. `.mx-btn-danger` du gabarit est un bouton bordé,
   trop lourd pour une croix posée au bout d'un nom dans une liste ; c'est le
   `.mx-btn` nu, à l'encre du rang danger — jamais la teinte pleine, qui ne tient
   pas AA à cette taille. */
.appgrid .mx-btn.iu-lien-retirer { color: var(--et-danger-ink); font-weight: 700; }

/* Trois utilitaires que le gabarit ne nomme pas, employés par cet écran seul. */
.appgrid .iu-nowrap { white-space: nowrap; }
.appgrid .iu-large { width: 100%; }
.appgrid .iu-espace { margin-top: 12px; }

.appgrid .iu-toast {
    position: fixed; right: 24px; bottom: 24px;
    background: var(--et-ink); color: var(--et-surface);
    padding: 12px 18px; font-size: 13px; font-weight: 600;
    box-shadow: var(--et-ombre-flottant); z-index: 1080;
}

/* ---------------------------------------------------------------------------
   10. PALIERS — docs/conventions-responsive.md
   Recette à 390 / 768 / 1280 / 1600 px, paliers pris dans l'échelle retenue.
   --------------------------------------------------------------------------- */

/* RÈGLE TACTILE (lot 02, docs/cibles-tactiles.md) : sous 1024 px, aucune cible
   interactive ne descend sous 44 px, et une cible ne rétrécit jamais. Les
   contrôles de gabarit sont repris par lot02 ; ceux de cet écran lui sont
   propres, donc à sa charge — les cartes de mode, les filtres d'aperçu et la
   bascule. Les boutons du fil d'étapes ne sont plus de ceux-là : le fil est
   maintenant celui du gabarit, qui porte sa propre règle tactile. */
@media (max-width: 1024px) {
    .appgrid .iu-filtre { min-height: 44px; }
    .appgrid .iu-mode,
    .appgrid .iu-bascule { min-height: 44px; }
    .appgrid .iu-chip-x { min-width: 44px; min-height: 44px; justify-content: center; }
}

@media (max-width: 720px) {
    /* Les deux colonnes se suivent au lieu de se partager la largeur : à cette
       largeur, un volet de 280 px prend la moitié de l'écran pour une
       checklist. */
    .appgrid .iu-col-cote,
    .appgrid .iu-col-cote-pile { flex: 1 1 100%; }

    /* L'en-tête du tableau de correspondance disparaît : ses trois libellés ne
       coiffent plus rien puisque les rangées se replient en colonne. Chaque
       cellule reste lisible seule — le nom de colonne, le sélecteur, l'aperçu. */
    .appgrid .iu-corresp-tete { display: none; }
    .appgrid .iu-corresp-ligne { gap: 12px; }

    .appgrid .iu-bilan { padding: 28px 20px; }
}

@media (max-width: 560px) {
    .appgrid .iu-corps { padding: 14px; }
    /* Le geste principal prend la ligne entière plutôt que de se tronquer. */
    .appgrid .iu-pied .mx-btn-cta { flex: 1 1 100%; }
    .appgrid .iu-bilan-actions .mx-btn { flex: 1 1 100%; }
    .appgrid .iu-toast { left: 16px; right: 16px; bottom: 16px; }
}

/* IMPRESSION : le rapport final est la seule chose qu'on imprime ici. Le pied
   d'actions et le toast n'ont rien à y faire — le fil des étapes non plus, et
   c'est désormais le gabarit qui le masque (modele-erp.css, @media print),
   puisque le fil lui appartient. */
@media print {
    .appgrid .iu-rappel,
    .appgrid .iu-pied,
    .appgrid .iu-toast { display: none !important; }
    .appgrid .iu-bilan { border: 0; padding: 0; }
}