/* ============================================ L'EN-TÊTE DE COMPTE, PARTAGÉ
   Un seul fichier pour les cinq outils. Il était copié quatre fois, avec quatre
   fonctions de peinture différentes : le nom ne s'écrivait pas pareil d'un outil à
   l'autre et la photo n'existait que dans deux.

   POURQUOI DES CLASSES EN « tc- » ET NON LES CLASSES EXISTANTES. Chaque outil style
   déjà ses propres « .tb-r » et « .mn », avec des valeurs qui ont divergé. Reprendre
   ces noms aurait fait dépendre l'apparence de l'ordre de chargement des feuilles.
   Sous son propre préfixe, le bloc est identique partout, ce qui est précisément la
   promesse : même nom, même miniature, même titre.

   Les couleurs, elles, restent celles de l'outil : le bloc lit les variables que les
   cinq feuilles définissent déjà (--sur, --surv, --encre, --faint, --line, --card-2,
   --acc, --acc-dk). Chacune a une valeur de repli, pour qu'un outil qui n'en
   définirait pas reste lisible au lieu de disparaître. */

.tc{position:relative;flex:none;font:inherit}

.tc-b{display:flex;align-items:center;gap:11px;padding:6px 8px 6px 14px;
  border:0;background:none;font:inherit;border-radius:999px;
  user-select:none;cursor:pointer;transition:background .14s}
.tc-b:hover{background:rgb(var(--surv,255 255 255)/.16)}
.tc.ouvert .tc-b{background:rgb(var(--surv,255 255 255)/.24)}

