/* ================== L'ÉCRAN DU RÉFÉRENTIEL, HABILLAGE PARTAGÉ
   Comme « compte.css » : les couleurs sont celles de l'outil, lues dans les variables
   que les cinq feuilles définissent déjà. Un panneau blanc posé sur le fond de
   couleur, comme les cartes des écrans de paramétrage. */

.tr{color:var(--encre,#141633);font:inherit}
.tr-attente{margin:0;padding:22px;text-align:center;font-size:12.5px;
  color:rgb(var(--surv,255 255 255)/.7)}

.tr-tabs{display:flex;gap:8px;margin:0 0 16px;justify-content:center}
.tr-tab{border:0;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  border-radius:999px;padding:8px 15px;color:var(--sur,#fff);
  background:rgb(var(--surv,255 255 255)/.14);
  box-shadow:inset 0 0 0 1px rgb(var(--surv,255 255 255)/.22);transition:.14s}
.tr-tab:hover{background:rgb(var(--surv,255 255 255)/.24)}
.tr-tab.on{background:#fff;color:var(--acc-dk,#3C44BE);box-shadow:none}
.tr-tab i{font-style:normal;margin-left:7px;font-size:11px;opacity:.62}
/* L'onglet « à rattacher » réclame l'œil : ces campagnes sont MASQUÉES tant que
   personne ne s'en occupe, et une alerte qu'on ne voit pas ne sert à rien. */
.tr-tab.alerte{background:#FFD79A;color:#6B4408;box-shadow:none}
.tr-tab.alerte.on{background:#fff;color:#B4761C}

.tr-aide{margin:0 0 14px;font-size:12px;line-height:1.55;text-align:center;
  color:rgb(var(--surv,255 255 255)/.72)}
.tr-aide b{color:var(--sur,#fff)}

.tr-actes{display:flex;justify-content:flex-start;margin:0 0 12px}
.tr-b{border:0;font:inherit;font-size:13px;font-weight:620;border-radius:12px;
  padding:10px 16px;cursor:pointer;background:var(--acc,#5A63E8);color:#fff;
  transition:.14s}
.tr-b:hover{background:var(--acc-dk,#3C44BE)}
.tr-b.pale{background:var(--card-2,#F4F5FB);color:var(--encre,#141633);
  box-shadow:inset 0 0 0 1px var(--line,#E6E7F2)}

/* Le formulaire, dans une carte blanche : c'est un objet qu'on remplit, il doit se
   détacher de la liste qu'il vient modifier. */
.tr-f{background:#fff;border-radius:18px;padding:18px 20px;margin:0 0 16px;
  display:flex;flex-direction:column;gap:12px;
  box-shadow:0 24px 60px -40px rgba(6,8,30,.5),0 0 0 1px var(--line,#E6E7F2)}
.tr-c{display:block}
.tr-c b{display:block;font-size:10.5px;font-weight:640;color:var(--dim,#6C6F94);
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 5px}
.tr-c input,.tr-c select{width:100%;box-sizing:border-box;font:inherit;font-size:13.5px;
  color:var(--encre,#141633);background:var(--card-2,#F4F5FB);
  border:1px solid var(--line,#E6E7F2);border-radius:12px;padding:9px 11px}
.tr-c input:focus,.tr-c select:focus{outline:none;border-color:var(--acc-line,#C9CDF7);
  background:#fff;box-shadow:0 0 0 3px var(--acc-soft,#EEF0FE)}
.tr-fg{display:flex;gap:10px}

.tr-l{background:#fff;border-radius:18px;padding:7px 14px;
  box-shadow:0 24px 60px -40px rgba(6,8,30,.5),0 0 0 1px var(--line,#E6E7F2)}
.tr-i{display:flex;align-items:center;gap:12px;padding:10px 0;
  border-top:1px solid var(--line-2,#EFF0F7)}
.tr-i:first-child{border-top:0}
.tr-i.off{opacity:.5}
.tr-mk{flex:none;width:30px;height:30px;border-radius:50%;display:grid;
  place-items:center;font-size:11px;font-weight:660;
  background:var(--acc-soft,#EEF0FE);color:var(--acc-dk,#3C44BE)}
.tr-mk.alerte{background:#FFE9C4;color:#B4761C}
.tr-n{flex:1;min-width:0}
.tr-n b{display:block;font-size:13px;font-weight:620}
.tr-n i{display:block;font-style:normal;font-size:11px;color:var(--faint,#9A9DBC);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* L'origine dit d'où vient l'annonceur : saisi à la main, ou vu dans BigQuery. Un
   prospect saisi qui reste « saisi » alors qu'il a des campagnes est le signe qu'un
   alias manque. */
.tr-o{flex:none;font-size:10.5px;font-weight:620;border-radius:999px;padding:3px 9px;
  background:var(--card-2,#F4F5FB);color:var(--dim,#6C6F94)}
.tr-o.saisi{background:#EEF6F1;color:#2F8F63}
.tr-e{flex:none;border:0;font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  border-radius:10px;padding:6px 11px;background:var(--card-2,#F4F5FB);
  color:var(--encre,#141633);box-shadow:inset 0 0 0 1px var(--line,#E6E7F2)}
.tr-e:hover{background:var(--line-2,#EFF0F7)}
.tr-s{flex:none;font:inherit;font-size:12px;border-radius:10px;padding:6px 9px;
  border:1px solid var(--line,#E6E7F2);background:#fff;color:var(--encre,#141633)}

.tr-msg{margin:0 0 12px;text-align:center;font-size:12.5px;color:#8FE0B4}
.tr-msg.err{color:#FFAFA6}

/* L'AVATAR D'UN ANNONCEUR, à la place de ses initiales.

   « overflow:hidden » et « contain » sur l'image, les deux ensemble : sans le premier
   un logo de 600 pixels débordait de la rangée entière au lieu d'être rogné par sa
   pastille, et sans le second il serait étiré. « contain » plutôt que « cover » parce
   qu'un logo de marque a son propre cadrage : on ne rogne pas dedans. */
.tr-mk.img{background:#fff;overflow:hidden;padding:2px;box-sizing:border-box}
.tr-mk.img img{width:100%;height:100%;object-fit:contain;display:block}