@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&family=Cairo:wght@400;600;700&display=swap");

/* ════════════════════════════════════════════════════════════════════
   comdem.css — Thème unifié « كيف أبين ؟ » (comment démontrer)
   Re-thème commun de TOUTES les pages comdem.html du site.
   Chargé EN DERNIER : surclasse le visuel (couleurs, cartes, formules,
   badges, sidebar) sans toucher au display/show-hide propre à chaque page.
   ════════════════════════════════════════════════════════════════════ */

:root{
  --cd-bg:#eef2f9;
  --cd-ink:#1f2937;
  --cd-primary:#4f46e5;          /* indigo */
  --cd-primary-dk:#4338ca;
  --cd-accent:#0ea5e9;           /* cyan */
  --cd-side1:#1e293b; --cd-side2:#0f172a;
  --cd-card:#ffffff;
  --cd-radius:16px;
  --cd-shadow:0 10px 30px rgba(15,23,42,.10);
  --cd-font:'Tajawal','Cairo','Segoe UI',Tahoma,sans-serif;
}

/* ── Base ──────────────────────────────────────────────────────────── */
body{
  font-family:var(--cd-font) !important;
  background:var(--cd-bg) !important;
  color:var(--cd-ink) !important;
}
.container{
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  height:auto !important; min-height:100vh;
  gap:0;
}

/* ── Sidebar ───────────────────────────────────────────────────────── */
.sidebar{
  background:linear-gradient(180deg,var(--cd-side1),var(--cd-side2)) !important;
  color:#e5e7eb !important;
  border:0 !important; border-left:1px solid rgba(255,255,255,.06) !important;
  width:330px !important; min-width:300px !important;
  height:100vh !important; max-height:100vh;
  padding:22px 14px !important;
  box-shadow:none !important;
}
.sidebar h2, .sidebar-title{
  color:#fff !important; font-weight:800 !important; font-size:1.2rem !important;
  text-align:center; padding-bottom:14px; margin-bottom:18px;
  border-bottom:2px solid rgba(255,255,255,.18) !important;
}
.category-header, .qa-category, .section-header{
  color:var(--cd-accent) !important; font-weight:800 !important;
  font-size:.95rem !important; margin:18px 6px 8px !important;
  letter-spacing:.2px;
}
.nav-btn, .menu-button, .dropdown-item, .question-item{
  display:block; width:100%;
  background:rgba(255,255,255,.06) !important;
  color:#cbd5e1 !important; border:1px solid rgba(255,255,255,.05) !important;
  text-align:right; padding:11px 14px !important; margin:6px 0 !important;
  border-radius:12px !important; cursor:pointer; line-height:1.5;
  font-family:var(--cd-font) !important; font-size:.92rem !important;
  transition:all .25s ease !important;
}
.nav-btn:hover, .menu-button:hover, .dropdown-item:hover, .question-item:hover{
  background:rgba(255,255,255,.14) !important; color:#fff !important;
  transform:translateX(-3px);
}
.nav-btn.active, .menu-button.active, .dropdown-item.active, .question-item.active{
  background:linear-gradient(135deg,var(--cd-primary),var(--cd-accent)) !important;
  color:#fff !important; border-color:transparent !important;
  box-shadow:0 6px 16px rgba(79,70,229,.4) !important;
}
.icon, .dropdown-icon, .card-icon{ font-size:1.05em; }

