/* ===========================================================================
   FEUILLE D'ÉCRAN — Intégration ERP d'EasyPOS
   Écran : Components/Pages/App/IntegrationErp.razor   →   /app/pos/integration

   Une feuille par écran, chargée APRÈS modele-erp.css : c'est la règle du dépôt
   depuis que la queue de modele-erp.css est devenue le point de collision de
   toutes les branches qui ajoutaient un écran (CLAUDE.md). Elle ne redéfinit
   rien du gabarit — l'en-tête d'écran (.ecran-tete / .ecran-fil / .ecran-resume)
   et les contrôles (.mx-btn, .mx-input, .mx-select) restent ceux du dépôt.

   *** AUCUNE COULEUR EN DUR. ***
   Le handoff donne sa palette en hexadécimal parce qu'un prototype n'a pas de
   jetons. Ici les vingt valeurs deviennent des ALIAS LOCAUX dérivés des jetons
   --et-* : la charte reste la source unique, et le mode sombre (qui redéfinit
   les jetons, pas cette feuille) suit tout seul. Un hexadécimal réintroduit ici
   sortirait cet écran de la bascule de charte sans que rien ne le signale.

   GÉOMÉTRIE : les paliers viennent de l'échelle retenue
   (docs/conventions-responsive.md) — 1100 px pour la bascule à une colonne de la
   configuration, 1024 px pour le rail réduit aux icônes. Le 1180/900 du
   prototype n'est pas sur l'échelle : deux écrans voisins basculeraient à deux
   largeurs différentes, ce qui se voit au redimensionnement.
   =========================================================================== */

/*  INTÉGRATION ERP — feuille d'écran.

    Traduit les styles en ligne du prototype (contrainte de l'outil de design) en
    classes, dans l'esprit des blocs .tbl-* / .mx-* du dépôt. Les valeurs sont
    celles du prototype : ne pas réinterpréter.

    À charger après easytech-theme.css. Les contrôles (.mx-btn, .mx-input, .mx-select)
    et l'en-tête d'écran (.ecran-tete, .ecran-fil, .ecran-resume) viennent du dépôt.
*/

.intg {
    /* Les alias locaux, tous dérivés de la charte. Ils existent pour garder les
       noms du handoff lisibles dans le reste de la feuille — pas pour introduire
       une seconde palette. */
    --intg-fond:        var(--et-surface-2);
    --intg-surface:     var(--et-surface);
    --intg-bord:        var(--et-filet-fort);
    --intg-sep:         var(--et-hairline);
    --intg-filet:       var(--et-rang);
    --intg-txt:         var(--et-ink);
    --intg-txt-2:       var(--et-muted);
    --intg-txt-3:       var(--et-faint);
    --intg-txt-off:     var(--et-inerte);
    --intg-ardoise:     var(--et-table-head);
    --intg-marque:      var(--et-blue);
    --intg-accent:      var(--et-action);
    --intg-lien:        var(--et-lien);
    --intg-lien-fonce:  var(--et-lien-survol);
    --intg-actif-fond:  var(--et-navy-soft);
    --intg-bleu-clair:  var(--et-info-bg);
    --intg-bleu-bord:   var(--et-sur-ardoise);
    --intg-vert-fond:   var(--et-succes-bg);
    --intg-vert-bord:   var(--et-succes-bord);
    --intg-vert-txt:    var(--et-succes);
    --intg-vert-pt:     var(--et-ok);
    --intg-ambre-fond:  var(--et-avertissement-bg);
    --intg-ambre-fond-2:var(--et-avertissement-bg);
    --intg-ambre-bord:  var(--et-avertissement-bord);
    --intg-ambre-txt:   var(--et-avertissement-ink);
    --intg-rouge-fond:  var(--et-danger-badge-bg);
    --intg-rouge-bord:  var(--et-danger-bord);
    --intg-rouge-txt:   var(--et-danger);
    --intg-ligne-echec: var(--et-danger-badge-bg);
    --intg-ligne-off:   var(--et-surface-3);
    --intg-code-fond:   var(--et-surface-3);
    /* Sur fond ardoise, la charte a ses deux encres : une valeur en alerte et une
       valeur en erreur doivent rester lisibles sur foncé, ce que --et-danger ne
       fait pas. */
    --intg-sur-ardoise: var(--et-sur-ardoise);
    --intg-kpi-alerte:  var(--et-amber);
    --intg-kpi-mal:     var(--et-danger-bord);

    display: flex;
    align-items: stretch;
    background: var(--intg-fond);
    color: var(--intg-txt);
    font-family: var(--et-font);
    font-size: 14px;
}

