/* STEF Foodservice × S.D.R IA — palette chaîne du froid :
   bleu profond (le froid négatif), glace, et un rouge STEF pour l'urgence. */
:root {
  --bleu: #0B3C5D;
  --bleu-fonce: #072A41;
  --glace: #E8F1F7;
  --givre: #C9DFEC;
  --rouge: #D6273E;
  --vert: #1E9E6A;
  --ambre: #C9821A;
  --gris: #5A6B78;
  --gris-clair: #8FA0AD;
  --fond: #F7FAFC;
  --blanc: #FFFFFF;
  --bord: #DCE7EF;
  --ombre: 0 1px 3px rgba(11, 60, 93, .08), 0 8px 24px rgba(11, 60, 93, .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: 42px; width: auto; display: block; filter: brightness(0) invert(1); }
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 STEF ── */
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 STEF — 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; }

/* P6 — invite d'ajout de contact dans la fiche compte */
.fc-ajout{margin:8px 0 4px;padding:7px 10px;border:1px dashed var(--glace,#9dc3d4);
  border-radius:8px;color:var(--bleu,#0B3C5D);opacity:.75;font-size:.85em;cursor:default}

/* P7 — périmètre S6 : chip discret sur la ligne + filtre dans la barre */
.chip-perim{display:inline-block;margin-top:3px;padding:1px 7px;border-radius:9px;
  font-size:.66em;letter-spacing:.04em;background:var(--glace,#dceaf1);
  color:var(--bleu,#0B3C5D);opacity:.8}
.chip.perim{opacity:.55}
.chip.perim.on{opacity:1;outline:1.5px solid var(--bleu,#0B3C5D)}

/* Écran de login (SaaS) */
.login-wrap{position:fixed;inset:0;z-index:50;display:flex;align-items:center;
  justify-content:center;background:var(--bleu,#0B3C5D)}
.login-wrap[hidden]{display:none}
.login-card{background:#fff;border-radius:14px;padding:36px 40px;width:340px;
  display:flex;flex-direction:column;gap:12px;box-shadow:0 18px 60px rgba(0,0,0,.35)}
.login-logo{height:44px;object-fit:contain;margin:0 auto 4px}
.login-sub{text-align:center;color:var(--bleu,#0B3C5D);font-size:.9em;margin-bottom:6px}
.login-card input{padding:10px 12px;border:1px solid #cdd9e1;border-radius:8px;font-size:1em}
.login-err{color:#b3261e;font-size:.85em;text-align:center;min-height:1.2em}