/* ===========================================================================
   ecran-modele-impression.css — MODÈLE D'IMPRESSION DES PIÈCES DE VENTE (VNT-09).
   Préfixe .mi-*, propre à cet écran (docs/conventions-nommage.md).

   CE QUE CETTE FEUILLE PORTE, ET RIEN D'AUTRE
     La géométrie des deux colonnes — réglages à gauche, aperçu à droite —, les
     puces de souche, le tableau de conformité, et le cadre de l'aperçu. Tout ce
     qui est partagé (page, barre d'outils, rail d'onglets, formulaire dense,
     champs, groupes, modale) vient du gabarit .mx-* de modele-erp.css : une
     classe employée par deux écrans remonte en section 11 du gabarit, jamais
     l'inverse.

   AUCUNE COULEUR EN DUR — tout passe par les jetons --et-* d'easytech-theme.css
   (docs/couleurs-en-dur.md).

   AUCUNE RÈGLE @page NI @media print
     L'aperçu de cet écran n'est PAS une maquette HTML de la pièce : c'est le
     PDF, rendu par le vrai générateur dans un cadre. Il n'y a donc rien à
     mettre en page pour l'impression, et l'impression se fait depuis le
     visualiseur du cadre (window.etApercuPdf.imprimer). Une règle @page ici
     imposerait son format à l'impression de tous les écrans — voir
     window.etImpression dans easytime-shell.js.

   PALIERS : 1100 / 1024 / 720 / 560, pris dans l'échelle retenue de
   docs/conventions-responsive.md. Recette à 390 / 768 / 1280 / 1600.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. LES DEUX COLONNES.

   L'aperçu prend la place qui reste, et les réglages une largeur FIXE : une
   colonne de réglages élastique fait sauter la position de chaque case à
   chaque redimensionnement, et l'on ne retrouve plus la bascule qu'on vient de
   voir. C'est l'aperçu qui absorbe la variation — il n'a rien à retrouver.
   --------------------------------------------------------------------------- */
.mi-corps {
    /* FLEX ET NON GRILLE, POUR QUE L'APERÇU PASSE À LA LIGNE AU LIEU DE SE
       COMPRIMER. Une grille ne replie pas ses pistes : avec
       « 620px minmax(0, 1fr) », l'aperçu prenait ce qui restait, quoi qu'il
       reste — 167 px à 1101 px de fenêtre, une vignette. Or il n'existe aucune
       marche au-dessus de 1100 dans l'échelle retenue
       (560/640/720/1024/1100, docs/conventions-responsive.md) pour empiler
       plus tôt, et en ajouter une serait une décision de charte.

       Le passage à la ligne rend le palier inutile : c'est la PLACE
       DISPONIBLE qui décide, pas la largeur de la fenêtre — ce qui est plus
       juste, puisque le rail latéral change de largeur sous 1024 px et que
       deux fenêtres de même largeur n'offrent donc pas le même contenu.

       Mesuré, à 1000 px de hauteur : côte à côte à partir de 1260 px de
       fenêtre (aperçu 326 px), donc 1280 et 1600 — les deux largeurs de
       recette au-dessus de 1100 — gardent la vue simultanée qui est tout
       l'objet de cet écran ; 1250 et en dessous empilent, et l'aperçu y prend
       alors TOUTE la largeur (950 px à 1250, contre 266 px avant). La bande
       1101–1250 ne comprime plus rien : elle empile. */
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-start;
}

.mi-reglages {
    /* 620 px FIXES : la colonne héberge le rail d'onglets du gabarit, qui prend
       232 px à lui seul (.mx-fiche), et la grille dense qui suit a une colonne
       d'étiquette de 158 px — la règle la plus structurante de la passation.
       À 430 px il ne restait que 166 px au panneau : chaque étiquette se
       repliait mot par mot et la page faisait 4375 px de haut, contre 1402
       aujourd'hui. 620 est le premier chiffre où une ligne d'étiquette et sa
       commande tiennent côte à côte.

       Et FIXES, pas élastiques : une colonne de réglages qui respire fait
       sauter la position de chaque case à chaque redimensionnement, et l'on ne
       retrouve plus la bascule qu'on vient de voir. C'est l'aperçu qui absorbe
       la variation — il n'a rien à retrouver. */
    flex: 0 0 620px;
    min-width: 0;
    background: var(--et-surface);
    border: 1px solid var(--et-hairline);
}

/* Le rail d'onglets du gabarit vit ici : il lui faut un plancher, sinon la
   colonne prend la hauteur du panneau le plus court et l'aperçu, à droite, se
   retrouve plus haut que ses réglages. */
.mi-reglages .mx-fiche { min-height: 560px; }