/* ── rail ─────────────────────────────────────────────────────────────────── */
.intg-rail {
  flex: 0 0 244px;
  display: flex;
  flex-direction: column;
  background: var(--intg-surface);
  border-right: 1px solid var(--intg-bord);
}

/*  LE BLOC DE MARQUE ET LE PIED UTILISATEUR DU PROTOTYPE NE SONT PAS PORTÉS.
    Le prototype est une page seule : il devait donc porter sa propre identité et
    son propre compte. Ici l'écran vit dans la coquille du dépôt (ShellModule),
    qui rend déjà les deux — un second logo et un second nom d'utilisateur à
    quinze centimètres des premiers se liraient comme deux applications
    imbriquées. Le rail ci-dessous ne garde que ce qui lui appartient : l'ERP
    connecté, les six volets et l'état du lien. */

.intg-rail-section { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--intg-txt-2); }

.intg-rail-erp {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 16px 13px; border-bottom: 1px solid var(--intg-sep);
}
.intg-rail-erp-tete { display: flex; align-items: center; gap: 7px; }
.intg-rail-erp-nom { font-size: 14px; font-weight: 700; line-height: 1.3; }
.intg-rail-erp-proto { font-family: var(--et-font-mono); font-size: 12px; color: var(--intg-txt-2); }
.intg-rail-erp-note { font-size: 12px; line-height: 1.45; color: var(--intg-txt-3); }

.intg-mono-lbl {
  font-family: var(--et-font-mono); font-size: 12px;
  letter-spacing: .08em; color: var(--intg-txt-3);
}

.intg-pt { width: 8px; height: 8px; border-radius: 50%; display: block; flex-shrink: 0; }
.intg-pt-actif { background: var(--intg-vert-pt); }
.intg-pt-preparation { background: var(--intg-accent); }
.intg-pt-suspendu { background: var(--intg-txt-off); }
.intg-pt-coupe { background: var(--intg-rouge-txt); }

.intg-rail-nav { display: flex; flex-direction: column; padding: 8px 0; }

.intg-rail-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 16px; text-align: left; cursor: pointer;
  background: transparent; border: none; border-left: 3px solid transparent;
  color: var(--intg-txt); font-size: 13px;
}
.intg-rail-item:hover { background: var(--intg-fond); }
.intg-rail-item.est-actif {
  background: var(--intg-actif-fond);
  border-left-color: var(--intg-lien);
  color: var(--intg-lien-fonce);
  font-weight: 700;
}
.intg-rail-item i { font-size: 13px; width: 16px; }
.intg-rail-lbl { flex: 1; }

.intg-badge {
  font-family: var(--et-font-mono); font-size: 12px; font-weight: 700;
  padding: 1px 6px; border-radius: 0;
}
.intg-badge-rouge { background: var(--intg-rouge-fond); color: var(--intg-rouge-txt); }
.intg-badge-orange { background: var(--intg-ambre-fond); color: var(--intg-ambre-txt); }
.intg-badge-gris { background: var(--intg-fond); color: var(--intg-txt-2); }

.intg-rail-espace { flex: 1; }

.intg-rail-reseau {
  margin: 0 12px 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--intg-fond); border: 1px solid var(--intg-sep);
}
.intg-rail-reseau.est-coupe {
  background: var(--intg-ambre-fond-2);
  border-color: var(--intg-ambre-bord);
  color: var(--intg-ambre-txt);
}
.intg-rail-reseau.est-coupe .intg-mono-lbl,
.intg-rail-reseau.est-coupe .intg-rail-erp-note { color: inherit; }


/* ── corps ────────────────────────────────────────────────────────────────── */
.intg-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-x: hidden; }

.intg-tete { background: var(--intg-surface); border-bottom: 1px solid var(--intg-bord); }
.intg-tete-titre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.intg-tete-titre h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }

/* Pastilles. align-self est indispensable : dans un conteneur flex en colonne,
   justify-self ne fait rien et la pastille s'étire sur toute la cellule. */
