/* ==========================================================================
   Modula — Calque « Premium serein » pour marketplace.php
   Chargé APRÈS styles.css : surcharge purement visuelle des composants.
   Aucune dépendance, aucun changement de structure/JS. Tokens préfixés --mk-*
   pour ne JAMAIS entrer en collision avec les variables de styles.css.
   ========================================================================== */
:root {
  --mk-brand-900: #0A3251;
  --mk-brand-800: #0E4268;
  --mk-brand-700: #145C8F;
  --mk-brand-600: #1C6FA8;
  --mk-brand-500: #2E86C2;
  --mk-brand-100: #DCE9F3;
  --mk-brand-50:  #EEF5FA;
  --mk-gold-500:  #D69E2E;
  --mk-gold-300:  #F0C674;
  --mk-ink:      #0F1B2D;
  --mk-ink-soft: #36425A;
  --mk-muted:    #64748B;
  --mk-faint:    #94A3B8;
  --mk-bg-tint:  #EEF3FA;
  --mk-surface:  #FFFFFF;
  --mk-surface-2:#F7FAFD;
  --mk-surface-3:#EFF4FA;
  --mk-line:     #E5EBF3;
  --mk-line-soft:#EEF2F8;
  --mk-success:  #16A34A;
  --mk-live:     #E11D48;
  --mk-danger:   #C0392B;
  --mk-hairline: rgba(15, 27, 45, .08);
  --mk-glow: inset 0 1px 0 rgba(255, 255, 255, .7);
  --mk-r-xs: 8px; --mk-r-sm: 12px; --mk-r-md: 16px; --mk-r-lg: 22px; --mk-r-pill: 999px;
  --mk-sh-xs: 0 1px 2px rgba(15, 27, 45, .05);
  --mk-sh-sm: 0 2px 6px rgba(15, 27, 45, .06), 0 1px 2px rgba(15, 27, 45, .05);
  --mk-sh-md: 0 10px 24px rgba(16, 42, 82, .09), 0 2px 6px rgba(16, 42, 82, .06);
  --mk-sh-lg: 0 24px 56px rgba(13, 38, 71, .16), 0 6px 16px rgba(13, 38, 71, .08);
  --mk-sh-brand: 0 14px 30px rgba(20, 92, 143, .30);
  --mk-ease: cubic-bezier(.2, .7, .25, 1);
  --mk-ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* --- Ambiance générale de la page -------------------------------------- */
body { background: var(--mk-bg-tint); }
main { background: transparent; }

/* ==========================================================================
   BARRE DE FILTRES + RECHERCHE
   ========================================================================== */
.filters {
  background: var(--mk-surface) !important;
  border: 1px solid var(--mk-line) !important;
  border-radius: var(--mk-r-lg) !important;
  box-shadow: var(--mk-sh-sm), var(--mk-glow) !important;
  padding: 16px !important;
  gap: 12px !important;
}
.search-box {
  background: var(--mk-surface-2) !important;
  border: 1.5px solid var(--mk-line) !important;
  border-radius: var(--mk-r-sm) !important;
  box-shadow: none !important;
  transition: border-color var(--mk-ease) .16s, box-shadow var(--mk-ease) .16s, background var(--mk-ease) .16s;
}
.search-box:focus-within {
  border-color: var(--mk-brand-600) !important;
  background: var(--mk-surface) !important;
  box-shadow: 0 0 0 4px var(--mk-brand-100) !important;
}
.search-box input { color: var(--mk-ink) !important; font-weight: 500 !important; }
.search-box input::placeholder { color: var(--mk-faint) !important; }
.selects select {
  background: var(--mk-surface-2) !important;
  border: 1.5px solid var(--mk-line) !important;
  border-radius: var(--mk-r-sm) !important;
  color: var(--mk-ink-soft) !important;
  font-weight: 600 !important;
  transition: border-color .16s var(--mk-ease), box-shadow .16s var(--mk-ease);
}
.selects select:focus { outline: none !important; border-color: var(--mk-brand-600) !important; box-shadow: 0 0 0 4px var(--mk-brand-100) !important; }

/* --- Barre code d'accès ------------------------------------------------- */
.code-access-bar {
  background: linear-gradient(135deg, var(--mk-brand-50), var(--mk-surface)) !important;
  border: 1px solid var(--mk-line) !important;
  border-radius: var(--mk-r-lg) !important;
  box-shadow: var(--mk-sh-sm), var(--mk-glow) !important;
}
.code-access-title { color: var(--mk-ink) !important; font-weight: 700 !important; letter-spacing: -.01em; }
.code-access-subtitle { color: var(--mk-muted) !important; }
.code-form .field input {
  background: var(--mk-surface) !important;
  border: 1.5px solid var(--mk-line) !important;
  border-radius: var(--mk-r-sm) !important;
  color: var(--mk-ink) !important;
}
.code-form .field input:focus { outline: none !important; border-color: var(--mk-brand-600) !important; box-shadow: 0 0 0 4px var(--mk-brand-100) !important; }
.code-form .field button,
.code-access-bar .code-form button[type="submit"] {
  background: linear-gradient(180deg, var(--mk-brand-600), var(--mk-brand-700)) !important;
  color: #fff !important; border: 0 !important;
  border-radius: var(--mk-r-sm) !important;
  box-shadow: var(--mk-sh-brand), var(--mk-glow) !important;
  font-weight: 600 !important;
  transition: transform .2s var(--mk-ease), box-shadow .2s var(--mk-ease);
}
.code-form .field button:hover { transform: translateY(-2px) !important; box-shadow: 0 18px 34px rgba(20, 92, 143, .4) !important; }

.results-summary { color: var(--mk-muted) !important; font-weight: 600; letter-spacing: -.01em; }

/* ==========================================================================
   GRILLE + CARTES DE COURS  (le flagship)
   ========================================================================== */
.course-grid { gap: 22px !important; }

.course-card {
  background: var(--mk-surface) !important;
  border: 1px solid var(--mk-line) !important;
  border-radius: var(--mk-r-lg) !important;
  box-shadow: var(--mk-sh-sm), var(--mk-glow) !important;
  overflow: hidden !important;
  transition: transform var(--mk-ease-out) .42s, box-shadow var(--mk-ease-out) .42s, border-color var(--mk-ease) .22s !important;
}
.course-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--mk-sh-lg), var(--mk-glow) !important;
  border-color: var(--mk-brand-600) !important;
}

