/* ==========================================================================
   ECO REPORT — composants : cartes, KPI, encarts, légendes, tableaux
   ========================================================================== */

/* -------------------------------- cartes ------------------------------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);min-width:0;display:flex;flex-direction:column;
}
.card-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:15px 18px 11px;
}
.card-head h2{font-size:14px;font-weight:650}
.card-head p{margin-top:3px;font-size:11.5px;color:var(--muted);line-height:1.4}
.card-actions{display:flex;gap:6px;flex:none}
.card-body{padding:4px 18px 18px;flex:1;min-width:0}
.card-body > .table-scroll{margin:0 -18px;padding:0 18px}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* ------------------------------- KPI ----------------------------------- */
.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.kpi-card{
  position:relative;padding:15px 15px 12px;border-radius:var(--radius);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  cursor:pointer;overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s;
}
.kpi-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue);
}
.kpi-card.vigilance::before{background:var(--amber)}
.kpi-card.alerte::before{background:var(--red)}
.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#d3e0ea}
.kpi-card:focus-visible{outline:2px solid var(--blue-300);outline-offset:2px}
.kpi-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kpi-label{
  font-size:11.5px;font-weight:600;color:var(--ink-2);line-height:1.25;
  text-transform:uppercase;letter-spacing:.03em;
}
.status-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--green)}
.status-dot.vigilance{background:var(--amber)}
.status-dot.alerte{background:var(--red);box-shadow:0 0 0 3px rgba(192,57,43,.14)}
.kpi-value{
  margin-top:9px;font-size:25px;font-weight:680;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.1;
}
.kpi-value small{margin-left:4px;font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:0}
.kpi-foot{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-top:7px}
.trend{font-size:11.5px;font-weight:650;font-variant-numeric:tabular-nums}
.trend.good{color:var(--green)}
.trend.bad{color:var(--red)}
.kpi-target{font-size:10.5px;color:var(--muted);white-space:nowrap}
.kpi-bar{margin-top:9px;height:4px;border-radius:2px;background:#eef2f6;overflow:hidden}
.kpi-bar span{display:block;height:100%;border-radius:2px;background:var(--blue);transition:width .5s}
.kpi-card.vigilance .kpi-bar span{background:var(--amber)}
.kpi-card.alerte .kpi-bar span{background:var(--red)}
.kpi-spark{margin:8px -4px -4px;height:30px}

/* ------------------------------- encart -------------------------------- */
.callout{
  display:flex;gap:22px;align-items:center;justify-content:space-between;
  padding:16px 20px;border-radius:var(--radius);
  background:linear-gradient(105deg,#003f63 0%,#005380 62%,#0a6493 100%);
  color:#e9f3fa;box-shadow:var(--shadow-md);position:relative;overflow:hidden;
}
.callout::after{
  content:"";position:absolute;right:-60px;top:-70px;width:230px;height:230px;
  border-radius:50%;background:rgba(214,222,107,.13);
}
.callout-text{font-size:13px;line-height:1.6;max-width:900px;position:relative;z-index:1}
.callout-text strong{color:#fff;font-weight:700}
.callout-stats{display:flex;gap:18px;flex:none;position:relative;z-index:1}
.callout-stats div{text-align:right}
.callout-stats b{display:block;font-size:21px;font-weight:680;color:#fff;line-height:1.1}
.callout-stats b.crit{color:#ff9b8f}
.callout-stats span{font-size:10.5px;color:#9dc0d6}

/* ------------------------------ légendes ------------------------------- */
.legend{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--line-soft);font-size:11.5px;color:var(--ink-2);
}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:2px;flex:none}
.legend-note{margin-left:auto;color:var(--muted)}
.legend-note b{font-weight:700}
.mini-legend{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.mini-legend span{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2)}
.mini-legend i{width:8px;height:8px;border-radius:2px;flex:none}
.mini-legend b{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:650}
.donut-wrap{display:flex;justify-content:center;padding:4px 0}

/* --------------------------- mini alertes ------------------------------ */
.alert-mini{display:flex;flex-direction:column;gap:2px}
.alert-mini-item{
  display:flex;align-items:flex-start;gap:9px;width:100%;padding:9px 8px;
  border:0;border-radius:8px;background:transparent;text-align:left;cursor:pointer;
}
.alert-mini-item:hover{background:#f6f9fc}
.alert-pill{width:3px;align-self:stretch;border-radius:2px;background:var(--muted);flex:none;margin-top:2px}
.alert-pill.crit{background:var(--red)}
.alert-pill.warn{background:var(--amber)}
.alert-pill.info{background:var(--blue)}
.alert-mini-body{display:flex;flex-direction:column;gap:1px;min-width:0}
.alert-mini-body b{font-size:12.5px;font-weight:600;line-height:1.35}
.alert-mini-body em{font-size:11px;font-style:normal;color:var(--muted)}

/* ------------------------------ faits ---------------------------------- */
.facts{display:flex;flex-direction:column;gap:12px}
.facts li{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.facts b{color:var(--ink);font-weight:650}
.fact-tag{
  flex:none;margin-top:1px;padding:2px 7px;border-radius:5px;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
}
.fact-tag.crit{background:var(--red-soft);color:#a52f23}
.fact-tag.warn{background:var(--amber-soft);color:#96610a}
.fact-tag.ok{background:var(--green-soft);color:#166f47}

/* ---------------------------- bandeaux stats --------------------------- */
.stat-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden}
.stat{padding:13px 16px;border-right:1px solid var(--line-soft);min-width:0}
.stat:last-child{border-right:0}
.stat span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat b{display:block;margin-top:4px;font-size:18px;font-weight:680;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat em{display:block;margin-top:2px;font-size:10.5px;font-style:normal;color:var(--muted)}
.stat-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow-sm);
}
.stat-card span{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.stat-card b{display:block;margin:5px 0 2px;font-size:26px;font-weight:680;letter-spacing:-.03em}
.stat-card em{font-size:11.5px;font-style:normal;color:var(--muted)}

/* -------------------------- tableaux : outils -------------------------- */
.table-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.table-tools .chips{flex:1;min-width:0}
.inline-bar{height:5px;border-radius:3px;background:#eef2f6;overflow:hidden;min-width:54px}
.inline-bar span{display:block;height:100%;border-radius:3px;background:var(--blue)}
.score-cell{display:flex;align-items:center;gap:8px;min-width:110px}
.score-cell b{font-size:11.5px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.att{font-weight:650;font-variant-numeric:tabular-nums}
.att.warn{color:var(--amber)}

/* ------------------------------ login ---------------------------------- */
.login{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}
.login-aside{
  display:flex;flex-direction:column;justify-content:space-between;gap:32px;
  padding:44px 52px;color:#e6f1f8;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#003048 0%,#00466e 45%,#006094 100%);
}
.login-aside::before{
  content:"";position:absolute;right:-140px;bottom:-160px;width:460px;height:460px;
  border-radius:50%;border:1px solid rgba(214,222,107,.28);
}
.login-aside::after{
  content:"";position:absolute;right:-40px;bottom:-60px;width:280px;height:280px;
  border-radius:50%;background:rgba(214,222,107,.10);
}
.login-brand{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.login-logo{height:64px;width:auto;border-radius:9px;background:#fff;padding:4px}
.login-product{font-size:17px;font-weight:700;letter-spacing:.12em;color:#fff}
.login-pitch{position:relative;z-index:1;max-width:520px}
.login-pitch h1{font-size:35px;line-height:1.22;letter-spacing:-.025em;color:#fff;font-weight:650}
.login-pitch p{margin-top:16px;font-size:14px;line-height:1.65;color:#b8d3e3}
.login-points{display:flex;flex-direction:column;gap:11px;margin-top:26px}
.login-points li{display:flex;align-items:center;gap:10px;font-size:13px;color:#dcebf4}
.login-points span{width:6px;height:6px;border-radius:50%;background:var(--lime);flex:none;
  box-shadow:0 0 0 4px rgba(214,222,107,.16)}
.login-foot{position:relative;z-index:1;font-size:11.5px;color:#8fb4ca;letter-spacing:.02em}

.login-main{display:flex;align-items:center;justify-content:center;padding:40px 32px;background:#f6f9fc}
.login-card{width:100%;max-width:470px;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:28px;box-shadow:0 18px 50px rgba(10,40,60,.09)}
.login-card-head{display:flex;gap:13px;align-items:center;margin-bottom:20px}
.login-logo-sm{height:44px;width:auto;border-radius:7px}
.login-card-head h2{font-size:17px;font-weight:650}
.login-card-head p{margin-top:2px;font-size:12px;color:var(--muted)}
.profiles{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px}
.profile{
  display:flex;align-items:center;gap:9px;padding:10px 11px;border-radius:9px;
  border:1px solid var(--line);background:#fff;cursor:pointer;text-align:left;
  transition:.15s;min-width:0;
}
.profile:hover{border-color:var(--blue-300);background:#f8fbfd}
.profile.selected{border-color:var(--blue);background:var(--blue-100);
  box-shadow:0 0 0 2px rgba(0,103,159,.12)}
.profile-badge{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:30px;height:30px;border-radius:50%;background:var(--navy);
  color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.03em;
}
.profile.selected .profile-badge{background:var(--blue)}
.profile-name{font-size:12px;font-weight:550;line-height:1.25;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis}
.login-note{margin-top:14px;font-size:10.5px;line-height:1.5;color:var(--muted);text-align:center}

@media (max-width:900px){
  .login{grid-template-columns:1fr}
  .login-aside{padding:28px 24px;gap:20px}
  .login-pitch h1{font-size:25px}
  .login-pitch p{font-size:13px}
  .login-points{display:none}
  .login-logo{height:48px}
  .login-main{padding:24px 16px 40px;align-items:flex-start}
  .login-card{padding:22px}
}