/* ============================================================================
   MOLP — Thème Bootstrap 5.3
   ============================================================================
   Version : 0.2.0 — charge APRÈS bootstrap.min.css et tokens.css.
   Rethème Bootstrap via ses CSS custom properties, mappées sur la couche
   sémantique des tokens (--molp-*). Comme les tokens changent sous
   [data-bs-theme="dark"], la plupart des mappings suivent le thème sans
   duplication ; seuls les triplets -rgb et quelques fonds spécifiques sont
   redéclarés dans le bloc dark en fin de fichier.
   ========================================================================== */

/* ============================================================
   1. VARIABLES GLOBALES (light + dark via tokens)
   ============================================================ */
:root,
[data-bs-theme="dark"] {
  /* Typo */
  --bs-body-font-family: var(--molp-font-sans);
  --bs-body-font-size: var(--molp-text-base);
  --bs-body-line-height: var(--molp-leading-normal);

  /* Fonds & texte */
  --bs-body-bg: var(--molp-color-bg);
  --bs-body-color: var(--molp-color-text);
  --bs-emphasis-color: var(--molp-color-text);
  --bs-secondary-color: var(--molp-color-text-muted);
  --bs-tertiary-color: var(--molp-color-text-faint);
  --bs-secondary-bg: var(--molp-color-surface-2);
  --bs-tertiary-bg: var(--molp-color-bg-subtle);
  --bs-heading-color: var(--molp-color-text);

  /* Bordures & rayons */
  --bs-border-color: var(--molp-color-border);
  --bs-border-radius: var(--molp-radius-sm);
  --bs-border-radius-sm: var(--molp-radius-xs);
  --bs-border-radius-lg: var(--molp-radius-md);
  --bs-border-radius-xl: var(--molp-radius-lg);
  --bs-border-radius-2xl: var(--molp-radius-lg);
  --bs-border-radius-pill: var(--molp-radius-full);

  /* Couleurs de thème */
  --bs-primary: var(--molp-color-primary);
  --bs-primary-rgb: 245, 124, 0;
  --bs-success: var(--molp-color-success);
  --bs-warning: var(--molp-color-warning);
  --bs-danger: var(--molp-color-error);
  --bs-info: var(--molp-color-info);
  --bs-light: var(--molp-gray-100);
  --bs-dark: var(--molp-night-900);

  /* Liens & code */
  --bs-link-color: var(--molp-color-link);
  --bs-link-hover-color: var(--molp-color-link-hover);
  --bs-link-decoration: none;
  --bs-code-color: var(--molp-color-link);
  --bs-highlight-bg: var(--molp-orange-100);

  /* Sous-couches sémantiques 5.3 (alerts, .text-*-emphasis, list-group…) */
  --bs-primary-text-emphasis: var(--molp-color-link);
  --bs-primary-bg-subtle: var(--molp-color-primary-soft);
  --bs-primary-border-subtle: var(--molp-orange-200);
  --bs-success-bg-subtle: var(--molp-color-success-bg);
  --bs-warning-bg-subtle: var(--molp-color-warning-bg);
  --bs-danger-bg-subtle: var(--molp-color-error-bg);
  --bs-info-bg-subtle: var(--molp-color-info-bg);

  /* Focus ring */
  --bs-focus-ring-color: rgba(245, 124, 0, 0.35);
}

/* Triplets RGB dépendants du thème (non dérivables d'un var() hex) */
:root {
  --bs-body-color-rgb: 26, 26, 46;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-link-color-rgb: 194, 65, 12;
  --bs-link-hover-color-rgb: 230, 81, 0;
  --bs-success-rgb: 22, 163, 74;
  --bs-warning-rgb: 217, 119, 6;
  --bs-danger-rgb: 220, 38, 38;
  --bs-info-rgb: 37, 99, 235;
  --bs-primary-border-subtle: var(--molp-orange-200);
  --bs-success-border-subtle: #BBF7D0;
  --bs-warning-border-subtle: #FDE68A;
  --bs-danger-border-subtle: #FECACA;
  --bs-info-border-subtle: #BFDBFE;
  /* Texte des alertes : crans 800 pour AA (≥ 7:1) sur les fonds pastel */
  --bs-success-text-emphasis: #166534;
  --bs-warning-text-emphasis: #92400E;
  --bs-danger-text-emphasis: #991B1B;
  --bs-info-text-emphasis: #1E40AF;
}

