/*
 * Equus Design System — reskin de Bootstrap 5.3 (chargé depuis un CDN, non recompilé).
 * Charger APRÈS bootstrap.min.css et equus-tokens.css.
 *
 * Bootstrap 5.3 compilé fige les couleurs de chaque composant en dur (les
 * variables --bs-btn-bg etc. ne référencent pas --bs-primary à l'exécution),
 * donc on redéclare directement les classes utilisées par l'application
 * plutôt que de ne toucher que les variables globales --bs-*.
 */

/* ---- Base ---- */
body {
  background-color: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-ui);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
}

a {
  color: var(--text-link);
}
a:hover {
  color: var(--accent-primary-hover);
}

/* ---- Boutons ---- */
.btn {
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-md);
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--text-inverse);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--accent-primary-hover);
  border-color: var(--accent-primary-hover);
  color: var(--text-inverse);
}
.btn-primary:active, .btn-primary.active {
  background-color: var(--accent-primary-active) !important;
  border-color: var(--accent-primary-active) !important;
}
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary {
  background-color: var(--accent-primary-active);
  border-color: var(--accent-primary-active);
}

.btn-outline-primary {
  color: var(--accent-primary);
  border-color: var(--border-strong);
}
.btn-outline-primary:hover {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--text-inverse);
}

.btn-secondary {
  background-color: var(--accent-secondary);
  border-color: var(--accent-secondary);
  color: var(--text-inverse);
}
.btn-secondary:hover, .btn-secondary:focus {
  background-color: var(--accent-secondary-hover);
  border-color: var(--accent-secondary-hover);
  color: var(--text-inverse);
}

.btn-outline-secondary {
  color: var(--color-neutral-700);
  border-color: var(--border-strong);
}
.btn-outline-secondary:hover {
  background-color: var(--color-neutral-700);
  border-color: var(--color-neutral-700);
  color: var(--text-inverse);
}

.btn-success {
  background-color: var(--status-success-fg);
  border-color: var(--status-success-fg);
  color: var(--text-inverse);
}
.btn-success:hover { filter: brightness(0.9); color: var(--text-inverse); }

.btn-warning {
  background-color: var(--color-gold-500);
  border-color: var(--color-gold-500);
  color: var(--color-neutral-900);
}
.btn-warning:hover { background-color: var(--color-gold-600); border-color: var(--color-gold-600); color: var(--color-neutral-900); }

.btn-danger {
  background-color: var(--status-danger-fg);
  border-color: var(--status-danger-fg);
  color: var(--text-inverse);
}
.btn-danger:hover { filter: brightness(0.9); color: var(--text-inverse); }

.btn-outline-danger {
  color: var(--status-danger-fg);
  border-color: var(--status-danger-fg);
}
.btn-outline-danger:hover {
  background-color: var(--status-danger-fg);
  border-color: var(--status-danger-fg);
  color: var(--text-inverse);
}

.btn-dark {
  background-color: var(--surface-inverse);
  border-color: var(--surface-inverse);
  color: var(--text-inverse);
}
.btn-dark:hover { background-color: var(--color-forest-900); border-color: var(--color-forest-900); }

.btn-link { color: var(--text-link); }