.intg-pilule {
  align-self: flex-start; justify-self: start;
  padding: 2px 8px; border-radius: 0; white-space: nowrap;
  font-family: var(--et-font-mono); font-size: 12px; font-weight: 700; letter-spacing: .05em;
  border: 1px solid transparent;
}
.intg-pilule-actif,
.intg-pilule-plein,
.intg-pilule-ok { background: var(--intg-vert-fond); border-color: var(--intg-vert-bord); color: var(--intg-vert-txt); }
.intg-pilule-preparation,
.intg-pilule-partiel,
.intg-pilule-file,
.intg-pilule-sortant { background: var(--intg-ambre-fond); border-color: var(--intg-ambre-bord); color: var(--intg-ambre-txt); }
.intg-pilule-rejet,
.intg-pilule-ecart { background: var(--intg-rouge-fond); border-color: var(--intg-rouge-bord); color: var(--intg-rouge-txt); }
.intg-pilule-suspendu,
.intg-pilule-absent { background: var(--intg-fond); border-color: var(--intg-bord); color: var(--intg-txt-2); }
.intg-pilule-entrant,
.intg-pilule-erp { background: var(--intg-bleu-clair); border-color: var(--intg-bleu-bord); color: var(--intg-ardoise); }
.intg-pilule-socle { background: var(--intg-ardoise); border-color: var(--intg-ardoise); color: var(--et-surface); }

/* bande d'indicateurs */
.intg-kpis { display: flex; flex-wrap: wrap; padding: 0 22px; background: var(--intg-ardoise); color: var(--et-surface); }
.intg-kpi { flex: 1 1 130px; display: flex; flex-direction: column; gap: 3px; padding: 12px 0; }
.intg-kpi-lbl {
  font-family: var(--et-font-mono); font-size: 12px;
  letter-spacing: .07em; color: var(--intg-bleu-bord);
}
.intg-kpi-val { font-family: var(--et-font-mono); font-size: 17px; font-weight: 700; }
.intg-kpi-val.est-alerte { color: var(--intg-kpi-alerte); }
.intg-kpi-val.est-mal { color: var(--intg-kpi-mal); }
.intg-kpi-sous { font-size: 12px; color: var(--intg-sur-ardoise); }

/* bandeau contextuel */
.intg-bandeau {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 22px; font-size: 13px; line-height: 1.5;
  border-bottom: 1px solid;
}
.intg-bandeau-ambre { background: var(--intg-ambre-fond-2); border-color: var(--intg-ambre-bord); color: var(--intg-ambre-txt); }
.intg-bandeau-rouge { background: var(--intg-rouge-fond); border-color: var(--intg-rouge-bord); color: var(--intg-rouge-txt); }
.intg-bandeau-bleu { background: var(--intg-actif-fond); border-color: var(--intg-bleu-bord); color: var(--intg-lien-fonce); }

/* ── volets & cartes ──────────────────────────────────────────────────────── */
.intg-volet { padding: 18px 22px; display: flex; flex-direction: column; gap: 18px; }