/* ---------------------------------------------------------------------------
   2. LA SOUCHE MONTRÉE — épinglée au-dessus des onglets.

   C'est le contexte de TOUS les autres réglages : une case cochée ne veut rien
   dire sans savoir de quelle souche on parle. Elle reste donc visible quel que
   soit l'onglet ouvert.
   --------------------------------------------------------------------------- */
.mi-souches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--et-hairline);
}

.mi-souche {
    min-height: 30px;
    padding: 4px 10px;
    background: var(--et-surface);
    border: 1px solid var(--et-filet-fort);
    border-radius: var(--et-r-btn);
    font-family: inherit;
    font-size: var(--et-fs-cell);
    color: var(--et-ink);
    cursor: pointer;
}

.mi-souche:hover { background: var(--et-rang); }

.mi-souche.est-actif {
    background: var(--et-tint);
    border-color: var(--et-form-blue);
    color: var(--et-form-blue-encre);
    font-weight: 700;
}

/* UN LISERÉ MARQUE LES SOUCHES QUI ONT UN MODÈLE PROPRE. Sans lui, rien ne
   distingue une souche réglée d'une souche qui suit le défaut — et c'est
   exactement ce qu'il faut savoir avant d'« appliquer à toutes ». */
.mi-souche.est-reglee { border-bottom: 3px solid var(--et-form-blue); }

/* ---------------------------------------------------------------------------
   3. LES BLOCS DE RÉGLAGE dans un panneau d'onglet.
   --------------------------------------------------------------------------- */
.mi-bloc { padding: 4px 14px 14px; }
.mi-bloc + .mi-bloc { border-top: 1px solid var(--et-hairline); padding-top: 12px; }

/* Une bascule : la case, puis son libellé, puis son aide sur la ligne du
   dessous. L'aide n'est pas une infobulle — un réglage dont l'effet ne se
   devine pas se laisse coché au hasard. */
.mi-bascule {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 30px;
    padding: 5px 0;
    font-size: var(--et-fs-cell);
    color: var(--et-ink);
    cursor: pointer;
}

.mi-bascule input { flex: none; margin-top: 2px; }
.mi-bascule-txt { min-width: 0; }
.mi-bascule-aide {
    display: block;
    margin-top: 1px;
    font-size: var(--et-fs-lab);
    line-height: 1.4;
    color: var(--et-muted);
}

/* Une bascule inerte : la colonne ne s'imprimera jamais sur cette souche. Elle
   reste VISIBLE et désactivée, avec la raison en dessous — la retirer ferait
   croire que le réglage n'existe pas, et la laisser active ferait croire qu'il
   agit. */
.mi-bascule.est-inerte { color: var(--et-faint); cursor: default; }

.mi-grille2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Un curseur de marge, avec sa valeur en chasse fixe : la valeur bouge, la
   largeur de son emplacement non, sinon le curseur se décale en glissant. */
.mi-marge { display: block; font-size: var(--et-fs-lab); color: var(--et-muted); }
.mi-marge-val {
    float: right;
    font-family: var(--et-font-mono);
    font-size: var(--et-fs-lab);
    color: var(--et-ink);
}
.mi-marge input[type="range"] { width: 100%; min-height: 24px; }

/* Les gabarits de marge : trois jeux nommés, plus vite compris que quatre
   curseurs. */