/* ============================================================
   2. BASE — titres, liens, sélection
   ============================================================ */
h1, .h1, h2, .h2 { font-weight: var(--molp-font-bold); line-height: var(--molp-leading-tight); }
h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: var(--molp-font-semibold); line-height: var(--molp-leading-tight); }

a { text-decoration: none; }        /* le reboot Bootstrap souligne par défaut */
a:hover { text-decoration: underline; }
::selection { background: var(--molp-orange-200); color: var(--molp-night-900); }
::placeholder { color: var(--molp-color-text-faint); opacity: 1; }

/* ============================================================
   3. BOUTONS
   ============================================================ */
.btn {
  --bs-btn-font-weight: var(--molp-font-semibold);
  --bs-btn-border-radius: var(--molp-radius-sm);
  transition: color var(--molp-transition-fast),
              background-color var(--molp-transition-fast),
              border-color var(--molp-transition-fast),
              box-shadow var(--molp-transition-base),
              transform var(--molp-transition-base);
}
.btn-lg { --bs-btn-border-radius: var(--molp-radius-sm); padding: 14px 32px; } /* CTA [molp.tech] */

.btn-primary {
  --bs-btn-bg: var(--molp-color-primary);
  --bs-btn-border-color: var(--molp-color-primary);
  --bs-btn-color: var(--molp-color-on-primary);
  --bs-btn-hover-bg: var(--molp-color-primary-hover);
  --bs-btn-hover-border-color: var(--molp-color-primary-hover);
  --bs-btn-hover-color: var(--molp-color-on-primary);
  --bs-btn-active-bg: var(--molp-color-primary-active);
  --bs-btn-active-border-color: var(--molp-color-primary-active);
  --bs-btn-active-color: var(--molp-color-on-primary);
  --bs-btn-disabled-bg: var(--molp-color-primary);
  --bs-btn-disabled-border-color: var(--molp-color-primary);
  --bs-btn-disabled-color: var(--molp-color-on-primary);
}
.btn-primary:hover { transform: var(--molp-lift-sm); box-shadow: var(--molp-shadow-lg); } /* [molp.tech] */
.btn-primary:active { transform: none; }

.btn-outline-primary {
  --bs-btn-color: var(--molp-color-link);
  --bs-btn-border-color: var(--molp-color-primary);
  --bs-btn-hover-bg: var(--molp-color-primary);
  --bs-btn-hover-border-color: var(--molp-color-primary);
  --bs-btn-hover-color: var(--molp-color-on-primary);
  --bs-btn-active-bg: var(--molp-color-primary-active);
  --bs-btn-active-border-color: var(--molp-color-primary-active);
  --bs-btn-active-color: var(--molp-color-on-primary);
}

/* Secondaire MOLP : neutre discret (pas le gris plein Bootstrap) */
.btn-secondary {
  --bs-btn-bg: var(--molp-color-surface);
  --bs-btn-border-color: var(--molp-color-border-strong);
  --bs-btn-color: var(--molp-color-text);
  --bs-btn-hover-bg: var(--molp-color-surface-2);
  --bs-btn-hover-border-color: var(--molp-color-border-strong);
  --bs-btn-hover-color: var(--molp-color-text);
  --bs-btn-active-bg: var(--molp-color-surface-2);
  --bs-btn-active-border-color: var(--molp-color-border-strong);
  --bs-btn-active-color: var(--molp-color-text);
}

/* Ghost : transparent, pour barres d'outils */
.btn-ghost {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-color: var(--molp-color-text-muted);
  --bs-btn-hover-bg: var(--molp-color-surface-2);
  --bs-btn-hover-color: var(--molp-color-text);
  --bs-btn-active-bg: var(--molp-color-surface-2);
  --bs-btn-active-color: var(--molp-color-text);
}

.btn:focus-visible,
.btn-check:focus-visible + .btn {
  box-shadow: var(--molp-focus-ring);
}

/* ============================================================
   4. CARTES
   ============================================================ */
