/**
 * CampusQCM - CARTES MOBILE PREMIUM v1.0.0
 * Refonte UX complète des cartes Matière et QCM pour mobile
 * 
 * PHILOSOPHIE UX:
 * - Une seule information dominante par carte
 * - Une seule action principale par carte
 * - Interface pensée pour le pouce
 * - Respiration verticale > horizontale
 * 
 * STRUCTURE HTML RECOMMANDÉE:
 * 
 * CARTE MATIÈRE:
 * <a href="..." class="mobile-card mobile-card--subject">
 *   <div class="mobile-card__content">
 *     <span class="mobile-card__icon">📊</span>
 *     <h3 class="mobile-card__title">Statistiques descriptives</h3>
 *     <p class="mobile-card__context">L1 Économie • Parcours général</p>
 *     <p class="mobile-card__stats">8 QCM • 120 questions</p>
 *   </div>
 *   <span class="mobile-card__cta">Voir les QCM</span>
 * </a>
 * 
 * CARTE QCM:
 * <a href="..." class="mobile-card mobile-card--qcm">
 *   <div class="mobile-card__content">
 *     <h3 class="mobile-card__title">Introduction aux statistiques</h3>
 *     <span class="mobile-card__badge">L1</span>
 *     <p class="mobile-card__meta">15 questions • ~10 min</p>
 *     <p class="mobile-card__xp">+50 XP</p>
 *   </div>
 *   <span class="mobile-card__cta">Commencer</span>
 * </a>
 * 
 * @version 1.0.0
 * @author CampusQCM UX Team
 */

/* ═══════════════════════════════════════════════════════════════════════════
   CRITICAL FIX - BADGES VISIBLES (PRIORITÉ MAXIMALE)
   Ce bloc DOIT être en premier pour override tous les autres styles
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* TOUTES les cartes doivent permettre l'overflow des badges */
  .qcm-card,
  .qcm-subject-card,
  .home-bento-card,
  [class*="card"] {
    overflow: visible !important;
  }
  
  /* TOUS les badges doivent être entièrement visibles */
  .qcm-card__status,
  .qcm-card__badge,
  .qcm-subject-card__badge,
  .home-bento-card__badge,
  [class*="__badge"],
  [class*="__status"] {
    overflow: visible !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    min-width: fit-content !important;
    max-width: none !important;
  }
  
  /* Les headers de cartes doivent laisser les badges visibles */
  .qcm-card__header,
  .qcm-subject-card__header,
  .home-bento-card__header,
  [class*="card__header"] {
    overflow: visible !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS - CARTES MOBILES
   Ces variables étendent le design system existant
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Dimensions cartes mobile */
  --card-width-mobile: calc(100% - 32px); /* 100% - 2x16px padding */
  --card-padding-mobile: 20px;
  --card-padding-mobile-sm: 16px;
  --card-radius-mobile: 16px;
  --card-radius-mobile-sm: 12px;
  
  /* Hiérarchie typographique cartes (UX Premium) */
  --card-title-size: 1.125rem;    /* 18px - Dominant */
  --card-context-size: 0.8125rem; /* 13px - Secondaire */
  --card-meta-size: 0.75rem;      /* 12px - Tertiaire */
  --card-cta-size: 0.9375rem;     /* 15px - Action */
  
  /* Espacements internes cartes */
  --card-gap-tight: 6px;
  --card-gap-normal: 10px;
  --card-gap-relaxed: 16px;
  
  /* CTA hauteur tactile */
  --card-cta-height: 48px;
  --card-cta-radius: 10px;
  
  /* Ombres cartes premium */
  --card-shadow-rest: 
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.06);
  --card-shadow-hover: 
    0 4px 8px rgba(0, 0, 0, 0.04),
    0 16px 32px rgba(99, 102, 241, 0.12);
  --card-shadow-pressed: 
    0 1px 2px rgba(0, 0, 0, 0.06);
  
  /* Accent couleur cartes */
  --card-accent: #6366f1;
  --card-accent-hover: #4f46e5;
  --card-accent-light: rgba(99, 102, 241, 0.08);
  --card-accent-border: rgba(99, 102, 241, 0.2);
  
  /* Status badges */
  --badge-success: #10b981;
  --badge-success-bg: rgba(16, 185, 129, 0.1);
  --badge-warning: #f59e0b;
  --badge-warning-bg: rgba(245, 158, 11, 0.1);
  --badge-info: #3b82f6;
  --badge-info-bg: rgba(59, 130, 246, 0.1);
}