.mi-puces { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.mi-puce {
    min-height: 28px;
    padding: 0 10px;
    background: var(--et-surface);
    border: 1px solid var(--et-filet-fort);
    border-radius: var(--et-r-btn);
    font-family: inherit;
    font-size: var(--et-fs-lab);
    color: var(--et-ink);
    cursor: pointer;
}
.mi-puce:hover { background: var(--et-rang); }
.mi-puce.est-actif {
    background: var(--et-tint);
    border-color: var(--et-form-blue);
    color: var(--et-form-blue-encre);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   4. LES BLOCS DE BAS DE PIÈCE — présence ET ordre.

   L'ordre n'est pas cosmétique : ce qui vient d'abord est ce que le lecteur
   cherche d'abord, et cela n'est pas le même sur une facture (où payer) et sur
   un devis (où signer). Deux boutons de déplacement plutôt qu'un glisser-
   déposer : trois lignes ne valent pas une dépendance, et le clavier y accède.
   --------------------------------------------------------------------------- */
.mi-ordre { display: flex; flex-direction: column; gap: 4px; }
.mi-ordre-rang {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 4px 8px;
    background: var(--et-surface-3);
    border: 1px solid var(--et-hairline);
    font-size: var(--et-fs-cell);
}
.mi-ordre-rang.est-inactif { color: var(--et-faint); background: var(--et-surface); }
.mi-ordre-num {
    flex: none;
    width: 16px;
    font-family: var(--et-font-mono);
    font-size: var(--et-fs-lab);
    color: var(--et-faint);
}
.mi-ordre-lbl { flex: 1; min-width: 0; }

/* LA CASE DE LA LIGNE, MESURÉE ICI — même piège que les bascules, autre
   conteneur. app.css pose « width: 100% » sur TOUT input ; la règle qui le
   défait (easycompta-modal.css) ne nomme que les conteneurs « *-bascule », et
   celui-ci ne l'est pas. La case prenait donc les 205 px de la ligne et
   .mi-ordre-lbl tombait à zéro : le libellé disparaissait, sur les trois rangs
   du bas de pièce. Tant que la mesure vit dans app.css, chaque conteneur qui
   porte une case doit la reprendre — c'est le vrai défaut, et il est plus haut
   que cet écran. */
.mi-ordre-rang > input[type="checkbox"] {
    flex: none;
    width: 17px;
    height: 17px;
    accent-color: var(--et-form-blue);
}
.mi-ordre-btns { flex: none; display: flex; gap: 2px; }

/* ---------------------------------------------------------------------------
   5. LA CONFORMITÉ — le tableau des mentions obligatoires.

   L'ENCRE D'ÉTAT N'EST JAMAIS ÉCRITE EN color: (docs/couleurs-en-dur.md) :
   l'icône est un pictogramme, donc un MARK — pour l'ambre, --et-avertissement
   ne passe pas le seuil graphique de 3:1 et prend --et-avertissement-mark. Le
   texte à côté reste l'encre ordinaire : il n'a pas à porter l'état, l'icône le
   porte déjà.
   --------------------------------------------------------------------------- */
.mi-controle {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 7px 0;
    font-size: var(--et-fs-cell);
}
.mi-controle + .mi-controle { border-top: 1px solid var(--et-rang); }
.mi-controle-ico { flex: none; width: 16px; text-align: center; margin-top: 1px; }
.mi-controle-ico.est-ok { color: var(--et-succes); }
.mi-controle-ico.est-tiede { color: var(--et-avertissement-mark); }
.mi-controle-ico.est-manque { color: var(--et-danger); }
.mi-controle-txt { flex: 1; min-width: 0; }
.mi-controle-detail {
    display: block;
    margin-top: 1px;
    font-size: var(--et-fs-lab);
    line-height: 1.4;
    color: var(--et-muted);
}

/* Le verdict, à côté du titre du bloc. Pastille : c'est la seule exception à
   l'angle droit de la charte. */
.mi-verdict {
    margin-left: auto;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: var(--et-fs-lab);
    font-weight: 600;
    white-space: nowrap;
}
.mi-verdict.est-ok { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.mi-verdict.est-tiede { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.mi-verdict.est-manque { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }

/* ---------------------------------------------------------------------------
   6. LES EXEMPLAIRES.
   --------------------------------------------------------------------------- */
.mi-exemplaire { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.mi-exemplaire-num {
    flex: none;
    width: 16px;
    font-family: var(--et-font-mono);
    font-size: var(--et-fs-lab);
    color: var(--et-faint);
}
.mi-exemplaire .mx-input { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------------------
   7. L'APERÇU — LE PDF, PAS UNE MAQUETTE.

   Le cadre affiche les octets que produirait l'impression, rendus par le vrai
   générateur. C'est ce qui garantit qu'il n'y a rien à découvrir sur le papier :
   un aperçu dessiné à part diverge du document au premier correctif, et le
   défaut ne se voit qu'au tirage — chez le client.
   --------------------------------------------------------------------------- */
.mi-apercu {
    /* 340 px est le PLANCHER en dessous duquel l'aperçu préfère passer à la
       ligne. Choisi par mesure et non au jugé : c'est le plus grand plancher
       qui laisse 1280 px de fenêtre en vue simultanée (l'aperçu y fait 346 px,
       ce qu'il faisait déjà). À 360 px, 1280 basculerait en empilé et perdrait
       le côte à côte sur la largeur d'écran la plus courante ; à 320 px, on
       garderait une bande à 326 px qui ne vaut pas mieux que l'empilement. */
    flex: 1 1 340px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--et-hairline);
    background: var(--et-surface);
}

/* La barre de l'aperçu est sur l'ardoise : c'est un bandeau d'outils, pas du
   contenu. Ses deux encres sont --et-sur-ardoise-plein (premier rang) et
   --et-sur-ardoise (second) — jamais un blanc écrit à la main. */
.mi-apercu-barre {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    padding: 7px 12px;
    background: var(--et-table-head);
    border-bottom: 1px solid var(--et-hairline);
}
.mi-apercu-t {
    flex: none;
    font-size: var(--et-fs-lab);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--et-sur-ardoise-plein);
}
.mi-apercu-fmt {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--et-fs-lab);
    color: var(--et-sur-ardoise);
}
.mi-apercu-actions { flex: none; display: flex; gap: 6px; margin-left: auto; }

.mi-apercu-cadre {
    /* Une feuille A4 à l'écran : le rapport 210 × 297 tenu par la hauteur, pour
       que le cadre ne rogne pas le bas de la pièce.

       *** flex: 0 0 auto, ET SURTOUT PAS flex: 1 ***
       « flex: 1 » vaut « flex-basis: 0% », et sur l'axe principal la base
       l'emporte sur `height`. Le cadre partait donc de zéro pour grandir dans
       une colonne dont la hauteur est dictée par son contenu — c'est-à-dire par
       lui : il n'y avait rien à remplir. Hauteur rendue : 150 px au lieu de 814,
       un bandeau au lieu d'une page, et le `height: 74vh` juste au-dessus ne
       servait à rien. Avec une base « auto » la hauteur reprend la main. */
    flex: 0 0 auto;
    height: 74vh;
    background: var(--et-surface-2);
}
.mi-apercu-iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Pendant la préparation et en cas d'échec : un état qui dit ce qui se passe.
   Un cadre vide se lit comme un aperçu qui ne marche pas. */
.mi-apercu-etat {
    display: grid;
    place-items: center;
    height: 100%;
    padding: 24px;
    text-align: center;
    font-size: var(--et-fs-cell);
    color: var(--et-muted);
}
.mi-apercu-etat.est-erreur { color: var(--et-danger-ink); }

/* ---------------------------------------------------------------------------
   8. CE QUI AGIT, ET CE QUI DORT.

   Un réglage que rien ne lit est pire que pas de réglage : on croit avoir
   configuré quelque chose. La liste est celle de ReglagesModeleImpression,
   tenue à la main côté API.
   --------------------------------------------------------------------------- */
.mi-etats { display: flex; flex-direction: column; gap: 5px; }
.mi-etat {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--et-fs-lab);
    line-height: 1.45;
}
.mi-etat-lbl { flex: 1; min-width: 0; color: var(--et-ink); }
.mi-etat-ou { display: block; color: var(--et-muted); }

/* ---------------------------------------------------------------------------
   9. LA TABLE D'« APPLIQUER À TOUTES LES SOUCHES ».

   Écrire cinq souches d'un geste sans montrer ce qu'on perd est le meilleur
   moyen de détruire un modèle réglé il y a six mois.
   --------------------------------------------------------------------------- */
.mi-ecarts { width: 100%; border-collapse: collapse; font-size: var(--et-fs-cell); }
.mi-ecarts th {
    padding: 5px 8px;
    background: var(--et-table-head);
    color: var(--et-sur-ardoise-plein);
    font-size: var(--et-fs-lab);
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.mi-ecarts td { padding: 6px 8px; border-bottom: 1px solid var(--et-rang); }
.mi-ecarts tr.est-ecrase td { background: var(--et-avertissement-bg); }

/* ---------------------------------------------------------------------------
   10. PALIERS — docs/conventions-responsive.md.
   --------------------------------------------------------------------------- */

/* Sous 1100 px, les deux colonnes n'ont plus la place d'être côte à côte : les
   réglages passent au-dessus de l'aperçu. Empilés, ils gardent leur largeur —
   c'est l'aperçu qui s'élargit. */
@media (max-width: 1100px) {
    /* PLEINE LARGEUR TOUTES LES DEUX, et ce n'est pas cosmétique : un
       « flex: 0 0 620px » ne rétrécit pas, donc sans cette reprise la colonne
       de réglages débordait la fenêtre à 390 px. Mesuré. */
    .mi-reglages,
    .mi-apercu { flex: 1 1 100%; }
    .mi-apercu-cadre { height: 62vh; }
}

/* RÈGLE TACTILE (lot 02, docs/cibles-tactiles.md) : sous 1024 px, aucune cible
   interactive de cet écran ne descend sous 44 px. Une cible ne rétrécit jamais. */
@media (max-width: 1024px) {
    .mi-souche,
    .mi-puce,
    .mi-bascule,
    .mi-ordre-rang { 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. */
    .mi-marge input[type="range"] { min-height: 44px; }
    .mi-reglages .mx-fiche { min-height: 0; }
}

@media (max-width: 720px) {
    .mi-grille2 { grid-template-columns: minmax(0, 1fr); }
    .mi-apercu-cadre { height: 56vh; }

    /* La barre de l'aperçu se replie : le format cède la place aux commandes,
       qui ne se replient jamais (docs/cibles-tactiles.md). */
    .mi-apercu-barre { flex-wrap: wrap; }
    .mi-apercu-fmt { flex-basis: 100%; }
}

@media (max-width: 560px) {
    .mi-bloc { padding: 4px 10px 12px; }
    .mi-souches { padding: 10px; }
    .mi-souche { flex: 1 1 auto; text-align: center; }
}