/* ecran-tiers.css — classes propres au domaine Tiers (TRS-01, TRS-02, TRS-03 et leurs
   dialogues). Aucune valeur en dur : tout vient des jetons de easytech-theme.css et
   fiche.css. À charger après modele-erp.css et fiche.css.

   Ce qui n'est PAS ici : .tbl-*, .flt-*, .plg-kpi, .btn — ils viennent du dépôt
   (modele-erp.css, easytime-shell.css) et ne se redéfinissent pas par écran.

   TOUT Y EST BORNÉ À .ecran-tiers, que les trois écrans posent sur leur contenu.
   La feuille arrive après fiche.css, dont elle redéfinissait sept classes du modèle
   de fiche hérité (.fx-btn, .fx-carte, .fx-carte-tete, .fx-corps, .fx-note,
   .fx-onglets, .fx-vide) employé par une quarantaine d'écrans, et après modele-erp.css,
   dont elle redéfinissait .tbl. Repeindre quarante écrans pour en habiller trois est
   ce que la règle « une classe employée par deux écrans remonte au gabarit » interdit
   dans l'autre sens : la portée la rétablit sans changer une valeur.

   Deux de ces sept sont parties depuis : .fx-corps et .fx-onglets, quand TRS-02 a pris
   le rail et la page objet du gabarit (voir le bloc TRS-02 plus bas). Restent cinq
   redéfinitions bornées. */

/* ---- TRS-01 : onglets, corps, volet ------------------------------------ */

.ecran-tiers .ts-onglets {
  display: flex;
  gap: 0;
  padding: 0 var(--et-pad, 16px);
  background: var(--et-surface-2);
  border-bottom: 1px solid var(--et-filet);
}

.ecran-tiers .ts-onglet {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 15px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--et-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ecran-tiers .ts-onglet:hover { color: var(--et-ink); }
.ecran-tiers .ts-onglet.est-actif { color: var(--et-form-blue); border-bottom-color: var(--et-form-blue); }
.ecran-tiers .ts-onglet:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; }

.ecran-tiers .ts-onglet-nb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--et-neutre-bg);
  color: var(--et-muted);
  font-family: var(--et-font-mono);
  font-size: 12px;
  font-weight: 600;
}

.ecran-tiers .ts-onglet.est-actif .ts-onglet-nb { background: var(--et-tint); color: var(--et-form-blue); }

.ecran-tiers .ts-bandeau {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px var(--et-pad, 16px);
  background: var(--et-avertissement-bg);
  border-bottom: 1px solid var(--et-filet);
  color: var(--et-ink);
  font-size: 13px;
}

.ecran-tiers .ts-bandeau > .bi { color: var(--et-avertissement-mark); }
.ecran-tiers .ts-bandeau > .ts-lien { margin-left: auto; }

.ecran-tiers .ts-corps { display: flex; align-items: stretch; min-height: 0; }

/* Le volet est un .flt du gabarit (easytime-shell.css) : il porte déjà son cadre, sa
   tête ardoise, sa zone de groupes défilante et son pied. Ne reste ici que ce qui le
   POSE dans la colonne de l'écran — sa largeur, et le filet qui le sépare de la liste.
   Le padding, le fond et le défilement qui étaient écrits ici doublaient le gabarit :
   c'est ce qui donnait un panneau sans tête, sans pied, et dont la tête défilait. */
.ecran-tiers .ts-flt {
  flex: 0 0 268px;
  min-width: 0;
  border-width: 0 1px 0 0;
}

/* .flt-filet n'a pas de couleur dans le gabarit — c'est au panneau de dire ce qu'elle
   signale. Ici : le groupe retient-il quelque chose ? */
.ecran-tiers .flt-filet { background: var(--et-filet); }
.ecran-tiers .flt-filet.est-retenu { background: var(--et-form-blue); }

/* Bouton vertical de repli. L'état est conservé en session utilisateur : replier le volet
   une fois vaut pour la session, pas pour un seul rendu. */
