/* =============================================================================
   velum.css — Socle de marque PARTAGÉ des 4 portails (S51.4)
   Calé sur le thème de la plateforme : fond clair · barre sombre #0D0D12 ·
   accent violet #6B6BCC · cartes blanches. Servi à /static/portail/velum.css.
   ============================================================================= */
:root {
  --v-bg:        #f6f6f8;
  --v-fg:        #15151d;
  --v-muted:     #5a5a66;
  --v-card:      #ffffff;
  --v-border:    #e5e5ea;
  --v-violet:    #6b6bcc;   /* accent de marque (barre sombre) */
  --v-primary:   #4d4db8;   /* violet AA sur fond clair (texte/boutons) */
  --v-primary-d: #3f3f9e;
  --v-dark:      #0d0d12;   /* barre, pied de page */
  --v-cream:     #f0efe9;
  --v-ok:        #157a3d;  --v-ok-bg:    #e6f4ec;
  --v-warn:      #a86a08;  --v-warn-bg:  #fbf0dc;
  --v-danger:    #c01e1e;  --v-danger-bg:#fbe6e6;
  --v-radius:    10px;
  --v-shadow:    0 1px 3px rgba(13,13,18,.06), 0 1px 2px rgba(13,13,18,.04);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--v-bg); color: var(--v-fg); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--v-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Barre supérieure sombre ───────────────────────────────────────────────── */
.v-topbar {
  background: var(--v-dark); color: var(--v-cream);
  display: flex; align-items: center; gap: 28px;
  padding: 0 28px; height: 60px; position: sticky; top: 0; z-index: 20;
  box-shadow: 0 1px 0 rgba(255,255,255,.05);
}
.v-brand { display: flex; align-items: center; }
.v-brand img { height: 30px; display: block; }
.v-nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.v-nav a {
  color: #b9b9c6; text-decoration: none; font-size: 13.5px; font-weight: 500;
  padding: 8px 12px; border-radius: 7px; white-space: nowrap; transition: all .12s;
}
.v-nav a:hover { color: #fff; background: rgba(255,255,255,.06); text-decoration: none; }
.v-nav a.active { color: #fff; background: var(--v-violet); }
.v-topbar-right { display: flex; align-items: center; gap: 16px; }
.v-user { color: #9a9aa8; font-size: 13px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-logout { color: #d98a8a; font-size: 13px; }
.v-logout:hover { color: #ff9d9d; }
.v-role-badge { background: var(--v-violet); color: #fff; font-size: 11px; padding: 2px 9px; border-radius: 999px; font-weight: 600; }

/* ── Conteneur & cartes ────────────────────────────────────────────────────── */
.v-container { max-width: 1040px; margin: 26px auto; padding: 0 20px; }
.v-page-title { font-size: 20px; font-weight: 650; margin-bottom: 4px; }
.v-page-sub { color: var(--v-muted); font-size: 13.5px; margin-bottom: 20px; }
.v-card {
  background: var(--v-card); border: 1px solid var(--v-border);
  border-radius: var(--v-radius); box-shadow: var(--v-shadow);
  padding: 18px 20px; margin-bottom: 16px;
}
.v-card-title { font-size: 12px; font-weight: 700; color: var(--v-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px; }

/* ── KPI / tuiles (cliquables) ─────────────────────────────────────────────── */
.v-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.v-kpi {
  background: var(--v-card); border: 1px solid var(--v-border);
  border-left: 3px solid var(--v-violet); border-radius: var(--v-radius);
  box-shadow: var(--v-shadow); padding: 16px 18px; display: block; color: inherit;
}
.v-kpi.warn   { border-left-color: var(--v-warn); }
.v-kpi.danger { border-left-color: var(--v-danger); }
.v-kpi-label { color: var(--v-muted); font-size: 12.5px; margin-bottom: 6px; }
.v-kpi-value { font-size: 26px; font-weight: 700; letter-spacing: -.5px; }
.v-kpi-sub   { color: var(--v-muted); font-size: 12px; margin-top: 2px; }

/* Élément cliquable : curseur + survol */
a.v-kpi, a.v-card, .v-clickable { cursor: pointer; transition: transform .1s, box-shadow .12s, border-color .12s; text-decoration: none; }
a.v-kpi:hover, a.v-card:hover, .v-clickable:hover {
  transform: translateY(-1px); text-decoration: none;
  box-shadow: 0 4px 12px rgba(13,13,18,.10); border-color: var(--v-violet);
}
.v-arrow { color: var(--v-primary); font-size: 12.5px; font-weight: 600; }

/* ── Boutons ───────────────────────────────────────────────────────────────── */
.v-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 8px; font-size: 13.5px; font-weight: 600; border: 1px solid transparent; cursor: pointer; }
.v-btn-primary { background: var(--v-primary); color: #fff; }
.v-btn-primary:hover { background: var(--v-primary-d); text-decoration: none; }
.v-btn-outline { background: transparent; color: var(--v-primary); border-color: var(--v-border); }
.v-btn-outline:hover { border-color: var(--v-primary); background: #f3f3fb; text-decoration: none; }

/* ── Badges ────────────────────────────────────────────────────────────────── */
.v-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.v-badge.ok     { background: var(--v-ok-bg);     color: var(--v-ok); }
.v-badge.warn   { background: var(--v-warn-bg);   color: var(--v-warn); }
.v-badge.danger { background: var(--v-danger-bg); color: var(--v-danger); }
.v-badge.muted  { background: #ececed;            color: var(--v-muted); }

/* ── Tables ────────────────────────────────────────────────────────────────── */
.v-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.v-table th { text-align: left; color: var(--v-muted); font-size: 12px; font-weight: 600; padding: 8px 8px; border-bottom: 1px solid var(--v-border); }
.v-table td { padding: 10px 8px; border-bottom: 1px solid #f0f0f2; }
.v-table tr:last-child td { border-bottom: none; }
.v-table tr.v-row-link { cursor: pointer; }
.v-table tr.v-row-link:hover td { background: #f6f6fb; }

/* ── Bandeaux d'info ───────────────────────────────────────────────────────── */
.v-alert { border-radius: 8px; padding: 11px 15px; font-size: 13px; margin-bottom: 16px; }
.v-alert.warn   { background: var(--v-warn-bg);   color: var(--v-warn);   border: 1px solid #f0d9a8; }
.v-alert.danger { background: var(--v-danger-bg); color: var(--v-danger); border: 1px solid #f1c0c0; }

/* ── Connexion / activation ────────────────────────────────────────────────── */
.v-auth { max-width: 380px; margin: 56px auto; }
.v-auth .v-card { padding: 26px 26px; }
.v-field { width: 100%; padding: 10px 12px; border: 1px solid var(--v-border); border-radius: 8px; font-size: 14px; margin-bottom: 12px; background: #fff; }
.v-field:focus { outline: none; border-color: var(--v-primary); box-shadow: 0 0 0 3px rgba(77,77,184,.12); }
.v-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--v-muted); margin-bottom: 5px; }

/* ── Pied de page ──────────────────────────────────────────────────────────── */
.v-footer { text-align: center; color: #9a9aa8; font-size: 11.5px; padding: 28px 0 36px; }
.v-empty { color: var(--v-muted); font-size: 13.5px; padding: 24px 0; text-align: center; }