.tc-qui{text-align:right;line-height:1.25}
.tc-qui b{display:block;font-size:13px;font-weight:640;color:var(--sur,#fff)}
/* Le TITRE, et non l'adresse électronique. Un en-tête dit qui vous êtes dans la
   maison, pas comment vous écrire. */
.tc-qui span{display:block;font-size:11px;color:rgb(var(--surv,255 255 255)/.6)}
@media (max-width:820px){.tc-qui{display:none}}

/* L'encadré blanc autour de la photo : c'est lui qui détache le portrait du fond de
   couleur, sur l'indigo comme sur le noir. */
.tc-av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;
  place-items:center;font-size:12.5px;font-weight:660;overflow:hidden;
  position:relative;background:#fff;color:var(--acc-dk,#3C44BE);
  box-shadow:0 0 0 2px #fff,0 0 0 3px rgb(var(--surv,255 255 255)/.3)}
.tc-av img{width:100%;height:100%;object-fit:cover;display:block;grid-area:1/1}
/* La couleur est posée sur l'initiale ELLE-MÊME et non héritée du cercle : dans une
   vignette dont le texte est déjà blanc, une initiale qui hérite se retrouve blanche
   sur blanc. Une déclaration propre ferme la porte à l'accident, où que le bloc
   soit posé. */
.tc-av i{grid-area:1/1;font-style:normal;color:var(--acc-dk,#3C44BE);
  font-size:inherit;font-weight:inherit;line-height:1}
.tc-av.lg{width:46px;height:46px;font-size:15px}
/* Verrou : la pastille est un span, et toute page hôte peut porter une règle
   « conteneur span ». À spécificité égale, cette déclaration-ci passe la dernière,
   parce que compte.css est chargée après la feuille de chaque outil. */
span.tc-av{display:grid;place-items:center;overflow:hidden}

.tc-chev{width:14px;height:14px;stroke:rgb(var(--surv,255 255 255)/.7);fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s}
.tc.ouvert .tc-chev{transform:rotate(180deg)}

.tc-m{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:252px;
  background:#fff;border-radius:18px;padding:7px;
  box-shadow:0 30px 70px -30px rgba(6,8,30,.6),0 0 0 1px var(--line,#E6E7F2)}
.tc-mh{display:flex;align-items:center;gap:12px;padding:10px 12px 12px}
/* « > div > » et non « .tc-mh span » : l'en-tête du menu contient la pastille du
   compte, qui est un span elle aussi. La règle large passait avant .tc-av et la
   mettait en display:block, donc l'initiale et la photo se posaient l'une SOUS
   l'autre au lieu de se superposer : deux visuels pour un seul compte. Le même
   piège s'est déjà tendu sur .gen de styles.css. */
.tc-mh>div>b{display:block;font-size:13.5px;font-weight:650;color:var(--encre,#141633)}
.tc-mh>div>span{display:block;font-size:11.5px;color:var(--faint,#9A9DBC)}
.tc-i{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;
  border-radius:12px;padding:10px 12px;cursor:pointer;font:inherit;font-size:13px;
  font-weight:560;color:var(--encre,#141633);text-align:left;text-decoration:none;
  transition:background .12s}
.tc-i:hover{background:var(--card-2,#F4F5FB)}
.tc-i svg{width:16px;height:16px;flex:none;stroke:var(--faint,#9A9DBC);fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tc-i:hover svg{stroke:var(--acc,#5A63E8)}
.tc-sep{height:1px;background:var(--line,#E6E7F2);margin:5px 4px}

/* Le périmètre, quand le compte n'en a qu'un morceau. Un client doit voir NOIR SUR
   BLANC ce qu'il regarde, sinon il conclura que la donnée manque là où c'est son
   périmètre qui s'arrête. */
.tc-per{padding:4px 12px 10px;font-size:11px;line-height:1.5;color:var(--faint,#9A9DBC)}
.tc-per b{display:block;font-weight:620;color:var(--encre,#141633);margin-bottom:2px}

/* Mode dégradé : le service ne répond pas, le profil affiché vient du cache local.
   L'outil reste utilisable, et le dit. */
.tc.hs .tc-av{box-shadow:0 0 0 2px #fff,0 0 0 3px #E8A33D}
.tc-hs{padding:6px 12px 10px;font-size:11px;color:#B4761C;line-height:1.45}

/* ================================ LE PANNEAU DU RÉFÉRENTIEL
   Il s'ouvre PAR-DESSUS l'outil, sans le quitter. C'est tout l'intérêt : un annonceur
   se crée en plein travail, et le travail doit être encore là quand on referme.

   z-index au-dessus de tout : plusieurs outils posent des blocs en position fixe sur
   toute la fenêtre, et l'un d'eux a déjà avalé les clics d'un menu. */
.tc-voile{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;
  justify-content:center;padding:38px 20px;overflow-y:auto;
  background:rgba(8,10,36,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.tc-pan{width:min(820px,100%);display:flex;flex-direction:column;gap:18px}
.tc-pan-h{position:relative;text-align:center;padding:0 44px}
.tc-pan-h b{display:block;font-size:clamp(20px,2.2vw,28px);font-weight:300;
  font-family:"Bricolage Grotesque",Figtree,sans-serif;letter-spacing:-.015em;
  color:var(--sur,#fff)}
.tc-pan-h span{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;
  color:rgb(var(--surv,255 255 255)/.66)}
.tc-pan-x{position:absolute;right:0;top:0;width:34px;height:34px;border:0;
  border-radius:50%;cursor:pointer;font:inherit;font-size:14px;
  background:rgb(var(--surv,255 255 255)/.16);color:var(--sur,#fff)}
.tc-pan-x:hover{background:rgb(var(--surv,255 255 255)/.28)}

/* ================================ « CET OUTIL N'EST PAS LE VÔTRE »
   La page qu'un client trouve s'il tape l'adresse d'Atlas, d'Engage ou d'IRIS. Elle
   remplace la page entière : il n'y a rien à voir derrière, et un outil à moitié
   peint derrière un message se lit comme une panne. Le fond est posé en dur, sans
   variable : les variables de couleur appartiennent à l'outil, et c'est justement
   son app.js qui ne tournera pas. */
.tc-nonvous{min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:40px 24px;
  text-align:center;background:#5A63E8;color:#fff;
  font-family:Figtree,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.tc-nonvous b{font-size:clamp(21px,2.6vw,30px);font-weight:300;letter-spacing:-.015em;
  font-family:"Bricolage Grotesque",Figtree,sans-serif}
.tc-nonvous p{margin:0;max-width:420px;line-height:1.55;font-size:13.5px;
  color:rgba(255,255,255,.72)}
.tc-nonvous-b{margin-top:8px;display:inline-block;text-decoration:none;
  background:#fff;color:#3C44BE;font-size:13px;font-weight:620;
  border-radius:999px;padding:11px 22px}