/**
 * 02-base.css — Reset, typo de base, utilities (Phase 5-bis)
 *
 * Migré depuis :
 *   - <style> inline d'index.php (utilities, links, base)
 *   - inc/vo_design_tokens.css (.vo-u-*)
 *
 * Charge avant 03-components.css. N'importe AUCUNE composante métier.
 */

/* ============================================================
   RESET MINIMAL
   ============================================================ */
* { box-sizing: border-box; }

a { text-decoration: none !important; cursor: pointer; }

/* ============================================================
   UTILITIES — préfixe .vo-u-* pour éviter collisions
   ============================================================ */

.vo-u-card {
  background: var(--gv-surface, #fff);
  border: 1px solid var(--gv-border, #e5e7eb);
  border-radius: var(--gv-radius-lg, 14px);
  box-shadow: var(--gv-shadow-md, 0 4px 12px rgba(15, 23, 42, .08));
  transition: box-shadow var(--gv-tr), border-color var(--gv-tr);
}
.vo-u-card:hover {
  box-shadow: var(--gv-shadow-lg, 0 8px 24px rgba(0, 0, 0, .08));
}

.vo-u-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--gv-radius-pill, 999px);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  background: var(--gv-info-bg, #eff6ff);
  color: var(--gv-info-ink, #1e3a8a);
  border: 1px solid transparent;
  transition: background var(--gv-tr), border-color var(--gv-tr);
}
.vo-u-pill--success { background: var(--gv-success-bg, #dcfce7); color: var(--gv-success-ink, #14532d); }
.vo-u-pill--warn    { background: var(--gv-warning-bg, #fef3c7); color: var(--gv-warning-ink, #854d0e); }
.vo-u-pill--danger  { background: var(--gv-danger-bg, #fee2e2); color: var(--gv-danger-ink, #7f1d1d); }

.vo-u-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--gv-primary, #0272E5);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--gv-radius, 10px);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: transform var(--gv-tr), box-shadow var(--gv-tr-slow);
  box-shadow: var(--gv-shadow-glow, 0 6px 20px rgba(2, 114, 229, .35));
}
.vo-u-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--gv-shadow-glow-lg, 0 14px 36px rgba(2, 114, 229, .45));
}

/* Sélection texte — accent bleu pâle */
::selection {
  background: rgba(2, 114, 229, .22);
  color: var(--gv-ink);
}

/* ============================================================
   UTILITIES TYPO/LAYOUT — Phase 5-bis polish
   Pour migrer les style="..." inline résiduels en classes sémantiques.
   ============================================================ */

/* Font-size */
.vo-u-fs-11 { font-size: 11px; }
.vo-u-fs-12 { font-size: 12px; }

/* Font-weight */
.vo-u-fw-500 { font-weight: 500; }
.vo-u-fw-600 { font-weight: 600; }

/* Font features */
.vo-u-tnum { font-variant-numeric: tabular-nums; }

/* Couleurs texte muted (gris clair) */
.vo-u-text-muted { color: #94a3b8; }

/* Alignement */
.vo-u-text-center { text-align: center; }

/* Cellule "N/A" — placeholder ** dans tableau quand donnée absente */
.vo-cell-na {
  text-align: center;
  color: #9ca3af;
  font-weight: 600;
}

/* Cellule info compacte (font 12, weight 600, ink primary) */
.vo-cell-info {
  font-size: 12px;
  font-weight: 600;
  color: var(--gv-ink, #111827);
}

/* ============================================================
   Utility : .small (texte petit, secondaire) — utilise dans des
   contextes generiques (legendes, hints non-form, footers compacts).
   Pour les hints lies a un champ, preferer .hint (gv-form.css).
   ============================================================ */
.small {
  font-size: 12px;
  color: var(--gv-ink-secondary, #6b7280);
}