.card {
  --bs-card-bg: var(--molp-color-surface);
  --bs-card-border-color: var(--molp-color-border);
  --bs-card-border-radius: var(--molp-radius-lg);
  --bs-card-inner-border-radius: calc(var(--molp-radius-lg) - 1px);
  --bs-card-cap-bg: transparent;
  --bs-card-spacer-y: var(--molp-space-md);
  --bs-card-spacer-x: var(--molp-space-md);
}
/* Élévation au survol : opt-in, pour cartes cliquables uniquement [molp.tech] */
.molp-hover-lift {
  transition: transform var(--molp-transition-base),
              box-shadow var(--molp-transition-base),
              border-color var(--molp-transition-base);
}
.molp-hover-lift:hover {
  transform: var(--molp-lift-lg);
  box-shadow: var(--molp-shadow-xl);
  border-color: var(--molp-color-border-accent);
}

/* ============================================================
   5. FORMULAIRES
   ============================================================ */
.form-control, .form-select {
  background-color: var(--molp-color-surface);
  border-color: var(--molp-color-border-strong);
  border-radius: var(--molp-radius-sm);
  color: var(--molp-color-text);
  transition: border-color var(--molp-transition-fast), box-shadow var(--molp-transition-fast);
}
.form-control:focus, .form-select:focus {
  background-color: var(--molp-color-surface);
  border-color: var(--molp-color-primary);
  box-shadow: var(--molp-focus-ring);
  color: var(--molp-color-text);
}
.form-control:disabled, .form-select:disabled { background-color: var(--molp-color-surface-2); }
.form-text { color: var(--molp-color-text-muted); }
.form-label { font-weight: var(--molp-font-medium); }

.form-check-input { border-color: var(--molp-color-border-strong); }
.form-check-input:checked {
  background-color: var(--molp-color-primary);
  border-color: var(--molp-color-primary);
}
.form-check-input:focus { border-color: var(--molp-color-primary); box-shadow: var(--molp-focus-ring); }
.form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28245, 124, 0, 0.6%29'/%3e%3c/svg%3e");
}
.form-range::-webkit-slider-thumb { background: var(--molp-color-primary); }
.form-range::-moz-range-thumb { background: var(--molp-color-primary); }

/* Validation */
.form-control.is-invalid, .was-validated .form-control:invalid { border-color: var(--molp-color-error); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px var(--molp-color-error-bg); }
.form-control.is-valid, .was-validated .form-control:valid { border-color: var(--molp-color-success); }
.invalid-feedback { color: var(--molp-color-error); }
.valid-feedback { color: var(--molp-color-success); }

.input-group-text {
  background-color: var(--molp-color-surface-2);
  border-color: var(--molp-color-border-strong);
  color: var(--molp-color-text-muted);
}

/* ============================================================
   6. TABLES
   ============================================================ */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--molp-color-text);
  --bs-table-border-color: var(--molp-color-border);
  --bs-table-striped-bg: var(--molp-color-bg-subtle);
  --bs-table-striped-color: var(--molp-color-text);
  --bs-table-hover-bg: var(--molp-color-primary-soft);
  --bs-table-hover-color: var(--molp-color-text);
}
.table > thead {
  color: var(--molp-color-text-muted);
  font-size: var(--molp-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.table > :not(caption) > * > * { padding: var(--molp-space-xs) var(--molp-space-sm); }

/* ============================================================
   7. NAVIGATION (tabs, pills, navbar, breadcrumb, pagination)
   ============================================================ */
.nav {
  --bs-nav-link-color: var(--molp-color-text-muted);
  --bs-nav-link-hover-color: var(--molp-color-primary);
  --bs-nav-link-font-weight: var(--molp-font-medium);
}
/* Tabs : soulignement orange (pas de boîte) */
.nav-tabs {
  --bs-nav-tabs-border-width: 0;
  --bs-nav-tabs-link-active-color: var(--molp-color-link);
  border-bottom: 1px solid var(--molp-color-border-strong);
}
.nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  background: none;
}
.nav-tabs .nav-link:hover { border-bottom-color: var(--molp-orange-300); }
.nav-tabs .nav-link.active {
  background: none;
  border-bottom: 2px solid var(--molp-color-primary);
  color: var(--molp-color-link);
}
.nav-pills {
  --bs-nav-pills-border-radius: var(--molp-radius-sm);
  --bs-nav-pills-link-active-bg: var(--molp-color-primary);
  --bs-nav-pills-link-active-color: var(--molp-color-on-primary);
}
.navbar { --bs-navbar-active-color: var(--molp-color-primary); }
.navbar-brand { font-weight: var(--molp-font-bold); }

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--molp-color-text-faint);
  --bs-breadcrumb-item-active-color: var(--molp-color-text-muted);
  font-size: var(--molp-text-sm);
}
.pagination {
  --bs-pagination-color: var(--molp-color-text-muted);
  --bs-pagination-bg: transparent;
  --bs-pagination-border-color: var(--molp-color-border-strong);
  --bs-pagination-border-radius: var(--molp-radius-sm);
  --bs-pagination-hover-color: var(--molp-color-link);
  --bs-pagination-hover-bg: var(--molp-color-surface-2);
  --bs-pagination-hover-border-color: var(--molp-color-border-strong);
  --bs-pagination-focus-color: var(--molp-color-link);
  --bs-pagination-focus-bg: var(--molp-color-surface-2);
  --bs-pagination-focus-box-shadow: var(--molp-focus-ring);
  --bs-pagination-active-bg: var(--molp-color-primary);
  --bs-pagination-active-border-color: var(--molp-color-primary);
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-color: var(--molp-color-text-faint);
  --bs-pagination-disabled-border-color: var(--molp-color-border);
}