/* Vignette : ratio constant, zoom doux, voile dégradé bas */
.course-thumb {
  position: relative !important;
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}
.course-thumb img {
  width: 100% !important; height: 100% !important; object-fit: cover !important;
  transition: transform .7s var(--mk-ease-out) !important;
}
.course-card:hover .course-thumb img { transform: scale(1.06) !important; }
.course-thumb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(10, 20, 35, .42));
}

/* Badges sur la vignette */
.card-badges { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 2; display: flex; gap: 8px; flex-wrap: wrap; }
.card-badges .badge {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  font-size: .72rem !important; font-weight: 700 !important; line-height: 1 !important;
  padding: 6px 11px !important; border-radius: var(--mk-r-pill) !important;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--mk-sh-xs);
}
.card-badges .badge-full {
  color: #fff !important;
  background: rgba(15, 27, 45, .62) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
}
.card-badges .badge-new {
  color: var(--mk-brand-800) !important;
  background: rgba(220, 233, 243, .92) !important;
}
.card-badges .badge-live {
  color: #fff !important;
  background: linear-gradient(180deg, #F43F5E, var(--mk-live)) !important;
  box-shadow: 0 6px 16px rgba(225, 29, 72, .36) !important;
}

/* Corps de carte */
.card-body { padding: 18px 18px 16px !important; display: flex; flex-direction: column; gap: 0; }
.card-title {
  font-size: 1.1rem !important; font-weight: 700 !important; letter-spacing: -.015em !important;
  line-height: 1.3 !important; color: var(--mk-ink) !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 10px !important;
}
.card-author { display: flex !important; align-items: center !important; gap: 9px !important; margin-bottom: 10px !important; }
.card-author > span { font-size: .875rem !important; font-weight: 600 !important; color: var(--mk-ink-soft) !important; }
.author-avatar {
  width: 30px !important; height: 30px !important; border-radius: 50% !important;
  border: 2px solid var(--mk-surface) !important; box-shadow: var(--mk-sh-xs) !important;
  background: linear-gradient(155deg, var(--mk-brand-600), var(--mk-brand-800)) !important;
  display: inline-grid !important; place-items: center !important; overflow: hidden !important; flex: none !important;
}
.author-initial { color: #fff !important; font-weight: 700 !important; font-size: .82rem !important; }
.author-avatar.has-photo .author-initial { display: none !important; }
.author-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.author-clickable { cursor: pointer; border-radius: var(--mk-r-pill); transition: opacity .16s var(--mk-ease); }
.author-clickable:hover { opacity: .82; }

.card-description { color: var(--mk-muted) !important; font-size: .9rem !important; line-height: 1.55 !important; }

.card-meta {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 10px !important; margin-top: 14px !important; padding-top: 14px !important;
  border-top: 1px solid var(--mk-line-soft) !important;
}
/* Prix = élément focal */
.price-tag {
  display: inline-flex !important; align-items: baseline !important;
  font-size: 1.05rem !important; font-weight: 700 !important; letter-spacing: -.02em !important;
  color: var(--mk-brand-700) !important;
  background: var(--mk-brand-50) !important;
  border: 1px solid var(--mk-brand-100) !important;
  border-radius: var(--mk-r-sm) !important;
  padding: 7px 12px !important;
  font-feature-settings: "tnum" 1;
}
.price-tag.free-tag {
  color: var(--mk-success) !important;
  background: rgba(22, 163, 74, .1) !important;
  border-color: rgba(22, 163, 74, .25) !important;
}
.rating {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  font-size: .875rem !important; font-weight: 700 !important; color: var(--mk-gold-500) !important;
}
.rating > span { color: var(--mk-faint) !important; font-weight: 500 !important; }

/* ==========================================================================
   ÉTATS : vide, charger plus, loader, toast
   ========================================================================== */
.empty-state {
  background: var(--mk-surface) !important; border: 1px dashed var(--mk-line) !important;
  border-radius: var(--mk-r-lg) !important; color: var(--mk-muted) !important;
  box-shadow: var(--mk-sh-xs);
}
.load-more {
  background: var(--mk-surface) !important; color: var(--mk-brand-700) !important;
  border: 1.5px solid var(--mk-line) !important; border-radius: var(--mk-r-pill) !important;
  font-weight: 600 !important; box-shadow: var(--mk-sh-xs) !important;
  transition: transform .18s var(--mk-ease), border-color .2s var(--mk-ease), background .2s var(--mk-ease);
}
.load-more:hover { transform: translateY(-1px) !important; border-color: var(--mk-brand-600) !important; background: var(--mk-brand-50) !important; }
.spinner { border-top-color: var(--mk-brand-600) !important; }
.toast {
  background: rgba(15, 27, 45, .94) !important; color: #fff !important;
  border-radius: var(--mk-r-md) !important; box-shadow: var(--mk-sh-lg) !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .1) !important;
}

/* ==========================================================================
   OVERLAY DÉTAIL DE COURS  (moment d'achat)
   ========================================================================== */
.course-detail-overlay { background: rgba(8, 16, 28, .55) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.course-detail {
  background: var(--mk-surface) !important;
  border: 1px solid var(--mk-line) !important;
  border-radius: var(--mk-r-lg) !important;
  box-shadow: var(--mk-sh-lg) !important;
  overflow: hidden !important;
}
.detail-cover { border-radius: 0 !important; }
.detail-cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, rgba(10, 20, 35, .55));
}
.detail-price-chip {
  background: rgba(255, 255, 255, .92) !important; color: var(--mk-ink) !important;
  border: 1px solid var(--mk-hairline) !important; border-radius: var(--mk-r-sm) !important;
  box-shadow: var(--mk-sh-sm) !important; backdrop-filter: blur(8px);
  font-weight: 700 !important;
}
.detail-close, .media-overlay-close {
  background: rgba(255, 255, 255, .92) !important; color: var(--mk-ink) !important;
  border: 1px solid var(--mk-hairline) !important; border-radius: var(--mk-r-pill) !important;
  box-shadow: var(--mk-sh-sm) !important; backdrop-filter: blur(8px);
  transition: transform .16s var(--mk-ease);
}
.detail-close:hover, .media-overlay-close:hover { transform: scale(1.06) !important; }
.detail-title { color: var(--mk-ink) !important; letter-spacing: -.02em !important; font-weight: 700 !important; }
.detail-section-title { color: var(--mk-ink) !important; letter-spacing: -.01em !important; }
.detail-description { color: var(--mk-ink-soft) !important; }
.detail-price-main { color: var(--mk-brand-700) !important; font-weight: 700 !important; letter-spacing: -.02em !important; }
.detail-price-note { color: var(--mk-muted) !important; }

