/* Groupe Bellion × S.D.R IA — palette extraite des sites officiels,
   chaque hexa est sourcé :
   #312783 = bleu Bellion (CSS groupebellion.fr + pixels des deux logos)
   #13007c = bleu boutons (CSS groupebellion.fr)
   #E30613 = rouge accent (CSS groupebellion.fr + rouge du logo Belmet)
   #e02b20 = rouge hover (CSS groupebellion.fr)
   #f9f9f9 = fond de section (CSS groupebellion.fr)
   Les teintes claires (glace/givre) sont des transparences du bleu sourcé. */
:root {
  --bleu: #312783;
  --bleu-fonce: #13007c;
  --glace: rgba(49, 39, 131, .08);
  --givre: rgba(49, 39, 131, .18);
  --rouge: #E30613;
  --rouge-hover: #e02b20;
  --vert: #1E9E6A;
  --ambre: #C9821A;
  --gris: #5A6B78;
  --gris-clair: #8FA0AD;
  --fond: #f9f9f9;
  --blanc: #FFFFFF;
  --bord: #e2e0ee;
  --ombre: 0 1px 3px rgba(49, 39, 131, .08), 0 8px 24px rgba(49, 39, 131, .06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  color: var(--bleu-fonce);
  background: var(--fond);
}

/* ── En-tête ── */
header {
  display: flex; align-items: center; gap: 26px;
  padding: 20px 30px;
  background: linear-gradient(100deg, var(--bleu-fonce), var(--bleu) 65%, #145A82);
  color: var(--blanc);
}
.logo { font-size: 30px; font-weight: 800; letter-spacing: 3px; line-height: 1; }
.logo small { display: block; font-size: 10px; letter-spacing: 2.4px; font-weight: 600;
              opacity: .82; margin-top: 4px; }
.head-title h1 { margin: 0; font-size: 19px; font-weight: 650; }
.head-title .sub { font-size: 13px; opacity: .78; margin-top: 3px; }
.powered { margin-left: auto; font-size: 12px; opacity: .8; text-align: right; }
.powered b { display: block; font-size: 15px; opacity: 1; }

/* ── KPI ── */
.kpis { display: flex; gap: 14px; padding: 20px 30px 4px; flex-wrap: wrap; }
.kpi {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 12px;
  padding: 14px 20px; min-width: 132px; box-shadow: var(--ombre);
}
.kpi .n { font-size: 27px; font-weight: 750; color: var(--bleu); line-height: 1.1; }
.kpi .t { font-size: 11.5px; color: var(--gris); margin-top: 3px; }

/* ── Onglets ── */
.tabs { display: flex; gap: 6px; padding: 18px 30px 0; flex-wrap: wrap; }
.tabs button {
  border: 1px solid var(--bord); background: var(--blanc); color: var(--gris);
  padding: 9px 16px; border-radius: 9px 9px 0 0; cursor: pointer;
  font-size: 13.5px; font-weight: 550; border-bottom: none;
}
.tabs button:hover { background: var(--glace); color: var(--bleu); }
.tabs button.on { background: var(--bleu); color: var(--blanc); border-color: var(--bleu); }

.wrap { padding: 0 30px 60px; }

/* ── Bandeau explicatif du signal ── */
.pitch {
  background: var(--blanc); border: 1px solid var(--bord); border-left: 4px solid var(--bleu);
  border-radius: 0 12px 12px 12px; padding: 16px 20px; margin: 0 0 18px;
  box-shadow: var(--ombre);
}
.pitch h2 { margin: 0 0 5px; font-size: 16px; }
.pitch p { margin: 0; color: var(--gris); font-size: 13.5px; max-width: 980px; }
.pitch .meth { margin-top: 10px; font-size: 12.5px; color: var(--gris-clair); }
.pitch .meth b { color: var(--gris); }

/* ── Tableaux ── */
table { width: 100%; border-collapse: collapse; background: var(--blanc);
        border: 1px solid var(--bord); border-radius: 12px; overflow: hidden;
        box-shadow: var(--ombre); }
th { background: var(--glace); color: var(--bleu-fonce); text-align: left;
     font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px;
     padding: 11px 14px; font-weight: 650; }
td { padding: 13px 14px; border-top: 1px solid var(--bord); vertical-align: top;
     font-size: 13.5px; }
tr:hover td { background: #FBFDFE; }
td .ent { font-weight: 650; }
td .meta { color: var(--gris-clair); font-size: 12px; margin-top: 2px; }
td .quoi { color: var(--bleu-fonce); }
td .pourquoi { color: var(--gris); font-size: 12.8px; }

a { color: var(--bleu); }
a.src { font-size: 12px; text-decoration: none; border-bottom: 1px dotted var(--givre); }
a.src:hover { border-bottom-style: solid; }

/* ── Pastilles ── */
.tag { display: inline-block; padding: 2px 8px; border-radius: 20px;
       font-size: 11px; font-weight: 650; }
.tag-date { background: var(--glace); color: var(--bleu); }
.tag-vol { background: #FFF6E6; color: var(--ambre); }
.tag-croise { background: #E6F6EF; color: var(--vert); }
.tag-urgent { background: #FDEBED; color: var(--rouge); }
.sig { display: inline-block; background: var(--bleu); color: #fff; border-radius: 6px;
       padding: 2px 7px; font-size: 11px; font-weight: 700; margin-right: 4px; }

/* ── Boutons ── */
.btn { border: 1px solid var(--bord); background: var(--blanc); color: var(--bleu);
       padding: 7px 12px; border-radius: 8px; cursor: pointer; font-size: 12.5px;
       font-weight: 600; }
.btn:hover { background: var(--glace); }
.btn.primaire { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.btn.primaire:hover { background: var(--bleu-fonce); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Enrichissement ── */
.enr { font-size: 12.5px; }
.enr .val { font-weight: 650; color: var(--vert); word-break: break-all; }
.enr .ko { color: var(--gris-clair); }
.enr .wait { color: var(--ambre); }

/* ── Moteur live ── */
.console {
  background: var(--bleu-fonce); color: #BFE3F5; font: 12.5px/1.65 ui-monospace,
  SFMono-Regular, Menlo, monospace; padding: 16px 18px; border-radius: 10px;
  margin-top: 14px; max-height: 340px; overflow: auto; white-space: pre-wrap;
}
.console .ok { color: #7EE0AE; }
.console .err { color: #FF8A9B; }

/* ── Top comptes ── */
.top-card {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 12px;
  padding: 18px 20px; margin-bottom: 14px; box-shadow: var(--ombre);
  border-left: 4px solid var(--vert);
}
.top-card h3 { margin: 0 0 3px; font-size: 16.5px; }
.top-card .sub { color: var(--gris-clair); font-size: 12.5px; margin-bottom: 10px; }
.fait { border-top: 1px solid var(--bord); padding: 9px 0; font-size: 13px; }
.fait:first-of-type { border-top: none; }

.vide { padding: 40px; text-align: center; color: var(--gris-clair); }

dialog { border: none; border-radius: 14px; padding: 0; max-width: 760px; width: 92%;
         box-shadow: 0 20px 60px rgba(7, 42, 65, .3); }
dialog::backdrop { background: rgba(7, 42, 65, .45); }
.dlg-head { display: flex; align-items: center; padding: 16px 20px;
            border-bottom: 1px solid var(--bord); }
.dlg-head h3 { margin: 0; font-size: 16px; }
.dlg-head button { margin-left: auto; border: none; background: none; font-size: 22px;
                   cursor: pointer; color: var(--gris); }
.dlg-body { padding: 20px; }
.dlg-body pre { white-space: pre-wrap; font: 13.5px/1.6 inherit; margin: 0;
                background: var(--fond); padding: 16px; border-radius: 10px;
                border: 1px solid var(--bord); }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px;
               border-top: 1px solid var(--bord); }

/* ── Architecture à trois étages ── */
.etages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0 22px; }
@media (max-width: 1100px) { .etages { grid-template-columns: 1fr; } }
.etage { background: var(--blanc); border: 1px solid var(--bord); border-radius: 12px;
         overflow: hidden; box-shadow: var(--ombre); display: flex; flex-direction: column; }
.etage h4 { margin: 0; padding: 12px 16px; font-size: 13px; letter-spacing: .4px;
            text-transform: uppercase; color: #fff; }
.etage.tm h4 { background: linear-gradient(90deg, #6A4FBF, #8367D8); }
.etage.t0 h4 { background: linear-gradient(90deg, var(--bleu-fonce), var(--bleu)); }
.etage.tp h4 { background: linear-gradient(90deg, #12836A, var(--vert)); }
.etage h4 span { display: block; font-size: 11px; text-transform: none; letter-spacing: 0;
                 opacity: .85; font-weight: 500; margin-top: 2px; }
.etage ul { list-style: none; margin: 0; padding: 6px 0; }
.etage li { padding: 10px 16px; border-top: 1px solid var(--bord); font-size: 13px; }
.etage li:first-child { border-top: none; }
.etage li b { display: block; color: var(--bleu-fonce); font-size: 12.5px; margin-bottom: 2px; }
.etage li .q { color: var(--gris); font-size: 12.4px; }
.etage li .n { color: var(--bleu); font-size: 12.2px; margin-top: 4px; font-style: italic; }
.etage li .lv { display: inline-block; margin-top: 6px; }

.dq { background: #FDF3F4; border: 1px solid #F3D6DA; border-left: 4px solid var(--rouge);
      border-radius: 10px; padding: 14px 18px; margin-bottom: 14px; }
.dq h4 { margin: 0 0 7px; font-size: 13px; color: var(--rouge);
         text-transform: uppercase; letter-spacing: .4px; }
.dq ul { margin: 0; padding-left: 18px; color: var(--gris); font-size: 13px; }
.dq li { margin: 3px 0; }
.dec { background: var(--glace); border: 1px solid var(--givre); border-radius: 10px;
       padding: 14px 18px; margin-bottom: 18px; font-size: 13.4px; }
.dec h4 { margin: 0 0 5px; font-size: 13px; color: var(--bleu);
          text-transform: uppercase; letter-spacing: .4px; }
.vig { background: #FFF8EC; border: 1px solid #F0DFC0; border-left: 4px solid var(--ambre);
       border-radius: 10px; padding: 14px 18px; margin-bottom: 14px; font-size: 13.4px; }
.vig h4 { margin: 0 0 5px; font-size: 13px; color: var(--ambre);
          text-transform: uppercase; letter-spacing: .4px; }
.avance { display: inline-block; background: #EFEAFB; color: #6A4FBF; border-radius: 20px;
          padding: 3px 11px; font-size: 12px; font-weight: 650; }

/* ── Logo officiel et titres d'étage ── */
.logo img { height: 46px; width: auto; display: block; }
.logo img.belmet { height: 30px; margin-top: 4px; filter: brightness(0) invert(1); opacity: .9; }
h3.ph { margin: 4px 0 10px; font-size: 14px; padding: 9px 14px; border-radius: 8px;
        color: #fff; letter-spacing: .3px; }
h3.ph span { font-weight: 500; opacity: .88; font-size: 12.5px; letter-spacing: 0; }
h3.ph.tm { background: linear-gradient(90deg, #6A4FBF, #8367D8); }
h3.ph.t0 { background: linear-gradient(90deg, var(--bleu-fonce), var(--bleu)); }
h3.ph.tp { background: linear-gradient(90deg, #12836A, var(--vert)); }

/* ── Filtres d'étage (chips) et lien « détail » ── */
.sep { width: 1px; height: 24px; background: var(--bord); margin: 0 6px; }
.chip { border: 1px solid var(--bord); background: var(--blanc); border-radius: 20px;
        padding: 6px 13px; font-size: 12.5px; font-weight: 650; cursor: pointer;
        color: var(--gris); }
.chip.tm.on { background: #6A4FBF; border-color: #6A4FBF; color: #fff; }
.chip.t0.on { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.chip.tp.on { background: var(--vert); border-color: var(--vert); color: #fff; }
.chip:not(.on):hover { background: var(--glace); color: var(--bleu); }
a.plus { color: var(--bleu); font-size: 12px; text-decoration: none; white-space: nowrap;
         font-weight: 650; }
a.plus:hover { text-decoration: underline; }

/* ── Colonne Décideur mise en avant — bleu glace de la charte ── */
td.col-dec { background: var(--glace); border-left: 3px solid var(--bleu); }
tr:hover td.col-dec { background: var(--givre); }
td.col-dec .ent { color: var(--bleu-fonce); font-size: 14px; }
td.col-dec .meta { color: var(--bleu); }
th.col-dec-h { background: var(--bleu); color: #fff; }

/* ── Nom du compte surligné — même charte ── */
td.col-ent .ent { display: inline-block; background: var(--glace); color: var(--bleu-fonce);
                  padding: 3px 9px; border-radius: 7px; font-size: 14px;
                  border-left: 3px solid var(--bleu); }
tr:hover td.col-ent .ent { background: var(--givre); }
.top-card h3 > span.nom, .top-card h3 { color: var(--bleu-fonce); }

/* ── Badge CLIENT — bleu plein de la charte, survol = le détail ── */
.badge-client { display: inline-block; background: var(--bleu); color: #fff;
                border-radius: 6px; padding: 2px 8px; font-size: 10.5px;
                font-weight: 750; letter-spacing: .5px; margin-top: 5px;
                cursor: help; }

/* ── Top comptes en grille ── */
.top-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1200px) { .top-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px)  { .top-grid { grid-template-columns: 1fr; } }
.tc { background: var(--blanc); border: 1px solid var(--bord); border-radius: 14px;
      padding: 16px 18px; box-shadow: var(--ombre); display: flex;
      flex-direction: column; gap: 9px; }
.tc-urgent { border-top: 4px solid var(--bleu); }
.tc-client { background: linear-gradient(180deg, var(--glace), var(--blanc) 55%); }
.tc-head { display: flex; align-items: center; }
.tc-rang { font-size: 26px; font-weight: 800; color: var(--givre); line-height: 1; }
.tc-urgent .tc-rang { color: var(--bleu); }
.tc-jours { margin-left: auto; background: var(--bleu); color: #fff; border-radius: 20px;
            padding: 3px 11px; font-size: 11.5px; font-weight: 700; }
.tc-jours.froid { background: var(--glace); color: var(--bleu); }
.tc-nom { font-size: 17px; font-weight: 750; color: var(--bleu-fonce); line-height: 1.25; }
.tc-fait { font-size: 12.8px; color: var(--gris); line-height: 1.45; }
.tc-vol { background: #FFF6E6; color: var(--ambre); border-radius: 8px;
          padding: 6px 10px; font-size: 12.3px; font-weight: 650; }
.tc-dec { border-top: 1px solid var(--bord); padding-top: 9px; font-size: 13px;
          display: flex; flex-direction: column; gap: 2px; }
.tc-dec b { color: var(--bleu-fonce); font-size: 14px; }
.tc-dec span { color: var(--gris-clair); font-size: 12px; }

/* ── URL LinkedIn visible et copiable ── */
.li-url { display: flex; align-items: center; gap: 5px; margin-top: 4px;
          font-size: 12px; }
.li-url a { color: var(--bleu); font-weight: 650; text-decoration: none;
            word-break: break-all; }
.li-url a:hover { text-decoration: underline; }
.li-url.ko { color: var(--gris-clair); font-style: italic; }
.li-url .copy { border: 1px solid var(--bord); background: var(--blanc);
                border-radius: 5px; cursor: pointer; font-size: 11px;
                padding: 1px 6px; color: var(--bleu); }
.li-url .copy:hover { background: var(--glace); }

/* ── Statut CLIENT ── */
.kpi-client { border-left: 4px solid var(--bleu); background: var(--glace); }

/* ── Note de build (donnée reconstruite, jamais « temps réel » déguisé) ── */
.build-note { background: var(--glace); border: 1px dashed var(--givre); color: var(--bleu);
              border-radius: 9px; padding: 9px 14px; font-size: 12.3px; margin-bottom: 12px; }

/* ── Fiche compte ── */
.ent.clic { cursor: pointer; }
.ent.clic:hover { text-decoration: underline; }
.fc-h { margin: 14px 0 8px; font-size: 13px; text-transform: uppercase;
        letter-spacing: .4px; color: var(--bleu); }
.fc-role { border-top: 1px solid var(--bord); padding: 8px 0; font-size: 13px; }
.fc-contact { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
              padding: 4px 0 4px 12px; }

/* ── Feedback + changelog ── */
.fb { display: flex; gap: 4px; margin-top: 6px; }
.fb-b { border: 1px solid var(--bord); background: var(--blanc); border-radius: 6px;
        cursor: pointer; font-size: 13px; padding: 2px 7px; }
.fb-b:hover { background: var(--glace); }
.fb-merci { color: var(--vert); font-size: 11.5px; font-weight: 650; }
.cl-box { margin: 16px 30px 0; background: var(--blanc); border: 1px solid var(--givre);
          border-left: 4px solid var(--bleu); border-radius: 12px; padding: 14px 18px;
          box-shadow: var(--ombre); }
.cl-head { display: flex; align-items: center; color: var(--bleu); font-size: 14px; }
.cl-head button { margin-left: auto; border: none; background: none; font-size: 18px;
                  cursor: pointer; color: var(--gris); }
.cl-item { font-size: 13px; color: var(--gris); padding: 6px 0; border-top: 1px solid var(--bord); }
.cl-item:first-of-type { border-top: none; }

/* ── Flux Événements + onboarding ── */
.ev { display: flex; gap: 16px; align-items: flex-start; background: var(--blanc);
      border: 1px solid var(--bord); border-radius: 10px; padding: 12px 16px;
      margin-bottom: 8px; box-shadow: var(--ombre); }
.ev-client { background: linear-gradient(90deg, var(--glace), var(--blanc) 40%); }
.ev-date { display: flex; flex-direction: column; gap: 4px; min-width: 96px; }
.ev-corps { flex: 1; }
.ev-corps .quoi { font-size: 12.8px; color: var(--gris); margin-top: 4px; }
.ev-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
              min-width: 130px; }
.ob label { display: block; font-weight: 650; color: var(--bleu-fonce);
            margin: 12px 0 4px; font-size: 13.5px; }
.ob input, .ob textarea { width: 100%; border: 1px solid var(--bord); border-radius: 8px;
            padding: 8px 10px; font: inherit; font-size: 13.5px; }
.ob button { margin-top: 14px; }


/* ── Spécifique Bellion ── */
.badge-conf { display: inline-block; background: #FFF6E6; color: var(--ambre);
              border: 1px solid #F0DFC0; border-radius: 6px; padding: 2px 8px;
              font-size: 10.5px; font-weight: 750; letter-spacing: .4px; margin-top: 5px;
              cursor: help; }
.tag-agence { background: var(--glace); color: var(--bleu); border-radius: 20px;
              padding: 2px 9px; font-size: 11px; font-weight: 650; white-space: nowrap; }
.navi-hook { background: #FFF8EC; border: 1px dashed #F0DFC0; border-left: 4px solid var(--ambre);
             border-radius: 10px; padding: 16px 20px; margin: 14px 0; font-size: 13.5px;
             color: var(--gris); }
.navi-hook h4 { margin: 0 0 6px; color: var(--ambre); font-size: 13.5px;
                text-transform: uppercase; letter-spacing: .4px; }
.lien-m1m2 { background: var(--glace); border: 1px solid var(--givre); border-radius: 10px;
             padding: 11px 16px; margin-bottom: 14px; font-size: 13px; color: var(--bleu-fonce); }
.fb textarea { border: 1px solid var(--bord); border-radius: 6px; font: inherit;
               font-size: 12px; padding: 3px 6px; width: 150px; height: 26px; resize: none; }

/* ── v2 : couverture, rayon, fiche, priorité ── */
.cov { background: var(--blanc); border: 1px solid var(--bord); border-left: 4px solid var(--vert);
       border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; }
.cov-tete { font-size: 13px; color: var(--bleu-fonce); margin-bottom: 6px; }
.cov-ligne { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px;
             border-top: 1px solid var(--bord); padding: 5px 0; }
.cov-ligne:first-of-type { border-top: none; }
.cov-src { color: var(--gris); }
.cov-ratio { color: var(--bleu); white-space: nowrap; }
.rayon-box { min-width: 300px; }
.badge-prio { display: inline-block; background: var(--rouge); color: #fff;
              border-radius: 6px; padding: 2px 8px; font-size: 10.5px; font-weight: 750;
              letter-spacing: .4px; margin-top: 5px; }
#dlg-fiche { max-width: 860px; }

/* ── Correction pré-RDV ── */
.badge-multi { display: inline-block; background: var(--vert); color: #fff;
               border-radius: 6px; padding: 2px 8px; font-size: 10.5px; font-weight: 750;
               letter-spacing: .4px; margin-top: 5px; cursor: help; }
.kpi-note { flex-basis: 100%; font-size: 12px; color: var(--gris); padding: 2px 6px; }

/* ── Écran de connexion ── */
.login-wrap { position: fixed; inset: 0; background: linear-gradient(135deg, var(--bleu-fonce), var(--bleu));
              display: flex; align-items: center; justify-content: center; z-index: 50; }
.login-card { background: var(--blanc); border-radius: 16px; padding: 34px 38px; width: 360px;
              display: flex; flex-direction: column; gap: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.login-card h2 { margin: 4px 0 8px; font-size: 16px; color: var(--bleu-fonce); text-align: center; }
.login-logo { height: 52px; object-fit: contain; }
.login-card input { border: 1px solid var(--bord); border-radius: 9px; padding: 11px 13px; font: inherit; }