/* ============================================================
   8. FEEDBACK (badges, alerts, progress, toasts, spinners)
   ============================================================ */
.badge {
  --bs-badge-font-weight: var(--molp-font-semibold);
  --bs-badge-border-radius: var(--molp-radius-xs);
}
.alert { --bs-alert-border-radius: var(--molp-radius-md); }
.alert-heading { font-weight: var(--molp-font-semibold); }

.progress {
  --bs-progress-height: 8px;
  --bs-progress-bg: var(--molp-color-surface-2);
  --bs-progress-border-radius: var(--molp-radius-full);
  --bs-progress-bar-bg: var(--molp-color-primary);
}
.toast {
  --bs-toast-bg: var(--molp-color-surface);
  --bs-toast-border-color: var(--molp-color-border);
  --bs-toast-border-radius: var(--molp-radius-md);
  --bs-toast-header-bg: transparent;
  --bs-toast-header-color: var(--molp-color-text);
  box-shadow: var(--molp-shadow-lg);
}

/* ============================================================
   9. OVERLAYS (dropdowns, modals, offcanvas, tooltips, popovers)
   ============================================================ */
.dropdown-menu {
  --bs-dropdown-bg: var(--molp-color-surface);
  --bs-dropdown-border-color: var(--molp-color-border);
  --bs-dropdown-border-radius: var(--molp-radius-md);
  --bs-dropdown-link-color: var(--molp-color-text);
  --bs-dropdown-link-hover-bg: var(--molp-color-primary-soft);
  --bs-dropdown-link-hover-color: var(--molp-color-text);
  --bs-dropdown-link-active-bg: var(--molp-color-primary);
  --bs-dropdown-link-active-color: var(--molp-color-on-primary);
  --bs-dropdown-divider-bg: var(--molp-color-border);
  box-shadow: var(--molp-shadow-lg);
}
.modal {
  --bs-modal-bg: var(--molp-color-surface);
  --bs-modal-border-color: var(--molp-color-border);
  --bs-modal-border-radius: var(--molp-radius-lg);
  --bs-modal-header-border-color: var(--molp-color-border);
  --bs-modal-footer-border-color: var(--molp-color-border);
}
.modal-content { box-shadow: var(--molp-shadow-xl); }
.modal-title { font-weight: var(--molp-font-semibold); }
.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
  --bs-offcanvas-bg: var(--molp-color-surface);
  --bs-offcanvas-border-color: var(--molp-color-border);
}
.tooltip {
  --bs-tooltip-bg: var(--molp-color-surface-inverse);
  --bs-tooltip-color: var(--molp-color-text-inverse);
  --bs-tooltip-border-radius: var(--molp-radius-xs);
}
.popover {
  --bs-popover-bg: var(--molp-color-surface);
  --bs-popover-border-color: var(--molp-color-border);
  --bs-popover-border-radius: var(--molp-radius-md);
  --bs-popover-header-bg: transparent;
  --bs-popover-body-color: var(--molp-color-text);
  box-shadow: var(--molp-shadow-lg);
}

