/**
 * CampusQCM - Mobile Premium UX/UI
 * Optimisations pour une expérience 10/10 niveau Apple/Revolut
 * 
 * ARCHITECTURE MOBILE-FIRST:
 * - Styles de base = MOBILE (pas de media query)
 * - Desktop = @media (min-width: 768px)
 * 
 * BREAKPOINTS STANDARDISÉS:
 * - 360px : Mobile small (iPhone SE)
 * - 480px : Mobile large
 * - 768px : Tablet
 * - 1024px : Desktop
 * - 1280px : Desktop large
 * 
 * @version 3.0.0 - Mobile-First Refactor
 */

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS PREMIUM v5.0.0 - SYSTÈME UX COHÉRENT
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ═══════════════════════════════════════════════════════════════════════
     ESPACEMENT - ÉCHELLE STRICTE (Règle #1)
     Ne jamais utiliser de valeurs hors de cette échelle
     ═══════════════════════════════════════════════════════════════════════ */
  --space-xs: 4px;    /* Icônes inline, micro-gaps */
  --space-sm: 8px;    /* Gaps serrés, padding badges */
  --space-md: 16px;   /* Espacement standard, padding cards */
  --space-lg: 24px;   /* Entre groupes, padding sections mobile */
  --space-xl: 40px;   /* Ruptures visuelles, sections desktop */
  --space-2xl: 64px;  /* Hero, Footer, grandes ruptures */
  --space-3xl: 96px;  /* Sections majeures desktop */
  
  /* ═══════════════════════════════════════════════════════════════════════
     TYPOGRAPHIE - HIÉRARCHIE FORTE (Règle #2)
     Ratio minimum titre/corps: 1.5x
     ═══════════════════════════════════════════════════════════════════════ */
  /* Échelle typographique (ratio 1.25 - Major Third) */
  --text-xs: 0.75rem;     /* 12px - Labels, captions */
  --text-sm: 0.875rem;    /* 14px - Meta, secondaire */
  --text-base: 1rem;      /* 16px - Corps principal */
  --text-lg: 1.125rem;    /* 18px - Corps emphase */
  --text-xl: 1.25rem;     /* 20px - Sous-titres */
  --text-2xl: 1.5rem;     /* 24px - Titres cards */
  --text-3xl: 2rem;       /* 32px - Titres sections */
  --text-4xl: 2.5rem;     /* 40px - Hero mobile */
  --text-5xl: 3rem;       /* 48px - Hero desktop */
  
  /* Poids typographiques */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  
  /* Line heights */
  --leading-tight: 1.2;   /* Titres */
  --leading-snug: 1.4;    /* Sous-titres */
  --leading-normal: 1.6;  /* Corps */
  --leading-relaxed: 1.75; /* Lecture longue */
  
  /* Letter spacing */
  --tracking-tight: -0.02em;  /* Grands titres */
  --tracking-normal: 0;        /* Standard */
  --tracking-wide: 0.025em;    /* Labels uppercase */
  --tracking-wider: 0.05em;    /* Badges */
  
  /* ═══════════════════════════════════════════════════════════════════════
     COULEURS TEXTE - 3 NIVEAUX DISTINCTS (Règle #8)
     ═══════════════════════════════════════════════════════════════════════ */
  --text-primary: #1e293b;      /* 100% - Titres, important */
  --text-secondary: #475569;    /* 70% - Corps de texte */
  --text-muted: #94a3b8;        /* 50% - Meta, labels */
  --text-disabled: #cbd5e1;     /* 35% - Désactivé */
  
  /* Couleurs d'accent */
  --accent-primary: #6366f1;    /* Indigo - CTA principal */
  --accent-primary-hover: #4f46e5;
  --accent-primary-light: rgba(99, 102, 241, 0.1);
  --accent-success: #10b981;
  --accent-warning: #f59e0b;
  --accent-error: #ef4444;
  
  /* ═══════════════════════════════════════════════════════════════════════
     RADIUS - SYSTÈME UNIFIÉ
     ═══════════════════════════════════════════════════════════════════════ */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  
  /* ═══════════════════════════════════════════════════════════════════════
     OMBRES - VISIBLES ET PREMIUM (Règle #3)
     Opacité minimum 0.06 pour être perceptible
     ═══════════════════════════════════════════════════════════════════════ */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 16px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
  --shadow-xl: 0 16px 32px rgba(0,0,0,0.10), 0 8px 16px rgba(0,0,0,0.06);
  --shadow-2xl: 0 24px 48px rgba(0,0,0,0.12), 0 12px 24px rgba(0,0,0,0.08);
  
  /* Ombres colorées pour accent */
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.25);
  --shadow-glow-lg: 0 8px 32px rgba(99, 102, 241, 0.3);
  --shadow-card-hover: 0 12px 32px -8px rgba(99, 102, 241, 0.2);
  
  /* ═══════════════════════════════════════════════════════════════════════
     TOUCH TARGETS - ACCESSIBILITÉ
     ═══════════════════════════════════════════════════════════════════════ */
  --touch-min: 44px;
  --touch-comfortable: 48px;
  --touch-large: 56px;
  
  /* ═══════════════════════════════════════════════════════════════════════
     TRANSITIONS - PREMIUM & COHÉRENTES (Règle #7)
     ═══════════════════════════════════════════════════════════════════════ */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Transitions composées */
  --transition-fast: var(--duration-fast) var(--ease-smooth);
  --transition-normal: var(--duration-normal) var(--ease-smooth);
  --transition-spring: var(--duration-normal) var(--ease-spring);
  
  /* ═══════════════════════════════════════════════════════════════════════
     SAFE AREAS - iOS
     ═══════════════════════════════════════════════════════════════════════ */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  
  /* ═══════════════════════════════════════════════════════════════════════
     BORDURES
     ═══════════════════════════════════════════════════════════════════════ */
  --border-subtle: #f1f5f9;
  --border-default: #e2e8f0;
  --border-strong: #cbd5e1;
}