/* Dark mode tokens cartes */
html[data-theme="dark"],
body.qcm-dark {
  --card-shadow-rest: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.25);
  --card-shadow-hover: 
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 16px 32px color-mix(in srgb, var(--cq-accent, #6366f1) 20%, transparent);
  --card-shadow-pressed: 
    0 1px 2px rgba(0, 0, 0, 0.25);
  
  --card-accent-light: color-mix(in srgb, var(--cq-accent, #6366f1) 15%, transparent);
  --card-accent-border: color-mix(in srgb, var(--cq-accent, #6366f1) 35%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   GRILLE DE CARTES - MOBILE FIRST (95-100% width)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Container des cartes - mobile first */
.mobile-cards-grid,
.qcm-cards-grid,
.qcm-subjects-grid,
.subjects-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-md, 16px) !important;
  padding: 0 !important;
  width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARTE BASE - STRUCTURE MOBILE PREMIUM
   
   PRIORITÉS UX:
   1. Titre dominant - seul élément en font-weight 600+
   2. Contexte/meta - couleur muted, taille réduite
   3. CTA - toujours en bas, pleine largeur
   ═══════════════════════════════════════════════════════════════════════════ */

.mobile-card,
.qcm-subject-card,
.qcm-card {
  /* Structure flex verticale */
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  
  /* Dimensions - 95-100% width mobile */
  width: 100% !important;
  max-width: 100% !important;
  min-height: auto !important;
  
  /* Padding généreux pour respiration */
  padding: var(--card-padding-mobile) !important;
  
  /* Apparence premium */
  background: var(--qcm-hub-surface, var(--cq-card-bg, #ffffff)) !important;
  border: 1px solid var(--qcm-hub-border, var(--cq-border, #e2e8f0)) !important;
  border-radius: var(--card-radius-mobile) !important;
  box-shadow: var(--card-shadow-rest) !important;
  
  /* Reset link */
  text-decoration: none !important;
  color: inherit !important;
  
  /* Transitions premium */
  transition: 
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  
  /* Touch zone */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
  
  /* Position pour accent */
  position: relative !important;
  overflow: hidden !important;
}

/* Accent latéral subtil (désactivé au repos) */
.mobile-card::before,
.qcm-subject-card::before,
.qcm-card::before {
  content: '' !important;
  position: absolute !important;
  top: 16px !important;
  bottom: 16px !important;
  left: 0 !important;
  width: 4px !important;
  background: linear-gradient(180deg, var(--card-accent) 0%, #8b5cf6 100%) !important;
  border-radius: 0 4px 4px 0 !important;
  opacity: 0 !important;
  transform: scaleY(0.5) !important;
  transition: 
    opacity 0.2s ease,
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ÉTATS INTERACTIFS - FEEDBACK TACTILE PREMIUM
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hover (tablette/desktop avec souris) */
@media (hover: hover) {
  .mobile-card:hover,
  .qcm-subject-card:hover,
  .qcm-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--card-shadow-hover) !important;
    border-color: var(--card-accent-border) !important;
  }
  
  .mobile-card:hover::before,
  .qcm-subject-card:hover::before,
  .qcm-card:hover::before {
    opacity: 1 !important;
    transform: scaleY(1) !important;
  }
}

/* Active/Pressed - feedback tactile immédiat */
.mobile-card:active,
.qcm-subject-card:active,
.qcm-card:active {
  transform: scale(0.98) !important;
  box-shadow: var(--card-shadow-pressed) !important;
  transition-duration: 0.1s !important;
}

/* Focus visible pour accessibilité */
.mobile-card:focus-visible,
.qcm-subject-card:focus-visible,
.qcm-card:focus-visible {
  outline: 2px solid var(--card-accent) !important;
  outline-offset: 2px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1️⃣ CARTE MATIÈRE - STRUCTURE MOBILE PREMIUM
   
   Hiérarchie visuelle:
   1. Nom de la matière (dominant)
   2. Niveau + parcours (secondaire)
   3. Stats QCM/questions (tertiaire)
   4. CTA (action)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Header carte matière - icône + badge */
.qcm-subject-card__header,
.mobile-card--subject .mobile-card__header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: var(--card-gap-normal) !important;
  width: 100% !important;
}

/* Icône matière - taille optimisée mobile */
.qcm-subject-card__icon,
.mobile-card--subject .mobile-card__icon {
  font-size: 2rem !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* Nom de la matière - ÉLÉMENT DOMINANT */
.qcm-subject-card__name,
.mobile-card--subject .mobile-card__title {
  font-size: var(--card-title-size) !important;
  font-weight: 600 !important;
  color: var(--qcm-hub-text, var(--text-primary, #1e293b)) !important;
  line-height: 1.3 !important;
  margin: 0 0 var(--card-gap-tight) !important;
  
  /* Limite à 2 lignes */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Contexte : niveau + parcours */
.qcm-subject-card__context,
.mobile-card--subject .mobile-card__context {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  font-size: var(--card-context-size) !important;
  color: var(--qcm-hub-text-muted, var(--text-muted, #94a3b8)) !important;
  margin: 0 0 var(--card-gap-normal) !important;
}

/* Séparateur contexte */
.qcm-subject-card__context-sep {
  color: var(--qcm-hub-text-muted, var(--text-muted, #94a3b8)) !important;
  opacity: 0.5 !important;
}

/* Liens dans contexte - labels informatifs (pas cliquables séparément) */
.qcm-subject-card__context-link {
  color: var(--qcm-hub-text-muted, var(--text-muted, #94a3b8)) !important;
  text-decoration: none !important;
  cursor: inherit !important;
  pointer-events: none !important;
}

.qcm-subject-card__context-link:hover {
  color: var(--qcm-hub-text-muted, var(--text-muted, #94a3b8)) !important;
  text-decoration: none !important;
}

/* Description - tronquée sur mobile (SEO-safe: reste dans le DOM pour Googlebot) */
.qcm-subject-card__desc,
.mobile-card--subject .mobile-card__desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
  color: var(--qcm-hub-text-muted, var(--text-muted, #94a3b8)) !important;
  margin: 4px 0 0 !important;
}

/* Stats matière (nombre QCM/questions) */
.qcm-subject-card__meta,
.qcm-subject-card__footer,
.mobile-card--subject .mobile-card__stats {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  font-size: var(--card-meta-size) !important;
  color: var(--qcm-hub-text-muted, var(--text-muted, #94a3b8)) !important;
  padding-top: var(--card-gap-normal) !important;
  margin-top: auto !important;
  border-top: none !important;
}

/* Compte QCM */
.qcm-subject-card__qcm-count {
  font-size: var(--card-meta-size) !important;
  color: var(--qcm-hub-text-secondary, var(--text-secondary, #64748b)) !important;
}

/* Badge statut matière */
.qcm-subject-card__badge {
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  background: var(--badge-success-bg) !important;
  color: var(--badge-success) !important;
}

.qcm-subject-card__badge--coming-soon,
.qcm-subject-card__badge--soon {
  background: var(--badge-warning-bg) !important;
  color: var(--badge-warning) !important;
}

/* CTA matière */
.qcm-subject-card__cta,
.mobile-card--subject .mobile-card__cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: var(--card-cta-height) !important;
  margin-top: var(--card-gap-relaxed) !important;
  padding: 0 16px !important;
  
  /* Style CTA secondaire par défaut */
  background: var(--card-accent-light) !important;
  color: var(--card-accent) !important;
  border: none !important;
  border-radius: var(--card-cta-radius) !important;
  
  font-size: var(--card-cta-size) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  
  transition: 
    background 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease !important;
}

/* Hover CTA */
@media (hover: hover) {
  .qcm-subject-card:hover .qcm-subject-card__cta,
  .mobile-card--subject:hover .mobile-card__cta {
    background: var(--card-accent) !important;
    color: white !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2️⃣ CARTE QCM - STRUCTURE MOBILE PREMIUM
   
   Hiérarchie visuelle:
   1. Nom du QCM (dominant)
   2. Action CTA (secondaire - visuellement proéminent)
   3. Niveau badge (tertiaire)
   4. Infos complémentaires (quaternaire)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Carte QCM spécifique - hérite de la base .qcm-card */
.qcm-card--qcm,
.mobile-card--qcm {
  /* Structure identique à la carte de base */
  /* Les spécificités sont gérées par les sous-éléments */
  min-height: 180px !important;
}

/* Header carte QCM */
.qcm-card__header,
.mobile-card--qcm .mobile-card__header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: var(--card-gap-normal) !important;
  width: 100% !important;
}

/* Icône QCM - optionnelle, plus petite */
.qcm-card__icon,
.mobile-card--qcm .mobile-card__icon {
  font-size: 1.5rem !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* Titre QCM - ÉLÉMENT DOMINANT */
.qcm-card__title,
.mobile-card--qcm .mobile-card__title {
  font-size: var(--card-title-size) !important;
  font-weight: 600 !important;
  color: var(--qcm-hub-text, var(--text-primary, #1e293b)) !important;
  line-height: 1.35 !important;
  margin: 0 0 var(--card-gap-tight) !important;
  flex: 1 !important;
  
  /* Limite à 2 lignes max */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Description QCM - tronquée (SEO-safe: reste dans le DOM) */
.qcm-card__desc,
.mobile-card--qcm .mobile-card__desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
  color: var(--qcm-hub-text-muted, var(--text-muted, #94a3b8)) !important;
  margin: 4px 0 0 !important;
}

/* Container badges QCM */
.qcm-card__badges,
.mobile-card--qcm .mobile-card__badges {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  /* Override mobile-premium.css position absolute */
  position: relative !important;
  top: auto !important;
  right: auto !important;
}

/* Badge statut QCM - FIX COMPLET */
.qcm-card__status,
.qcm-card__badge,
.home-bento-card__badge,
.mobile-card--qcm .mobile-card__badge,
.qcm-card .qcm-card__status {
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  text-align: center !important;
  min-width: fit-content !important;
  overflow: visible !important;
  text-overflow: clip !important;
  /* Override mobile-premium.css position absolute */
  position: relative !important;
  top: auto !important;
  right: auto !important;
  display: inline-flex !important;
  align-items: center !important;
}

.qcm-card__status--available {
  background: var(--badge-success-bg) !important;
  color: var(--badge-success) !important;
}

.qcm-card__status--soon {
  background: var(--badge-warning-bg) !important;
  color: var(--badge-warning) !important;
}

.qcm-card__status--pack {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1)) !important;
  color: #7c3aed !important;
}

/* Meta QCM (questions, durée, XP) */
.qcm-card__meta,
.mobile-card--qcm .mobile-card__meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: var(--card-meta-size) !important;
  color: var(--qcm-hub-text-muted, var(--text-muted, #94a3b8)) !important;
  margin-bottom: var(--card-gap-tight) !important;
}

.qcm-card__meta-item,
.mobile-card--qcm .mobile-card__meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* XP gamification - discret mais visible */
.qcm-card__xp,
.mobile-card--qcm .mobile-card__xp {
  font-size: var(--card-meta-size) !important;
  font-weight: 600 !important;
  color: var(--badge-success) !important;
}

/* Modes de jeu - masqués sur mobile */
.qcm-card__modes,
.mobile-card--qcm .mobile-card__modes {
  display: none !important;
}

/* Notions - SEO-safe: max-height:0 au lieu de display:none
   Googlebot voit le contenu dans le DOM, mais visuellement collé */
.qcm-card__notions,
.mobile-card--qcm .mobile-card__notions {
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
}

/* CTA QCM - Principal, centré, full width */
.qcm-card__cta,
.mobile-card--qcm .mobile-card__cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: var(--card-cta-height) !important;
  margin-top: auto !important;
  padding: 0 20px !important;
  
  /* Style CTA principal */
  background: var(--card-accent) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--card-cta-radius) !important;
  
  font-size: var(--card-cta-size) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  
  transition: 
    background 0.15s ease,
    transform 0.15s ease !important;
}

/* Hover CTA QCM */
@media (hover: hover) {
  .qcm-card:hover .qcm-card__cta,
  .mobile-card--qcm:hover .mobile-card__cta {
    background: var(--card-accent-hover) !important;
  }
}

/* Active CTA */
.qcm-card__cta:active,
.mobile-card__cta:active {
  transform: scale(0.97) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VARIANTES DE CARTES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Carte "Bientôt disponible" */
.qcm-subject-card--coming-soon,
.qcm-card--coming-soon,
.mobile-card--soon {
  opacity: 0.85 !important;
  border-style: dashed !important;
  border-color: var(--badge-warning) !important;
}

.qcm-subject-card--coming-soon::before,
.qcm-card--coming-soon::before,
.mobile-card--soon::before {
  background: linear-gradient(180deg, var(--badge-warning) 0%, #fbbf24 100%) !important;
}

/* Carte notion (QCM focalisé) */
.qcm-card--notion {
  border-left: 3px solid var(--badge-info) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE - TABLETTE & DESKTOP
   Les cartes s'adaptent mais gardent la même philosophie
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tablette - grille 2 colonnes */
@media (min-width: 640px) {
  .mobile-cards-grid,
  .qcm-cards-grid,
  .qcm-subjects-grid,
  .subjects-grid,
  .qcm-cards-grid--subjects,
  .qcm-cards-grid--qcms {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  
  /* Descriptions visibles sur tablette */
  .qcm-subject-card__desc,
  .qcm-card__desc {
    display: block !important;
    font-size: 0.875rem !important;
    color: var(--qcm-hub-text-secondary) !important;
    line-height: 1.5 !important;
    margin: 0 0 12px !important;
    
    /* Limite à 2 lignes */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* Desktop - grille 3 colonnes */
@media (min-width: 1024px) {
  .mobile-cards-grid,
  .qcm-cards-grid,
  .qcm-subjects-grid,
  .subjects-grid,
  .qcm-cards-grid--subjects,
  .qcm-cards-grid--qcms {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
  }
  
  .mobile-card,
  .qcm-subject-card,
  .qcm-card {
    padding: 24px !important;
  }
  
  /* Modes visibles sur desktop */
  .qcm-card__modes {
    display: flex !important;
    gap: 8px !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--qcm-hub-border) !important;
  }
  
  /* Description complète */
  .qcm-subject-card__desc,
  .qcm-card__desc {
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
  }
}

/* Desktop large - 4 colonnes optionnel */
@media (min-width: 1440px) {
  .qcm-cards-grid--qcms {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE - AJUSTEMENTS CARTES
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .mobile-card,
html[data-theme="dark"] .qcm-subject-card,
html[data-theme="dark"] .qcm-card,
body.qcm-dark .mobile-card,
body.qcm-dark .qcm-subject-card,
body.qcm-dark .qcm-card {
  background: var(--cq-card-bg, #1e293b) !important;
  border-color: var(--cq-border, #334155) !important;
}

html[data-theme="dark"] .qcm-subject-card__name,
html[data-theme="dark"] .qcm-card__title,
body.qcm-dark .qcm-subject-card__name,
body.qcm-dark .qcm-card__title {
  color: var(--text-primary, #f8fafc) !important;
}

html[data-theme="dark"] .qcm-subject-card__context,
html[data-theme="dark"] .qcm-subject-card__meta,
html[data-theme="dark"] .qcm-card__meta,
body.qcm-dark .qcm-subject-card__context,
body.qcm-dark .qcm-subject-card__meta,
body.qcm-dark .qcm-card__meta {
  color: var(--text-muted, #64748b) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS PREMIUM - ENTRÉE DES CARTES
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes cardFadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation d'entrée - respecte prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  .mobile-card,
  .qcm-subject-card,
  .qcm-card {
    animation: cardFadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
  }
  
  /* Stagger animation pour liste */
  .qcm-cards-grid > *:nth-child(1) { animation-delay: 0.05s; }
  .qcm-cards-grid > *:nth-child(2) { animation-delay: 0.1s; }
  .qcm-cards-grid > *:nth-child(3) { animation-delay: 0.15s; }
  .qcm-cards-grid > *:nth-child(4) { animation-delay: 0.2s; }
  .qcm-cards-grid > *:nth-child(5) { animation-delay: 0.25s; }
  .qcm-cards-grid > *:nth-child(6) { animation-delay: 0.3s; }
  .qcm-cards-grid > *:nth-child(n+7) { animation-delay: 0.35s; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITAIRES - CLASSES HELPER
   ═══════════════════════════════════════════════════════════════════════════ */

/* Forcer affichage full width */
.card-full-width {
  width: 100% !important;
  max-width: 100% !important;
}

/* Carte sans CTA (entièrement cliquable) */
.card-no-cta .mobile-card__cta,
.card-no-cta .qcm-card__cta,
.card-no-cta .qcm-subject-card__cta {
  display: none !important;
}

/* Masquer éléments sur mobile uniquement */
@media (max-width: 639px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Afficher uniquement sur mobile */
@media (min-width: 640px) {
  .show-mobile-only {
    display: none !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   HERO QCM MATIÈRE - COULEURS LIGHT/DARK MODE
   Force le contraste correct sur les pages QCM matière
   ═══════════════════════════════════════════════════════════════════════════ */

/* Le hero garde TOUJOURS son fond dégradé coloré et texte blanc */
.qcm-hub-hero,
.qcm-seo-hero {
  background: var(--cq-hero-gradient, linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)) !important;
  color: var(--cq-hero-text, white) !important;
}

.qcm-hub-hero__title,
.qcm-seo-hero__title,
.qcm-hub-hero h1,
.qcm-seo-hero h1 {
  color: var(--cq-hero-text, #ffffff) !important;
  -webkit-text-fill-color: var(--cq-hero-text, #ffffff) !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
}

.qcm-hub-hero__subtitle,
.qcm-seo-hero__subtitle,
.qcm-hub-hero p,
.qcm-seo-hero p {
  color: var(--cq-hero-text-soft, rgba(255, 255, 255, 0.95)) !important;
}

.qcm-hub-hero__badge,
.qcm-seo-hero__badge {
  background: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}

/* Variantes par niveau - gardent leur couleur spécifique */
.qcm-hub-hero--l1,
.qcm-seo-hero--l1 {
  background: var(--cq-hero-gradient-blue, linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)) !important;
}

.qcm-hub-hero--l2,
.qcm-seo-hero--l2 {
  background: var(--cq-hero-gradient-green, linear-gradient(135deg, #10b981 0%, #059669 100%)) !important;
}

.qcm-hub-hero--l3,
.qcm-seo-hero--l3 {
  background: var(--cq-hero-gradient-amber, linear-gradient(135deg, #f59e0b 0%, #d97706 100%)) !important;
}

/* Hero responsive mobile */
@media (max-width: 639px) {
  .qcm-hub-hero,
  .qcm-seo-hero {
    padding: 32px 20px !important;
    margin: 0 0 24px !important;
    border-radius: 0 !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
  }
  
  .qcm-hub-hero__title,
  .qcm-seo-hero__title {
    font-size: clamp(1.5rem, 5vw, 2rem) !important;
  }
  
  .qcm-hub-hero__subtitle,
  .qcm-seo-hero__subtitle {
    font-size: 0.9375rem !important;
  }
}