/* ============================================================================
   ÉCRAN « MODÈLE D'IMPRESSION DES PIÈCES D'ACHAT » (/app/achats/modele-impression) — .mia-*

   Sa propre feuille, son propre <link> dans App.razor, après modele-erp.css. Le formulaire
   (GroupeChamps, ChampFiche, .mx-form), les onglets de souche (.mx-vues) et les boutons
   viennent du gabarit. Ne vit ici que la géométrie des deux colonnes — réglages à gauche,
   aperçu PDF à droite — et ses quelques détails.

   PAS DE CLASSE .mi-* : ce sont celles de l'écran vente (ecran-modele-impression.css), et un
   écran ne dépend pas de la feuille d'un autre écran. Les deux se ressemblent ; le jour où un
   troisième en a l'usage, la mise en page monte au gabarit sous un seul nom.

   AUCUNE COULEUR EN DUR : jetons --et-* seulement. Paliers pris dans l'échelle retenue
   (docs/conventions-responsive.md).
   ============================================================================ */

.mia-attente { padding: 24px; color: var(--et-muted); font-size: 13px; }

.mia-souches { margin-bottom: 14px; }
.mia-souche-etat { font-size: 12px; color: var(--et-muted); white-space: nowrap; }
.mx-vue.est-actif .mia-souche-etat { color: var(--et-form-blue-d); }

/* LES DEUX COLONNES : réglages à largeur fixe, aperçu qui prend le reste — et passe à la ligne
   plutôt que de se comprimer (même raisonnement que l'écran vente : c'est la place disponible
   qui décide, pas la largeur de la fenêtre). */
.mia-corps { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
/* Mesuré au banc à 1280 px (rail déplié) : 560 + 420 dépassaient les ~980 px de contenu et
   l'aperçu passait SOUS les réglages — perdant la vue simultanée qui est l'objet de l'écran.
   480 + 380 tiennent côte à côte à 1280 et 1600 ; en dessous, l'aperçu passe à la ligne. */
.mia-reglages { flex: 0 1 480px; min-width: 0; padding-bottom: 8px; }
.mia-apercu { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; }

.mia-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mia-couleur { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--et-bord-champ); background: var(--et-surface); cursor: pointer; }
.mia-marge { max-width: 7rem; }

/* Le message du courriel : assez haut pour se relire sans défiler, en police de texte. */
.mia-message { min-height: 180px; padding: 8px 10px; line-height: 1.5; resize: vertical; }

/* Les mentions contrôlées : une ligne par mention, sa marque à gauche. Le manque se lit au
   filet ambre (le seul rang d'ambre qui tienne 3:1 en marque) et à l'icône, jamais à la seule
   couleur : le libellé dit « manquante ». */
.mia-controles { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mia-controle {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border: 1px solid var(--et-hairline); border-left-width: 4px; background: var(--et-surface);
}
.mia-controle.est-presente { border-left-color: var(--et-succes-ink); }
.mia-controle.est-manquante { border-left-color: var(--et-avertissement-mark); background: var(--et-avertissement-bg); }
.mia-controle.est-a-verifier { border-left-color: var(--et-form-blue); }
.mia-controle > .bi { font-size: 16px; flex: 0 0 auto; }
.mia-controle.est-presente > .bi { color: var(--et-succes-ink); }
.mia-controle.est-manquante > .bi { color: var(--et-avertissement-ink); }
.mia-controle.est-a-verifier > .bi { color: var(--et-lien); }
.mia-controle-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mia-controle-lib { font-size: 13px; font-weight: 600; color: var(--et-ink); }
.mia-controle-detail { font-size: 12px; color: var(--et-muted); }
.mia-controle.est-manquante .mia-controle-detail { color: var(--et-avertissement-ink); }
.mia-pied { min-height: 72px; padding: 8px 10px; line-height: 1.5; resize: vertical; }
.mia-jetons { display: flex; flex-wrap: wrap; gap: 6px; }
.mia-jeton {
    min-height: 32px; padding: 0 10px; border: 1px dashed var(--et-form-blue); background: var(--et-tint);
    color: var(--et-form-blue-d); font-family: var(--et-font-mono); font-size: 12px; cursor: pointer;
}
.mia-jeton:hover { border-style: solid; }
.mia-jeton:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 1px; }

.mia-bascules { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.mia-bascule { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: 13px; color: var(--et-ink); cursor: pointer; }
.mia-bascule input { width: 18px; height: 18px; accent-color: var(--et-form-blue); flex: none; }
.mia-bascule.est-inerte { color: var(--et-muted); cursor: default; }

/* L'APERÇU : une barre, puis le PDF à la hauteur d'une page A4 vue en entier sur un écran de
   bureau. Sous 720 px il garde une hauteur lisible plutôt que la proportion A4. */
.mia-apercu-barre {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
    padding: 10px 14px; border-bottom: 1px solid var(--et-hairline);
}
.mia-apercu-titre { font-size: 14px; font-weight: 600; color: var(--et-ink); }
.mia-apercu-sous { font-size: 12px; color: var(--et-muted); flex: 1 1 auto; }
.mia-apercu-cadre { width: 100%; height: 980px; border: 0; background: var(--et-rang); }
.mia-apercu-vide { padding: 40px 16px; text-align: center; font-size: 13px; color: var(--et-muted); }

@media (max-width: 720px) {
    .mia-reglages { flex-basis: 100%; }
    .mia-apercu-cadre { height: 70vh; }
}

@media (max-width: 1024px) {
    .mia-bascule, .mia-jeton, .mia-controle .mx-btn { min-height: 44px; }
}