/* Stats & recherche dans la sidebar */
.sidebar-stats{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:14px 0; }
.stat-item{ background:rgba(255,255,255,.08) !important; border-radius:12px !important; padding:8px 12px !important; text-align:center; color:#e5e7eb !important; }
.stat-number{ font-size:1.2rem !important; font-weight:800 !important; color:#fff !important; display:block; }
.stat-label{ font-size:.72rem !important; opacity:.8; }
.search-container, .search-box, .search-sidebar{ margin:10px 0; }
.search-input{
  width:100%; padding:10px 14px !important; border-radius:12px !important;
  border:1px solid rgba(255,255,255,.15) !important; background:rgba(255,255,255,.06) !important;
  color:#fff !important; font-family:var(--cd-font) !important;
}
.search-input::placeholder{ color:#94a3b8; }

/* ── Zone de contenu ───────────────────────────────────────────────── */
.main-content, .content-area, .explanation-panel{
  flex-grow:1; background:transparent !important;
  padding:34px 30px !important; overflow-y:auto;
}

/* En-tête / bandeau */
.header, .page-header{
  text-align:center; margin-bottom:28px !important;
  background:linear-gradient(135deg,var(--cd-primary),var(--cd-accent)) !important;
  color:#fff !important; border-radius:var(--cd-radius) !important;
  padding:26px 22px !important; box-shadow:var(--cd-shadow) !important;
}
.header h1, .page-header h1{ color:#fff !important; font-weight:800 !important; font-size:clamp(1.4rem,3.5vw,2rem) !important; margin:0 0 6px !important; }
.header p, .page-header p{ color:rgba(255,255,255,.92) !important; margin:0 !important; }

/* Cartes de section */
.section-card, .proof-section, .qa-item, .topic-section, .content-card, .content-box{
  background:var(--cd-card) !important;
  border:1px solid #e7eaf3 !important;
  border-radius:var(--cd-radius) !important;
  box-shadow:var(--cd-shadow) !important;
  padding:26px !important; margin:0 0 22px !important;
}

/* Titres de section / blocs */
.question-title, .content-title, .qa-question, .topic-title, .card-title,
.explanation-title, .proof-answer{
  color:var(--cd-primary-dk) !important; font-weight:800 !important;
  border-right:5px solid var(--cd-accent) !important; padding-right:14px !important;
  margin:0 0 18px !important; line-height:1.5;
}
.block-title{
  display:flex; align-items:center; gap:10px; font-weight:700 !important;
  color:var(--cd-ink) !important; margin:18px 0 10px !important;
}
.block-title span{
  background:linear-gradient(135deg,var(--cd-primary),var(--cd-accent)) !important;
  color:#fff !important; width:28px; height:28px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; font-size:.8rem;
}

/* Textes */
.content-text, .explanation-text, .explanation-content, .qa-answer{
  line-height:1.9 !important; color:#374151 !important; margin-bottom:14px;
}

/* Formules (LTR, isolé) */
.formula-box, .math-formula{
  direction:ltr; unicode-bidi:isolate;
  text-align:center !important;
  background:linear-gradient(135deg,#eef2ff,#e0f2fe) !important;
  border:2px solid var(--cd-primary) !important; border-style:solid !important;
  color:var(--cd-ink) !important;
  border-radius:12px !important; padding:18px !important; margin:18px 0 !important;
  font-size:1.15rem !important; font-weight:700 !important;
  overflow-x:auto;
}

/* Étapes de preuve */
.proof-step, .step-box, .step-list{
  background:#f8fafc !important;
  border-right:4px solid var(--cd-primary) !important;
  border-radius:10px !important; padding:11px 15px !important; margin:8px 0 !important;
  color:#334155 !important; line-height:1.7;
}

/* Boîtes d'information */
.example-box, .note-box, .tip-box, .tool-box, .definition-box{
  border-radius:12px !important; padding:16px 18px !important; margin:14px 0 !important;
  background:#f0f9ff !important; border:1px solid #bae6fd !important;
  border-right:5px solid var(--cd-accent) !important; color:#0c4a6e !important;
}
.example-title, .explanation-title h4, .note-box strong, .definition-box strong{ font-weight:800 !important; display:block; margin-bottom:6px; }
.success-box{ background:#ecfdf5 !important; border-color:#6ee7b7 !important; border-right-color:#10b981 !important; color:#065f46 !important; }
.warning-box{ background:#fffbeb !important; border-color:#fcd34d !important; border-right-color:#f59e0b !important; color:#92400e !important; }
.error-box{   background:#fef2f2 !important; border-color:#fca5a5 !important; border-right-color:#ef4444 !important; color:#991b1b !important; }

/* Badges de difficulté / méthode */
.difficulty-badge, .badge, .method-tag, .quad-type, .new-badge{
  display:inline-block; padding:4px 14px !important; border-radius:999px !important;
  font-size:.75rem !important; font-weight:800 !important; color:#fff !important;
  border:0 !important;
}
.easy,  .badge-easy,  .difficulty-easy{     background:linear-gradient(135deg,#10b981,#059669) !important; color:#fff !important; }
.medium,.badge-medium,.difficulty-medium{   background:linear-gradient(135deg,#f59e0b,#d97706) !important; color:#fff !important; }
.hard,  .badge-hard,  .difficulty-hard{      background:linear-gradient(135deg,#ef4444,#dc2626) !important; color:#fff !important; }
.badge-expert, .difficulty-advanced{         background:linear-gradient(135deg,#7c3aed,#6d28d9) !important; color:#fff !important; }
.method-tag, .quad-type{ background:linear-gradient(135deg,var(--cd-primary),var(--cd-accent)) !important; }
.new-badge{ background:linear-gradient(135deg,#ec4899,#db2777) !important; }

/* Message d'accueil */
.welcome-message{ text-align:center !important; padding:60px 22px !important; color:#64748b !important; }
.welcome-message h3{ color:#334155 !important; font-weight:800 !important; }
.welcome-icon{ font-size:3rem; display:block; margin-bottom:10px; }

/* Pied de page */
.footer{ margin-top:40px; text-align:center; color:#94a3b8 !important; font-size:.9rem; border-top:1px solid #e2e8f0; padding-top:18px; }

/* Maths : couleur d'encre */
mjx-container{ direction:ltr; unicode-bidi:isolate; max-width:100%; }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width:820px){
  body{ display:block !important; height:auto !important; overflow:auto !important; }
  .container{ display:block !important; height:auto !important; }
  .sidebar{
    width:100% !important; min-width:0 !important; height:auto !important; max-height:42vh;
    border-left:0 !important; border-bottom:2px solid rgba(255,255,255,.1) !important;
  }
  .main-content, .content-area{ padding:18px 14px !important; height:auto !important; }
}