/* ============================================================
   10. DIVERS (accordion, list-group, close, code)
   ============================================================ */
.accordion {
  --bs-accordion-bg: var(--molp-color-surface);
  --bs-accordion-border-color: var(--molp-color-border);
  --bs-accordion-border-radius: var(--molp-radius-md);
  --bs-accordion-btn-color: var(--molp-color-text);
  --bs-accordion-active-bg: var(--molp-color-primary-soft);
  --bs-accordion-active-color: var(--molp-color-link);
  --bs-accordion-btn-focus-box-shadow: var(--molp-focus-ring);
}
.list-group {
  --bs-list-group-bg: var(--molp-color-surface);
  --bs-list-group-border-color: var(--molp-color-border);
  --bs-list-group-border-radius: var(--molp-radius-md);
  --bs-list-group-action-hover-bg: var(--molp-color-bg-subtle);
  --bs-list-group-action-hover-color: var(--molp-color-text);
  --bs-list-group-active-bg: var(--molp-color-primary-soft);
  --bs-list-group-active-color: var(--molp-color-link);
  --bs-list-group-active-border-color: var(--molp-color-border);
}
code { font-family: var(--molp-font-mono); font-size: 0.875em; }
kbd {
  background: var(--molp-color-surface-inverse);
  color: var(--molp-color-text-inverse);
  border-radius: var(--molp-radius-xs);
  font-family: var(--molp-font-mono);
}

/* ============================================================
   11. AJUSTEMENTS SPÉCIFIQUES AU THÈME SOMBRE
   ============================================================ */
[data-bs-theme="dark"] {
  --bs-body-color-rgb: 243, 244, 246;
  --bs-body-bg-rgb: 18, 18, 31;
  --bs-link-color-rgb: 255, 167, 38;
  --bs-link-hover-color-rgb: 255, 183, 77;
  --bs-success-rgb: 34, 197, 94;
  --bs-warning-rgb: 245, 158, 11;
  --bs-danger-rgb: 248, 113, 113;
  --bs-info-rgb: 96, 165, 250;
  --bs-primary-border-subtle: rgba(245, 124, 0, 0.4);
  --bs-success-border-subtle: rgba(34, 197, 94, 0.4);
  --bs-warning-border-subtle: rgba(245, 158, 11, 0.4);
  --bs-danger-border-subtle: rgba(239, 68, 68, 0.4);
  --bs-info-border-subtle: rgba(96, 165, 250, 0.4);
  --bs-highlight-bg: rgba(255, 152, 0, 0.3);
  --bs-focus-ring-color: rgba(255, 152, 0, 0.45);
  /* Texte des alertes en sombre : les crans clairs des états suffisent */
  --bs-success-text-emphasis: var(--molp-color-success);
  --bs-warning-text-emphasis: var(--molp-color-warning);
  --bs-danger-text-emphasis: var(--molp-color-error);
  --bs-info-text-emphasis: var(--molp-color-info);
}
/* Les overlays se détachent sur un cran de surface plus clair */
[data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-bg: var(--molp-color-surface-2); --bs-dropdown-divider-bg: var(--molp-color-border-strong); }
[data-bs-theme="dark"] .toast { --bs-toast-bg: var(--molp-color-surface-2); }
[data-bs-theme="dark"] .popover { --bs-popover-bg: var(--molp-color-surface-2); }
[data-bs-theme="dark"] .modal { --bs-modal-border-color: var(--molp-color-border-strong); }
[data-bs-theme="dark"] .tooltip {
  --bs-tooltip-bg: var(--molp-gray-100);
  --bs-tooltip-color: var(--molp-night-900);
}
[data-bs-theme="dark"] .table { --bs-table-hover-bg: rgba(245, 124, 0, 0.08); }
[data-bs-theme="dark"] kbd { background: var(--molp-night-700); color: var(--molp-gray-100); }

/* ============================================================
   12. ACCESSIBILITÉ — mouvement réduit
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover, .molp-hover-lift:hover { transform: none; }
}