/* EYPS — identité visuelle (teal + or, logo) */

:root {
  --eyps-teal: #003f54;
  --eyps-teal-mid: #134e5e;
  --eyps-teal-light: #1a6b7a;
  --eyps-teal-deep: #002a38;
  --eyps-gold: #c5a059;
  --eyps-gold-dark: #b88e44;
  --eyps-gold-soft: #e8d4a8;
  --eyps-gradient: linear-gradient(125deg, var(--eyps-teal-mid) 0%, var(--eyps-teal) 45%, var(--eyps-gold-dark) 100%);
  --eyps-gradient-soft: linear-gradient(135deg, rgba(0, 63, 84, 0.08), rgba(197, 160, 89, 0.12));
}

/* Remplace l’ancien violet KPI par la charte logo */
:root {
  --kpi: var(--eyps-teal);
  --kpi-hover: var(--eyps-teal-light);
  --pink: var(--eyps-gold);
  --accent: var(--eyps-gold);
  --accent-hover: var(--eyps-gold-dark);
  --chart-1: var(--eyps-teal-mid);
  --chart-2: var(--eyps-teal-light);
  --surface-tint: var(--eyps-gradient-soft);
}

[data-theme="dark"] {
  --kpi: #3d9aad;
  --kpi-hover: #5eb8c9;
  --pink: var(--eyps-gold);
  --accent: var(--eyps-gold);
  --accent-hover: var(--eyps-gold-soft);
}

.eyps-logo {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.eyps-logo--hero {
  width: min(320px, 78vw);
  margin: 0 auto 20px;
}

.eyps-logo--login {
  width: min(220px, 70vw);
  margin: 0 0 18px;
}

.eyps-logo--loading {
  width: min(180px, 55vw);
  margin: 0 auto 16px;
  display: block;
}

.eyps-logo--mark {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.logo-mark--img {
  width: auto;
  min-width: 42px;
  max-width: 148px;
  height: 40px;
  padding: 0;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  overflow: hidden;
}

body.kpi-v2 .logo-mark--img {
  width: auto;
  min-width: 42px;
  max-width: 148px;
  height: 40px;
  background: transparent !important;
  box-shadow: none !important;
}

.eyps-badge.import {
  border-color: rgba(0, 63, 84, 0.35);
  color: var(--eyps-teal);
  background: rgba(0, 63, 84, 0.08);
}

.eyps-health-banner.import {
  border-color: rgba(197, 160, 89, 0.4);
  background: linear-gradient(135deg, rgba(0, 63, 84, 0.08), rgba(197, 160, 89, 0.1));
}

.carte-hero h2 {
  background: linear-gradient(120deg, var(--eyps-teal-light), var(--eyps-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}