/* ---- Couleurs utilitaires (Bootstrap les marque !important, donc idem ici) ---- */
.text-primary { color: var(--accent-primary) !important; }
.text-secondary { color: var(--accent-secondary) !important; }
.text-success { color: var(--status-success-fg) !important; }
.text-warning { color: var(--status-warning-fg) !important; }
.text-danger { color: var(--status-danger-fg) !important; }
.text-info { color: var(--status-info-fg) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-dark { color: var(--text-heading) !important; }

.bg-primary { background-color: var(--accent-primary) !important; }
.bg-secondary { background-color: var(--accent-secondary) !important; }
.bg-success { background-color: var(--status-success-fg) !important; }
.bg-warning { background-color: var(--color-gold-500) !important; }
.bg-danger { background-color: var(--status-danger-fg) !important; }
.bg-info { background-color: var(--status-info-fg) !important; }
.bg-light { background-color: var(--surface-sunken) !important; }
.bg-dark { background-color: var(--surface-inverse) !important; }

.border-primary { border-color: var(--accent-primary) !important; }
.border-danger { border-color: var(--status-danger-fg) !important; }
.border-success { border-color: var(--status-success-fg) !important; }
.border-warning { border-color: var(--color-gold-500) !important; }

/* ---- Badges (statuts d'adhésion/licence : cœur du produit) ---- */
.badge {
  font-family: var(--font-ui);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}
.badge.bg-success { background-color: var(--status-success-bg) !important; color: var(--status-success-fg) !important; }
.badge.bg-warning { background-color: var(--status-warning-bg) !important; color: var(--status-warning-fg) !important; }
.badge.bg-danger { background-color: var(--status-danger-bg) !important; color: var(--status-danger-fg) !important; }
.badge.bg-info { background-color: var(--status-info-bg) !important; color: var(--status-info-fg) !important; }
.badge.bg-secondary { background-color: var(--color-neutral-100) !important; color: var(--color-neutral-700) !important; }
.badge.bg-primary { background-color: var(--color-forest-100) !important; color: var(--color-forest-700) !important; }

/* ---- Cartes ---- */
.card {
  background-color: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-header {
  background-color: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  border-top-left-radius: var(--radius-lg) !important;
  border-top-right-radius: var(--radius-lg) !important;
}
/* Les titres de cards sont des éléments d'interface, pas des titres éditoriaux.
 * Certains templates n'emploient pas la classe Bootstrap .card-title : on couvre
 * donc tous les niveaux de titres dans une card. */
.card :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
}
.card-footer {
  background-color: var(--surface-sunken);
  border-top: 1px solid var(--border-subtle);
}

/* ---- Formulaires ---- */
.form-control, .form-select {
  font-family: var(--font-ui);
  border-radius: var(--radius-sm);
  border-color: var(--border-strong);
  background-color: var(--surface-card);
  color: var(--text-body);
}
.form-control:focus, .form-select:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 0.2rem rgba(79, 115, 97, 0.25);
}
.form-check-input:checked {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}
.form-check-input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 0.2rem rgba(79, 115, 97, 0.25);
}
.form-label {
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  font-size: var(--text-sm);
}
.form-text {
  color: var(--text-muted);
}

/* ---- Alertes ---- */
.alert {
  border-radius: var(--radius-md);
  border: 1px solid transparent;
}
.alert-success { background-color: var(--status-success-bg); color: var(--status-success-fg); }
.alert-warning { background-color: var(--status-warning-bg); color: var(--status-warning-fg); }
.alert-danger { background-color: var(--status-danger-bg); color: var(--status-danger-fg); }
.alert-info { background-color: var(--status-info-bg); color: var(--status-info-fg); }
.alert-light { background-color: var(--surface-sunken); color: var(--text-body); border-color: var(--border-subtle); }

/* ---- Tableaux ---- */
.table {
  font-family: var(--font-ui);
  color: var(--text-body);
}
.table > :not(caption) > * > * {
  border-bottom-color: var(--border-subtle);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--surface-sunken);
}

/* ---- Listes ---- */
.list-group-item {
  border-color: var(--border-subtle);
}
.list-group-item-action:hover, .list-group-item-action:focus {
  background-color: var(--surface-sunken);
}

/* ---- Menus déroulants ---- */
.dropdown-menu {
  border-radius: var(--radius-md);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-md);
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--color-forest-50);
  color: var(--text-heading);
}
.dropdown-item.active, .dropdown-item:active {
  background-color: var(--accent-primary);
}

/* ---- Modales et offcanvas ---- */
.modal-content {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}
.modal-header {
  border-bottom-color: var(--border-subtle);
}
.modal-footer {
  border-top-color: var(--border-subtle);
}
.offcanvas {
  background-color: var(--surface-card);
}

/* ---- Navigation principale ---- */
.navbar {
  background-color: var(--surface-inverse) !important;
  box-shadow: var(--shadow-sm);
}
.navbar .navbar-brand {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--text-inverse) !important;
  background-color: transparent !important;
  border: none;
}
.navbar-dark .navbar-nav .nav-link {
  color: var(--color-forest-200);
  font-weight: var(--weight-medium);
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link.active {
  color: var(--text-inverse);
}
.navbar-dark .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.25);
}

footer.bg-dark {
  background-color: var(--surface-inverse) !important;
}

/* ---- Pied de page / boutons de fermeture ---- */
.btn-close {
  opacity: 0.7;
}
.btn-close:hover {
  opacity: 1;
}