/* Chips de détail */
.detail-badges .chip, .chip {
  border-radius: var(--mk-r-pill) !important;
  font-weight: 600 !important; font-size: .76rem !important;
  background: var(--mk-surface-3) !important; color: var(--mk-ink-soft) !important;
  border: 1px solid var(--mk-hairline) !important;
}
.chip.alt { background: var(--mk-brand-50) !important; color: var(--mk-brand-700) !important; border-color: var(--mk-brand-100) !important; }
.chip.danger { background: rgba(192, 57, 43, .1) !important; color: var(--mk-danger) !important; border-color: rgba(192, 57, 43, .25) !important; }

.plan-selector button {
  border-radius: var(--mk-r-sm) !important; border: 1.5px solid var(--mk-line) !important;
  background: var(--mk-surface) !important; color: var(--mk-ink-soft) !important; font-weight: 600 !important;
  transition: all .18s var(--mk-ease);
}
.plan-selector button.active {
  background: var(--mk-brand-700) !important; color: #fff !important; border-color: transparent !important;
  box-shadow: var(--mk-sh-brand) !important;
}

.review-card {
  background: var(--mk-surface-2) !important; border: 1px solid var(--mk-line) !important;
  border-radius: var(--mk-r-md) !important; box-shadow: var(--mk-sh-xs) !important;
}
.review-text { color: var(--mk-ink-soft) !important; }