.intg-carte { background: var(--intg-surface); border: 1px solid var(--intg-bord); }
.intg-carte-tete {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 13px 18px; border-bottom: 1px solid var(--intg-sep);
}
.intg-carte-titre {
  font-family: var(--et-font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .09em; color: var(--intg-ardoise); text-transform: uppercase;
}
.intg-carte-note { font-size: 12px; color: var(--intg-txt-3); }
.intg-carte-pied { padding: 11px 18px; font-size: 12px; line-height: 1.5; color: var(--intg-txt-3); }

/* ── tableaux ─────────────────────────────────────────────────────────────── */
/* Un tableau = un défilement horizontal propre + un min-width explicite.
   L'en-tête et les lignes DOIVENT partager le même grid-template-columns. */
.intg-tbl { overflow-x: auto; }

.intg-tbl-tete,
.intg-tbl-ligne { display: grid; gap: 12px; align-items: center; }

.intg-tbl-tete { padding: 9px 16px; background: var(--intg-ardoise); }
.intg-tbl-tete > span {
  font-family: var(--et-font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; color: var(--et-surface);
}
.intg-tbl-ligne { padding: 11px 16px; border-bottom: 1px solid var(--intg-filet); background: var(--intg-surface); }
.intg-tbl-ligne.est-cliquable { cursor: pointer; }
.intg-tbl-ligne.est-cliquable:hover { background: var(--intg-fond); }
.intg-tbl-ligne.est-echec { background: var(--intg-ligne-echec); }
.intg-tbl-ligne.est-inactif { background: var(--intg-ligne-off); }

.intg-num { text-align: right; font-family: var(--et-font-mono); font-size: 12px; }
.intg-num-fort { text-align: right; font-family: var(--et-font-mono); font-size: 15px; font-weight: 700; }
.intg-num-mal { color: var(--intg-rouge-txt); font-weight: 700; }
.intg-num-lent { color: var(--intg-ambre-txt); }

/* gabarits de colonnes, un par tableau du prototype */
.intg-g-flux { grid-template-columns: minmax(184px,1.3fr) minmax(190px,1.5fr) 130px 118px 84px 128px; min-width: 940px; gap: 14px; }
.intg-g-journal { grid-template-columns: 112px minmax(150px,1.1fr) 92px minmax(150px,1.2fr) 66px 66px 78px 104px; min-width: 940px; }
.intg-g-file { grid-template-columns: minmax(160px,1.3fr) 96px 108px 74px 112px 96px; min-width: 780px; }
.intg-g-ops { grid-template-columns: minmax(140px,1fr) 62px minmax(200px,1.6fr) 78px 72px 88px; min-width: 800px; }
.intg-g-map { grid-template-columns: minmax(150px,1.1fr) 24px minmax(170px,1.2fr) minmax(140px,1fr) 78px; min-width: 700px; }
.intg-g-alertes { grid-template-columns: minmax(210px,1.5fr) 122px 104px minmax(160px,1.1fr) 108px 92px; min-width: 880px; }

/* ligne de flux : la grille, puis la note, puis la planification dépliée */
.intg-flux-ligne {
  display: flex; flex-direction: column; gap: 8px;
  padding: 13px 18px; border-bottom: 1px solid var(--intg-filet); min-width: 976px;
}
.intg-flux-ligne.est-inactif { background: var(--intg-ligne-off); }
.intg-flux-note { font-size: 12px; line-height: 1.5; color: var(--intg-txt-3); max-width: 900px; }

.intg-planif {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; background: var(--intg-fond); border: 1px solid var(--intg-sep);
}
.intg-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.intg-seg-btn {
  height: 32px; padding: 0 13px; border-radius: 0; cursor: pointer;
  background: var(--intg-surface); color: var(--intg-txt);
  border: 1px solid var(--intg-bord); font-size: 12px;
}
.intg-seg-btn.est-actif { background: var(--intg-ardoise); border-color: var(--intg-ardoise); color: var(--et-surface); font-weight: 700; }

/* ── rejets ───────────────────────────────────────────────────────────────── */
.intg-rejet { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px; border-bottom: 1px solid var(--intg-filet); }
.intg-rejet-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.intg-rejet-cle {
  padding: 2px 6px; background: var(--intg-fond); border: 1px solid var(--intg-sep);
  font-family: var(--et-font-mono); font-size: 12px; color: var(--intg-ardoise);
}
.intg-rejet-lbl { font-size: 14px; font-weight: 600; }
.intg-rejet-motif { font-size: 13px; line-height: 1.5; color: var(--intg-rouge-txt); }
.intg-rejet-piste { font-size: 12px; line-height: 1.5; color: var(--intg-txt-2); }
.intg-rejet-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

/* ── grilles de fiches (modèle canonique, couverture) ─────────────────────── */
/* Les filets naissent de la gouttière : gap 1px sur fond gris. */
.intg-fiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1px; background: var(--intg-sep); }
.intg-fiche { background: var(--intg-surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 7px; }
.intg-fiche-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.intg-fiche-nom { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; }
.intg-fiche-regle { font-size: 12px; line-height: 1.5; color: var(--intg-txt-2); }
.intg-fiche-op {
  display: flex; justify-content: space-between; gap: 12px;
  padding-top: 4px; border-top: 1px solid var(--intg-filet); font-size: 12px;
}
.intg-fiche-op-val { font-family: var(--et-font-mono); color: var(--intg-ardoise); text-align: right; overflow-wrap: anywhere; }

/* ── configuration ────────────────────────────────────────────────────────── */
.intg-config { display: grid; grid-template-columns: minmax(0,1fr) 336px; gap: 18px; align-items: start; }
.intg-config-colonne { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.intg-config-corps { padding: 15px 18px; display: flex; flex-direction: column; gap: 14px; }
.intg-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }

.intg-champ { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.intg-champ-lbl { font-size: 12px; font-weight: 600; color: var(--intg-txt-2); }
.intg-champ-aide { font-size: 12px; line-height: 1.4; color: var(--intg-txt-3); }

.intg-input {
  width: 100%; height: 36px; padding: 0 10px; box-sizing: border-box;
  font-family: var(--et-font-mono); font-size: 13px; color: var(--intg-txt);
  background: var(--intg-surface); border: 1px solid var(--intg-bord);
}
/* Un champ requis vide se voit AVANT l'envoi, pas dans un message d'erreur. */
.intg-input.est-manquant { background: var(--intg-ligne-echec); border-color: var(--intg-rouge-bord); }

.intg-controle { display: flex; gap: 9px; align-items: baseline; }
.intg-controle-pt {
  width: 18px; height: 18px; border-radius: 0; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; border: 1px solid;
}
.intg-controle-pt.est-ok { background: var(--intg-vert-fond); border-color: var(--intg-vert-bord); color: var(--intg-vert-txt); }
.intg-controle-pt.est-manquant { background: var(--intg-rouge-fond); border-color: var(--intg-rouge-bord); color: var(--intg-rouge-txt); }
.intg-controle-lbl { font-size: 13px; font-weight: 600; }
.intg-controle-detail { font-size: 12px; line-height: 1.45; color: var(--intg-txt-3); }

.intg-kpis-pile { background: var(--intg-ardoise); color: var(--et-surface); padding: 4px 16px; }
.intg-kpis-pile > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--et-filet-ardoise);
}
.intg-kpis-pile .intg-kpi-val { font-size: 15px; }

.intg-encart { padding: 12px 16px; font-size: 12px; line-height: 1.5; border: 1px solid; }
.intg-encart-ambre { background: var(--intg-ambre-fond-2); border-color: var(--intg-ambre-bord); color: var(--intg-ambre-txt); }
.intg-encart-neutre { background: var(--intg-surface); border-color: var(--intg-bord); color: var(--intg-txt-2); }

/* ── tiroir ───────────────────────────────────────────────────────────────── */
.intg-tiroir-voile { position: fixed; inset: 0; z-index: 40; display: flex; justify-content: flex-end; background: rgba(0,0,0,.32); }
.intg-tiroir-vide { flex: 1; }
.intg-tiroir {
  flex: 0 0 560px; max-width: 92vw; display: flex; flex-direction: column; overflow-y: auto;
  background: var(--intg-surface); border-left: 1px solid var(--intg-bord);
}
.intg-tiroir-tete {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px; background: var(--intg-surface); border-bottom: 1px solid var(--intg-sep);
}
.intg-tiroir-titre { font-size: 17px; font-weight: 700; line-height: 1.3; }
.intg-tiroir-sous { font-size: 12px; line-height: 1.5; color: var(--intg-txt-2); }
.intg-tiroir-corps { padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; }

.intg-faits {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1px; background: var(--intg-sep); border: 1px solid var(--intg-sep);
}
.intg-fait { background: var(--intg-surface); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.intg-fait-lbl { font-family: var(--et-font-mono); font-size: 12px; letter-spacing: .06em; color: var(--intg-txt-3); }
.intg-fait-val { font-family: var(--et-font-mono); font-size: 14px; font-weight: 700; }
.intg-fait-val.est-mal { color: var(--intg-rouge-txt); }
.intg-fait-val.est-bien { color: var(--intg-vert-txt); }

.intg-motif {
  padding: 12px 14px; font-size: 13px; line-height: 1.55;
  background: var(--intg-rouge-fond); border: 1px solid var(--intg-rouge-bord); color: var(--intg-rouge-txt);
}

.intg-bloc { border: 1px solid var(--intg-bord); }
.intg-bloc-tete {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 10px 14px; background: var(--intg-fond); border-bottom: 1px solid var(--intg-sep);
}
.intg-bloc-corps {
  margin: 0; padding: 13px 14px; background: var(--intg-code-fond);
  font-family: var(--et-font-mono); font-size: 12px; line-height: 1.6;
  color: var(--intg-txt); white-space: pre; overflow-x: auto;
}

/* ── boutons d'appoint (les .mx-btn du dépôt restent la règle) ─────────────── */
.intg-btn-mini {
  height: 28px; padding: 0 10px; border-radius: 0; cursor: pointer;
  background: var(--intg-surface); border: 1px solid var(--intg-bord);
  font-size: 12px; font-weight: 600; color: var(--intg-lien-fonce);
}
.intg-btn-mini.est-danger { color: var(--intg-rouge-txt); }

.intg-bascule {
  height: 28px; padding: 0 11px; border-radius: 999px; cursor: pointer;
  font-size: 12px; font-weight: 700; border: 1px solid var(--intg-bord);
  background: var(--intg-fond); color: var(--intg-txt-2);
}
.intg-bascule.est-active { background: var(--intg-vert-fond); border-color: var(--intg-vert-bord); color: var(--intg-vert-txt); }

/* ── étroit ───────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .intg-config { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1024px) {
  .intg-rail { flex-basis: 64px; }
  .intg-rail-erp, .intg-rail-lbl, .intg-rail-section { display: none; }
  .intg-rail-item { justify-content: center; padding: 12px 0; }
}

/* ===========================================================================
   CIBLES TACTILES (docs/cibles-tactiles.md, lot 02)

   Sous 1024 px, aucune cible interactive ne descend sous 44 × 44 px — et une
   cible ne rétrécit jamais. L'écran en porte beaucoup de petites (26 à 30 px) :
   les boutons de ligne d'un flux, les segments de cadence, les bascules
   d'alerte. Sur une tablette au comptoir, elles sont inatteignables sans elles.
   Géométrie seulement : aucune couleur ici.
   =========================================================================== */
@media (max-width: 1024px) {
    .intg-seg-btn,
    .intg-btn-mini,
    .intg-bascule,
    .intg-rail-item {
        min-height: 44px;
    }

    .intg-btn-mini,
    .intg-bascule {
        min-width: 44px;
    }
}

/* ===========================================================================
   AJOUTS DU PORTAGE

   Le prototype est une page seule, avec ses propres styles en ligne ; le portage
   a besoin de quelques classes de plus, toutes issues de l'ossature décrite dans
   le handoff. Rien de nouveau visuellement — ce sont les pièces que le prototype
   posait à la main.
   =========================================================================== */

/* La grille d'une ligne de flux, à l'intérieur du bloc qui porte aussi la note et
   le panneau de cadence. Elle ne peut pas être .intg-tbl-ligne : celle-ci ferme
   la rangée par un filet, or la note et la planification appartiennent encore à
   la même ligne. */
.intg-flux-grille {
    display: grid;
    align-items: center;
    gap: 14px;
}

/* L'état vide. Il DIT ce que le vide signifie — « la file est vide » n'est pas
   « aucune donnée » : c'est une bonne nouvelle, et l'écran doit la donner comme
   telle plutôt que de laisser un blanc. */
.intg-vide {
    padding: 22px 18px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--intg-txt-3);
    background: var(--intg-surface);
}

/* Le champ en lecture seule de l'empreinte de secret : même chasse que la saisie
   qu'il remplace, pour que la colonne ne se déforme pas selon qu'un secret est
   déposé ou non. */
.intg-input-lecture {
    display: flex;
    align-items: center;
    background: var(--intg-fond);
    color: var(--intg-txt-2);
}

/* La recherche du journal : 260 px, distincte des boutons de filtre qui la suivent. */
.intg-recherche {
    width: 260px;
    max-width: 100%;
    height: 34px;
}

/* Le volet File tient sur deux colonnes : la file, puis les indicateurs et la
   règle de reprise. Même gabarit que la configuration, même palier de bascule. */
.intg-file-deux {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    align-items: start;
}

@media (max-width: 1100px) {
    .intg-file-deux { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   LE MESSAGE ÉPHÉMÈRE

   Centré en bas, 640 px au plus, 3,8 s, UN SEUL à la fois. C'est la seule ombre
   de l'écran et la seule chose qui bouge : un écran de supervision change d'état
   sèchement, et une animation de plus ferait douter de ce qu'on vient de lire.
   =========================================================================== */
.intg-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 50;
    max-width: 640px;
    padding: 12px 18px;
    border-radius: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--et-surface);
    background: var(--intg-ardoise);
    box-shadow: var(--et-ombre-flottant);
}

.intg-toast-succes { background: var(--intg-vert-txt); }
.intg-toast-alerte { background: var(--intg-ambre-txt); }