/* Dark mode - Couleurs et ombres ajustées */
html[data-theme="dark"] {
  /* Texte dark mode */
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  --text-disabled: #475569;
  
  /* Bordures dark */
  --border-subtle: #1e293b;
  --border-default: #334155;
  --border-strong: #475569;
  
  /* Ombres dark mode - Plus prononcées */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.25);
  --shadow-lg: 0 8px 16px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.3);
  --shadow-xl: 0 16px 32px rgba(0,0,0,0.45), 0 8px 16px rgba(0,0,0,0.35);
  --shadow-2xl: 0 24px 48px rgba(0,0,0,0.5), 0 12px 24px rgba(0,0,0,0.4);
  
  /* Glow plus visible en dark */
  --shadow-glow: 0 0 24px rgba(99, 102, 241, 0.35);
  --shadow-glow-lg: 0 8px 40px rgba(99, 102, 241, 0.4);
  --shadow-card-hover: 0 12px 32px -8px rgba(99, 102, 241, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE MOBILE-FIRST (Pas de media query = styles mobiles par défaut)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Typography base - Mobile first */
body {
  font-size: 16px;
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHIE HIÉRARCHIQUE - Classes Premium (Règle #2)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Titres de section - Hero/Page */
.text-hero,
.heading-hero {
  font-size: var(--text-4xl) !important;
  font-weight: var(--font-extrabold) !important;
  line-height: var(--leading-tight) !important;
  letter-spacing: var(--tracking-tight) !important;
  color: var(--text-primary) !important;
}

@media (min-width: 768px) {
  .text-hero,
  .heading-hero {
    font-size: var(--text-5xl) !important;
  }
}

/* Titres de section */
.text-section,
.heading-section,
h1 {
  font-size: var(--text-3xl) !important;
  font-weight: var(--font-bold) !important;
  line-height: var(--leading-tight) !important;
  letter-spacing: var(--tracking-tight) !important;
  color: var(--text-primary) !important;
  margin-bottom: var(--space-md) !important;
}

/* Titres de carte / Sous-sections */
.text-card-title,
.heading-card,
h2 {
  font-size: var(--text-2xl) !important;
  font-weight: var(--font-semibold) !important;
  line-height: var(--leading-snug) !important;
  color: var(--text-primary) !important;
  margin-bottom: var(--space-sm) !important;
}

/* Sous-titres */
.text-subtitle,
.heading-subtitle,
h3 {
  font-size: var(--text-xl) !important;
  font-weight: var(--font-semibold) !important;
  line-height: var(--leading-snug) !important;
  color: var(--text-primary) !important;
  margin-bottom: var(--space-sm) !important;
}

/* Titres mineurs */
h4, h5, h6 {
  font-size: var(--text-lg) !important;
  font-weight: var(--font-medium) !important;
  line-height: var(--leading-snug) !important;
  color: var(--text-primary) !important;
  margin-bottom: var(--space-xs) !important;
}

/* Corps de texte principal */
.text-body,
p {
  font-size: var(--text-base) !important;
  line-height: var(--leading-normal) !important;
  color: var(--text-secondary) !important;
}

/* Corps emphase */
.text-body-lg {
  font-size: var(--text-lg) !important;
  line-height: var(--leading-relaxed) !important;
  color: var(--text-secondary) !important;
}

/* Texte secondaire / Meta */
.text-meta,
.text-secondary {
  font-size: var(--text-sm) !important;
  line-height: var(--leading-normal) !important;
  color: var(--text-muted) !important;
}

/* Labels / Captions */
.text-label,
.text-caption {
  font-size: var(--text-xs) !important;
  font-weight: var(--font-medium) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}

/* Container fluide */
.qcm-container,
.qcm-seo-container {
  width: 100%;
  max-width: 100%;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  box-sizing: border-box;
}

/* Question text - minimum 16px sur mobile */
.qcm-question-text {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Options de réponse - touch targets 48px+ */
.qcm-option {
  min-height: var(--touch-comfortable);
  padding: 14px var(--space-md);
  font-size: var(--text-base);
  line-height: 1.5;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Boutons - touch targets */
.qcm-btn,
.btn {
  min-height: 48px;
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Headings mobile */
h1, .qcm-seo-hero__title {
  font-size: 1.5rem;
  line-height: 1.3;
  margin-bottom: 12px;
}

h2, .qcm-hub-section__title {
  font-size: 1.25rem;
  line-height: 1.35;
  margin-bottom: 10px;
}

h3 {
  font-size: 1.125rem;
  line-height: 1.4;
  margin-bottom: 8px;
}

/* Paragraphs */
p {
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 14px;
}

/* Links - touch friendly */
a {
  padding: 2px 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP OVERRIDES (min-width: 768px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .qcm-container,
  .qcm-seo-container {
    max-width: 720px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
  }
  
  .qcm-question-text {
    font-size: 1.125rem;
    padding: 24px;
  }
  
  .qcm-option {
    padding: 16px 20px;
  }
  
  h1, .qcm-seo-hero__title {
    font-size: 2rem;
  }
  
  h2, .qcm-hub-section__title {
    font-size: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .qcm-container,
  .qcm-seo-container {
    max-width: 960px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOUTON VALIDER - FIXED BOTTOM PREMIUM
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Container du bouton submit fixé en bas */
  .qcm-submit-container,
  .qcm-actions,
  .qcm-question-actions {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    padding: 16px 16px calc(16px + var(--safe-area-bottom)) !important;
    background: linear-gradient(to top, 
      rgba(255,255,255, 1) 0%,
      rgba(255,255,255, 0.98) 50%,
      rgba(255,255,255, 0) 100%) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }
  
  html[data-theme="dark"] .qcm-submit-container,
  html[data-theme="dark"] .qcm-actions,
  html[data-theme="dark"] .qcm-question-actions {
    background: linear-gradient(to top, 
      rgba(30,41,59, 1) 0%,
      rgba(30,41,59, 0.98) 50%,
      rgba(30,41,59, 0) 100%) !important;
  }
  
  /* Bouton Valider premium */
  .qcm-submit-btn,
  .qcm-btn-submit,
  button[type="submit"].qcm-btn {
    width: 100% !important;
    min-height: var(--touch-large) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg), var(--shadow-glow) !important;
    transition: all 0.2s var(--ease-out-expo) !important;
  }
  
  .qcm-submit-btn:active,
  .qcm-btn-submit:active {
    transform: scale(0.98) !important;
    box-shadow: var(--shadow-sm) !important;
  }
  
  /* Spacer pour éviter que le contenu soit caché */
  .qcm-question-container,
  .qcm-interface {
    padding-bottom: 80px !important;
  }
  
  /* Réserver l'espace pour éviter CLS */
  .qcm-question-card {
    min-height: calc(100vh - 200px) !important;
    contain: layout !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEEDBACK INLINE - MEILLEUR POUR CLS & ACCESSIBILITÉ
   Le feedback apparaît directement après la question (pas de bottom sheet)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Feedback QCM INLINE (pas de position fixed) */
  .qcm-feedback {
    position: relative !important;
    margin: 16px 0 !important;
    background: var(--cq-card-bg, #ffffff) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    padding: 0 !important;
    overflow: hidden !important;
    animation: fadeInUp 0.3s var(--ease-out-expo) !important;
    border-left: 4px solid var(--cq-accent, #6366f1) !important;
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Feedback correct */
  .qcm-feedback.qcm-feedback--correct,
  .qcm-feedback.correct,
  .qcm-feedback[data-correct="true"] {
    border-left-color: var(--cq-success, #10b981) !important;
    background: rgba(16, 185, 129, 0.04) !important;
  }
  
  /* Feedback incorrect */
  .qcm-feedback.qcm-feedback--wrong,
  .qcm-feedback.wrong,
  .qcm-feedback[data-correct="false"] {
    border-left-color: var(--cq-error, #ef4444) !important;
    background: rgba(239, 68, 68, 0.04) !important;
  }
  
  html[data-theme="dark"] .qcm-feedback {
    background: var(--cq-card-bg, #1f2937) !important;
    box-shadow: var(--shadow-lg) !important;
  }
  
  html[data-theme="dark"] .qcm-feedback.qcm-feedback--correct,
  html[data-theme="dark"] .qcm-feedback.correct {
    background: rgba(16, 185, 129, 0.1) !important;
  }
  
  html[data-theme="dark"] .qcm-feedback.qcm-feedback--wrong,
  html[data-theme="dark"] .qcm-feedback.wrong {
    background: rgba(239, 68, 68, 0.1) !important;
  }
  
  /* Status header compact */
  .qcm-feedback-status {
    padding: 14px 16px !important;
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  }
  
  .qcm-feedback-status::before {
    font-size: 1.25rem !important;
  }
  
  .qcm-feedback-status.correct::before {
    content: '✓' !important;
    color: var(--cq-success, #10b981) !important;
  }
  
  .qcm-feedback-status.wrong::before {
    content: '✗' !important;
    color: var(--cq-error, #ef4444) !important;
  }
  
  /* Explanation inline */
  .qcm-feedback-explanation {
    padding: 14px 16px 16px !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
    color: var(--cq-text) !important;
    contain: content !important;
  }
  
  /* Espace réservé pour éviter CLS quand feedback apparaît */
  .qcm-feedback-placeholder {
    min-height: 0 !important;
    transition: min-height 0.2s ease !important;
  }
  
  .qcm-feedback-placeholder.active {
    min-height: 120px !important;
  }
  
  /* Overlay behind bottom sheet */
  .qcm-feedback ~ .qcm-actions::before,
  .qcm-feedback:not(.qcm-hidden) ~ .qcm-question-card::after {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.3) !important;
    z-index: 1050 !important;
    pointer-events: none !important;
  }
  
  /* Container de correction générique */
  .qcm-correction,
  .qcm-explanation,
  .correction-panel {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1100 !important;
    max-height: 50vh !important;
    background: var(--cq-card-bg, #ffffff) !important;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0 !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.15) !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: translateY(0) !important;
    transition: transform 0.4s var(--ease-out-expo) !important;
    will-change: transform !important;
    contain: layout style !important;
  }

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS COMPACTES (-40% hauteur)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Cards de mode d'entraînement compactes */
  .qcm-mode-card,
  .qcm-start-mode,
  .mode-selection-card {
    padding: 14px 16px !important;
    min-height: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
  }
  
  .qcm-mode-card__icon,
  .mode-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
    border-radius: var(--radius-md) !important;
  }
  
  .qcm-mode-card__content {
    flex: 1 !important;
  }
  
  .qcm-mode-card__title,
  .mode-title {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin-bottom: 2px !important;
  }
  
  .qcm-mode-card__desc,
  .mode-description {
    font-size: 0.875rem !important;
    color: var(--cq-text-muted) !important;
    line-height: 1.5 !important;
  }
  
  .qcm-mode-card__badges,
  .mode-badges {
    display: flex !important;
    gap: 6px !important;
    margin-top: 6px !important;
  }
  
  .qcm-mode-card__badge,
  .mode-badge {
    font-size: 0.75rem !important;
    padding: 3px 10px !important;
    border-radius: var(--radius-full) !important;
  }
  
  /* Stats section horizontale compacte */
  .qcm-info-table,
  .qcm-stats-table,
  .qcm-meta-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px !important;
    background: var(--cq-bg-alt, #f8fafc) !important;
    border-radius: var(--radius-lg) !important;
    border: none !important;
  }
  
  .qcm-info-table tr,
  .qcm-stats-table tr,
  .qcm-meta-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    background: var(--cq-card-bg, #fff) !important;
    border-radius: var(--radius-full) !important;
    box-shadow: var(--shadow-xs) !important;
    border: none !important;
    font-size: 0.8rem !important;
  }
  
  .qcm-info-table td,
  .qcm-stats-table td {
    padding: 0 !important;
    border: none !important;
  }
  
  /* Objectifs pédagogiques compacts */
  .qcm-academic__list li,
  .qcm-objectives li,
  .objectives-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
    background: var(--cq-bg-alt, #f8fafc) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
  }
  
  .qcm-academic__list li::before,
  .objectives-list li::before {
    content: '✓' !important;
    color: var(--cq-success, #10b981) !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
  }
  
  /* Pièges fréquents compacts */
  .qcm-academic__warnings li,
  .qcm-traps li,
  .traps-list li {
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
    font-size: 0.9375rem !important;
    background: rgba(245, 158, 11, 0.08) !important;
    border-radius: var(--radius-md) !important;
    border-left: 3px solid var(--cq-warning, #f59e0b) !important;
  }
  
  /* Section conseils compacts */
  .qcm-seo-list--numbered li,
  .conseils-list li {
    padding: 12px 14px 12px 18px !important;
    margin-bottom: 8px !important;
    font-size: 0.9375rem !important;
    line-height: 1.55 !important;
    background: var(--cq-bg-alt, #f8fafc) !important;
    border-radius: var(--radius-md) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOUCH TARGETS 48px MINIMUM + RADIO À GAUCHE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Options de réponse QCM - Radio à gauche pour thumb zone */
  .qcm-option,
  .qcm-answer-option,
  .option-btn {
    min-height: var(--touch-comfortable) !important;
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: row-reverse !important; /* Inverse l'ordre: indicator passe à gauche */
    align-items: center !important;
    gap: 12px !important;
    border-radius: var(--radius-lg) !important;
    cursor: pointer !important;
    transition: all 0.15s var(--ease-out-expo) !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  /* Réorganiser l'ordre des éléments */
  .qcm-option-indicator {
    order: -2 !important; /* Radio tout à gauche */
  }
  
  .qcm-option-letter {
    order: -1 !important; /* Lettre après radio */
  }
  
  .qcm-option-text {
    order: 0 !important; /* Texte à droite */
  }
  
  .qcm-option:active {
    transform: scale(0.98) !important;
    background: var(--cq-bg-alt) !important;
  }
  
  /* Radio/Checkbox indicators - Plus visible et touch-friendly */
  .qcm-option-indicator,
  .qcm-option__indicator,
  .option-radio,
  .option-checkbox {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border-radius: var(--radius-full) !important;
    border: 2.5px solid var(--cq-border, #d1d5db) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s var(--ease-out-expo) !important;
    background: var(--cq-card-bg, #fff) !important;
  }
  
  /* État sélectionné du radio */
  .qcm-option.qcm-option-selected .qcm-option-indicator,
  .qcm-option--selected .qcm-option-indicator {
    border-color: var(--cq-accent, #6366f1) !important;
    background: var(--cq-accent, #6366f1) !important;
    box-shadow: inset 0 0 0 4px white !important;
  }
  
  /* État correct */
  .qcm-option.qcm-option-correct .qcm-option-indicator {
    border-color: var(--cq-success, #10b981) !important;
    background: var(--cq-success, #10b981) !important;
  }
  
  .qcm-option.qcm-option-correct .qcm-option-indicator::after {
    content: '✓' !important;
    color: white !important;
    font-size: 14px !important;
    font-weight: bold !important;
  }
  
  /* État incorrect */
  .qcm-option.qcm-option-wrong .qcm-option-indicator {
    border-color: var(--cq-error, #ef4444) !important;
    background: var(--cq-error, #ef4444) !important;
  }
  
  .qcm-option.qcm-option-wrong .qcm-option-indicator::after {
    content: '✗' !important;
    color: white !important;
    font-size: 14px !important;
    font-weight: bold !important;
  }
  
  .qcm-option.selected .qcm-option__indicator,
  .qcm-option--selected .option-radio {
    background: var(--cq-accent) !important;
    border-color: var(--cq-accent) !important;
  }
  
  .qcm-option.selected .qcm-option__indicator::after,
  .qcm-option--selected .option-radio::after {
    content: '' !important;
    width: 8px !important;
    height: 8px !important;
    background: white !important;
    border-radius: var(--radius-full) !important;
  }
  
  /* Bouton indice */
  .qcm-hint-btn,
  .btn-hint,
  .indice-btn {
    min-height: var(--touch-min) !important;
    padding: 12px 18px !important;
    font-size: 0.9375rem !important;
    border-radius: var(--radius-md) !important;
  }
  
  /* FAQ accordions */
  details summary,
  .faq-question,
  .accordion-header {
    min-height: var(--touch-comfortable) !important;
    padding: 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
  }
  
  /* Menu items */
  .mobile-menu a,
  .nav-link,
  .menu-item a {
    min-height: var(--touch-comfortable) !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BARRE DE PROGRESSION STICKY
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  .qcm-progress-bar,
  .qcm-header-progress,
  .quiz-progress {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: var(--cq-card-bg, #fff) !important;
    padding: 10px 16px !important;
    margin: 0 -16px 12px !important;
    width: calc(100% + 32px) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
  }
  
  .qcm-progress-bar::before {
    content: '' !important;
    position: absolute !important;
    top: calc(-1 * var(--safe-area-top)) !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--safe-area-top) !important;
    background: inherit !important;
  }
  
  /* Compteur de questions plus visible */
  .qcm-progress-text,
  .progress-counter {
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: var(--cq-text) !important;
    white-space: nowrap !important;
    min-width: 60px !important;
  }
  
  /* Track plus large et visible */
  .qcm-progress-track,
  .progress-track {
    flex: 1 !important;
    height: 8px !important;
    background: var(--cq-bg-alt, #e2e8f0) !important;
    border-radius: var(--radius-full) !important;
    overflow: hidden !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06) !important;
  }
  
  /* Fill avec animation et dégradé visible */
  .qcm-progress-fill,
  .progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, 
      var(--cq-accent, #6366f1) 0%, 
      var(--cq-accent-alt, #8b5cf6) 50%,
      var(--cq-success, #10b981) 100%) !important;
    background-size: 200% 100% !important;
    border-radius: var(--radius-full) !important;
    transition: width 0.4s var(--ease-out-expo) !important;
    position: relative !important;
  }
  
  /* Animation subtile sur la progress bar */
  .qcm-progress-fill::after,
  .progress-fill::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(90deg, 
      transparent 0%, 
      rgba(255,255,255,0.2) 50%, 
      transparent 100%) !important;
    animation: shimmerProgress 2s infinite linear !important;
  }
  
  @keyframes shimmerProgress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  
  /* Timer plus visible */
  .qcm-timer,
  .quiz-timer {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    padding: 6px 12px !important;
    background: var(--cq-bg-alt) !important;
    border-radius: var(--radius-md) !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
  }
  
  /* Timer en alerte (< 1min) */
  .qcm-timer.warning,
  .quiz-timer.warning {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #d97706 !important;
    animation: pulse 1s ease infinite !important;
  }
  
  .qcm-timer.danger,
  .quiz-timer.danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: var(--cq-error) !important;
    animation: pulse 0.5s ease infinite !important;
  }
  
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MICRO-ANIMATIONS PREMIUM
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Animation d'entrée des questions */
  @keyframes slideInFromRight {
    from {
      opacity: 0;
      transform: translateX(30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes slideInFromBottom {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  @keyframes successPulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }
  
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
  }
  
  /* Application des animations */
  .qcm-question {
    animation: slideInFromRight 0.4s var(--ease-out-expo) !important;
  }
  
  .qcm-option {
    animation: slideInFromBottom 0.3s var(--ease-out-expo) backwards !important;
  }
  
  .qcm-option:nth-child(1) { animation-delay: 0.05s !important; }
  .qcm-option:nth-child(2) { animation-delay: 0.1s !important; }
  .qcm-option:nth-child(3) { animation-delay: 0.15s !important; }
  .qcm-option:nth-child(4) { animation-delay: 0.2s !important; }
  .qcm-option:nth-child(5) { animation-delay: 0.25s !important; }
  
  .qcm-correction,
  .qcm-feedback {
    animation: slideInFromBottom 0.4s var(--ease-out-expo) !important;
  }
  
  /* Feedback visuel réponse correcte */
  .qcm-option--correct,
  .qcm-option.correct {
    animation: successPulse 0.4s var(--ease-spring) !important;
  }
  
  /* Feedback visuel réponse incorrecte */
  .qcm-option--incorrect,
  .qcm-option.incorrect {
    animation: shake 0.4s var(--ease-out-expo) !important;
  }
  
  /* Transitions fluides */
  .qcm-card,
  .mode-card,
  .stat-card {
    transition: transform 0.2s var(--ease-out-expo), 
                box-shadow 0.2s var(--ease-out-expo) !important;
  }
  
  .qcm-card:active,
  .mode-card:active {
    transform: scale(0.98) !important;
  }
  
  /* Loading skeleton animation */
  @keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  
  .skeleton,
  .loading-skeleton,
  [class*="skeleton"] {
    background: linear-gradient(
      90deg,
      var(--cq-bg-alt) 0%,
      rgba(255,255,255,0.5) 50%,
      var(--cq-bg-alt) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: shimmer 1.5s infinite linear !important;
    border-radius: var(--radius-md) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION STATS HORIZONTALE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Container des stats hero */
  .qcm-hub-hero__stats,
  .home-stats-row,
  .stats-container {
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    padding: 16px 0 !important;
  }
  
  .qcm-hub-stat,
  .home-stat,
  .stat-item {
    text-align: center !important;
    padding: 8px 0 !important;
    min-width: 70px !important;
  }
  
  .qcm-hub-stat__value,
  .stat-value {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--cq-accent) !important;
    line-height: 1.2 !important;
  }
  
  .qcm-hub-stat__label,
  .stat-label {
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--cq-text-muted) !important;
    margin-top: 4px !important;
  }
  
  /* Badge gratuit compact */
  .free-badge,
  .gratuit-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 12px !important;
    background: rgba(16, 185, 129, 0.1) !important;
    color: var(--cq-success) !important;
    border-radius: var(--radius-full) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MENU MOBILE ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  .mobile-menu,
  .mobile-nav,
  .slide-menu {
    transform: translateX(100%) !important;
    transition: transform 0.35s var(--ease-out-expo) !important;
  }
  
  .mobile-menu.open,
  .mobile-nav.active,
  .slide-menu.visible {
    transform: translateX(0) !important;
  }
  
  .mobile-menu-overlay {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.35s ease, visibility 0.35s ease !important;
  }
  
  .mobile-menu-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Items du menu avec stagger animation */
  .mobile-menu a,
  .mobile-nav-item {
    opacity: 0 !important;
    transform: translateX(20px) !important;
    transition: opacity 0.25s ease, transform 0.25s var(--ease-out-expo) !important;
  }
  
  .mobile-menu.open a,
  .mobile-nav.active .mobile-nav-item {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }
  
  .mobile-menu.open a:nth-child(1) { transition-delay: 0.05s !important; }
  .mobile-menu.open a:nth-child(2) { transition-delay: 0.1s !important; }
  .mobile-menu.open a:nth-child(3) { transition-delay: 0.15s !important; }
  .mobile-menu.open a:nth-child(4) { transition-delay: 0.2s !important; }
  .mobile-menu.open a:nth-child(5) { transition-delay: 0.25s !important; }
  .mobile-menu.open a:nth-child(6) { transition-delay: 0.3s !important; }
  .mobile-menu.open a:nth-child(7) { transition-delay: 0.35s !important; }
  .mobile-menu.open a:nth-child(8) { transition-delay: 0.4s !important; }
  
  /* Hamburger animation */
  .hamburger-line {
    transition: transform 0.25s var(--ease-out-expo), opacity 0.2s ease !important;
  }
  
  .hamburger.active .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
  }
  
  .hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }
  
  .hamburger.active .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   START MODAL / MODE SELECTION - SIMPLIFIÉ MOBILE-FIRST
   Écran de choix de mode optimisé : moins de scroll, actions claires
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Container modal start */
  .qcm-start-card,
  .qcm-start-modal {
    padding: 16px !important;
    border-radius: var(--radius-lg) !important;
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
  }
  
  /* Header simplifié */
  .qcm-start-card__header,
  .qcm-start-header {
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid var(--cq-border) !important;
    text-align: center !important;
  }
  
  .qcm-start-card__title,
  .qcm-start-title {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
  }
  
  .qcm-start-card__subtitle,
  .qcm-start-subtitle {
    font-size: 0.875rem !important;
    color: var(--cq-text-muted) !important;
    display: none !important; /* Masqué pour simplifier */
  }
  
  /* Section modes */
  .qcm-start-modes,
  .mode-selection-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }
  
  /* Titre section modes */
  .qcm-start-modes-title,
  .modes-section-title {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    color: var(--cq-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }
  
  .qcm-start-modes-subtitle {
    display: none !important; /* Masqué pour simplifier */
  }
  
  /* Mode cards ultra-compactes */
  .qcm-mode-card,
  .qcm-start-mode,
  .mode-selection-card {
    padding: 12px 14px !important;
    min-height: 56px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    border-radius: var(--radius-md) !important;
    border: 1.5px solid var(--cq-border) !important;
    background: var(--cq-card-bg) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  .qcm-mode-card:active,
  .qcm-start-mode:active {
    transform: scale(0.98) !important;
    background: var(--cq-bg-alt) !important;
  }
  
  .qcm-mode-card.selected,
  .qcm-mode-card--active {
    border-color: var(--cq-accent) !important;
    background: rgba(99, 102, 241, 0.05) !important;
  }
  
  /* Icône mode réduite */
  .qcm-mode-card__icon,
  .mode-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
    border-radius: var(--radius-sm) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Contenu mode */
  .qcm-mode-card__content {
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  .qcm-mode-card__title,
  .mode-title {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    margin-bottom: 0 !important;
    line-height: 1.3 !important;
  }
  
  .qcm-mode-card__desc,
  .mode-description {
    font-size: 0.8125rem !important;
    color: var(--cq-text-muted) !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
    line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  
  /* Badges masqués pour simplifier */
  .qcm-mode-card__badges,
  .mode-badges {
    display: none !important;
  }
  
  /* Bouton start principal */
  .qcm-start-btn,
  .btn-start-qcm {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: var(--radius-md) !important;
    margin-top: 8px !important;
  }
  
  .qcm-start-modes-title,
  .modes-section-title {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
  }
  
  .qcm-start-modes-subtitle {
    font-size: 0.8rem !important;
    color: var(--cq-text-muted) !important;
    margin-bottom: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   POURQUOI RÉVISER - SECTION COMPACTE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  .why-section,
  .qcm-why-block,
  [class*="pourquoi"] {
    padding: 20px 16px !important;
    border-radius: var(--radius-lg) !important;
    margin: 16px 0 !important;
  }
  
  .why-section h3,
  .qcm-why-block h3 {
    font-size: 1rem !important;
    margin-bottom: 12px !important;
  }
  
  .why-section p,
  .qcm-why-block p {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM BADGE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  .premium-badge,
  .badge-premium {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    color: white !important;
    border-radius: var(--radius-full) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important;
  }
  
  .premium-badge::before {
    content: '💎' !important;
    font-size: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO META - STATS SANS BORDURES VIOLETTES
   Remplace le style tableau par des pills compactes
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Container des meta hero */
  .qcm-hero-meta,
  .qcm-seo-hero__meta {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 16px !important;
    padding: 0 !important;
  }
  
  /* Items de meta en pills */
  .qcm-hero-meta__item,
  .qcm-seo-meta__item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    background: rgba(255,255,255,0.9) !important;
    border-radius: var(--radius-full) !important;
    border: none !important;
    box-shadow: var(--shadow-sm) !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: var(--cq-text) !important;
    white-space: nowrap !important;
  }
  
  html[data-theme="dark"] .qcm-hero-meta__item,
  html[data-theme="dark"] .qcm-seo-meta__item {
    background: rgba(30,41,59,0.9) !important;
  }
  
  .qcm-hero-meta__icon {
    font-size: 1rem !important;
  }
  
  /* EEAT Badge compact */
  .qcm-eeat-badge {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 12px !important;
    padding: 12px 16px !important;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.05) 100%) !important;
    border-radius: var(--radius-lg) !important;
    border: none !important;
  }
  
  .qcm-eeat-badge__item {
    font-size: 0.75rem !important;
    color: var(--cq-text-muted) !important;
    white-space: nowrap !important;
  }
  
  .qcm-eeat-badge__separator {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   QCM INFO TABLE - SUPPRESSION BORDURES VIOLETTES
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Tables d'info QCM */
  .qcm-info-table,
  table.qcm-stats,
  .qcm-details-table {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 16px !important;
    background: var(--cq-bg-alt, #f8fafc) !important;
    border-radius: var(--radius-lg) !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  .qcm-info-table tr,
  table.qcm-stats tr,
  .qcm-details-table tr {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    background: var(--cq-card-bg, #ffffff) !important;
    border-radius: var(--radius-full) !important;
    border: none !important;
    box-shadow: var(--shadow-xs) !important;
  }
  
  .qcm-info-table td,
  .qcm-info-table th,
  table.qcm-stats td,
  table.qcm-stats th,
  .qcm-details-table td,
  .qcm-details-table th {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 0.85rem !important;
  }
  
  /* Supprimer toutes les bordures horizontales violettes */
  .qcm-info-table tr + tr,
  table.qcm-stats tr + tr {
    border-top: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESPACE PERSONNEL - FIX SKELETON
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  .dashboard-card,
  .espace-personnel-card,
  .user-space-card {
    min-height: 120px !important;
    padding: 16px !important;
    border-radius: var(--radius-lg) !important;
  }
  
  .dashboard-card .skeleton,
  .espace-personnel-card .skeleton {
    min-height: 80px !important;
    border-radius: var(--radius-md) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHIE PREMIUM MOBILE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Hiérarchie typographique claire */
  h1, .h1 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
  }
  
  h2, .h2 {
    font-size: 1.35rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
  }
  
  h3, .h3 {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
  }
  
  h4, .h4 {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
  }
  
  /* Body text optimisé pour lecture mobile */
  body {
    font-size: 16px !important; /* Base 16px pour accessibilité */
    line-height: 1.6 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
  }
  
  /* Texte de question lisible */
  .qcm-question-text,
  .question-content p {
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
    color: var(--cq-text) !important;
  }
  
  /* Labels et captions */
  .caption,
  .label,
  .meta-text,
  small {
    font-size: 0.75rem !important;
    letter-spacing: 0.02em !important;
    color: var(--cq-text-muted) !important;
  }
  
  /* Nombres et stats */
  .stat-number,
  .count,
  .metric-value {
    font-feature-settings: 'tnum' on !important; /* Tabular numbers */
    font-variant-numeric: tabular-nums !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EMPTY STATES ÉLÉGANTS
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  .empty-state,
  .no-results,
  .no-data,
  .qcm-empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 24px !important;
    text-align: center !important;
  }
  
  .empty-state::before,
  .no-results::before,
  .qcm-empty::before {
    content: '' !important;
    display: block !important;
    width: 80px !important;
    height: 80px !important;
    margin-bottom: 20px !important;
    background: linear-gradient(135deg, var(--cq-bg-alt) 0%, var(--cq-border) 100%) !important;
    border-radius: var(--radius-2xl) !important;
    opacity: 0.5 !important;
  }
  
  .empty-state h3,
  .no-results h3 {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
  }
  
  .empty-state p,
  .no-results p {
    font-size: 0.9rem !important;
    color: var(--cq-text-muted) !important;
    max-width: 280px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOCUS STATES ACCESSIBLES
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Focus visible avec ring premium */
  :focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4) !important;
  }
  
  /* Boutons avec focus */
  button:focus-visible,
  .btn:focus-visible,
  a:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4), var(--shadow-md) !important;
  }
  
  /* Options QCM focus */
  .qcm-option:focus-visible,
  .qcm-option:focus-within {
    border-color: var(--cq-accent) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
  }
  
  /* Inputs focus */
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    border-color: var(--cq-accent) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SWIPE INDICATORS
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Indicateurs de swipe horizontal */
  .swipe-container,
  .horizontal-scroll,
  .scroll-x {
    position: relative !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
  }
  
  .swipe-container::-webkit-scrollbar {
    display: none !important;
  }
  
  .swipe-container > * {
    scroll-snap-align: start !important;
  }
  
  /* Fade gradient sur les bords */
  .swipe-container::after {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 40px !important;
    background: linear-gradient(to right, transparent, var(--cq-card-bg, #fff)) !important;
    pointer-events: none !important;
  }
  
  /* Dots de pagination */
  .swipe-dots,
  .carousel-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 0 !important;
  }
  
  .swipe-dot,
  .carousel-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: var(--radius-full) !important;
    background: var(--cq-border) !important;
    transition: all 0.2s ease !important;
  }
  
  .swipe-dot.active,
  .carousel-dot.active {
    background: var(--cq-accent) !important;
    width: 24px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PULL TO REFRESH STYLE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  .pull-to-refresh,
  .refresh-indicator {
    position: fixed !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-100%) !important;
    z-index: 9999 !important;
    padding: 12px 20px !important;
    background: var(--cq-card-bg) !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    transition: transform 0.3s var(--ease-out-expo) !important;
  }
  
  .pull-to-refresh.visible {
    transform: translateX(-50%) translateY(0) !important;
  }
  
  .pull-to-refresh .spinner {
    width: 24px !important;
    height: 24px !important;
    border: 2px solid var(--cq-border) !important;
    border-top-color: var(--cq-accent) !important;
    border-radius: var(--radius-full) !important;
    animation: spin 0.8s linear infinite !important;
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MICRO-FEEDBACK TACTILE (VISUAL)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Ripple effect placeholder */
  .ripple-container {
    position: relative !important;
    overflow: hidden !important;
  }
  
  /* Tap highlight sur tous les boutons */
  button,
  .btn,
  a,
  .clickable,
  [role="button"] {
    position: relative !important;
    overflow: hidden !important;
  }
  
  /* Feedback visuel immédiat sur touch */
  button:active,
  .btn:active,
  .clickable:active,
  [role="button"]:active {
    opacity: 0.9 !important;
  }
  
  /* Mode cards avec feedback */
  .qcm-mode-card:active,
  .mode-selection-card:active {
    transform: scale(0.98) !important;
    box-shadow: var(--shadow-xs) !important;
  }
  
  /* Success/Error flash */
  @keyframes successFlash {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(16, 185, 129, 0.15); }
  }
  
  @keyframes errorFlash {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(239, 68, 68, 0.15); }
  }
  
  .flash-success {
    animation: successFlash 0.6s ease !important;
  }
  
  .flash-error {
    animation: errorFlash 0.6s ease !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS HOVER/TOUCH STATES
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Toutes les cards avec feedback touch */
  .card,
  .qcm-card,
  .article-card,
  .matiere-card,
  .notion-card,
  [class*="-card"] {
    transition: transform 0.2s var(--ease-out-expo),
                box-shadow 0.2s var(--ease-out-expo) !important;
    cursor: pointer !important;
  }
  
  .card:active,
  .qcm-card:active,
  .article-card:active,
  .matiere-card:active,
  .notion-card:active,
  [class*="-card"]:active {
    transform: scale(0.98) translateY(1px) !important;
    box-shadow: var(--shadow-xs) !important;
  }
  
  /* Card sélectionnée */
  .card--selected,
  .card.selected {
    border-color: var(--cq-accent) !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2), var(--shadow-md) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER COMPACT STICKY
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  .site-header,
  .main-header,
  header.header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: var(--cq-card-bg, #fff) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    box-shadow: var(--shadow-sm) !important;
  }
  
  /* Header content compact */
  .site-header .container,
  .header-inner {
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  
  /* Logo compact */
  .site-logo,
  .header-logo {
    max-height: 32px !important;
    width: auto !important;
  }
  
  .site-logo img,
  .header-logo img {
    height: 32px !important;
    width: auto !important;
  }
  
  /* Header shrink on scroll */
  .site-header.scrolled,
  .header--scrolled {
    padding: 6px 0 !important;
  }
  
  .site-header.scrolled .site-logo img {
    height: 28px !important;
  }
  
  /* Bouton hamburger */
  .menu-toggle,
  .hamburger,
  .mobile-menu-btn {
    width: var(--touch-comfortable) !important;
    height: var(--touch-comfortable) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 0 !important;
  }
  
  .menu-toggle:active {
    background: var(--cq-bg-alt) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBAR PREMIUM
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Scrollbar thin et élégante */
  * {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0,0,0,0.15) transparent !important;
  }
  
  *::-webkit-scrollbar {
    width: 4px !important;
    height: 4px !important;
  }
  
  *::-webkit-scrollbar-track {
    background: transparent !important;
  }
  
  *::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15) !important;
    border-radius: var(--radius-full) !important;
  }
  
  *::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.25) !important;
  }
  
  /* Dark mode scrollbar */
  html[data-theme="dark"] * {
    scrollbar-color: rgba(255,255,255,0.15) transparent !important;
  }
  
  html[data-theme="dark"] *::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15) !important;
  }
  
  html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.25) !important;
  }
  
  /* Cacher scrollbar dans certains contextes */
  .qcm-options-list,
  .mode-selection,
  .horizontal-scroll {
    scrollbar-width: none !important;
  }
  
  .qcm-options-list::-webkit-scrollbar,
  .mode-selection::-webkit-scrollbar,
  .horizontal-scroll::-webkit-scrollbar {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SAFE AREA PADDING (NOTCH/HOME INDICATOR)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Bottom safe area pour tous les éléments fixed */
  .bottom-fixed,
  .fixed-bottom,
  [style*="bottom: 0"] {
    padding-bottom: max(16px, var(--safe-area-bottom)) !important;
  }
  
  /* Top safe area pour header */
  .site-header,
  .main-header {
    padding-top: var(--safe-area-top) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOADING STATES PREMIUM
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Skeleton loader amélioré */
  .skeleton,
  .loading-placeholder,
  [class*="skeleton"] {
    background: linear-gradient(
      90deg,
      var(--cq-bg-alt, #f1f5f9) 0%,
      rgba(255,255,255,0.6) 50%,
      var(--cq-bg-alt, #f1f5f9) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: shimmer 1.5s infinite linear !important;
    border-radius: var(--radius-md) !important;
    color: transparent !important;
  }
  
  /* Pulse loader */
  .pulse-loader {
    display: flex !important;
    gap: 6px !important;
    justify-content: center !important;
    padding: 20px !important;
  }
  
  .pulse-loader span {
    width: 10px !important;
    height: 10px !important;
    background: var(--cq-accent) !important;
    border-radius: var(--radius-full) !important;
    animation: pulse 1.4s ease-in-out infinite !important;
  }
  
  .pulse-loader span:nth-child(1) { animation-delay: 0s !important; }
  .pulse-loader span:nth-child(2) { animation-delay: 0.2s !important; }
  .pulse-loader span:nth-child(3) { animation-delay: 0.4s !important; }
  
  @keyframes pulse {
    0%, 100% { 
      transform: scale(0.8);
      opacity: 0.5;
    }
    50% { 
      transform: scale(1.2);
      opacity: 1;
    }
  }
  
  /* Loading overlay */
  .loading-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(255,255,255,0.8) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
  }
  
  html[data-theme="dark"] .loading-overlay {
    background: rgba(15,23,42,0.8) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOASTS & NOTIFICATIONS MOBILE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  .toast,
  .notification,
  .snackbar {
    position: fixed !important;
    bottom: calc(80px + var(--safe-area-bottom)) !important;
    left: 16px !important;
    right: 16px !important;
    padding: 14px 20px !important;
    background: var(--cq-card-bg) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    transform: translateY(100px) !important;
    opacity: 0 !important;
    transition: all 0.3s var(--ease-out-expo) !important;
    z-index: 9999 !important;
  }
  
  .toast.visible,
  .notification.visible,
  .snackbar.visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }
  
  .toast-icon {
    width: 24px !important;
    height: 24px !important;
    border-radius: var(--radius-full) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
  }
  
  .toast--success .toast-icon {
    background: rgba(16, 185, 129, 0.15) !important;
    color: var(--cq-success) !important;
  }
  
  .toast--error .toast-icon {
    background: rgba(239, 68, 68, 0.15) !important;
    color: var(--cq-error) !important;
  }
  
  .toast--info .toast-icon {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #3b82f6 !important;
  }
  
  .toast-message {
    flex: 1 !important;
    font-size: 0.9rem !important;
  }
  
  .toast-close {
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: var(--cq-text-muted) !important;
    cursor: pointer !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HIGH CONTRAST MODE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) and (prefers-contrast: high) {
  
  .qcm-option {
    border-width: 3px !important;
  }
  
  .qcm-option-indicator {
    border-width: 3px !important;
  }
  
  button,
  .btn {
    border: 2px solid currentColor !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUESTION ENONCE AMÉLIORÉ
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  .qcm-question,
  .question-card {
    padding: 16px !important;
    background: var(--cq-card-bg) !important;
    border-radius: var(--radius-lg) !important;
    margin-bottom: 16px !important;
  }
  
  .qcm-question-text,
  .question-enonce {
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    color: var(--cq-text) !important;
  }
  
  /* Numéro de question badge */
  .question-number,
  .qcm-question-number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 8px !important;
    background: var(--cq-accent) !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LETTRE OPTIONS COMPACTES
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  .qcm-option-letter {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    border-radius: var(--radius-sm) !important;
  }
  
  .qcm-option-text {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOUTONS SECONDAIRES
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  .btn-secondary,
  .btn-outline,
  .qcm-btn-secondary {
    min-height: var(--touch-comfortable) !important;
    padding: 12px 20px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    border-radius: var(--radius-md) !important;
    border: 1.5px solid var(--cq-border) !important;
    background: transparent !important;
    color: var(--cq-text) !important;
    transition: all 0.15s ease !important;
  }
  
  .btn-secondary:active,
  .btn-outline:active {
    background: var(--cq-bg-alt) !important;
    transform: scale(0.98) !important;
  }
  
  /* Groupe de boutons */
  .btn-group,
  .button-group {
    display: flex !important;
    gap: 8px !important;
  }
  
  .btn-group .btn,
  .button-group .btn {
    flex: 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INPUT FIELDS PREMIUM
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  textarea,
  select {
    min-height: var(--touch-comfortable) !important;
    padding: 12px 16px !important;
    font-size: 16px !important; /* Prévient zoom iOS */
    border: 1.5px solid var(--cq-border) !important;
    border-radius: var(--radius-md) !important;
    background: var(--cq-card-bg) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  }
  
  input:focus,
  textarea:focus,
  select:focus {
    border-color: var(--cq-accent) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
    outline: none !important;
  }
  
  /* Placeholder stylé */
  ::placeholder {
    color: var(--cq-text-muted) !important;
    opacity: 0.7 !important;
  }
  
  /* Search input avec icône */
  .search-input,
  input[type="search"] {
    padding-left: 44px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    background-size: 18px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   IMAGES OPTIMISÉES MOBILE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Images responsive avec aspect-ratio préservé */
  img,
  picture,
  video {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  
  /* Lazy loading fade-in */
  img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.4s ease !important;
  }
  
  img[loading="lazy"].loaded,
  img[loading="lazy"][src]:not([src=""]) {
    opacity: 1 !important;
  }
  
  /* Images dans les cards avec aspect-ratio */
  .card-image,
  .article-thumbnail,
  .qcm-thumbnail {
    aspect-ratio: 16/9 !important;
    object-fit: cover !important;
    border-radius: var(--radius-md) !important;
    background: var(--cq-bg-alt) !important;
  }
  
  /* Avatar/Profile images */
  .avatar,
  .user-avatar,
  .profile-image {
    aspect-ratio: 1/1 !important;
    object-fit: cover !important;
    border-radius: var(--radius-full) !important;
  }
  
  /* Icon images */
  .icon-img,
  .emoji-img {
    width: 24px !important;
    height: 24px !important;
    vertical-align: middle !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDSCAPE MODE OPTIMISATIONS
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 896px) and (orientation: landscape) {
  
  /* Header encore plus compact en landscape */
  .site-header .container,
  .header-inner {
    padding: 6px 16px !important;
  }
  
  .site-logo img {
    height: 28px !important;
  }
  
  /* QCM en deux colonnes landscape */
  .qcm-options-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  
  /* Questions plus compactes */
  .qcm-question {
    padding: 12px !important;
  }
  
  /* Bottom sheet plus bas en landscape */
  .qcm-feedback,
  .qcm-correction {
    max-height: 60vh !important;
  }
  
  /* Bouton Valider moins imposant */
  .qcm-submit-container {
    padding: 10px 16px !important;
  }
  
  .qcm-submit-btn {
    min-height: 44px !important;
  }
  
  /* Stats en ligne */
  .qcm-hub-hero__stats {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    gap: 24px !important;
    padding: 12px 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE COMPLET
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  html[data-theme="dark"] {
    /* Couleurs de base dark */
    --cq-bg: #0f172a;
    --cq-bg-alt: #1e293b;
    --cq-card-bg: #1e293b;
    --cq-text: #f1f5f9;
    --cq-text-muted: #94a3b8;
    --cq-border: #334155;
    --cq-accent-light: rgba(99, 102, 241, 0.15);
  }
  
  /* Cards dark mode */
  html[data-theme="dark"] .card,
  html[data-theme="dark"] .qcm-card,
  html[data-theme="dark"] .qcm-mode-card {
    background: var(--cq-card-bg) !important;
    border-color: var(--cq-border) !important;
  }
  
  /* Options QCM dark */
  html[data-theme="dark"] .qcm-option {
    background: var(--cq-card-bg) !important;
    border-color: var(--cq-border) !important;
  }
  
  html[data-theme="dark"] .qcm-option:hover {
    background: rgba(99, 102, 241, 0.1) !important;
  }
  
  /* Letter badge dark */
  html[data-theme="dark"] .qcm-option-letter {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #a5b4fc !important;
  }
  
  /* Radio indicator dark */
  html[data-theme="dark"] .qcm-option-indicator {
    border-color: var(--cq-border) !important;
    background: var(--cq-bg) !important;
  }
  
  /* Stats pills dark */
  html[data-theme="dark"] .qcm-info-table tr,
  html[data-theme="dark"] .qcm-hero-meta__item {
    background: var(--cq-bg) !important;
  }
  
  /* Boutons dark */
  html[data-theme="dark"] .btn-secondary,
  html[data-theme="dark"] .btn-outline {
    border-color: var(--cq-border) !important;
    color: var(--cq-text) !important;
  }
  
  /* Search input dark */
  html[data-theme="dark"] .search-input,
  html[data-theme="dark"] input[type="search"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E") !important;
  }
  
  /* Skeleton dark */
  html[data-theme="dark"] .skeleton {
    background: linear-gradient(
      90deg,
      var(--cq-bg-alt) 0%,
      rgba(51, 65, 85, 0.8) 50%,
      var(--cq-bg-alt) 100%
    ) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BADGES & TAGS SYSTÈME
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Base badge */
  .badge,
  .tag,
  .chip,
  .label-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    border-radius: var(--radius-full) !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
  }
  
  /* Badge variantes */
  .badge-primary,
  .tag-primary {
    background: rgba(99, 102, 241, 0.12) !important;
    color: var(--cq-accent, #6366f1) !important;
  }
  
  .badge-success,
  .tag-success {
    background: rgba(16, 185, 129, 0.12) !important;
    color: var(--cq-success, #10b981) !important;
  }
  
  .badge-warning,
  .tag-warning {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #d97706 !important;
  }
  
  .badge-error,
  .tag-error {
    background: rgba(239, 68, 68, 0.12) !important;
    color: var(--cq-error, #ef4444) !important;
  }
  
  .badge-neutral,
  .tag-neutral {
    background: var(--cq-bg-alt) !important;
    color: var(--cq-text-muted) !important;
  }
  
  /* Badge avec icône */
  .badge-icon,
  .tag-icon {
    width: 14px !important;
    height: 14px !important;
  }
  
  /* Tags cliquables */
  a.tag,
  button.tag,
  .tag-clickable {
    cursor: pointer !important;
  }
  
  a.tag:active,
  button.tag:active {
    transform: scale(0.95) !important;
  }
  
  /* Notion tags spécifiques */
  .notion-tag,
  .concept-tag {
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
    background: var(--cq-bg-alt) !important;
    color: var(--cq-text) !important;
    border: 1px solid var(--cq-border) !important;
  }
  
  .notion-tag:hover,
  .concept-tag:hover {
    background: var(--cq-accent-light) !important;
    border-color: var(--cq-accent) !important;
    color: var(--cq-accent) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODALES/DIALOGS MOBILE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Modal overlay */
  .modal-overlay,
  .dialog-overlay,
  .overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 9998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
  }
  
  .modal-overlay.active,
  .dialog-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Modal content - Bottom sheet style sur mobile */
  .modal,
  .dialog,
  .modal-content {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 90vh !important;
    background: var(--cq-card-bg, #fff) !important;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0 !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(100%) !important;
    transition: transform 0.35s var(--ease-out-expo) !important;
    z-index: 9999 !important;
    overflow: hidden !important;
  }
  
  .modal.active,
  .dialog.active {
    transform: translateY(0) !important;
  }
  
  /* Modal header */
  .modal-header,
  .dialog-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--cq-border) !important;
  }
  
  .modal-header::before {
    content: '' !important;
    position: absolute !important;
    top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 40px !important;
    height: 4px !important;
    background: rgba(0, 0, 0, 0.1) !important;
    border-radius: var(--radius-full) !important;
  }
  
  .modal-title,
  .dialog-title {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
  }
  
  .modal-close,
  .dialog-close {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--cq-bg-alt) !important;
    border: none !important;
    border-radius: var(--radius-full) !important;
    cursor: pointer !important;
  }
  
  /* Modal body */
  .modal-body,
  .dialog-body {
    padding: 20px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(90vh - 140px) !important;
  }
  
  /* Modal footer */
  .modal-footer,
  .dialog-footer {
    padding: 16px 20px calc(16px + var(--safe-area-bottom)) !important;
    border-top: 1px solid var(--cq-border) !important;
    display: flex !important;
    gap: 12px !important;
  }
  
  .modal-footer .btn,
  .dialog-footer .btn {
    flex: 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION ENTRE QUESTIONS (SWIPE HINTS)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Container de question swipeable */
  .qcm-question-container.swipeable {
    touch-action: pan-x !important;
  }
  
  /* Indicateurs de navigation */
  .qcm-nav-hint {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.5 !important;
    pointer-events: none !important;
    z-index: 100 !important;
  }
  
  .qcm-nav-hint--prev {
    left: 0 !important;
  }
  
  .qcm-nav-hint--next {
    right: 0 !important;
  }
  
  .qcm-nav-hint svg {
    width: 20px !important;
    height: 20px !important;
    color: var(--cq-text-muted) !important;
  }
  
  /* Boutons navigation question */
  .qcm-nav-buttons {
    display: flex !important;
    gap: 12px !important;
    margin-top: 16px !important;
  }
  
  .qcm-nav-btn {
    flex: 1 !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    background: var(--cq-bg-alt) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: var(--cq-text) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
  }
  
  .qcm-nav-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
  }
  
  .qcm-nav-btn:not(:disabled):active {
    transform: scale(0.98) !important;
    background: var(--cq-border) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRESSION & GAMIFICATION
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Score display animé */
  .score-display,
  .points-display {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    background: linear-gradient(135deg, var(--cq-accent) 0%, #8b5cf6 100%) !important;
    color: white !important;
    border-radius: var(--radius-full) !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important;
  }
  
  .score-display.updated {
    animation: scoreBounce 0.5s var(--ease-spring) !important;
  }
  
  @keyframes scoreBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
  }
  
  /* Streak indicator */
  .streak-badge,
  .serie-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 12px !important;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%) !important;
    color: white !important;
    border-radius: var(--radius-full) !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
  }
  
  .streak-badge::before {
    content: '🔥' !important;
  }
  
  /* XP bar */
  .xp-bar,
  .experience-bar {
    width: 100% !important;
    height: 8px !important;
    background: var(--cq-bg-alt) !important;
    border-radius: var(--radius-full) !important;
    overflow: hidden !important;
    margin: 8px 0 !important;
  }
  
  .xp-bar-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #10b981 0%, #06b6d4 100%) !important;
    border-radius: var(--radius-full) !important;
    transition: width 0.5s var(--ease-out-expo) !important;
  }
  
  /* Level up animation */
  @keyframes levelUp {
    0% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1); }
    75% { transform: scale(1.1); }
    100% { transform: scale(1); }
  }
  
  .level-badge.leveled-up {
    animation: levelUp 0.8s var(--ease-spring) !important;
  }
  
  /* Achievement unlocked */
  .achievement-toast {
    position: fixed !important;
    top: calc(60px + var(--safe-area-top)) !important;
    left: 16px !important;
    right: 16px !important;
    padding: 16px !important;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    color: #78350f !important;
    border-radius: var(--radius-lg) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: var(--shadow-xl) !important;
    transform: translateY(-120%) !important;
    transition: transform 0.4s var(--ease-out-expo) !important;
    z-index: 9999 !important;
  }
  
  .achievement-toast.visible {
    transform: translateY(0) !important;
  }
  
  .achievement-icon {
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--radius-md) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
  }
  
  .achievement-content {
    flex: 1 !important;
  }
  
  .achievement-title {
    font-weight: 700 !important;
    font-size: 0.9rem !important;
  }
  
  .achievement-desc {
    font-size: 0.8rem !important;
    opacity: 0.8 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RÉSULTATS QCM PREMIUM
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Score circulaire */
  .score-circle,
  .result-circle {
    position: relative !important;
    width: 140px !important;
    height: 140px !important;
    margin: 0 auto 20px !important;
  }
  
  .score-circle svg {
    width: 100% !important;
    height: 100% !important;
    transform: rotate(-90deg) !important;
  }
  
  .score-circle-bg {
    fill: none !important;
    stroke: var(--cq-bg-alt) !important;
    stroke-width: 10 !important;
  }
  
  .score-circle-progress {
    fill: none !important;
    stroke: var(--cq-success) !important;
    stroke-width: 10 !important;
    stroke-linecap: round !important;
    stroke-dasharray: 377 !important;
    stroke-dashoffset: 377 !important;
    transition: stroke-dashoffset 1s var(--ease-out-expo) !important;
  }
  
  .score-circle-value {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .score-circle-percentage {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: var(--cq-text) !important;
  }
  
  .score-circle-label {
    font-size: 0.75rem !important;
    color: var(--cq-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }
  
  /* Résultat cards */
  .result-stat-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px !important;
    background: var(--cq-card-bg) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    margin-bottom: 12px !important;
  }
  
  .result-stat-icon {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-md) !important;
    font-size: 20px !important;
  }
  
  .result-stat-icon.correct {
    background: rgba(16, 185, 129, 0.12) !important;
  }
  
  .result-stat-icon.wrong {
    background: rgba(239, 68, 68, 0.12) !important;
  }
  
  .result-stat-icon.time {
    background: rgba(59, 130, 246, 0.12) !important;
  }
  
  .result-stat-value {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--cq-text) !important;
  }
  
  .result-stat-label {
    font-size: 0.8rem !important;
    color: var(--cq-text-muted) !important;
  }
  
  /* CTA après résultats */
  .result-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 24px !important;
  }
  
  .result-actions .btn-primary {
    width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SÉLECTION DE TEXTE OPTIMISÉE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Désactiver sélection sur les boutons/contrôles */
  button,
  .btn,
  .qcm-option,
  .qcm-mode-card,
  nav,
  .clickable,
  [role="button"] {
    -webkit-user-select: none !important;
    user-select: none !important;
  }
  
  /* Permettre sélection sur le contenu texte */
  .qcm-question-text,
  .qcm-explanation,
  .article-content,
  .text-content,
  p,
  .selectable {
    -webkit-user-select: text !important;
    user-select: text !important;
  }
  
  /* Style de sélection */
  ::selection {
    background: rgba(99, 102, 241, 0.25) !important;
    color: inherit !important;
  }
  
  ::-moz-selection {
    background: rgba(99, 102, 241, 0.25) !important;
    color: inherit !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PERFORMANCE & OPTIMISATIONS
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* GPU acceleration pour les animations */
  .qcm-option,
  .qcm-mode-card,
  .qcm-feedback,
  .modal,
  .toast,
  [class*="animate"] {
    will-change: transform !important;
    transform: translateZ(0) !important;
  }
  
  /* Optimize repaints */
  .qcm-progress-fill,
  .xp-bar-fill,
  .score-circle-progress {
    will-change: width, stroke-dashoffset !important;
  }
  
  /* Contain pour isolation */
  .qcm-question,
  .qcm-options-list,
  .card {
    contain: content !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT STYLES (QCM export)
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  
  /* Cacher éléments non imprimables */
  .site-header,
  .site-footer,
  .qcm-submit-container,
  .qcm-nav-buttons,
  .mobile-menu,
  .toast,
  .modal-overlay {
    display: none !important;
  }
  
  /* Questions en noir et blanc */
  .qcm-option {
    border: 1px solid #000 !important;
    background: transparent !important;
  }
  
  .qcm-option-correct {
    background: #eee !important;
  }
  
  /* Éviter les coupures */
  .qcm-question {
    page-break-inside: avoid !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTIONS ULTRA-COMPACTES - SCROLL MINIMAL
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Sections avec padding réduit */
  .qcm-hub-section,
  .section,
  .content-section,
  .page-section {
    padding: 16px 12px !important;
    margin-bottom: 12px !important;
  }
  
  /* Titres de section compacts */
  .qcm-hub-section__title,
  .section-title,
  h2.section-title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
    line-height: 1.3 !important;
  }
  
  /* Retirer la barre décorative verticale qui prend de la place */
  .qcm-hub-section__title::before {
    display: none !important;
  }
  
  /* Subtitle compact */
  .qcm-hub-section__subtitle,
  .section-subtitle {
    font-size: 0.85rem !important;
    margin: 4px 0 12px !important;
    line-height: 1.45 !important;
  }
  
  /* Header de section compact */
  .qcm-hub-section__header {
    margin-bottom: 12px !important;
    gap: 8px !important;
  }
  
  /* Espacement inter-sections réduit */
  section + section,
  .qcm-hub-section + .qcm-hub-section {
    margin-top: 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARAGRAPHES & TEXTE - DENSITÉ OPTIMISÉE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Paragraphes plus denses */
  p,
  .text-content p,
  .article-content p,
  .qcm-intro-content p {
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
    margin-bottom: 10px !important;
  }
  
  /* Dernier paragraphe sans marge */
  p:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Blocs texte longs - max-height avec expand */
  .long-text,
  .expandable-text {
    max-height: 120px !important;
    overflow: hidden !important;
    position: relative !important;
    transition: max-height 0.3s ease !important;
  }
  
  .long-text.expanded,
  .expandable-text.expanded {
    max-height: none !important;
  }
  
  .long-text::after,
  .expandable-text::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 40px !important;
    background: linear-gradient(to bottom, transparent, var(--cq-card-bg, #fff)) !important;
    pointer-events: none !important;
  }
  
  .long-text.expanded::after,
  .expandable-text.expanded::after {
    display: none !important;
  }
  
  /* Bouton "Voir plus" */
  .expand-btn,
  .read-more-btn {
    display: block !important;
    width: 100% !important;
    padding: 8px !important;
    margin-top: 8px !important;
    text-align: center !important;
    font-size: 0.8rem !important;
    color: var(--cq-accent) !important;
    background: transparent !important;
    border: 1px solid var(--cq-border) !important;
    border-radius: var(--radius-md) !important;
    cursor: pointer !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LISTES - COMPACTES
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  ul, ol {
    padding-left: 18px !important;
    margin: 8px 0 !important;
  }
  
  li {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    margin-bottom: 4px !important;
    padding-left: 4px !important;
  }
  
  /* Listes à puces personnalisées */
  .custom-list li,
  .feature-list li,
  .benefits-list li {
    padding: 8px 12px !important;
    margin-bottom: 6px !important;
    background: var(--cq-bg-alt) !important;
    border-radius: var(--radius-sm) !important;
    list-style: none !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  
  .custom-list li::before,
  .feature-list li::before,
  .benefits-list li::before {
    content: '✓' !important;
    color: var(--cq-success) !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
  }
  
  /* Liste d'objectifs */
  .qcm-academic__list {
    padding-left: 0 !important;
    margin: 0 !important;
  }
  
  .qcm-academic__list li {
    padding: 8px 10px !important;
    margin-bottom: 4px !important;
    font-size: 0.85rem !important;
    line-height: 1.45 !important;
    border-radius: var(--radius-sm) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO SECTION - ULTRA-COMPACT
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  .qcm-hub-hero,
  .hero-section,
  .page-hero {
    padding: 20px 12px !important;
    margin-bottom: 12px !important;
  }
  
  .qcm-hub-hero__badge,
  .hero-badge {
    font-size: 0.7rem !important;
    padding: 4px 10px !important;
    margin-bottom: 8px !important;
  }
  
  .qcm-hub-hero__title,
  .hero-title,
  h1 {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }
  
  .qcm-hub-hero__subtitle,
  .hero-subtitle {
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
  }
  
  /* Meta info en ligne horizontale */
  .qcm-hub-hero__meta,
  .hero-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 10px !important;
  }
  
  .qcm-hub-hero__meta-item,
  .meta-item {
    font-size: 0.75rem !important;
    padding: 4px 10px !important;
  }
  
  /* Stats hero compactes */
  .qcm-hub-hero__stats {
    display: flex !important;
    justify-content: space-around !important;
    padding: 12px 0 !important;
    margin-top: 12px !important;
    border-top: 1px solid var(--cq-border) !important;
    gap: 8px !important;
  }
  
  .qcm-hub-stat {
    text-align: center !important;
  }
  
  .qcm-hub-stat__value {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
  }
  
  .qcm-hub-stat__label {
    font-size: 0.65rem !important;
    text-transform: uppercase !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS QCM - COMPACTES
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  .qcm-card,
  .matiere-card,
  .niveau-card,
  .parcours-card {
    padding: 12px !important;
    border-radius: var(--radius-md) !important;
  }
  
  .qcm-card__title,
  .card-title {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin-bottom: 4px !important;
  }
  
  .qcm-card__meta,
  .card-meta {
    font-size: 0.75rem !important;
    color: var(--cq-text-muted) !important;
  }
  
  .qcm-card__description,
  .card-description {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    margin-top: 6px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  
  /* Badges sur les cards */
  .qcm-card__badges,
  .card-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-top: 8px !important;
  }
  
  .qcm-card__badge {
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GRILLES - 2 COLONNES QUAND POSSIBLE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Grilles de cards compactes en 2 colonnes */
  .qcm-hub-grid,
  .matiere-grid,
  .subjects-grid,
  .qcm-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  
  /* Cards dans grille 2 colonnes - encore plus compactes */
  .qcm-hub-grid > .qcm-card,
  .subjects-grid > .matiere-card {
    padding: 10px !important;
  }
  
  .qcm-hub-grid .qcm-card__title {
    font-size: 0.85rem !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
  }
  
  .qcm-hub-grid .qcm-card__description {
    display: none !important; /* Cacher description en grille 2 cols */
  }
  
  /* Mode cards en grille 2 colonnes */
  .qcm-mode-selection,
  .mode-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  
  .qcm-mode-selection .qcm-mode-card {
    flex-direction: column !important;
    padding: 12px !important;
    text-align: center !important;
  }
  
  .qcm-mode-selection .qcm-mode-card__icon {
    width: 36px !important;
    height: 36px !important;
    margin: 0 auto 8px !important;
  }
  
  .qcm-mode-selection .qcm-mode-card__title {
    font-size: 0.8rem !important;
  }
  
  .qcm-mode-selection .qcm-mode-card__desc {
    display: none !important; /* Cacher en grille 2 cols */
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ - ACCORDÉONS COMPACTS
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  .qcm-hub-faq,
  .faq-section {
    padding: 12px !important;
  }
  
  .qcm-faq-item,
  .faq-item,
  details {
    margin-bottom: 6px !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
  }
  
  .qcm-faq-question,
  .faq-question,
  summary {
    padding: 12px 14px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    cursor: pointer !important;
    background: var(--cq-bg-alt) !important;
  }
  
  .qcm-faq-answer,
  .faq-answer,
  details[open] > div {
    padding: 10px 14px 14px !important;
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    background: var(--cq-card-bg) !important;
    border-top: 1px solid var(--cq-border) !important;
  }
  
  /* Icône chevron */
  summary::after,
  .faq-question::after {
    content: '›' !important;
    font-size: 1.2rem !important;
    transform: rotate(90deg) !important;
    transition: transform 0.2s ease !important;
    flex-shrink: 0 !important;
  }
  
  details[open] summary::after,
  .faq-item.open .faq-question::after {
    transform: rotate(270deg) !important;
  }
  
  /* Cacher marker par défaut */
  summary {
    list-style: none !important;
  }
  
  summary::-webkit-details-marker {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTENU ACADÉMIQUE - COLLAPSIBLE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Sections académiques collapsibles */
  .qcm-academic__section,
  .academic-block {
    margin-bottom: 8px !important;
    border: 1px solid var(--cq-border) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
  }
  
  .qcm-academic__section h3,
  .academic-block h3 {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    background: var(--cq-bg-alt) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  
  .qcm-academic__section h3::before {
    font-size: 1rem !important;
  }
  
  /* Contenu par défaut visible mais compact */
  .qcm-academic__section ul,
  .qcm-academic__section p,
  .academic-block ul,
  .academic-block p {
    padding: 10px 12px !important;
    margin: 0 !important;
    font-size: 0.85rem !important;
  }
  
  /* Warnings compacts */
  .qcm-academic__warnings {
    border-left: 3px solid var(--cq-warning) !important;
    background: rgba(245, 158, 11, 0.05) !important;
  }
  
  .qcm-academic__warnings h3 {
    background: rgba(245, 158, 11, 0.1) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEO ARTICLE CONTENT - DENSE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  .qcm-seo-article,
  .qcm-hub-section--seo-content {
    padding: 16px 12px !important;
  }
  
  .qcm-seo-article h2 {
    font-size: 1.1rem !important;
    margin: 16px 0 8px !important;
  }
  
  .qcm-seo-article h3 {
    font-size: 1rem !important;
    margin: 12px 0 6px !important;
  }
  
  .qcm-seo-article p {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    margin-bottom: 10px !important;
  }
  
  /* Citations */
  .qcm-seo-article blockquote {
    margin: 12px 0 !important;
    padding: 10px 14px !important;
    border-left-width: 3px !important;
    font-size: 0.88rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLES - HORIZONTALLY SCROLLABLE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Container scrollable */
  .table-wrapper,
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -12px !important;
    padding: 0 12px !important;
  }
  
  table {
    min-width: 100% !important;
    font-size: 0.82rem !important;
    white-space: nowrap !important;
  }
  
  th, td {
    padding: 8px 10px !important;
  }
  
  th {
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER - COMPACT
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  .site-footer,
  footer {
    padding: 20px 12px !important;
  }
  
  .footer-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  
  .footer-section {
    margin-bottom: 0 !important;
  }
  
  .footer-section h4 {
    font-size: 0.85rem !important;
    margin-bottom: 8px !important;
  }
  
  .footer-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  .footer-links a {
    font-size: 0.8rem !important;
    padding: 4px 8px !important;
    background: var(--cq-bg-alt) !important;
    border-radius: var(--radius-sm) !important;
  }
  
  .footer-bottom {
    font-size: 0.75rem !important;
    padding-top: 16px !important;
    margin-top: 16px !important;
    border-top: 1px solid var(--cq-border) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BREADCRUMBS - COMPACT
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  .breadcrumbs,
  .breadcrumb-nav {
    font-size: 0.75rem !important;
    padding: 8px 12px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  
  .breadcrumbs::-webkit-scrollbar {
    display: none !important;
  }
  
  .breadcrumbs a,
  .breadcrumb-item {
    padding: 2px 0 !important;
  }
  
  .breadcrumbs span,
  .breadcrumb-separator {
    margin: 0 4px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MATIÈRES CONNEXES - HORIZONTAL SCROLL
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  .qcm-hub-related,
  .related-subjects,
  .related-section {
    padding: 12px 0 12px 12px !important;
  }
  
  .related-grid,
  .qcm-hub-related .subjects-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 10px !important;
    padding-right: 12px !important;
    padding-bottom: 8px !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
  }
  
  .related-grid::-webkit-scrollbar,
  .qcm-hub-related .subjects-grid::-webkit-scrollbar {
    display: none !important;
  }
  
  .related-grid .matiere-card,
  .qcm-hub-related .matiere-card {
    flex-shrink: 0 !important;
    width: 140px !important;
    scroll-snap-align: start !important;
    padding: 12px !important;
  }
  
  .qcm-hub-related .matiere-card__title {
    font-size: 0.85rem !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }
  
  .qcm-hub-related .matiere-card__meta {
    font-size: 0.7rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONSEILS & TIPS SECTION - COMPACT
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  .qcm-seo-list--numbered,
  .conseils-list,
  .tips-list {
    padding-left: 0 !important;
    counter-reset: tips-counter !important;
  }
  
  .qcm-seo-list--numbered li,
  .conseils-list li,
  .tips-list li {
    padding: 10px 12px 10px 36px !important;
    margin-bottom: 6px !important;
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    background: var(--cq-bg-alt) !important;
    border-radius: var(--radius-md) !important;
    list-style: none !important;
    position: relative !important;
  }
  
  .qcm-seo-list--numbered li::before {
    counter-increment: tips-counter !important;
    content: counter(tips-counter) !important;
    position: absolute !important;
    left: 10px !important;
    top: 10px !important;
    width: 20px !important;
    height: 20px !important;
    background: var(--cq-accent) !important;
    color: white !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    border-radius: var(--radius-full) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOTIONS TAGS - HORIZONTAL SCROLL
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  .qcm-hub-notions,
  .notions-section {
    padding: 12px !important;
  }
  
  .notions-grid,
  .notions-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
    scrollbar-width: none !important;
  }
  
  .notions-grid::-webkit-scrollbar,
  .notions-list::-webkit-scrollbar {
    display: none !important;
  }
  
  .notion-tag,
  .notions-list a {
    flex-shrink: 0 !important;
    padding: 8px 14px !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LARGEUR MAX DES ZONES DE TEXTE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Forcer pleine largeur sur mobile */
  .container,
  .content-wrapper,
  .page-content,
  .main-content,
  article,
  main {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Empêcher overflow horizontal */
  body {
    overflow-x: hidden !important;
  }
  
  /* Images et médias responsive */
  img, video, iframe, embed, object {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Code blocks scrollable */
  pre, code {
    max-width: 100% !important;
    overflow-x: auto !important;
    font-size: 0.8rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUPPRESSION ÉLÉMENTS REDONDANTS MOBILE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Cacher éléments décoratifs */
  .decorative-element,
  .desktop-only,
  .hide-mobile,
  [class*="decorative"],
  .ornament {
    display: none !important;
  }
  
  /* Réduire les séparateurs */
  hr {
    margin: 12px 0 !important;
    border-width: 1px !important;
  }
  
  /* Cacher les images d'illustration trop grandes */
  .hero-illustration,
  .section-illustration {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   QCM INTERFACE - SCROLL MINIMAL
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Container QCM compact */
  .qcm-container,
  .qcm-interface {
    padding: 12px !important;
    padding-bottom: 90px !important; /* Space for fixed button */
  }
  
  /* Card de question compact */
  .qcm-question-card {
    padding: 14px !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: 12px !important;
  }
  
  /* Énoncé */
  .qcm-question-text {
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    margin-bottom: 14px !important;
  }
  
  /* Options */
  .qcm-options-list {
    gap: 8px !important;
  }
  
  .qcm-option {
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  
  .qcm-option-text {
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
  }
  
  /* Hint button inline */
  .qcm-hint-section {
    margin-top: 12px !important;
  }
  
  .qcm-hint-btn {
    font-size: 0.8rem !important;
    padding: 8px 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MON ESPACE PERSONNEL - CARDS FIX MOBILE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Grille des cards internes - 1 colonne sur mobile */
  .qcm-cards-grid--internal,
  .qcm-cards-grid--private {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  /* Card interne - layout horizontal compact */
  .qcm-internal-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-radius: var(--radius-lg, 16px) !important;
    min-height: auto !important;
    height: auto !important;
  }
  
  /* Icon wrapper compact */
  .qcm-internal-card__icon-wrapper {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }
  
  .qcm-internal-card__icon {
    font-size: 1.35rem !important;
  }
  
  /* Content flexible */
  .qcm-internal-card__content {
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  .qcm-internal-card__title {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .qcm-internal-card__description {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    color: var(--cq-text-muted) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
  }
  
  /* Arrow toujours visible sur mobile */
  .qcm-internal-card__arrow {
    opacity: 0.5 !important;
    transform: translateX(0) !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
  }
  
  /* Section header compact */
  .qcm-hub-internal-links {
    margin-top: 20px !important;
    padding: 16px 12px !important;
  }
  
  .qcm-hub-internal-links .qcm-hub-section__title {
    font-size: 1.1rem !important;
    margin-bottom: 4px !important;
  }
  
  .qcm-hub-internal-links .qcm-hub-section__subtitle {
    font-size: 0.85rem !important;
    margin-bottom: 12px !important;
  }
  
  .qcm-internal-links__group {
    margin-top: 12px !important;
  }
  
  /* Enlever les inline styles qui causent problème */
  .qcm-hub-internal-links[style*="margin-top"] {
    margin-top: 20px !important;
  }
  
  .qcm-internal-links__group[style*="margin-top"] {
    margin-top: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MATIÈRES CARDS - HAUTEUR ÉGALE MOBILE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Grille des matières - 1 colonne pour éviter hauteurs inégales */
  .qcm-subjects-grid,
  .subjects-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  /* Card matière - layout horizontal compact */
  .qcm-subject-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px !important;
    min-height: auto !important;
    position: relative !important;
    overflow: visible !important;
  }
  
  /* Icon à gauche */
  .qcm-subject-card__header {
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
    order: -1 !important;
  }
  
  .qcm-subject-card__icon {
    font-size: 1.5rem !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--cq-bg-alt, #f1f5f9) !important;
    border-radius: 10px !important;
  }
  
  /* Badge compact - VISIBLE COMPLET */
  .qcm-subject-card__badge {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    font-size: 0.6rem !important;
    padding: 3px 8px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    z-index: 2 !important;
  }
  
  /* Contenu central */
  .qcm-subject-card__name {
    font-size: 0.95rem !important;
    margin-bottom: 2px !important;
    line-height: 1.3 !important;
  }
  
  /* Description tronquée */
  .qcm-subject-card__desc {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    flex-grow: 0 !important;
    margin: 0 !important;
  }
  
  /* Context (parcours/niveau) compact */
  .qcm-subject-card__context {
    font-size: 0.7rem !important;
    margin: 2px 0 0 !important;
    gap: 4px !important;
  }
  
  /* Footer inline */
  .qcm-subject-card__footer {
    flex-shrink: 0 !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 4px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    margin-left: auto !important;
  }
  
  .qcm-subject-card__qcm-count {
    font-size: 0.75rem !important;
    white-space: nowrap !important;
  }
  
  .qcm-subject-card__cta {
    font-size: 0.8rem !important;
  }
  
  /* Meta compacte */
  .qcm-subject-card__meta {
    font-size: 0.7rem !important;
    gap: 4px !important;
    margin-top: 2px !important;
  }
  
  /* Card position relative pour badge absolu */
  .qcm-subject-card {
    position: relative !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   QCM CARDS - HAUTEUR ÉGALE MOBILE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Grille QCM - 1 colonne pour éviter hauteurs inégales */
  .qcm-cards-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  /* Card QCM compacte */
  .qcm-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px !important;
    position: relative !important;
    overflow: visible !important;
  }
  
  /* Icon/emoji à gauche */
  .qcm-card__icon,
  .qcm-card__header {
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--cq-bg-alt, #f1f5f9) !important;
    border-radius: 10px !important;
    font-size: 1.3rem !important;
    margin-bottom: 0 !important;
  }
  
  /* Contenu flexible */
  .qcm-card__content,
  .qcm-card__body {
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  /* Badges en haut à droite - VISIBLE COMPLET */
  .qcm-card__badges,
  .qcm-card__status {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    display: flex !important;
    gap: 4px !important;
    max-width: calc(100% - 70px) !important;
    overflow: visible !important;
    z-index: 2 !important;
  }
  
  .qcm-card__badge {
    font-size: 0.65rem !important;
    padding: 3px 8px !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
  
  /* Titre compact */
  .qcm-card__title {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
    padding-right: 60px !important; /* Space for badges */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  
  /* Description tronquée fortement */
  .qcm-card__description,
  .qcm-card__desc {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
    color: var(--cq-text-muted) !important;
  }
  
  /* Meta inline */
  .qcm-card__meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 0.75rem !important;
    margin-top: 6px !important;
  }
  
  .qcm-card__meta-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    white-space: nowrap !important;
  }
  
  /* Concepts clés - horizontal scroll */
  .qcm-card__concepts,
  .qcm-card__notions {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    margin-top: 8px !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
  }
  
  .qcm-card__concepts::-webkit-scrollbar,
  .qcm-card__notions::-webkit-scrollbar {
    display: none !important;
  }
  
  .qcm-card__concept,
  .qcm-card__notion {
    flex-shrink: 0 !important;
    font-size: 0.7rem !important;
    padding: 4px 10px !important;
    white-space: nowrap !important;
  }
  
  /* CTA compact */
  .qcm-card__cta,
  .qcm-card__action {
    margin-top: 8px !important;
    font-size: 0.8rem !important;
    padding: 8px 14px !important;
  }
  
  /* Footer stats inline */
  .qcm-card__footer,
  .qcm-card__stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--cq-border, #e2e8f0) !important;
  }
  
  .qcm-card__stat {
    font-size: 0.75rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  
  /* Concepts/notions - SEO-safe: max-height au lieu de display:none */
  .qcm-card__notions {
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
  }
  
  /* CACHER les modes sur les cartes QCM */
  .qcm-card__modes {
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
  }
  
  /* Bouton "Voir" pleine largeur */
  .qcm-card__action-btn,
  .qcm-card a.qcm-btn {
    width: 100% !important;
    text-align: center !important;
    padding: 10px !important;
    margin-top: 10px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VARIANTE ALTERNATIVE: GRILLE 2 COLONNES AVEC HAUTEUR FIXE
   Si vous préférez garder 2 colonnes, décommentez ce bloc
   ═══════════════════════════════════════════════════════════════════════════ */
/*
@media (max-width: 768px) {
  .qcm-subjects-grid,
  .subjects-grid,
  .qcm-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  
  .qcm-subject-card,
  .qcm-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px !important;
    height: 160px !important;
    overflow: hidden !important;
  }
  
  .qcm-subject-card__header,
  .qcm-card__header {
    flex-shrink: 0 !important;
  }
  
  .qcm-subject-card__icon,
  .qcm-card__icon {
    font-size: 1.2rem !important;
  }
  
  .qcm-subject-card__name,
  .qcm-card__title {
    font-size: 0.8rem !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  
  .qcm-subject-card__desc,
  .qcm-card__description {
    display: none !important;
  }
  
  .qcm-subject-card__footer,
  .qcm-card__footer,
  .qcm-card__notions,
  .qcm-card__modes {
    display: none !important;
  }
  
  .qcm-subject-card__context {
    font-size: 0.65rem !important;
  }
  
  .qcm-card__meta {
    font-size: 0.65rem !important;
    gap: 2px !important;
  }
}
*/

/* ═══════════════════════════════════════════════════════════════════════════
   INTERFACE QCM - ÉCRAN DE DÉMARRAGE MOBILE PREMIUM
   Optimisation complète de l'interface de sélection de mode et stats
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* ─────────────────────────────────────────────────────────────────────────
     QCM START SCREEN - Container principal
     ───────────────────────────────────────────────────────────────────────── */
  .qcm-start-screen {
    padding: 12px !important;
  }
  
  .qcm-start-card {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  /* ─────────────────────────────────────────────────────────────────────────
     QCM HEADER - Infos matière + stats compactes
     ───────────────────────────────────────────────────────────────────────── */
  .qcm-start-header {
    background: var(--cq-card-bg, #1a1b26) !important;
    border-radius: var(--radius-lg) !important;
    padding: 12px 14px !important;
    margin-bottom: 16px !important;
  }
  
  .qcm-start-meta,
  .qcm-hero-meta {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  
  .qcm-meta-item,
  .qcm-hero-meta__item {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    background: rgba(99, 102, 241, 0.1) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.8rem !important;
    color: var(--cq-text, #e5e7eb) !important;
  }
  
  .qcm-meta-item:first-child,
  .qcm-hero-meta__item:first-child {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2)) !important;
    font-weight: 600 !important;
  }
  
  .qcm-hero-meta__icon {
    font-size: 0.9rem !important;
  }
  
  /* ─────────────────────────────────────────────────────────────────────────
     SÉLECTION DE MODE - Titre + Grille
     ───────────────────────────────────────────────────────────────────────── */
  .qcm-mode-selection {
    padding: 0 !important;
  }
  
  .qcm-mode-title {
    font-size: 1.1rem !important;
    margin: 0 0 6px !important;
    text-align: center !important;
    color: var(--cq-text) !important;
  }
  
  .qcm-mode-subtitle {
    font-size: 0.8rem !important;
    color: var(--cq-text-muted) !important;
    text-align: center !important;
    margin: 0 0 16px !important;
    line-height: 1.4 !important;
  }
  
  /* ─────────────────────────────────────────────────────────────────────────
     MODE CARDS - Layout compact liste
     ───────────────────────────────────────────────────────────────────────── */
  .qcm-modes-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .qcm-modes-grid .qcm-mode-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    background: var(--cq-card-bg, #1a1b26) !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
    border-radius: var(--radius-lg) !important;
    text-align: left !important;
    min-height: auto !important;
    width: 100% !important;
  }
  
  .qcm-modes-grid .qcm-mode-card:active {
    transform: scale(0.98) !important;
    background: rgba(99, 102, 241, 0.15) !important;
  }
  
  /* Icône du mode */
  .qcm-modes-grid .qcm-mode-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2)) !important;
    border-radius: var(--radius-md) !important;
    font-size: 22px !important;
  }
  
  /* Info du mode */
  .qcm-modes-grid .qcm-mode-info {
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  .qcm-modes-grid .qcm-mode-info h4 {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin: 0 0 4px !important;
    color: var(--cq-text) !important;
  }
  
  .qcm-modes-grid .qcm-mode-info p {
    font-size: 0.8rem !important;
    color: var(--cq-text-muted) !important;
    line-height: 1.4 !important;
    margin: 0 0 8px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  
  /* Badges du mode */
  .qcm-modes-grid .qcm-mode-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  
  .qcm-modes-grid .qcm-badge {
    font-size: 0.7rem !important;
    padding: 3px 8px !important;
    border-radius: var(--radius-full) !important;
    background: rgba(99, 102, 241, 0.15) !important;
    color: #a5b4fc !important;
    white-space: nowrap !important;
  }
  
  .qcm-modes-grid .qcm-badge-xp {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #fff !important;
    font-weight: 600 !important;
  }
  
  .qcm-modes-grid .qcm-badge-muted {
    background: rgba(100, 116, 139, 0.2) !important;
    color: #94a3b8 !important;
  }
  
  /* Card Premium (coming soon) */
  .qcm-mode-card--premium {
    opacity: 0.6 !important;
    position: relative !important;
  }
  
  .qcm-mode-card--premium .qcm-mode-coming-soon {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
    background: rgba(234, 179, 8, 0.2) !important;
    color: #fbbf24 !important;
    border-radius: var(--radius-full) !important;
  }
  
  .qcm-badge-premium {
    font-size: 0.6rem !important;
    padding: 1px 5px !important;
    background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
    color: #fff !important;
    border-radius: var(--radius-full) !important;
    margin-left: 4px !important;
  }
  
  /* ─────────────────────────────────────────────────────────────────────────
     BADGE PREMIUM DISPLAY (Haut de page)
     ───────────────────────────────────────────────────────────────────────── */
  .qcm-premium-display--start {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3)) !important;
    border-radius: var(--radius-full) !important;
    font-size: 0.75rem !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
  }
  
  .qcm-premium-icon {
    font-size: 0.85rem !important;
  }
  
  .qcm-premium-label {
    font-size: 0.7rem !important;
    color: #c4b5fd !important;
    display: none !important; /* Cacher label sur mobile pour espace */
  }
  
  .qcm-premium-value {
    font-weight: 700 !important;
    color: #a5b4fc !important;
  }
  
  /* ─────────────────────────────────────────────────────────────────────────
     QCM TOP BAR - Barre de progression
     ───────────────────────────────────────────────────────────────────────── */
  .qcm-topbar {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    background: var(--cq-card-bg, #1a1b26) !important;
    border-radius: var(--radius-lg) !important;
    margin-bottom: 12px !important;
    flex-wrap: wrap !important;
  }
  
  .qcm-topbar-left {
    flex-shrink: 0 !important;
  }
  
  .qcm-mode-indicator {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--cq-text) !important;
    background: rgba(99, 102, 241, 0.15) !important;
    padding: 4px 10px !important;
    border-radius: var(--radius-full) !important;
  }
  
  .qcm-topbar-center {
    flex: 1 !important;
    min-width: 100px !important;
  }
  
  .qcm-progress-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  
  .qcm-progress-bar {
    flex: 1 !important;
    height: 6px !important;
    background: rgba(100, 116, 139, 0.3) !important;
    border-radius: var(--radius-full) !important;
    overflow: hidden !important;
  }
  
  .qcm-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #6366f1, #8b5cf6) !important;
    border-radius: var(--radius-full) !important;
    transition: width 0.3s ease !important;
  }
  
  .qcm-progress-text {
    font-size: 0.75rem !important;
    color: var(--cq-text-muted) !important;
    white-space: nowrap !important;
  }
  
  .qcm-topbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  
  .qcm-timer {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    background: rgba(239, 68, 68, 0.15) !important;
    border-radius: var(--radius-full) !important;
    color: #f87171 !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
  }
  
  .qcm-timer-icon {
    font-size: 0.9rem !important;
  }
  
  /* ─────────────────────────────────────────────────────────────────────────
     QCM START CARD - Header compact
     ───────────────────────────────────────────────────────────────────────── */
  .qcm-start-card {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  .qcm-start-header {
    background: var(--cq-card-bg, #1a1b26) !important;
    border-radius: 12px !important;
    padding: 14px !important;
    margin-bottom: 20px !important;
    border: 1px solid rgba(99, 102, 241, 0.15) !important;
  }
  
  /* ─────────────────────────────────────────────────────────────────────────
     QCM QUESTION CARD - Interface de question
     ───────────────────────────────────────────────────────────────────────── */
  .qcm-question-card {
    background: var(--cq-card-bg, #1a1b26) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    border: 1px solid rgba(99, 102, 241, 0.1) !important;
  }
  
  .qcm-question-text {
    font-size: 1rem !important;
    line-height: 1.55 !important;
    color: var(--cq-text) !important;
    margin-bottom: 16px !important;
  }
  
  /* Options de réponse */
  .qcm-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .qcm-option {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    background: rgba(100, 116, 139, 0.08) !important;
    border: 2px solid transparent !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    min-height: 48px !important;
  }
  
  .qcm-option:active {
    transform: scale(0.98) !important;
  }
  
  .qcm-option.selected {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: #6366f1 !important;
  }
  
  .qcm-option.correct {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: #22c55e !important;
  }
  
  .qcm-option.incorrect {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: #ef4444 !important;
  }
  
  .qcm-option-letter {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(99, 102, 241, 0.2) !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    color: #a5b4fc !important;
  }
  
  .qcm-option.correct .qcm-option-letter {
    background: rgba(34, 197, 94, 0.3) !important;
    color: #4ade80 !important;
  }
  
  .qcm-option.incorrect .qcm-option-letter {
    background: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
  }
  
  .qcm-option-text {
    flex: 1 !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }
  
  /* ─────────────────────────────────────────────────────────────────────────
     QCM ACTIONS - Boutons de navigation
     ───────────────────────────────────────────────────────────────────────── */
  .qcm-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 16px !important;
  }
  
  .qcm-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 20px !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    min-height: 50px !important;
    transition: all 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  .qcm-btn-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    border: none !important;
  }
  
  .qcm-btn-primary:active {
    transform: scale(0.97) !important;
  }
  
  .qcm-btn-secondary {
    background: rgba(100, 116, 139, 0.15) !important;
    color: var(--cq-text) !important;
    border: 1px solid rgba(100, 116, 139, 0.3) !important;
  }
  
  .qcm-btn-hint {
    background: rgba(234, 179, 8, 0.15) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(234, 179, 8, 0.3) !important;
  }
  
  /* Navigation entre questions (row layout) */
  .qcm-navigation {
    display: flex !important;
    gap: 10px !important;
  }
  
  .qcm-navigation .qcm-btn {
    flex: 1 !important;
  }
  
  /* ─────────────────────────────────────────────────────────────────────────
     QCM EXPLANATION - Correction détaillée
     ───────────────────────────────────────────────────────────────────────── */
  .qcm-explanation {
    background: rgba(34, 197, 94, 0.08) !important;
    border: 1px solid rgba(34, 197, 94, 0.2) !important;
    border-radius: 12px !important;
    padding: 14px !important;
    margin-top: 12px !important;
  }
  
  .qcm-explanation-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: #4ade80 !important;
    margin-bottom: 8px !important;
  }
  
  .qcm-explanation-text {
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
    color: var(--cq-text-muted) !important;
  }
  
  /* ─────────────────────────────────────────────────────────────────────────
     QCM HINT - Indice
     ───────────────────────────────────────────────────────────────────────── */
  .qcm-hint {
    background: rgba(234, 179, 8, 0.1) !important;
    border: 1px solid rgba(234, 179, 8, 0.25) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    margin-top: 12px !important;
  }
  
  .qcm-hint-title {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    color: #fbbf24 !important;
    margin-bottom: 6px !important;
  }
  
  .qcm-hint-text {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    color: var(--cq-text-muted) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   QCM RÉSULTATS - Écran de fin
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  .qcm-results-screen {
    padding: 12px !important;
  }
  
  .qcm-results-card {
    background: var(--cq-card-bg, #1a1b26) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    text-align: center !important;
  }
  
  /* Score circulaire */
  .qcm-score-circle {
    width: 140px !important;
    height: 140px !important;
    margin: 0 auto 20px !important;
  }
  
  .qcm-score-value {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
  }
  
  .qcm-score-label {
    font-size: 0.8rem !important;
    color: var(--cq-text-muted) !important;
  }
  
  /* Stats résultats */
  .qcm-results-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }
  
  .qcm-results-stat {
    padding: 12px 8px !important;
    background: rgba(99, 102, 241, 0.08) !important;
    border-radius: 12px !important;
    text-align: center !important;
  }
  
  .qcm-results-stat-value {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--cq-text) !important;
  }
  
  .qcm-results-stat-label {
    font-size: 0.7rem !important;
    color: var(--cq-text-muted) !important;
    margin-top: 2px !important;
  }
  
  /* Boutons résultats */
  .qcm-results-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .qcm-results-actions .qcm-btn {
    width: 100% !important;
  }
  
  /* XP Gain badge */
  .qcm-xp-gain {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.2), rgba(251, 191, 36, 0.2)) !important;
    border-radius: 100px !important;
    margin-bottom: 16px !important;
    font-weight: 600 !important;
    color: #fbbf24 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ███████╗██╗   ██╗██╗     ██╗       ██╗    ██╗██╗██████╗ ████████╗██╗  ██╗
   ██╔════╝██║   ██║██║     ██║       ██║    ██║██║██╔══██╗╚══██╔══╝██║  ██║
   █████╗  ██║   ██║██║     ██║       ██║ █╗ ██║██║██║  ██║   ██║   ███████║
   ██╔══╝  ██║   ██║██║     ██║       ██║███╗██║██║██║  ██║   ██║   ██╔══██║
   ██║     ╚██████╔╝███████╗███████╗  ╚███╔███╔╝██║██████╔╝   ██║   ██║  ██║
   ╚═╝      ╚═════╝ ╚══════╝╚══════╝   ╚══╝╚══╝ ╚═╝╚═════╝    ╚═╝   ╚═╝  ╚═╝
   
   REFONTE UX/UI MOBILE - v4.0.0
   Sections pleine largeur, marges réduites, hiérarchie visuelle forte
   
   @version 4.0.0
   @date 2025-01-XX
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   1. FULL-WIDTH MOBILE - Suppression des contraintes de largeur
   ═══════════════════════════════════════════════════════════════════════════ */

/* Containers globaux - pleine largeur mobile */
.campus-container,
.campus-page,
.qcm-catalog,
.qcm-hub-container,
.qcm-seo-container,
.site-content,
.entry-content,
main,
article {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Hero sections - pleine largeur bord à bord */
.qcm-hub-hero,
.qcm-seo-hero,
.home-hero,
.catalog-hero,
.page-hero,
.hero-section {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding: 24px 20px !important;
  border-radius: 0 !important;
}

/* Sections alternées - fond pleine largeur */
.qcm-hub-section--alt,
.section-alt,
.bg-alt,
.home-section-alt,
.catalog-section-alt {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Cards et grilles - marges réduites */
.qcm-hub-grid,
.qcm-cards-grid,
.subjects-grid,
.articles-grid,
.matiere-grid {
  margin-left: -4px !important;
  margin-right: -4px !important;
  padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. RÉDUCTION MARGES LATÉRALES EXCESSIVES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Padding global réduit */
body {
  --mobile-padding-x: 16px;
}

.container,
.content-wrapper,
.page-content,
.main-content {
  padding-left: var(--mobile-padding-x) !important;
  padding-right: var(--mobile-padding-x) !important;
}

/* Cards avec marges réduites */
.qcm-card,
.qcm-level-card,
.qcm-subject-card,
.qcm-mode-card,
.matiere-card,
.notion-card,
.article-card {
  margin-left: 4px !important;
  margin-right: 4px !important;
}

/* Sections internes - padding réduit */
.qcm-hub-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* FAQ items - plus serré */
.qcm-faq-item,
details {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. HIÉRARCHIE VISUELLE & CTA PROMINENCE
   ═══════════════════════════════════════════════════════════════════════════ */

/* CTA Principal - Ultra visible */
.btn-primary,
.qcm-btn-primary,
.cta-primary,
.btn-cta,
a.btn-primary,
button.btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  color: white !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  padding: 16px 28px !important;
  min-height: 56px !important;
  border-radius: 14px !important;
  border: none !important;
  box-shadow: 
    0 4px 14px rgba(99, 102, 241, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.1) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: all 0.2s var(--ease-out-expo) !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn-primary:active,
.qcm-btn-primary:active {
  transform: scale(0.97) translateY(1px) !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25) !important;
}

/* Effet shimmer sur CTA principal */
.btn-primary::before,
.qcm-btn-primary::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  ) !important;
  transition: left 0.5s ease !important;
}

.btn-primary:hover::before,
.qcm-btn-primary:hover::before {
  left: 100% !important;
}

/* CTA Secondaire - Visible mais moins prioritaire */
.btn-secondary,
.qcm-btn-secondary,
.cta-secondary,
a.btn-secondary,
button.btn-secondary {
  background: rgba(99, 102, 241, 0.08) !important;
  color: var(--cq-accent, #6366f1) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  padding: 14px 24px !important;
  min-height: 52px !important;
  border-radius: 12px !important;
  border: 2px solid rgba(99, 102, 241, 0.2) !important;
  transition: all 0.2s ease !important;
}

.btn-secondary:active,
.qcm-btn-secondary:active {
  background: rgba(99, 102, 241, 0.15) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  transform: scale(0.98) !important;
}

/* CTA Ghost - Tertiaire */
.btn-ghost,
.btn-outline,
.btn-tertiary {
  background: transparent !important;
  color: var(--cq-text-muted) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  padding: 12px 20px !important;
  min-height: 48px !important;
  border-radius: 10px !important;
  border: 1px solid var(--cq-border) !important;
}

/* Groupe de CTA - Layout mobile */
.cta-group,
.btn-group,
.hero-actions,
.result-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
}

.cta-group .btn,
.btn-group .btn,
.hero-actions .btn {
  width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. RYTHME VERTICAL - ESPACEMENT SECTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Variables d'espacement vertical */
:root {
  --section-gap-sm: 24px;
  --section-gap-md: 32px;
  --section-gap-lg: 48px;
}

/* Sections avec espacement cohérent */
section,
.qcm-hub-section,
.page-section,
.content-section {
  margin-bottom: var(--section-gap-md) !important;
  padding-top: var(--section-gap-sm) !important;
  padding-bottom: var(--section-gap-sm) !important;
}

/* Dernière section sans marge bottom */
section:last-child,
.qcm-hub-section:last-child {
  margin-bottom: 0 !important;
}

/* Hero vers contenu - gap plus grand */
.qcm-hub-hero + .qcm-hub-section,
.hero-section + section,
.page-hero + .page-content {
  margin-top: var(--section-gap-lg) !important;
}

/* Entre cards - gap régulier */
.qcm-hub-grid,
.qcm-cards-grid {
  gap: 12px !important;
}

/* Titres de section - marge cohérente */
.qcm-hub-section__title,
.section-title,
h2 {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.qcm-hub-section__subtitle,
.section-subtitle {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. TYPOGRAPHIE - HIÉRARCHIE CLAIRE
   ═══════════════════════════════════════════════════════════════════════════ */

/* H1 - Impact fort */
h1,
.qcm-hub-hero__title,
.hero-title,
.page-title {
  font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  color: var(--cq-text) !important;
  margin-bottom: 12px !important;
}

/* H2 - Titres de section */
h2,
.qcm-hub-section__title,
.section-heading {
  font-size: clamp(1.25rem, 4vw, 1.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  color: var(--cq-text) !important;
}

/* Décoration titre section - accent bar */
.qcm-hub-section__title::before {
  content: '' !important;
  display: inline-block !important;
  width: 4px !important;
  height: 0.9em !important;
  background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%) !important;
  border-radius: 2px !important;
  margin-right: 10px !important;
  vertical-align: middle !important;
}

/* H3 - Sous-titres */
h3,
.card-title,
.qcm-card__title {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--cq-text) !important;
}

/* Subtitles - Texte descriptif */
.subtitle,
.qcm-hub-hero__subtitle,
.hero-subtitle,
.lead {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: var(--cq-text-muted) !important;
  font-weight: 400 !important;
}

/* Body text */
p {
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  color: var(--cq-text) !important;
}

/* Captions et meta */
.caption,
.meta,
.small-text,
small {
  font-size: 0.8rem !important;
  color: var(--cq-text-muted) !important;
  line-height: 1.5 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. CARDS OPTIMISÉES - TOUCH FRIENDLY
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base card style */
.qcm-card,
.qcm-level-card,
.qcm-subject-card,
.article-card,
.matiere-card {
  background: var(--cq-card-bg, #fff) !important;
  border-radius: 16px !important;
  border: 1px solid var(--cq-border) !important;
  padding: 16px !important;
  transition: all 0.2s var(--ease-out-expo) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Card touch feedback */
.qcm-card:active,
.qcm-level-card:active,
.qcm-subject-card:active {
  transform: scale(0.98) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Card avec accent top bar */
.qcm-card::before,
.qcm-level-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--card-accent, #6366f1) 0%, var(--card-accent-alt, #8b5cf6) 100%) !important;
}

/* Card icon */
.qcm-card__icon,
.card-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.5rem !important;
  margin-bottom: 12px !important;
}

/* Card content spacing */
.qcm-card__content {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Card CTA area */
.qcm-card__cta,
.card-cta {
  margin-top: auto !important;
  padding-top: 12px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. BADGES & TAGS - SYSTÈME COHÉRENT
   ═══════════════════════════════════════════════════════════════════════════ */

/* Badge base */
.badge,
.qcm-badge,
.tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap !important;
}

/* Badge variants */
.badge-new,
.badge-primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: white !important;
}

.badge-success,
.badge-gratuit {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #059669 !important;
}

.badge-warning {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #d97706 !important;
}

.badge-premium {
  background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
  color: white !important;
}

.badge-count {
  background: var(--cq-bg-alt) !important;
  color: var(--cq-text-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. HERO MOBILE - OPTIMISÉ
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero compact mais impactant */
.qcm-hub-hero,
.hero-section {
  text-align: center !important;
  padding: 32px 20px 28px !important;
}

/* Hero badge */
.qcm-hub-hero__badge,
.hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 100px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
}

/* Hero title - fort contraste */
.qcm-hub-hero__title {
  color: white !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Hero stats row */
.qcm-hub-hero__stats,
.hero-stats {
  display: flex !important;
  justify-content: center !important;
  gap: 24px !important;
  margin-top: 20px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.qcm-hub-stat {
  text-align: center !important;
}

.qcm-hub-stat__value {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: white !important;
}

.qcm-hub-stat__label {
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  opacity: 0.8 !important;
  color: white !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. NAVIGATION & HEADER - COMPACT
   ═══════════════════════════════════════════════════════════════════════════ */

/* Header sticky avec blur */
.site-header,
header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="dark"] .site-header,
html[data-theme="dark"] header {
  background: rgba(15, 23, 42, 0.9) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

/* Header inner - compact */
.header-inner,
.site-header .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 56px !important;
  padding: 0 16px !important;
}

/* Logo compact */
.site-logo img {
  height: 32px !important;
  width: auto !important;
}

/* Menu toggle */
.menu-toggle,
.hamburger {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

.menu-toggle:active {
  background: var(--cq-bg-alt) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. FORMULAIRES & INPUTS - TOUCH OPTIMIZED
   ═══════════════════════════════════════════════════════════════════════════ */

/* Input base */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
  min-height: 52px !important;
  padding: 14px 16px !important;
  font-size: 16px !important; /* Prevent iOS zoom */
  border: 2px solid var(--cq-border) !important;
  border-radius: 12px !important;
  background: var(--cq-card-bg) !important;
  color: var(--cq-text) !important;
  width: 100% !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--cq-accent, #6366f1) !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15) !important;
  outline: none !important;
}

/* Search input with icon */
.search-input,
input[type="search"] {
  padding-left: 48px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 16px center !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. DARK MODE - AJUSTEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] {
  /* Cards dark */
  --cq-card-bg: #1e293b;
  --cq-bg-alt: #0f172a;
  --cq-border: #334155;
}

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

html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .qcm-btn-secondary {
  background: rgba(99, 102, 241, 0.1) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
}

html[data-theme="dark"] .badge-success {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. UTILITIES - CLASSES HELPER
   ═══════════════════════════════════════════════════════════════════════════ */

/* Full width */
.full-width,
.w-full {
  width: 100% !important;
}

/* Text center */
.text-center {
  text-align: center !important;
}

/* Flex utilities */
.flex {
  display: flex !important;
}

.flex-col {
  flex-direction: column !important;
}

.items-center {
  align-items: center !important;
}

.justify-center {
  justify-content: center !important;
}

.justify-between {
  justify-content: space-between !important;
}

.gap-2 {
  gap: 8px !important;
}

.gap-3 {
  gap: 12px !important;
}

.gap-4 {
  gap: 16px !important;
}

/* Margin utilities */
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--space-sm) !important; }
.mt-3 { margin-top: 12px !important; }
.mt-4 { margin-top: var(--space-md) !important; }
.mt-6 { margin-top: var(--space-lg) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: var(--space-sm) !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: var(--space-md) !important; }
.mb-6 { margin-bottom: var(--space-lg) !important; }

/* Padding utilities */
.p-0 { padding: 0 !important; }
.p-2 { padding: var(--space-sm) !important; }
.p-3 { padding: 12px !important; }
.p-4 { padding: var(--space-md) !important; }

.px-4 {
  padding-left: var(--space-md) !important;
  padding-right: var(--space-md) !important;
}

.py-4 {
  padding-top: var(--space-md) !important;
  padding-bottom: var(--space-md) !important;
}

/* Hidden on mobile */
.hide-mobile,
.desktop-only {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. FEEDBACK INTERACTIF PREMIUM (Règle #7)
   States visuels pour tous les éléments interactifs
   ═══════════════════════════════════════════════════════════════════════════ */

/* Focus visible pour accessibilité */
:focus-visible {
  outline: 2px solid var(--accent-primary) !important;
  outline-offset: 2px !important;
}

/* Suppression outline par défaut (remplacé par focus-visible) */
:focus:not(:focus-visible) {
  outline: none !important;
}

/* Éléments cliquables - Feedback tactile */
a, button, [role="button"], 
.clickable, [onclick], 
input[type="submit"], input[type="button"] {
  -webkit-tap-highlight-color: rgba(99, 102, 241, 0.15) !important;
  transition: 
    transform var(--duration-fast) var(--ease-smooth),
    opacity var(--duration-fast) ease !important;
}

/* Active state - Press feedback */
a:active, button:active, [role="button"]:active,
.clickable:active, input[type="submit"]:active {
  transform: scale(0.98) !important;
  opacity: 0.9 !important;
}

/* Disabled state */
[disabled], .disabled, [aria-disabled="true"] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Loading state */
.loading, [aria-busy="true"] {
  position: relative !important;
  pointer-events: none !important;
}

.loading::after, [aria-busy="true"]::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255, 255, 255, 0.7) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. MICRO-ANIMATIONS PREMIUM (Règle #10)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Animation d'apparition - Fade In Up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.4s var(--ease-out-expo) forwards !important;
}

/* Animation de pulse pour attirer l'attention */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite !important;
}

/* Animation de shake pour erreur */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.animate-shake {
  animation: shake 0.5s ease-in-out !important;
}

/* Animation succès - Check bounce */
@keyframes checkBounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.animate-success {
  animation: checkBounce 0.4s var(--ease-spring) forwards !important;
}

/* Skeleton loading */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--border-subtle) 0%,
    var(--border-default) 50%,
    var(--border-subtle) 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.5s infinite !important;
  border-radius: var(--radius-sm) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. ÉTATS VISUELS FORMULAIRES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Input success */
.input-success,
input.success,
.form-control.success {
  border-color: var(--accent-success) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

/* Input error */
.input-error,
input.error,
.form-control.error {
  border-color: var(--accent-error) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* Message d'erreur */
.error-message,
.form-error {
  color: var(--accent-error) !important;
  font-size: var(--text-sm) !important;
  margin-top: var(--space-xs) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-xs) !important;
}

/* Message de succès */
.success-message,
.form-success {
  color: var(--accent-success) !important;
  font-size: var(--text-sm) !important;
  margin-top: var(--space-xs) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-xs) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIN REFONTE UX/UI MOBILE v5.0.0
   ═══════════════════════════════════════════════════════════════════════════ */