/**
 * CampusQCM - Mobile Responsive Override v5.0
 * Fichier centralisé pour toutes les corrections mobile
 * À charger en dernier pour override
 * 
 * UTILISE les design tokens de mobile-premium.css :
 * --space-xs: 4px, --space-sm: 8px, --space-md: 16px, 
 * --space-lg: 24px, --space-xl: 40px
 */

/* ═══════════════════════════════════════════════════════════════════════════
   VARIABLES MOBILE - Alignées sur le système d'espacement
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Mapping vers design tokens */
  --mobile-margin: var(--space-md, 16px);
  --mobile-padding: var(--space-md, 16px);
  --mobile-radius: var(--radius-md, 12px);
  --mobile-gap: var(--space-sm, 8px);
  --mobile-gap-md: var(--space-md, 16px);
  --mobile-gap-lg: var(--space-lg, 24px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESET GLOBAL MOBILE - Toutes les sections full-width
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* Reset containers */
  .container,
  .site-container,
  .page-container,
  .content-container,
  .wrapper,
  .site-content,
  main,
  article,
  section:not(.home-section):not(.home-section--alt) {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: var(--mobile-margin) !important;
    padding-right: var(--mobile-margin) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Body et HTML */
  html, body {
    overflow-x: hidden !important;
  }

  body {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     SECTIONS TEXTE / CONTENU RÉDACTIONNEL
     ═══════════════════════════════════════════════════════════════════════════ */
  .text-section,
  .content-section,
  .text-block,
  .prose,
  .entry-content,
  .page-content,
  .article-content,
  .single-content,
  .blog-content,
  .wysiwyg,
  [class*="text-section"],
  [class*="content-block"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px var(--mobile-margin) !important;
    margin: 0 0 16px 0 !important;
  }

  /* Paragraphes */
  p {
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    margin-bottom: 12px !important;
  }

  /* Listes */
  ul, ol {
    padding-left: 20px !important;
    margin-bottom: 12px !important;
  }

  li {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 6px !important;
  }

  /* Citations */
  blockquote {
    margin: 16px 0 !important;
    padding: 12px 16px !important;
    border-left-width: 3px !important;
    font-size: 0.95rem !important;
  }

  /* Images dans le contenu */
  .content-section img,
  .text-section img,
  .entry-content img,
  article img,
  .article-content img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin: 12px 0 !important;
  }

  /* Titres dans le contenu */
  .text-section h2,
  .content-section h2,
  .entry-content h2,
  article h2 {
    font-size: 1.25rem !important;
    margin: 20px 0 12px 0 !important;
  }

  .text-section h3,
  .content-section h3,
  .entry-content h3,
  article h3 {
    font-size: 1.1rem !important;
    margin: 16px 0 10px 0 !important;
  }

  .text-section h4,
  .content-section h4,
  .entry-content h4,
  article h4 {
    font-size: 1rem !important;
    margin: 14px 0 8px 0 !important;
  }

  /* Code inline */
  code {
    font-size: 0.85rem !important;
    padding: 2px 6px !important;
  }

  /* Blocs de code */
  pre {
    padding: 12px !important;
    font-size: 0.8rem !important;
    overflow-x: auto !important;
    border-radius: 8px !important;
    margin: 12px 0 !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     BLOCS PÉDAGOGIQUES / INFO / ALERTE
     ═══════════════════════════════════════════════════════════════════════════ */
  .info-block,
  .alert-block,
  .warning-block,
  .tip-block,
  .note-block,
  .pedagogical-block,
  [class*="callout"],
  [class*="notice"],
  [class*="alert"] {
    padding: 12px var(--mobile-margin) !important;
    margin: 12px 0 !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     ACCORDÉONS / FAQ
     ═══════════════════════════════════════════════════════════════════════════ */
  .accordion,
  .faq-item,
  details {
    margin-bottom: 8px !important;
  }

  .accordion__header,
  .faq-question,
  summary {
    padding: 12px var(--mobile-margin) !important;
    font-size: 0.95rem !important;
  }

  .accordion__content,
  .faq-answer {
    padding: 12px var(--mobile-margin) !important;
    font-size: 0.9rem !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     SECTIONS AVEC FOND / HIGHLIGHT
     ═══════════════════════════════════════════════════════════════════════════ */
  .highlight-section,
  .featured-section,
  .cta-section,
  [class*="bg-"],
  [class*="section--"] {
    padding: 24px var(--mobile-margin) !important;
    margin: 0 calc(-1 * var(--mobile-margin)) 16px !important;
    width: calc(100% + 2 * var(--mobile-margin)) !important;
    border-radius: 0 !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     SÉPARATEURS
     ═══════════════════════════════════════════════════════════════════════════ */
  hr {
    margin: 20px 0 !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     HEADER / NAVIGATION MOBILE
     ═══════════════════════════════════════════════════════════════════════════ */
  .site-header,
  .main-header {
    padding: 10px var(--mobile-margin) !important;
  }

  .site-header .container,
  .main-header .container {
    padding: 0 !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     HERO SECTIONS
     ═══════════════════════════════════════════════════════════════════════════ */
  .hero,
  .home-hero,
  .qcm-hub-hero,
  .landing-hero,
  .page-hero {
    width: 100% !important;
    padding: 24px var(--mobile-margin) !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .hero__title,
  .home-hero__title,
  .qcm-hub-hero__title,
  .page-h1,
  h1 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }

  .hero__subtitle,
  .home-hero-subtitle,
  .qcm-hub-hero__subtitle {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }

  /* Stats dans hero */
  .qcm-hub-hero__stats,
  .home-hero-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--mobile-gap) !important;
    justify-content: center !important;
  }

  .qcm-hub-stat,
  .home-stat {
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     BOUTONS - Plus petits sur mobile
     ═══════════════════════════════════════════════════════════════════════════ */
  .btn,
  .button,
  .cq-btn,
  .home-hero-btn,
  [class*="btn"],
  button:not(.qcm-option) {
    padding: 10px 16px !important;
    font-size: 0.875rem !important;
    border-radius: 8px !important;
    min-height: 40px !important;
  }

  .btn-lg,
  .btn--large {
    padding: 12px 20px !important;
    font-size: 0.95rem !important;
  }

  .btn-sm,
  .btn--small {
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
    min-height: 32px !important;
  }

  /* Boutons hero */
  .home-hero-actions,
  .hero-actions {
    flex-direction: column !important;
    gap: var(--mobile-gap) !important;
    width: 100% !important;
  }

  .home-hero-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     CARTES QCM
     ═══════════════════════════════════════════════════════════════════════════ */
  .qcm-cards-grid,
  .qcm-cocon-grid,
  .cards-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--mobile-gap) !important;
    padding: 0 !important;
  }

  .qcm-card,
  .qcm-cocon-card,
  .qcm-subject-card,
  .card {
    width: 100% !important;
    padding: var(--mobile-padding) !important;
    border-radius: var(--mobile-radius) !important;
    margin: 0 !important;
  }

  .qcm-card__title {
    font-size: 1rem !important;
  }

  .qcm-card__meta {
    font-size: 0.8rem !important;
    gap: var(--mobile-gap) !important;
    flex-wrap: wrap !important;
  }

  .qcm-card__modes {
    display: none !important; /* Masquer les modes sur mobile pour gagner de l'espace */
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     INTERFACE QCM (Quiz)
     ═══════════════════════════════════════════════════════════════════════════ */
  .qcm-container,
  .qcm-wrapper,
  .qcm-interface,
  .quiz-container {
    padding: var(--mobile-margin) !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Question */
  .qcm-question,
  .question-card,
  .question-container {
    padding: var(--mobile-padding) !important;
    border-radius: var(--mobile-radius) !important;
    margin-bottom: var(--mobile-gap) !important;
  }

  .qcm-question__text,
  .question-text {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  /* Options de réponse */
  .qcm-options,
  .options-list,
  .answers-list {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--mobile-gap) !important;
  }

  .qcm-option,
  .option-btn,
  .answer-option {
    padding: 12px 14px !important;
    font-size: 0.9rem !important;
    border-radius: 10px !important;
    min-height: 44px !important; /* Touch-friendly */
    text-align: left !important;
  }

  /* Barre de progression */
  .qcm-progress,
  .progress-bar-container {
    padding: 8px var(--mobile-margin) !important;
    margin-bottom: 12px !important;
  }

  .qcm-progress__bar {
    height: 6px !important;
    border-radius: 3px !important;
  }

  /* Actions QCM */
  .qcm-actions,
  .quiz-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--mobile-gap) !important;
    padding: var(--mobile-margin) !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
    z-index: 100 !important;
  }

  .qcm-actions .btn,
  .quiz-actions .btn {
    width: 100% !important;
  }

  /* Timer */
  .qcm-timer,
  .timer {
    font-size: 0.85rem !important;
    padding: 6px 10px !important;
  }

  /* Header QCM */
  .qcm-header {
    flex-direction: column !important;
    gap: var(--mobile-gap) !important;
    padding: 12px var(--mobile-margin) !important;
  }

  .qcm-header__title {
    font-size: 1.1rem !important;
  }

  /* Correction / Explication */
  .qcm-explanation,
  .correction-block,
  .explanation-card {
    padding: var(--mobile-padding) !important;
    font-size: 0.9rem !important;
    border-radius: var(--mobile-radius) !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     SECTIONS GÉNÉRIQUES
     ═══════════════════════════════════════════════════════════════════════════ */
  .qcm-hub-section,
  .section,
  .content-section {
    padding: 20px var(--mobile-margin) !important;
    margin: 0 0 16px 0 !important;
  }

  .qcm-hub-section__title,
  .section__title,
  h2 {
    font-size: 1.25rem !important;
    margin-bottom: 12px !important;
  }

  .qcm-hub-section__subtitle {
    font-size: 0.9rem !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     GRILLES & LISTES
     ═══════════════════════════════════════════════════════════════════════════ */
  .grid,
  .subjects-grid,
  .levels-grid,
  [class*="grid"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--mobile-gap) !important;
  }

  /* 2 colonnes pour petites cartes */
  .qcm-hub-hero__stats,
  .small-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     DASHBOARD
     ═══════════════════════════════════════════════════════════════════════════ */
  .dashboard-container,
  .dashboard-content {
    padding: var(--mobile-margin) !important;
  }

  .dashboard-header {
    flex-direction: column !important;
    gap: var(--mobile-gap-md, 16px) !important;
    text-align: center !important;
  }

  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--mobile-gap) !important;
  }

  .dashboard-stat-card {
    padding: 12px !important;
  }

  .dashboard-stat-card__value {
    font-size: 1.25rem !important;
  }

  .dashboard-stat-card__label {
    font-size: 0.75rem !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     FORMULAIRES
     ═══════════════════════════════════════════════════════════════════════════ */
  .form-group,
  .input-group {
    margin-bottom: 12px !important;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea,
  select {
    padding: 12px !important;
    font-size: 16px !important; /* Évite le zoom iOS */
    border-radius: 8px !important;
    width: 100% !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     MODALES
     ═══════════════════════════════════════════════════════════════════════════ */
  .modal,
  .modal-content,
  .popup,
  [class*="modal"]:not([class*="correction-modal"]) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 90vh !important;
  }

  .modal-header {
    padding: 16px !important;
  }

  .modal-body {
    padding: 16px !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     FOOTER
     ═══════════════════════════════════════════════════════════════════════════ */
  .site-footer,
  footer {
    padding: 24px var(--mobile-margin) !important;
  }

  .footer-grid,
  .footer-links {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    text-align: center !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     BREADCRUMBS
     ═══════════════════════════════════════════════════════════════════════════ */
  .breadcrumbs,
  .breadcrumb {
    padding: 8px var(--mobile-margin) !important;
    font-size: 0.8rem !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     MAILLAGE INTERNE / LIENS
     ═══════════════════════════════════════════════════════════════════════════ */
  .cq-internal-links__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--mobile-gap) !important;
  }

  .cq-internal-links__grid a {
    padding: 10px 12px !important;
    font-size: 0.85rem !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     SCORES / RÉSULTATS
     ═══════════════════════════════════════════════════════════════════════════ */
  .results-container,
  .score-card {
    padding: var(--mobile-padding) !important;
  }

  .score-circle {
    width: 100px !important;
    height: 100px !important;
    font-size: 1.5rem !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     BLOG / ARTICLES
     ═══════════════════════════════════════════════════════════════════════════ */
  .blog-grid,
  .articles-grid {
    grid-template-columns: 1fr !important;
  }

  .article-card,
  .blog-card {
    padding: var(--mobile-padding) !important;
  }

  .article-content,
  .single-content {
    padding: 0 var(--mobile-margin) !important;
  }

  .article-content p,
  .single-content p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     TABLES
     ═══════════════════════════════════════════════════════════════════════════ */
  table {
    display: block !important;
    overflow-x: auto !important;
    font-size: 0.85rem !important;
  }

  th, td {
    padding: 8px !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     UTILITAIRES MOBILE
     ═══════════════════════════════════════════════════════════════════════════ */
  .hide-mobile,
  .desktop-only {
    display: none !important;
  }

  .show-mobile,
  .mobile-only {
    display: block !important;
  }

  /* Espace en bas pour actions fixes */
  .has-fixed-actions {
    padding-bottom: 80px !important;
  }

  /* Scroll horizontal pour débordements */
  .scroll-x-mobile {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     PALETTE DE COULEURS DANS LE MENU MOBILE
     ═══════════════════════════════════════════════════════════════════════════ */
  .cq-header__palette {
    display: flex !important;
  }

  .cq-palette__swatch {
    width: 28px !important;
    height: 28px !important;
  }

  .cq-palette__swatch span {
    width: 20px !important;
    height: 20px !important;
  }

  /* Dans le drawer mobile */
  .cq-mobile-menu .cq-header__palette,
  .cq-drawer .cq-header__palette {
    display: flex !important;
    justify-content: center !important;
    gap: var(--mobile-gap) !important;
    padding: 12px 0 !important;
    margin: 8px 0 !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     NOTIONS / VIGNETTES - MOBILE
     ═══════════════════════════════════════════════════════════════════════════ */
  .qcm-card__notions {
    margin-top: 10px !important;
    padding-top: 10px !important;
  }

  .qcm-card__notions-list {
    gap: var(--space-xs, 4px) !important;
  }

  .qcm-card__notion-tag {
    padding: 4px 8px !important;
    font-size: 0.7rem !important;
    border-radius: 4px !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     BOUTONS - STYLES SPÉCIFIQUES PAR PAGE
     ═══════════════════════════════════════════════════════════════════════════ */
  
  /* Boutons primaires */
  .btn-primary,
  .cq-btn--primary,
  .home-hero-btn--primary,
  [class*="btn--primary"] {
    padding: 12px 20px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
  }

  /* Boutons secondaires / ghost */
  .btn-secondary,
  .btn-ghost,
  .cq-btn--secondary,
  .cq-btn--ghost,
  .home-hero-btn--ghost,
  [class*="btn--ghost"],
  [class*="btn--secondary"] {
    padding: 10px 16px !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
  }

  /* Boutons dans les cartes */
  .qcm-card .btn,
  .qcm-card__btn,
  .card .btn,
  .card__action {
    padding: 8px 14px !important;
    font-size: 0.8rem !important;
    width: 100% !important;
  }

  /* Boutons header mobile */
  .cq-header__btn {
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
  }

  /* Taille toggle icone : 44px défini dans header-footer.css mobile */
  .cq-header__btn--icon {
    padding: 0 !important;
    font-size: 1.25rem !important; /* contrer le 0.8rem du parent .cq-header__btn */
  }

  /* Boutons dashboard */
  .dashboard-btn,
  .dashboard-action-btn {
    padding: 10px 16px !important;
    font-size: 0.85rem !important;
  }

  /* Boutons formulaire */
  form .btn,
  .form-submit,
  input[type="submit"],
  button[type="submit"] {
    padding: 12px 24px !important;
    font-size: 0.9rem !important;
    width: 100% !important;
    min-height: 44px !important;
  }

  /* Liens boutons */
  a.btn,
  .btn-link {
    padding: 10px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Groupe de boutons */
  .btn-group,
  .buttons-group,
  .actions-group {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--mobile-gap) !important;
    width: 100% !important;
  }

  .btn-group .btn,
  .buttons-group .btn {
    width: 100% !important;
  }

}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE - VIGNETTES NOTIONS
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .qcm-card__notion-tag {
  background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%) !important;
  border-color: #3b82f6 !important;
  color: #93c5fd !important;
}

html[data-theme="dark"] .qcm-card__notion-tag:hover {
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%) !important;
  border-color: #60a5fa !important;
  color: #bfdbfe !important;
}

html[data-theme="dark"] .qcm-card__notion-tag--incomplete {
  background: linear-gradient(135deg, #422006 0%, #713f12 100%) !important;
  border-color: #ca8a04 !important;
  color: #fde047 !important;
}

html[data-theme="dark"] .qcm-card__notion-tag--incomplete:hover {
  background: linear-gradient(135deg, #713f12 0%, #a16207 100%) !important;
  border-color: #eab308 !important;
  color: #fef08a !important;
}

html[data-theme="dark"] .qcm-card__notions {
  border-top-color: rgba(255,255,255,0.1) !important;
}

html[data-theme="dark"] .qcm-card__notions-label {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .qcm-card__notion-more {
  background: #334155 !important;
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .qcm-notion-badge {
  background: #475569 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRÈS PETITS ÉCRANS (< 400px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  :root {
    --mobile-margin: 8px;
    --mobile-padding: 12px;
    --mobile-gap: var(--mobile-gap);
  }

  h1 {
    font-size: 1.3rem !important;
  }

  h2 {
    font-size: 1.1rem !important;
  }

  .btn,
  button {
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
  }

  .qcm-option {
    padding: 10px 12px !important;
    font-size: 0.85rem !important;
  }

  /* Boutons encore plus petits */
  .btn-primary,
  .cq-btn--primary {
    padding: 10px 16px !important;
    font-size: 0.85rem !important;
  }

  .home-hero-btn {
    padding: 10px 14px !important;
    font-size: 0.8rem !important;
  }

  /* Notions très compactes */
  .qcm-card__notion-tag {
    padding: 3px 6px !important;
    font-size: 0.65rem !important;
  }
}