.ecran-tiers .ts-flt-activateur {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 30px;
  padding: 12px 0;
  background: var(--et-surface-2);
  border: 0;
  border-right: 1px solid var(--et-filet);
  color: var(--et-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.ecran-tiers .ts-flt-activateur > span { writing-mode: vertical-rl; letter-spacing: .06em; }
.ecran-tiers .ts-flt-activateur:hover { color: var(--et-form-blue); }

.ecran-tiers .ts-contenu { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* Le sélecteur de vues métier (liste, tranches d'âge, échéancier) tient dans la bande
   d'onglets, poussé à droite — UN seul endroit, quelle que soit la vue affichée. Il y
   était auparavant dans la barre du tableau pour la liste et dans une barre à lui pour
   les deux vues de synthèse : le contrôle sautait d'un étage à l'autre à chaque clic,
   et l'on retournait le chercher pour revenir. Il emprunte .tbl-etats au gabarit.
   Ce n'est PAS le sélecteur d'états de Tableau, qui reste dans la barre du tableau :
   celui-ci choisit CE QU'ON REGARDE, celui-là COMMENT on le regarde. Deux altitudes,
   deux emplacements. */
.ecran-tiers .ts-vues { margin-left: auto; align-self: center; }

/* Sous 1100 px le volet passe AU-DESSUS de la liste : côte à côte, il ne resterait pas
   300 px utiles au tableau. C'est le palier de .ecran-filtre du gabarit, et il vient de
   l'échelle retenue (docs/conventions-responsive.md), pas d'une mesure de cet écran.

   LE VOLET SE REPLIE ICI ET NULLE PART AILLEURS. Le repli du volet et celui du rail de
   fiche vivaient dans le même bloc à 1024 px, plus bas dans cette feuille : deux
   déclarations pour le même élément à deux paliers, dont la seconde ne changeait rien
   que la première n'eût déjà fait. Le rail de fiche (.fx-*) reste à 1024 px — il est
   étroit et tient plus longtemps ; le volet, qui coûte 268 px à la table, part avant. */
@media (max-width: 1100px) {
  .ecran-tiers .ts-corps { flex-direction: column; }
  .ecran-tiers .ts-flt { flex: none; width: auto; border-width: 0 0 1px; }
  .ecran-tiers .ts-flt .flt-groupes { max-height: 320px; }
  .ecran-tiers .ts-flt-activateur { flex-direction: row; width: auto; padding: 0 12px; height: 38px;
                                    border-width: 0 0 1px; justify-content: center; }
  .ecran-tiers .ts-flt-activateur > span { writing-mode: horizontal-tb; }
}

/* ---- Jauge de plafond -------------------------------------------------- */

/* Le plafond se lit en part consommée, pas en montant restant. */
.ecran-tiers .ts-jauge {
  display: inline-block;
  width: 72px;
  height: 8px;
  vertical-align: middle;
  background: var(--et-neutre-bg);
  overflow: hidden;
}

.ecran-tiers .ts-jauge-barre { display: block; height: 100%; background: var(--et-form-blue); }
.ecran-tiers .ts-jauge-barre.est-depasse { background: var(--et-danger); }

.ecran-tiers .ts-jauge-part {
  margin-left: 7px;
  font-family: var(--et-font-mono);
  font-size: 12px;
  color: var(--et-muted);
}

.ecran-tiers .ts-jauge-part.est-depasse { color: var(--et-danger-ink); font-weight: 600; }

/* ---- Liens, pastilles, actions de ligne -------------------------------- */

.ecran-tiers .ts-lien {
  background: none;
  border: 0;
  padding: 0;
  color: var(--et-form-blue);
  font: inherit;
  font-size: inherit;
  text-decoration: none;
  cursor: pointer;
}

.ecran-tiers .ts-lien:hover { color: var(--et-form-blue-d); text-decoration: underline; }
.ecran-tiers .ts-lien:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 2px; }

.ecran-tiers .ts-actions { display: flex; align-items: center; gap: 10px; }
/* Cibles tactiles : lot02 impose 44 px sous 1024 px (docs/cibles-tactiles.md).
   Le palier était à 900, un cran hors échelle qui laissait 901-1024 sans la règle. */
@media (max-width: 1024px) {
  .ecran-tiers .ts-actions > .ts-lien { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
}

.ecran-tiers .ts-puce {
  display: inline-flex;
  align-items: center;
  height: 18px;
  margin-right: 5px;
  padding: 0 6px;
  background: var(--et-tint);
  color: var(--et-form-blue);
  font-size: 12px;
  font-weight: 600;
}

.ecran-tiers .ts-puce.est-danger { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }
/* Le rang intermédiaire de la pastille de situation : ce qui alerte sans bloquer
   (plafond dépassé, échu de plus de 90 jours). L'encre est le rang -ink et non l'ambre
   elle-même : à 12 px, --et-avertissement sur son propre fond pâle vaut 2,02:1. */
.ecran-tiers .ts-puce.est-signal { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }

/* Ce que le lot sélectionné pèse, posé dans le bandeau de sélection du gabarit à côté
   de ses boutons d'action. Il n'y a pas de classe de gabarit pour un TEXTE dans ce
   bandeau — .tbl-selection-actions n'habille que ce qui agit —, et il n'y en a pas
   besoin : un seul écran y met une mesure. */
.ecran-tiers .ts-poids-selection {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: var(--et-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Un montant ou un retard ÉCHU dans une cellule de tableau. Les deux vues de synthèse
   posaient « est-danger » sur leur <td> et aucune règle ne l'habillait : le retard
   qu'elles croyaient signaler ne se voyait pas. L'encre est le rang -ink — mesurée
   contre le pire fond de la ligne (survol, ligne retenue), pas contre le blanc. */
.ecran-tiers .ts-echu { color: var(--et-danger-ink); font-weight: 600; }
/* Les deux rangs que la cote et le verdict de rapprochement demandent en plus du
   signal : le sain, et l'attente — un rapprochement qui n'a pas encore de terme à
   comparer n'est ni bon ni mauvais. */
.ecran-tiers .ts-puce.est-succes { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.ecran-tiers .ts-puce.est-attente { background: var(--et-surface-3); color: var(--et-muted); }
.ecran-tiers .ts-puce > .bi { margin-right: 4px; }

.ecran-tiers .ts-principal { color: var(--et-form-blue); font-size: 12px; }


.ecran-tiers .tbl tr.est-bloque > td:first-child { box-shadow: inset 3px 0 0 var(--et-danger); }

/* `tr.est-inactif` (opacité .6) et `tr.est-alerte` sont partis le 2026-09-08 : le premier
   avec son dernier appelant — les contacts de la fiche, passés à Tableau, qui prend le rang
   de ligne du GABARIT (`.tbl-terne`, « la ligne est là, elle ne compte pas ») plutôt qu'une
   opacité d'écran ; le second n'en avait aucun depuis la reprise de TRS-01, qui lui a
   substitué `tbl-alerte`. Les autres `est-inactif` du module ne sont pas ceux-ci : chacun
   est déclaré avec sa famille dans sa propre feuille (`.mr-rang`, `.plc-puce`). */

/* ---- TRS-03 : vignettes, arrêté, seuil, graphes ------------------------ */

/* La bande de faits saillants est celle du GABARIT (.mx-ind-grille de modele-erp.css) :
   l'écran n'ajoute que sa gouttière. Elle avait sa propre grille et ses .plg-kpi, dont le
   filet gauche était coloré depuis le C# — deux teintes d'état y servaient d'identité, ce
   que la charte réserve à l'état. */
.ecran-tiers .ts-vignettes { padding: 12px var(--et-pad, 16px); }


.ecran-tiers .ts-arrete {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--et-muted);
}

/* Le seuil d'encours, dans le complément du panneau : un montant se saisit et se relit en
   chasse fixe, aligné à droite comme la colonne qu'il vise. */
.ecran-tiers .ts-seuil { font-family: var(--et-font-mono); text-align: right; }

.ecran-tiers .ts-graphes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  padding: 12px var(--et-pad, 16px);
}

.ecran-tiers .ts-barre-l { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.ecran-tiers .ts-barre-t { flex: 0 0 108px; font-size: 12px; color: var(--et-muted); }
.ecran-tiers .ts-barre { flex: 1 1 auto; height: 10px; background: var(--et-neutre-bg); overflow: hidden; }
.ecran-tiers .ts-barre-v { display: block; height: 100%; background: var(--et-form-blue); }
.ecran-tiers .ts-barre-v.est-depasse { background: var(--et-danger); }
.ecran-tiers .ts-barre-n { flex: 0 0 130px; text-align: right; font-size: 12px; }

/* ---- TRS-02 : ce que la fiche ne prend PAS au gabarit -------------------

   CE QUI A DISPARU D'ICI, ET OÙ C'EST PARTI. La fiche tiers réécrivait pour elle seule
   une en-tête d'objet (.fx-tete, .fx-av, .fx-tete-chiffres, .fx-chiffre), un rail
   d'onglets (.fx-corps, .fx-onglets, .ft-onglet), une grille de panneaux (.fx-panneau),
   un bandeau d'alerte (.fx-bandeau) et un état vide (.fx-rien) — soixante-dix lignes
   pour redessiner ce que modele-erp.css porte déjà pour tout le produit :
   .mx-obj / .mx-faits, RailOnglets (.mx-fiche, .mx-rail, .mx-panneaux), les alertes
   Bootstrap et <EtatVide>. Le rail recopié avait d'ailleurs perdu la règle qui compte :
   les panneaux du gabarit se SUPERPOSENT dans une cellule de grille, celui-ci les
   affichait l'un après l'autre.

   .fx-defs partait avec eux : plus aucun écran ne l'employait, et .fx-chiffre non plus
   dès lors que la bande de faits remplace les trois chiffres d'en-tête. Ne survit que
   .fx-chiffre-seul, le grand nombre isolé des cartes de synthèse de TRS-03.

   Ce qui reste ci-dessous sert encore TRS-03 et PanneauContactsAdresses. */

.ecran-tiers .fx-chiffre-seul { margin: 0 0 6px; font-size: 28px; font-weight: 700; }

/* LA CHASSE FIXE HORS D'UNE TABLE. .tbl-mono du dépôt n'existe QUE sous .tbl
   (easytime-shell.css) et .mono n'est définie par la charte que COMPOSÉE
   — .mx-input.mono, .mx-champ-val.mono, .mx-fait-val.mono. Posée nue sur un <span>,
   elle ne rend rien : un code tiers annoncé « en mono » se lisait en proportionnelle. */
.ecran-tiers .ts-mono { font-family: var(--et-font-mono); font-variant-numeric: tabular-nums; }

/* La part portée à côté du montant, sur une barre de répartition du gabarit : le
   gabarit pose la valeur, pas son pourcentage. Géométrie et rang de gris, rien d'autre.
   Nommée .ts-* et non .mx-* : ajouter un nom à la famille du gabarit depuis une feuille
   d'écran le rendrait introuvable là où le gabarit se lit. */
.ecran-tiers .ts-barre-part { margin-left: 8px; color: var(--et-faint); }

/* La bande de barres d'un panneau de fiche. LE RETRAIT EST CELUI DU FORMULAIRE DENSE
   (.mx-champ, 18 px) et non celui d'une carte : les barres et les champs du même
   panneau doivent partir de la même verticale, sans quoi le panneau se lit en deux
   colonnes décalées de deux pixels — assez pour que rien ne s'aligne, pas assez pour
   qu'on voie pourquoi. */
.ecran-tiers .ts-barres { padding: 6px 18px 2px; }

/* ---- TRS-02 : parcourir le référentiel depuis la fiche -------------------
   La barre de navigation de la page objet et son sélecteur. Géométrie et rangs de
   gris : les boutons sont ceux du gabarit (.mx-btn, .mx-btn-ico, .mx-input). */

/* La position se lit en chasse fixe : « 9 / 348 » et « 10 / 348 » doivent avoir la
   même largeur, ou le rang qui suit fait sauter les deux chevrons d'un pixel. */
.ecran-tiers .ts-nav-pos {
  padding: 0 2px;
  font-family: var(--et-font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--et-muted);
  white-space: nowrap;
}

/* L'état OUVERT du bouton « Atteindre ». Le gabarit ne porte pas d'état actif sur
   .mx-btn : sans cette règle, le bouton se serait lu pareil ouvert et fermé, et rien
   n'aurait relié le volet au geste qui l'ouvre. Nommée .ts-* et non .est-actif, qui
   n'existe qu'associée à une famille — .mx-onglet.est-actif, .ts-nav-item.est-actif. */
.ecran-tiers .ts-btn-ouvert {
  background: var(--et-tint);
  border-color: var(--et-form-blue);
  color: var(--et-form-blue-d);
}

/* LE VOLET EST POSÉ DANS LE FLUX, pas en survol. Une couche flottante au-dessus de la
   page objet demanderait un clic extérieur pour se refermer, une pile z-index et un
   piège de focus : trois mécanismes pour un panneau qu'on ouvre, où l'on choisit, et
   qui se referme de lui-même sur le choix. */
.ecran-tiers .ts-nav-volet {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 18px 14px;
  padding: 12px;
  background: var(--et-surface);
  border: 1px solid var(--et-hairline);
}

.ecran-tiers .ts-nav-note { margin: 0; font-size: 12px; color: var(--et-faint); }

.ecran-tiers .ts-nav-liste { margin: 0; padding: 0; list-style: none; }

.ecran-tiers .ts-nav-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 5px 8px;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  color: var(--et-ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.ecran-tiers .ts-nav-item:hover { background: var(--et-rang); }

/* La fiche ouverte reste dans la liste — la retirer ferait croire qu'elle n'existe
   plus — mais elle se distingue, sans quoi on clique sur celle où l'on est déjà. */
.ecran-tiers .ts-nav-item.est-actif {
  background: var(--et-tint);
  border-left-color: var(--et-form-blue);
  font-weight: 600;
}

.ecran-tiers .ts-nav-item-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecran-tiers .ts-nav-item-nat { flex: none; font-size: 12px; color: var(--et-muted); }

@media (max-width: 720px) {
  /* Sous 720 px la page objet se replie : le volet prend toute la largeur qu'elle
     laisse, et la nature du tiers cède la place au nom, qui la porte déjà. */
  .ecran-tiers .ts-nav-volet { margin-left: 12px; margin-right: 12px; }
  .ecran-tiers .ts-nav-item-nat { display: none; }
}

/* Le rang de total d'une bande de barres : il n'a pas de jauge — sa part vaut 100 %
   par construction — et se sépare du dernier rang par le filet habituel. */
.ecran-tiers .ts-barre-total { margin-top: 4px; border-top: 1px solid var(--et-filet); font-weight: 600; }
.ecran-tiers .ts-barre-total .mx-barre { background: transparent; }

.ecran-tiers .fx-carte {
  min-width: 0;
  background: var(--et-surface);
  border: 1px solid var(--et-filet);
}

.ecran-tiers .fx-carte-pleine { grid-column: 1 / -1; }

.ecran-tiers .fx-carte-tete {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--et-filet);
  font-family: var(--et-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--et-table-head);
}

.ecran-tiers .fx-carte-resume {
  font-family: var(--et-font);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--et-muted);
}

.ecran-tiers .fx-carte-tete > .fx-btn { margin-left: auto; }

.ecran-tiers .fx-note { margin: 0; padding: 0 14px 12px; font-size: 12px; line-height: 1.45; color: var(--et-muted); }
.ecran-tiers .fx-note.est-signal { color: var(--et-avertissement-ink); }

.ecran-tiers .fx-vide { margin: 0; padding: 18px 14px; font-size: 13px; color: var(--et-muted); }

/* ---- Repli ---------------------------------------------------------------

   LE RAIL DE FICHE N'A PLUS DE PALIER ICI : c'est celui du gabarit (modele-erp.css §9,
   à 1100 px), qui couche le rail en rangée défilante ET révèle l'onglet actif par
   RailOnglets.OnAfterRenderAsync. Le palier recopié à 1024 px faisait le premier geste
   sans le second : un onglet ouvert PAR l'écran — la vérification de saisie qui
   remonte au premier onglet fautif — restait hors du cadre, et le message désignait
   le vide. Le volet de TRS-01/TRS-03, lui, se replie à 1100 px plus haut dans cette
   feuille. */


/* ==========================================================================
   LES TROIS DIALOGUES — .ft-* (tiers), .fc-* (contact), .fa-* (adresse)

   Reportés depuis le <style> des maquettes de la passation, comme son README le
   demande. Une seule chose y a changé, et c'est la règle du dépôt : AUCUNE couleur
   n'est écrite en dur. Chaque littéral des maquettes prend le jeton qui porte son
   rôle (docs/couleurs-en-dur.md) — le voile, l'ombre flottante, l'encre sur aplat,
   les fonds posés sur la bande bleue. Là où le dépôt avait déjà tranché une
   approximation — treize opacités pour quatre rôles, lot 3 — c'est sa décision qui
   vaut : .18 et .16 sont le même rôle, .8 et .78 aussi.

   CE QUE CE BLOC RECOPIE DU GABARIT, ET QUI DEVRA REMONTER : la coquille de ces
   fenêtres — voile, cadre, tête bleue, bouton de fermeture, corps, pied, grille de
   champs — existe déjà en .xp-* dans easycompta-modal.css, aux mêmes mesures et aux
   mêmes jetons. Les maquettes l'ont réécrite sous trois préfixes. Monter les trois
   dialogues sur .xp-* est un changement de balisage, pas de valeurs : il se fait à
   part, pour que la reprise de la passation reste relisible ligne à ligne.
   ========================================================================== */

.ecran-tiers {
  /* Marques de canal. Le vert de WhatsApp est une couleur de MARQUE tierce, au même
     titre que les couleurs d'un drapeau (docs/couleurs-en-dur.md) : elle ne répond à
     aucun rôle de la charte, elle est donc nommée ici, une fois, et aucune page ne
     l'écrit. --ts-geo est l'accent des icônes de champ de l'adresse : un repère, pas
     un état — il ne prend donc aucun jeton d'état. */
  --ts-wa:    #25D366;
  --ts-wa-d:  #1A9C4C;
  --ts-wa-f:  #157F3D;
  --ts-wa-bg: #E8F8EE;
  --ts-geo:   #B6553F;
}

/* ---- Dialogue : création et modification de tiers (FormulaireTiers.dc.html) ---- */

a { color: var(--et-form-blue); }
a:hover { color: var(--et-form-blue-d); }
.ecran-tiers .ft-voile, .ecran-tiers .ft-modal { font-family: var(--et-font); }
.ecran-tiers .ft-voile { position: fixed; inset: 0; z-index: 1070; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; background: var(--et-voile); }
.ecran-tiers .ft-modal { display: flex; flex-direction: column; width: 100%; max-width: 690px; max-height: 100%; background: var(--fx-carte, var(--et-surface)); border: 1px solid var(--et-filet-fort); border-radius: var(--et-r); overflow: hidden; box-shadow: var(--et-ombre-flottant); }
/* Même en-tête que la fiche tiers et les dialogues de contact et d'adresse :
   14/20 de rembourrage, pastille de 30, titre à 16 px — une seule hauteur. */
.ecran-tiers .ft-tete { flex: none; display: flex; align-items: center; gap: 11px; min-height: var(--et-modal-tete); padding: 0 var(--et-modal-pad); background: var(--et-form-blue); border-bottom: 3px solid var(--et-form-blue-d); color: var(--et-sur-aplat); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.ecran-tiers .ft-tete .ft-av { width: 30px; height: 30px; border-radius: 0; background: var(--et-fond-marine); color: var(--et-sur-aplat); font-size: 12px; }
.ecran-tiers .ft-tete-meta { flex: none; font-family: var(--et-font-mono); font-size: 12px; font-weight: 400; color: var(--et-sur-aplat-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecran-tiers .ft-fermer { margin-left: auto; display: grid; place-items: center; width: var(--et-modal-ferme); height: var(--et-modal-ferme); flex: none; background: transparent; border: 0; border-radius: 0; color: var(--et-sur-aplat-doux); cursor: pointer; font-size: 13px; }
.ecran-tiers .ft-fermer:hover { background: var(--et-fond-marine); color: var(--et-sur-aplat); }
.ecran-tiers .ft-av { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; background: var(--et-form-blue); color: var(--et-sur-aplat); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.ecran-tiers .ft-corps { flex: 1 1 auto; min-height: 0; padding: 0 18px 12px; overflow-y: auto; overscroll-behavior: contain; }
.ecran-tiers .ft-onglets { position: sticky; top: 0; z-index: 2; display: flex; gap: 0; margin: 0 -18px 10px; padding: 0 18px; background: var(--et-surface-2); border-bottom: 1px solid var(--fx-filet, var(--et-rang)); }
.ecran-tiers .ft-onglets > button { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--et-muted); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ecran-tiers .ft-onglets > button:hover { color: var(--et-form-blue); }
.ecran-tiers .ft-onglets > button.est-actif { color: var(--et-form-blue); border-bottom-color: var(--et-form-blue); }
.ecran-tiers .ft-onglets > button.a-bloquant { box-shadow: inset 0 -2px 0 var(--et-danger); }
.ecran-tiers .ft-onglets .pastille { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; background: var(--et-danger); border-radius: var(--et-r-pill); color: var(--et-sur-aplat); font-size: 12px; font-weight: 700; }
.ecran-tiers .ft-pied { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; padding: 8px 18px; background: var(--et-surface-2); border-top: 1px solid var(--fx-filet, var(--et-rang)); }
.ecran-tiers .ft-note { flex: 1 1 100%; min-width: 0; font-size: 12px; line-height: 1.4; color: var(--et-muted); }
.ecran-tiers .ft-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--et-form-gap-l) var(--et-form-gap-c); align-items: start; }
.ecran-tiers .ft-plein { grid-column: 1 / -1; }
.ecran-tiers .ft-champ { display: grid; grid-template-columns: var(--et-form-lab) minmax(0, 1fr); column-gap: 12px; row-gap: 3px; align-items: start; min-width: 0; }
.ecran-tiers .ft-champ > *:not(.ft-label) { grid-column: 2; }
.ecran-tiers .ft-label { grid-column: 1; grid-row: 1; align-self: start; margin: 0; display: flex; align-items: center; justify-content: flex-end; gap: 5px; height: var(--et-h-champ); padding-top: 0; font-size: var(--et-fs-lab); font-weight: 400; color: var(--et-muted); text-align: right; letter-spacing: 0; line-height: 1.25; }
.ecran-tiers .ft-champ.ft-plein { grid-template-columns: var(--et-form-lab) minmax(0, 1fr); }
.ecran-tiers .ft-label .req { color: var(--et-danger-ink); }
.ecran-tiers .ft-label .fixe { display: none; padding: 0 5px; background: var(--et-neutre-bg); border: 1px solid var(--fx-filet, var(--et-rang)); border-radius: var(--et-r-pill); color: var(--et-faint); font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: none; }
.ecran-tiers .ft-input { box-sizing: border-box; width: 100%; height: var(--et-h-champ); padding: 0 10px; background: var(--et-surface); border: 1px solid var(--et-form-border);  color: var(--et-ink); font-family: inherit; font-size: var(--et-fs-champ); }
.ecran-tiers .ft-input:focus { outline: 0; border-color: var(--et-form-blue); box-shadow: inset 0 0 0 1px var(--et-form-blue); }
.ecran-tiers .ft-input:disabled { background: var(--et-surface-3); color: var(--et-muted); cursor: not-allowed; }
.ecran-tiers .ft-input.mono { font-family: var(--et-font-mono); }
.ecran-tiers .ft-input.droite { text-align: right; font-family: var(--et-font-mono); }
.ecran-tiers .ft-input.faute { border-color: var(--et-danger); background: var(--et-danger-badge-bg); }
.ecran-tiers .ft-input.attendu { background: var(--et-avertissement-bg); border-color: var(--et-avertissement-mark); }
.ecran-tiers .ft-boite { position: relative; display: block; min-width: 0; }
.ecran-tiers .ft-boite > .bi { position: absolute; left: 9px; top: 0; height: 30px; display: flex; align-items: center; font-size: 13px; pointer-events: none; }
.ecran-tiers .ft-boite > .ft-input { padding-left: 29px; }
.ecran-tiers .ft-ico-tel { color: var(--et-form-blue); }
.ecran-tiers .ft-ico-wa { color: var(--ts-wa); }
.ecran-tiers .ft-ico-mail { color: var(--et-avertissement-mark); }
.ecran-tiers .ft-repris { position: absolute; right: 2px; top: 2px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; background: var(--et-surface); border: 1px solid var(--et-form-border); border-radius: var(--et-r-btn); color: var(--et-muted); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.ecran-tiers .ft-repris:hover { border-color: var(--ts-wa); color: var(--ts-wa-d); }
.ecran-tiers .ft-repris.est-actif { background: var(--ts-wa-bg); border-color: var(--ts-wa); color: var(--ts-wa-f); }
.ecran-tiers .ft-repris > .bi { font-size: 12px; }
.ecran-tiers .ft-msg { display: flex; align-items: flex-start; gap: 5px; font-size: 12px; line-height: 1.45; }
.ecran-tiers .ft-msg.bloque { color: var(--et-danger-ink); }
.ecran-tiers .ft-msg.signal { color: var(--et-avertissement-ink); }
.ecran-tiers .ft-aide { display: none; }
.ecran-tiers .ft-section { display: flex; align-items: center; gap: 9px; margin: var(--et-form-sect-t) 0 var(--et-form-sect-b); padding-bottom: var(--et-form-sect-p); border-bottom: 2px solid var(--et-filet-fort); }
.ecran-tiers .ft-section:first-child { margin-top: 0; }
.ecran-tiers .ft-trouves { display: flex; flex-direction: column; gap: 4px; }
.ecran-tiers .ft-controle { display: flex; flex-direction: column; gap: 5px; padding: 10px 18px; background: var(--et-avertissement-bg); border-top: 1px solid var(--fx-filet, var(--et-rang)); }
.ecran-tiers .ft-trouve { display: flex; align-items: center; gap: 9px; padding: 6px 9px; background: var(--et-avertissement-bg); border-left: 2px solid var(--et-avertissement); }
.ecran-tiers .ft-section::before { content: ""; width: 3px; height: 14px; background: var(--et-form-blue); flex: none; }
.ecran-tiers .ft-section > span:first-child { font-family: var(--et-font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--et-table-head); }
.ecran-tiers .ft-replie { display: flex; align-items: center; gap: 9px; width: 100%; margin: 18px 0 0; padding: 9px 11px; background: var(--et-surface-2); border: 1px solid var(--fx-filet, var(--et-rang)); border-radius: var(--et-r); color: var(--et-ink); font-family: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.ecran-tiers .ft-replie:hover { border-color: var(--et-form-blue); color: var(--et-form-blue); }
.ecran-tiers .ft-replie > .defaut { margin-left: auto; font-family: var(--et-font-mono); font-size: 12px; font-weight: 400; color: var(--et-muted); }
.ecran-tiers .ft-bascule { display: flex; }
.ecran-tiers .ft-bascule > button { flex: 1; height: 30px; padding: 0 6px; background: var(--et-surface); border: 1px solid var(--et-form-border); color: var(--et-ink); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.ecran-tiers .ft-bascule > button + button { border-left: 0; }
.ecran-tiers .ft-bascule > button.est-actif { background: var(--et-table-head); border-color: var(--et-table-head); color: var(--et-sur-aplat); }
.ecran-tiers .ft-lu { box-sizing: border-box; display: flex; align-items: center; gap: 8px; height: var(--et-h-champ); padding: 0 10px; background: var(--et-surface-3); border: 1px solid var(--fx-filet, var(--et-rang)); font-family: var(--et-font-mono); font-size: 13px; color: var(--et-ink); }
.ecran-tiers .ft-lu > .bi { color: var(--et-inerte); font-size: 12px; }
.ecran-tiers .ft-lu.serre { gap: 6px; padding: 0 8px; font-size: 12px; }
.ecran-tiers .ft-contrat { display: flex; flex-direction: column; gap: 5px; padding: 10px 18px; background: var(--et-danger-badge-bg); border-top: 1px solid var(--fx-filet, var(--et-rang)); }
.ecran-tiers .ft-contrat.signal { background: var(--et-avertissement-bg); }
.ecran-tiers .ft-ligne { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; line-height: 1.45; }
/* Les deux qualifications de la ligne de contrôle. Elles étaient posées dans le
   balisage sans règle — .est-signal depuis la passation — et n'y changeaient donc
   rien. L'encre est celle du RANG -ink : ces lignes se posent sur le fond pâle de
   .ft-controle ou de .ft-contrat, où la teinte vive tombe sous le seuil AA. */
.ecran-tiers .ft-ligne.est-signal { color: var(--et-avertissement-ink); font-weight: 600; }
.ecran-tiers .ft-ligne.est-danger { color: var(--et-danger-ink); font-weight: 600; }
.ecran-tiers .ft-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px; background: var(--et-surface); border: 1px solid var(--et-form-border); border-radius: var(--et-r-btn); color: var(--et-ink); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.ecran-tiers .ft-btn:hover:enabled { background: var(--et-tint); border-color: var(--et-form-blue); color: var(--et-form-blue); }
.ecran-tiers .ft-btn-fort { background: var(--et-form-blue); border-color: var(--et-form-blue); color: var(--et-sur-aplat); }
.ecran-tiers .ft-btn-fort:hover:enabled { background: var(--et-form-blue-d); border-color: var(--et-form-blue-d); color: var(--et-sur-aplat); }
.ecran-tiers .ft-btn:disabled { opacity: .5; cursor: not-allowed; }
.ecran-tiers .ft-lien { background: none; border: 0; padding: 0; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--et-form-blue); text-decoration: underline; cursor: pointer; }
/* Tactile : libellé au-dessus du champ et cibles de 44 px, mais les paires
   courtes restent côte à côte — sinon le formulaire double de hauteur.
   1024 px, le palier tactile de l'échelle retenue (était 900). */
@media (max-width: 1024px) {
  .ecran-tiers .ft-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  .ecran-tiers .ft-champ, .ecran-tiers .ft-champ.ft-plein { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .ecran-tiers .ft-champ > *:not(.ft-label) { grid-column: 1; }
  .ecran-tiers .ft-label { grid-row: 1; justify-content: flex-start; min-height: 0; text-align: left; }
  .ecran-tiers .ft-onglets > button { flex: 1; justify-content: center; }
  .ecran-tiers .ft-input, .ecran-tiers .ft-bascule > button, .ecran-tiers .ft-lu, .ecran-tiers .ft-btn { height: 44px; }
  .ecran-tiers .ft-boite > .bi { height: 44px; }
  .ecran-tiers .ft-repris { top: 6px; width: 32px; height: 32px; }
  .ecran-tiers .ft-pied > .ft-btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 560px) {
  .ecran-tiers .ft-grille { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Dialogue : contact (FormulaireContact.dc.html) ---- */

.ecran-tiers .fc-voile, .ecran-tiers .fc-modal { font-family: var(--et-font); }
.ecran-tiers .fc-voile { position: fixed; inset: 0; z-index: 1070; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--et-voile); }
.ecran-tiers .fc-modal { border-radius: 0; overflow: hidden; display: flex; flex-direction: column; width: 100%; max-width: 560px; height: 586px; max-height: 100%; background: var(--fx-carte, var(--et-surface)); box-shadow: var(--et-ombre-flottant); }
.ecran-tiers .fc-tete { display: flex; align-items: center; gap: 11px; min-height: var(--et-modal-tete); padding: 0 var(--et-modal-pad); background: var(--et-form-blue); border-bottom: 3px solid var(--et-form-blue-d); color: var(--et-sur-aplat); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.ecran-tiers .fc-tete > .bi:first-child { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 0; background: var(--et-fond-marine); color: var(--et-sur-aplat); font-size: 15px; }
.ecran-tiers .fc-fermer { margin-left: auto; display: grid; place-items: center; width: var(--et-modal-ferme); height: var(--et-modal-ferme); flex: none; background: transparent; border: 0; border-radius: 0; color: var(--et-sur-aplat-doux); cursor: pointer; font-size: 13px; }
.ecran-tiers .fc-fermer:hover { background: var(--et-fond-marine); color: var(--et-sur-aplat); }
.ecran-tiers .fc-ident { display: flex; align-items: center; gap: 11px; padding: 10px 18px; background: var(--et-surface-2); border-bottom: 1px solid var(--fx-filet, var(--et-rang)); }
.ecran-tiers .fc-av { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; background: var(--et-form-blue); color: var(--et-sur-aplat); font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.ecran-tiers .fc-onglets { display: flex; padding: 0 18px; background: var(--et-surface-2); border-bottom: 1px solid var(--fx-filet, var(--et-rang)); }
.ecran-tiers .fc-ong { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--et-muted); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ecran-tiers .fc-ong:hover { color: var(--et-ink); }
.ecran-tiers .fc-ong.est-actif { color: var(--et-form-blue-d); border-bottom-color: var(--et-form-blue); background: var(--fx-carte, var(--et-surface)); }
.ecran-tiers .fc-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 18px 16px; }
.ecran-tiers .fc-pied { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 10px 18px; background: var(--et-surface-2); border-top: 1px solid var(--fx-filet, var(--et-rang)); }
.ecran-tiers .fc-note { flex: 1; min-width: 0; font-size: 12px; line-height: 1.4; color: var(--et-muted); }
.ecran-tiers .fc-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--et-form-gap-l) var(--et-form-gap-c); }
.ecran-tiers .fc-champ { display: grid; grid-template-columns: var(--et-form-lab) minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; }
.ecran-tiers .fc-champ.large { grid-column: 1 / -1; }
.ecran-tiers .fc-label { justify-self: end; text-align: right; font-size: var(--et-fs-lab); font-weight: 500; color: var(--et-muted); line-height: 1.3; }
.ecran-tiers .fc-label .req { color: var(--et-danger-ink); }
.ecran-tiers .fc-input { box-sizing: border-box; width: 100%; height: var(--et-h-champ); padding: 0 10px; background: var(--et-surface); border: 1px solid var(--et-form-border); border-bottom-color: var(--et-muted);  color: var(--et-ink); font-family: inherit; font-size: var(--et-fs-champ); }
.ecran-tiers .fc-input:focus { outline: 0; border-bottom-color: var(--et-form-blue); box-shadow: inset 0 -1px 0 0 var(--et-form-blue); }
.ecran-tiers .fc-input.mono { font-family: var(--et-font-mono); }
.ecran-tiers .fc-alerte { display: flex; align-items: flex-start; gap: 8px; padding: 9px 18px; background: var(--et-avertissement-badge-bg); border-top: 1px solid var(--fx-filet, var(--et-rang)); font-size: 12px; line-height: 1.45; color: var(--et-avertissement-ink); }
.ecran-tiers .fc-zone { height: auto; min-height: 52px; padding: 7px 10px; resize: vertical; line-height: 1.45; }
.ecran-tiers .fc-bascule { display: flex; }
.ecran-tiers .fc-bascule > button { flex: 1; height: 32px; background: var(--et-surface); border: 1px solid var(--et-form-border); color: var(--et-ink); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.ecran-tiers .fc-bascule > button + button { border-left: 0; }
.ecran-tiers .fc-bascule > .fc-b-opt.est-actif { background: var(--et-table-head); border-color: var(--et-table-head); color: var(--et-sur-aplat); }
.ecran-tiers .fc-bascule > .fc-b-opt.est-actif.est-inactif { background: var(--et-avertissement); border-color: var(--et-avertissement); }
.ecran-tiers .fc-boite { position: relative; min-width: 0; }
.ecran-tiers .fc-boite > .fc-ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; pointer-events: none; }
.ecran-tiers .fc-boite > .fc-input { padding-left: 32px; }
.ecran-tiers .fc-ico.bi-telephone { color: var(--et-form-blue); }
.ecran-tiers .fc-ico.bi-whatsapp { color: var(--ts-wa); }
.ecran-tiers .fc-ico.bi-envelope { color: var(--et-avertissement-mark); }
.ecran-tiers .fc-boite:not(.est-rempli) > .fc-ico { opacity: .45; }
.ecran-tiers .fc-erreur { grid-column: 2; display: flex; align-items: flex-start; gap: 5px; font-size: 12px; line-height: 1.45; color: var(--et-danger-ink); }
.ecran-tiers .fc-section { display: flex; align-items: center; gap: 9px; margin: var(--et-form-sect-t) 0 var(--et-form-sect-b); padding-bottom: var(--et-form-sect-p); border-bottom: 2px solid var(--et-filet-fort); }
.ecran-tiers .fc-section:first-child { margin-top: 0; }
.ecran-tiers .fc-section::before { content: ""; width: 3px; height: 15px; background: var(--et-form-blue); flex: none; }
.ecran-tiers .fc-section > span:first-child { font-family: var(--et-font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--et-table-head); }

.ecran-tiers .fc-opts { display: flex; gap: 9px; flex-wrap: wrap; }
.ecran-tiers .fc-opts > .fc-opt { flex: 1 1 0; min-width: 118px; }
.ecran-tiers .fc-opt { font-size: 13px; display: flex; align-items: center; gap: 8px; padding: 7px 11px; background: var(--et-surface); border: 1px solid var(--et-form-border); cursor: pointer; }
.ecran-tiers .fc-opt:hover { border-color: var(--et-form-blue); background: var(--et-surface-2); }
.ecran-tiers .fc-opt.est-actif { border-color: var(--et-form-blue); background: var(--et-tint); }
.ecran-tiers .fc-opt.est-inerte { opacity: .5; cursor: not-allowed; }
.ecran-tiers .fc-opt input { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.ecran-tiers .fc-opt-t { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--et-ink); }
.ecran-tiers .fc-opt-d { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--et-muted); }
.ecran-tiers .fc-btn { flex: none; height: 32px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: var(--fx-carte, var(--et-surface)); border: 1px solid var(--fx-carte-bord, var(--et-form-border)); border-radius: var(--fx-rayon-btn, var(--et-r-btn)); color: var(--et-neutre); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ecran-tiers .fc-btn:hover:enabled { background: var(--et-tint); border-color: var(--et-filet-fort); }
.ecran-tiers .fc-btn:disabled { cursor: not-allowed; color: var(--fx-tres-discret, var(--et-inerte)); }
.ecran-tiers .fc-btn.est-primaire { padding: 0 18px; background: var(--fx-orange, var(--et-action)); border-color: var(--fx-orange, var(--et-action)); color: var(--et-sur-aplat); }
.ecran-tiers .fc-btn.est-primaire:hover:enabled { background: var(--fx-orange-fonce, var(--et-action-d)); border-color: var(--fx-orange-fonce, var(--et-action-d)); color: var(--et-sur-aplat); }
.ecran-tiers .fc-btn.est-primaire:disabled { background: var(--et-action-off); border-color: var(--et-action-off); color: var(--et-sur-aplat); }
/* 640 px, sur l'échelle (était 620). */
@media (max-width: 640px) {
  .ecran-tiers .fc-champ { grid-template-columns: minmax(0, 1fr); }
  .ecran-tiers .fc-label { justify-self: start; text-align: left; }
  .ecran-tiers .fc-erreur { grid-column: 1; }
}

/* ---- Dialogue : adresse (FormulaireAdresse.dc.html) ---- */

.ecran-tiers .fa-voile, .ecran-tiers .fa-modal { font-family: var(--et-font); }
.ecran-tiers .fa-voile { position: fixed; inset: 0; z-index: 1070; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--et-voile); }
.ecran-tiers .fa-modal { border-radius: 0; overflow: hidden; display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 100%; background: var(--fx-carte, var(--et-surface)); box-shadow: var(--et-ombre-flottant); }
.ecran-tiers .fa-tete { display: flex; align-items: center; gap: 11px; min-height: var(--et-modal-tete); padding: 0 var(--et-modal-pad); background: var(--et-form-blue); border-bottom: 3px solid var(--et-form-blue-d); color: var(--et-sur-aplat); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.ecran-tiers .fa-tete > .bi:first-child { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 0; background: var(--et-fond-marine); color: var(--et-sur-aplat); font-size: 15px; }
.ecran-tiers .fa-fermer { margin-left: auto; display: grid; place-items: center; width: var(--et-modal-ferme); height: var(--et-modal-ferme); flex: none; background: transparent; border: 0; border-radius: 0; color: var(--et-sur-aplat-doux); cursor: pointer; font-size: 13px; }
.ecran-tiers .fa-fermer:hover { background: var(--et-fond-marine); color: var(--et-sur-aplat); }
.ecran-tiers .fa-apercu { display: flex; align-items: center; gap: 11px; padding: 10px 18px; background: var(--et-surface-2); border-bottom: 1px solid var(--fx-filet, var(--et-rang)); }
.ecran-tiers .fa-pin { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; background: var(--et-form-blue); color: var(--et-sur-aplat); font-size: 18px; }
.ecran-tiers .fa-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 18px 16px; }
.ecran-tiers .fa-pied { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 10px 18px; background: var(--et-surface-2); border-top: 1px solid var(--fx-filet, var(--et-rang)); }
.ecran-tiers .fa-note { flex: 1; min-width: 0; font-size: 12px; line-height: 1.4; color: var(--et-muted); }
.ecran-tiers .fa-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--et-form-gap-l) var(--et-form-gap-c); }
.ecran-tiers .fa-champ { display: grid; grid-template-columns: var(--et-form-lab) minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; }
.ecran-tiers .fa-champ.large { grid-column: 1 / -1; }
.ecran-tiers .fa-label { justify-self: end; text-align: right; font-size: var(--et-fs-lab); font-weight: 500; color: var(--et-muted); line-height: 1.3; }
.ecran-tiers .fa-label .req { color: var(--et-danger-ink); }
.ecran-tiers .fa-input { box-sizing: border-box; width: 100%; height: var(--et-h-champ); padding: 0 10px; background: var(--et-surface); border: 1px solid var(--et-form-border); border-bottom-color: var(--et-muted);  color: var(--et-ink); font-family: inherit; font-size: var(--et-fs-champ); }
.ecran-tiers .fa-input:focus { outline: 0; border-bottom-color: var(--et-form-blue); box-shadow: inset 0 -1px 0 0 var(--et-form-blue); }
.ecran-tiers .fa-boite { position: relative; min-width: 0; }
.ecran-tiers .fa-boite > .fa-ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--ts-geo); pointer-events: none; }
.ecran-tiers .fa-boite:not(.est-rempli) > .fa-ico { opacity: .45; }
.ecran-tiers .fa-boite > .fa-input { padding-left: 32px; }
.ecran-tiers .fa-erreur { grid-column: 2; display: flex; align-items: flex-start; gap: 5px; font-size: 12px; line-height: 1.45; color: var(--et-danger-ink); }
.ecran-tiers .fa-section { display: flex; align-items: center; gap: 9px; margin: var(--et-form-sect-t) 0 var(--et-form-sect-b); padding-bottom: var(--et-form-sect-p); border-bottom: 2px solid var(--et-filet-fort); }
.ecran-tiers .fa-section:first-child { margin-top: 0; }
.ecran-tiers .fa-section::before { content: ""; width: 3px; height: 15px; background: var(--et-form-blue); flex: none; }
.ecran-tiers .fa-section > span:first-child { font-family: var(--et-font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--et-table-head); }

.ecran-tiers .fa-opt { font-size: 13px; display: flex; align-items: center; gap: 8px; padding: 7px 11px; background: var(--et-surface); border: 1px solid var(--et-form-border); cursor: pointer; }
.ecran-tiers .fa-opt:hover { border-color: var(--et-form-blue); background: var(--et-surface-2); }
.ecran-tiers .fa-opt.est-actif { border-color: var(--et-form-blue); background: var(--et-tint); }
.ecran-tiers .fa-opt.est-inerte { opacity: .5; cursor: not-allowed; }
.ecran-tiers .fa-opt input { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.ecran-tiers .fa-opt-t { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--et-ink); }
.ecran-tiers .fa-opt-d { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--et-muted); }
.ecran-tiers .fa-btn { flex: none; height: 32px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: var(--fx-carte, var(--et-surface)); border: 1px solid var(--fx-carte-bord, var(--et-form-border)); border-radius: var(--fx-rayon-btn, var(--et-r-btn)); color: var(--et-neutre); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ecran-tiers .fa-btn:hover:enabled { background: var(--et-tint); border-color: var(--et-filet-fort); }
.ecran-tiers .fa-btn:disabled { cursor: not-allowed; color: var(--fx-tres-discret, var(--et-inerte)); }
.ecran-tiers .fa-btn.est-primaire { padding: 0 18px; background: var(--fx-orange, var(--et-action)); border-color: var(--fx-orange, var(--et-action)); color: var(--et-sur-aplat); }
.ecran-tiers .fa-btn.est-primaire:hover:enabled { background: var(--fx-orange-fonce, var(--et-action-d)); border-color: var(--fx-orange-fonce, var(--et-action-d)); color: var(--et-sur-aplat); }
.ecran-tiers .fa-btn.est-primaire:disabled { background: var(--et-action-off); border-color: var(--et-action-off); color: var(--et-sur-aplat); }
/* 640 px, sur l'échelle (était 620). */
@media (max-width: 640px) {
  .ecran-tiers .fa-champ { grid-template-columns: minmax(0, 1fr); }
  .ecran-tiers .fa-label { justify-self: start; text-align: left; }
  .ecran-tiers .fa-erreur { grid-column: 1; }
}


/* ---- Ce que la passation emploie sans le livrer ------------------------
   Quinze classes sont posées dans le balisage des trois dialogues sans qu'aucune règle
   ne les habille, ni ici ni dans le <style> des maquettes. La plupart n'en demandent
   pas : un titre posé dans .ft-tete hérite déjà de sa bande. Celles-ci en demandent
   une, faute de quoi la ligne se lit de travers. On y pose la GÉOMÉTRIE qui manque et
   rien d'autre — aucune couleur qui ne soit déjà celle du bloc voisin. */

.ecran-tiers .ft-tete-titre { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecran-tiers .ft-paire { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ecran-tiers .ft-trouve-code { flex: none; font-family: var(--et-font-mono); font-weight: 600; }
.ecran-tiers .ft-trouve-raison { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecran-tiers .ft-trouve-detail { flex: none; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }
.ecran-tiers .ft-trouve-motif { flex: none; font-size: 12px; color: var(--et-avertissement-ink); }

.ecran-tiers .fc-ident-t { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecran-tiers .fc-ident-m { flex: none; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }
.ecran-tiers .fc-paire { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ecran-tiers .fc-options { display: flex; flex-direction: column; gap: 6px; }
.ecran-tiers .fc-aide { font-size: 12px; line-height: 1.45; color: var(--et-muted); }

.ecran-tiers .fa-tete-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecran-tiers .fa-tete-m { flex: none; font-family: var(--et-font-mono); font-size: 12px; font-weight: 400; color: var(--et-sur-aplat-doux); }
.ecran-tiers .fa-plein { grid-column: 1 / -1; }
.ecran-tiers .fa-point { flex: none; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }

/* ---- TRS-03 : largeurs de colonnes du rapprochement et de la concentration ----
   Elles vivaient EN DUR dans le Razor (style="width:170px" sur chaque <th>) ; une
   largeur dans une page est ce que docs/conventions-responsive.md interdit, et c'est
   ici qu'un palier peut les relâcher. Les td suivent leur th. Le tableau
   d'ancienneté, lui, est monté sur Tableau (2026-09-07) et tient ses largeurs de ses
   colonnes déclarées : il n'a rien ici. Somme des auxiliaires et solde du collectif
   sont deux totaux de même largeur : une classe. */
.ecran-tiers .ts-col-collectif { width: 120px; }
.ecran-tiers .ts-col-nb-tiers { width: 110px; }
.ecran-tiers .ts-col-total { width: 170px; }
.ecran-tiers .ts-col-sans-tiers { width: 150px; }
.ecran-tiers .ts-col-ecart { width: 150px; }
.ecran-tiers .ts-col-verdict { width: 170px; }

.ecran-tiers .ts-col-solde { width: 150px; }
.ecran-tiers .ts-col-poids { width: 110px; }

/* ---- TRS-02 : les largeurs de la fiche n'ont plus de classes ici ---------
   Les dix qui vivaient sous ce titre (.ts-col-montant pour la table d'ancienneté,
   .ts-col-marque, -actions, -fonction, -telephone, -courriel, -recoit, -type,
   -ville, -pays, -point pour les deux tables du panneau contacts & adresses) sont
   parties avec les tables écrites à la main qu'elles habillaient : l'ancienneté est
   passée aux barres du gabarit, les contacts et les adresses à Tableau, et une
   colonne de Tableau porte sa largeur dans sa DÉCLARATION — `.Large("150px")` —,
   là où le reste de ce qui la définit se lit déjà.

   Ce n'est pas un retour à la largeur en dur dans la page que
   docs/conventions-responsive.md interdit : la déclaration de colonne n'est pas du
   balisage, c'est la description de la table, et c'est de là que le menu de colonnes
   et l'export la lisent aussi. Une classe de feuille ne pourrait pas les servir.

   Restent au-dessus celles de TRS-03, dont les tables sont encore écrites à la main. */

/* ===========================================================================
   FAMILLE .tie-* — LE COMPOSANT PARTAGÉ ListeTiers   (ajoutée le 2026-09-08)

   *** POURQUOI CE BLOC ARRIVE MAINTENANT ***
     `Components/Shared/ListeTiers.razor` écrivait une vingtaine de classes
     `.tie-*` qui n'ont JAMAIS existé dans cette feuille. Elles n'y ont pas été
     supprimées : elles n'y ont jamais été écrites — elles vivaient dans la copie
     de maquettes de la passation du domaine Tiers, jamais dans le CSS servi.
     Le commentaire de modele-erp.css §11.x le disait de travers en annonçant
     « .tie-tbl (ecran-tiers.css §3) […] doublon à retirer » : il n'y avait rien
     à retirer, il y avait quelque chose à écrire.

     Conséquence visible, et elle ne se devine pas d'une relecture de diff : les
     deux tables de collection de la fiche tiers — les contacts, les adresses
     secondaires — rendaient SANS filet, sans en-tête et sans état vide. Une
     table nue se lit comme une liste de texte.

   *** CE QUI RESTE ICI, ET CE QUI EST PARTI AU GABARIT ***
     Tout ce qui avait un équivalent est parti : `.tie-tbl` → `.mx-tbl`,
     `.tie-liste` → `.mx-tbl-cadre`, `.tie-fort` / `.tie-terne` / `.tie-mono` /
     `.tie-vide` → les modificateurs de `.mx-tbl`, `.tie-renvoi` → `.mx-note`,
     `.tie-unite` → le suffixe de `.mx-input-suffixe`, `.tie-marque` →
     `.mx-pastille`, `.tie-btn-mini` → `.mx-tbl-btn`, `.tie-lien` → `.mx-btn`.

     Ne restent que des MODIFICATEURS — une largeur, une gouttière, un
     empilement — c'est-à-dire ce qu'une feuille d'écran doit porter et que le
     gabarit n'a pas à deviner.

   PORTÉE NON SCOPÉE À `.ecran-tiers`, contrairement au reste du fichier : ce
   composant est monté par les écrans Clients et Fournisseurs, qui n'ouvrent pas
   ce conteneur. La scoper les laisserait nus une seconde fois.

   AUCUNE COULEUR LITTÉRALE : jetons --et-* uniquement.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. LA BARRE DE FILTRES DE LA LISTE

   Elle portait `d-flex gap-2`, un `input-group` et un `form-switch` — soit trois
   familles Bootstrap pour trois contrôles. Le bouton d'engagement est poussé à
   droite : c'est le seul de la vue, et la charte lui donne cette place.
   --------------------------------------------------------------------------- */
.tie-barre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tie-barre-fin { margin-left: auto; }
.tie-filtre-type { width: auto; min-width: 12rem; }
.tie-recherche { width: 18rem; max-width: 100%; }

/* Le décompte de lignes se lit comme une note, pas comme une valeur. */
.tie-compte-lignes { font-size: 13px; color: var(--et-muted); }

/* ---------------------------------------------------------------------------
   2. LE CADRE DE LA LISTE

   Il remplace un `p-2` posé sous un `.md-strip` — un filet orange de 3 px en
   tête de carte. L'orange est réservé au SEUL bouton d'engagement de l'écran ;
   posé là en décor permanent, il en banalisait la teinte. La carte n'a plus
   besoin que de laisser défiler sa table.
   --------------------------------------------------------------------------- */
.tie-cadre-liste { overflow-x: auto; }

/* ---------------------------------------------------------------------------
   3. MODIFICATEURS DE CHAMP

   Un compte comptable fait huit chiffres et une référence d'attestation une
   trentaine de signes : les laisser prendre toute la colonne de valeur d'une
   grille dense donnerait un champ de 600 px pour huit caractères.
   --------------------------------------------------------------------------- */
.tie-compte { max-width: 180px; }
.tie-ident { max-width: 280px; }

/* Trois cases à cocher empilées dans une rangée de fiche. */
.tie-cases { display: flex; flex-direction: column; gap: 7px; }

/* ---------------------------------------------------------------------------
   4. LA FENÊTRE DE DÉSACTIVATION

   Elle nomme le tiers, puis dit ce que la désactivation NE fait pas — il reste
   en base, les pièces passées continuent de le nommer. C'est cette seconde
   phrase qui évite qu'on cherche une suppression qui n'existe pas.
   --------------------------------------------------------------------------- */
.tie-confirme { margin: 0 0 8px; font-size: 14px; color: var(--et-ink); }
.tie-confirme-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--et-muted); }

/* ---------------------------------------------------------------------------
   5. LARGEURS DE FENÊTRE — DEUX CRANS, ET PLUS UNE SEULE RÈGLE ICI (2026-09-10)

   La fiche tiers porte sept onglets sur un rail : sous 980 px, le rail et le
   panneau se partagent une largeur où ni l'un ni l'autre ne tient — elle prend
   donc .est-tres-large (1120 px). La fenêtre de confirmation ne porte que deux
   phrases et prend .est-etroite (480). Les deux classes sont posées dans la
   page ; les 1080 et 520 px que cette section écrivait sont partis avec les
   seize autres largeurs du back-office.
   --------------------------------------------------------------------------- */

/* Le corps de la fiche ne pose pas le rembourrage de la fenêtre : le rail
   d'onglets touche les bords, et ce sont les panneaux qui respirent. */
.tie-corps { padding: 0; }

/* La bande de faits de la fiche tiers est accolée à l'en-tête de la fenêtre :
   elle n'a donc pas de filet haut, celui de l'en-tête tient déjà. */
.tie-faits { border-top: 0; }

/* La mention de pied de fenêtre passe à l'encre danger quand elle compte des
   champs en faute. L'ENCRE DU RANG, pas la teinte pleine : cette mention est du
   texte de 12 px, et --et-danger n'y tient pas le seuil AA. */
.tie-ko { color: var(--et-danger-ink); font-weight: 600; }

/* ---------------------------------------------------------------------------
   6. PALIERS — géométrie seule (docs/conventions-responsive.md)

   Règle tactile (docs/cibles-tactiles.md) : sous 1024 px, aucune cible ne
   descend sous 44 px, et une cible ne rétrécit jamais.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .tie-filtre-type, .tie-recherche { min-height: 44px; }
}

@media (max-width: 720px) {
    .tie-barre-fin { margin-left: 0; width: 100%; }
    .tie-barre-fin.mx-btn { justify-content: center; }
    .tie-filtre-type, .tie-recherche { min-width: 0; width: 100%; }
    .tie-compte, .tie-ident { max-width: 100%; }
}