/* CTA d'achat — focal, en relief */
.cta-button {
  background: linear-gradient(180deg, var(--mk-brand-600), var(--mk-brand-700)) !important;
  color: #fff !important; border: 0 !important;
  border-radius: var(--mk-r-pill) !important;
  box-shadow: var(--mk-sh-brand), var(--mk-glow) !important;
  font-weight: 600 !important;
  transition: transform .22s var(--mk-ease), box-shadow .22s var(--mk-ease) !important;
}
.cta-button:hover:not(:disabled) { transform: translateY(-2px) !important; box-shadow: 0 20px 38px rgba(20, 92, 143, .4), var(--mk-glow) !important; }
.cta-button:disabled { background: #DCE3EC !important; color: #8A97AC !important; box-shadow: none !important; }
.detail-footer .ghost-btn, .detail-actions .ghost-btn {
  border-radius: var(--mk-r-pill) !important; border: 1.5px solid var(--mk-line) !important;
  background: var(--mk-surface) !important; color: var(--mk-brand-700) !important; font-weight: 600 !important;
  transition: border-color .2s var(--mk-ease), background .2s var(--mk-ease);
}
.detail-footer .ghost-btn:hover { border-color: var(--mk-brand-600) !important; background: var(--mk-brand-50) !important; }
.detail-footnote { color: var(--mk-faint) !important; }

@media (prefers-reduced-motion: reduce) {
  .course-card, .course-thumb img, .cta-button, .load-more { transition: none !important; }
}