/* ================================================================
   DOU'A MEMORISATION — CSS v2.0
   css/dua-memorisation.css
   Cohérent avec l'app Ma'rifat Allah + kids-mode.js v3.0
   ================================================================ */

/* ══════════════════════════════════════════════════════════════
   VARIABLES (étend celles de l'app principale)
══════════════════════════════════════════════════════════════ */
:root {
  --dm-primary:    #2D5F4F;
  --dm-accent:     #C9A661;
  --dm-teal:       #0D9488;
  --dm-teal-l:     #CCFBF1;
  --dm-green:      #16A34A;
  --dm-green-l:    #DCFCE7;
  --dm-blue:       #2563EB;
  --dm-blue-l:     #DBEAFE;
  --dm-purple:     #7C3AED;
  --dm-purple-l:   #EDE9FE;
  --dm-gold:       #F5B731;
  --dm-gold-l:     #FEF3C7;
  --dm-coral:      #F97316;
  --dm-coral-l:    #FFEDD5;
  --dm-bg:         #FAFAF8;
  --dm-card:       #FFFFFF;
  --dm-text:       #1E293B;
  --dm-muted:      #64748B;
  --dm-radius:     20px;
  --dm-shadow:     0 4px 20px rgba(0,0,0,.08);
  --dm-shadow-lg:  0 12px 40px rgba(0,0,0,.14);
}

[data-theme="dark"] {
  --dm-bg:   #0F172A;
  --dm-card: #1E293B;
  --dm-text: #F1F5F9;
  --dm-muted:#94A3B8;
}

/* ══════════════════════════════════════════════════════════════
   1.  HUB MÉMORISATION
══════════════════════════════════════════════════════════════ */
.memo-hub-page {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 1rem 5rem;
}

.memo-hub-hero {
  text-align: center;
  padding: 2rem 1rem 1.5rem;
  background: linear-gradient(135deg, rgba(45,95,79,.06), rgba(201,166,97,.08));
  border-radius: 28px;
  margin-bottom: 1.5rem;
  border: 1.5px solid rgba(201,166,97,.2);
  position: relative;
  overflow: hidden;
}
.memo-hub-hero::before {
  content: '';
  position: absolute;
  inset: -40px;
  background: repeating-linear-gradient(
    45deg, transparent, transparent 22px,
    rgba(201,166,97,.03) 22px, rgba(201,166,97,.03) 24px
  );
}
.memo-hub-bismillah {
  font-family: 'Amiri', serif;
  font-size: 1.4rem;
  color: var(--dm-primary);
  margin-bottom: 6px;
  position: relative;
  direction: rtl;
}
.memo-hub-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--dm-text);
  position: relative;
}
.memo-hub-sub {
  font-size: .9rem;
  color: var(--dm-muted);
  position: relative;
  margin-top: 4px;
}

/* Cards hub */
.memo-hub-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.memo-hub-card {
  border-radius: 24px;
  padding: 22px 22px;
  cursor: pointer;
  transition: all .22s cubic-bezier(.4,0,.2,1);
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: var(--dm-shadow);
  position: relative;
  overflow: hidden;
  border: none;
  text-align: left;
  font-family: 'Outfit', sans-serif;
}
.memo-hub-card::before {
  content: '';
  position: absolute;
  right: -40px; bottom: -40px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
}
.memo-hub-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: var(--dm-shadow-lg); }
.memo-hub-card.disabled { opacity: .55; cursor: not-allowed; }
.memo-hub-card.disabled:hover { transform: none; }

.memo-hub-card.card-coran {
  background: linear-gradient(135deg, #2D5F4F, #4A8B73);
}
.memo-hub-card.card-dua {
  background: linear-gradient(135deg, #0D9488, #0F766E);
}

.mhc-emoji { font-size: 3rem; flex-shrink: 0; }
.mhc-info  { flex: 1; }
.mhc-name  { font-size: 1.15rem; font-weight: 900; color: #fff; margin-bottom: 4px; }
.mhc-sub   { font-size: .82rem; color: rgba(255,255,255,.8); line-height: 1.5; }
.mhc-badge {
  display: inline-block;
  background: rgba(255,255,255,.22);
  color: #fff;
  font-size: .72rem; font-weight: 800;
  padding: 3px 10px; border-radius: 50px;
  margin-top: 8px;
}
.mhc-arrow { font-size: 1.5rem; color: rgba(255,255,255,.7); flex-shrink: 0; }
.mhc-soon {
  position: absolute; top: 14px; right: 14px;
  background: rgba(255,255,255,.28); color: #fff;
  font-size: .72rem; font-weight: 800;
  padding: 3px 10px; border-radius: 50px;
}

/* Progress bar sur la carte */
.mhc-prog-wrap {
  width: 100%;
  background: rgba(255,255,255,.2);
  border-radius: 50px;
  height: 5px;
  margin-top: 10px;
  overflow: hidden;
}
.mhc-prog-fill {
  height: 100%;
  border-radius: 50px;
  background: rgba(255,255,255,.8);
  transition: width .6s ease;
}

/* ══════════════════════════════════════════════════════════════
   2.  SÉLECTION DES CATÉGORIES DOU'A
══════════════════════════════════════════════════════════════ */
.dua-cats-page {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 1rem 5rem;
}

.dua-cats-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 4px 10px;
  position: sticky; top: 72px; z-index: 50;
  background: rgba(250,250,248,.95);
  backdrop-filter: blur(8px);
}
[data-theme="dark"] .dua-cats-header { background: rgba(15,23,42,.95); }

.dua-back-btn {
  background: var(--dm-card);
  border: 2px solid #E2E8F0;
  border-radius: 50px;
  padding: 7px 14px;
  font-size: .85rem; font-weight: 800;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  color: var(--dm-text);
  transition: all .15s;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.dua-back-btn:hover { background: #F1F5F9; transform: translateX(-2px); }

.dua-cats-title {
  flex: 1;
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem; font-weight: 800;
  text-align: center;
  color: var(--dm-text);
}

/* Bouton "Tout écouter" */
.dua-listen-all-btn {
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: 18px;
  background: linear-gradient(135deg, #1E293B, #334155);
  color: #fff;
  font-size: .95rem; font-weight: 800;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  transition: all .18s;
  margin: 10px 0 16px;
}
.dua-listen-all-btn:hover { transform: scale(1.02); box-shadow: 0 8px 24px rgba(0,0,0,.28); }

/* Grille des catégories */
.dua-cats-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.dua-cat-card {
  border-radius: 22px;
  padding: 18px 20px;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--dm-shadow);
  position: relative;
  overflow: hidden;
  border: none;
  font-family: 'Outfit', sans-serif;
  text-align: left;
}
.dua-cat-card::after {
  content: '';
  position: absolute;
  right: -25px; top: -25px;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: rgba(255,255,255,.13);
}
.dua-cat-card:hover { transform: translateY(-3px) scale(1.01); }

.dua-cat-card.cat-salah   { background: linear-gradient(135deg, #0284C7, #0369A1); }
.dua-cat-card.cat-quran   { background: linear-gradient(135deg, #059669, #047857); }
.dua-cat-card.cat-prophets { background: linear-gradient(135deg, #7C3AED, #6D28D9); }

.dcc-emoji { font-size: 2.2rem; flex-shrink: 0; }
.dcc-info  { flex: 1; }
.dcc-name  { font-size: 1rem; font-weight: 900; color: #fff; }
.dcc-sub   { font-size: .78rem; color: rgba(255,255,255,.8); margin-top: 3px; }
.dcc-prog  {
  font-size: .72rem;
  background: rgba(255,255,255,.2);
  color: #fff; font-weight: 800;
  padding: 3px 10px; border-radius: 50px;
  margin-top: 7px; display: inline-block;
}
.dcc-arrow { font-size: 1.2rem; color: rgba(255,255,255,.8); flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   3.  LISTE DES DOU'A D'UNE CATÉGORIE
══════════════════════════════════════════════════════════════ */
.dua-list-page {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 1rem 5rem;
}

.dua-list-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.dua-list-card {
  background: var(--dm-card);
  border-radius: 20px;
  border: 2.5px solid #F1F5F9;
  padding: 14px 16px;
  cursor: pointer;
  transition: all .18s;
  box-shadow: var(--dm-shadow);
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Outfit', sans-serif;
  animation: dmFadeIn .28s ease both;
}
[data-theme="dark"] .dua-list-card { border-color: #334155; }
.dua-list-card:hover { border-color: var(--dm-purple); transform: translateX(3px); }
.dua-list-card.mastered { border-color: var(--dm-green); background: var(--dm-green-l); }
[data-theme="dark"] .dua-list-card.mastered { background: rgba(22,163,74,.15); }

.dlc-emoji  { font-size: 1.8rem; flex-shrink: 0; }
.dlc-info   { flex: 1; min-width: 0; }
.dlc-ar     { font-size: 1rem; direction: rtl; font-weight: 800; color: var(--dm-green); font-family: 'Amiri', serif; }
.dlc-tr     { font-size: .78rem; color: var(--dm-blue); font-weight: 700; margin-top: 2px; }
.dlc-fr     { font-size: .75rem; color: var(--dm-muted); margin-top: 2px; }
.dlc-right  { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.dlc-steps  { display: flex; gap: 4px; }
.dlc-step   { width: 22px; height: 5px; border-radius: 50px; background: #E2E8F0; }
.dlc-step.done { background: var(--dm-purple); }
.dlc-status { font-size: .75rem; font-weight: 800; color: var(--dm-muted); }
.dlc-status.ok { color: var(--dm-green); }

/* Séparateur de catégorie */
.dua-cat-separator {
  font-size: .72rem; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--dm-muted);
  padding: 12px 4px 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Outfit', sans-serif;
}
.dua-cat-separator::after {
  content: '';
  flex: 1; height: 1px;
  background: #E2E8F0;
}
[data-theme="dark"] .dua-cat-separator::after { background: #334155; }

/* ══════════════════════════════════════════════════════════════
   4.  APPRENTISSAGE PAS À PAS
══════════════════════════════════════════════════════════════ */
.dua-learn-page {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 1rem 5rem;
}

/* Steps indicator */
.dua-steps-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 16px;
}
.dua-step-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: .82rem; font-weight: 900;
  border: 2.5px solid #E2E8F0;
  color: var(--dm-muted);
  background: var(--dm-card);
  transition: all .25s;
  font-family: 'Outfit', sans-serif;
  flex-shrink: 0;
}
.dua-step-dot.active {
  background: var(--dm-purple);
  border-color: var(--dm-purple);
  color: #fff;
  box-shadow: 0 3px 12px rgba(124,58,237,.35);
  transform: scale(1.12);
}
.dua-step-dot.done {
  background: var(--dm-green);
  border-color: var(--dm-green);
  color: #fff;
}
.dua-step-line {
  flex: 1; height: 2px;
  background: #E2E8F0;
  max-width: 40px;
  transition: background .3s;
}
.dua-step-line.done { background: var(--dm-green); }
[data-theme="dark"] .dua-step-line { background: #334155; }

/* Hero dou'a */
.dua-learn-hero {
  background: linear-gradient(135deg, #F5F3FF, #EDE9FE);
  border: 2px solid rgba(124,58,237,.2);
  border-radius: 24px;
  padding: 20px 18px 16px;
  text-align: center;
  margin-bottom: 14px;
}
[data-theme="dark"] .dua-learn-hero {
  background: linear-gradient(135deg, rgba(124,58,237,.15), rgba(109,40,217,.1));
  border-color: rgba(124,58,237,.3);
}
.dlh-emoji { font-size: 2.5rem; display: block; margin-bottom: 6px; }
.dlh-step-name {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem; font-weight: 800;
  color: var(--dm-purple);
}
.dlh-step-desc {
  font-size: .82rem;
  color: var(--dm-muted);
  font-weight: 600;
  margin-top: 4px;
  font-family: 'Outfit', sans-serif;
}

/* ══════════════════════════════════════════════════════════════
   5.  ÉTAPE 1 — KARAOKÉ
══════════════════════════════════════════════════════════════ */
.kara-card {
  background: var(--dm-card);
  border-radius: 22px;
  padding: 22px 18px;
  border: 2px solid #F1F5F9;
  box-shadow: var(--dm-shadow);
  text-align: center;
  margin-bottom: 12px;
}
[data-theme="dark"] .kara-card { border-color: #334155; }

/* Texte arabe karaoké */
.kara-ar-wrap {
  font-family: 'Amiri', serif;
  font-size: 1.9rem;
  direction: rtl;
  font-weight: 700;
  line-height: 1.8;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}
.kara-word {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 10px;
  transition: all .25s;
  color: var(--dm-text);
  cursor: default;
}
.kara-word.lit {
  background: var(--dm-teal-l);
  color: var(--dm-teal);
  transform: scale(1.18);
  box-shadow: 0 2px 10px rgba(13,148,136,.25);
}
.kara-word.done { color: var(--dm-green); }

/* Translittération karaoké */
.kara-tr-wrap {
  font-family: 'Outfit', sans-serif;
  font-size: .9rem;
  direction: ltr;
  font-weight: 700;
  line-height: 2;
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}
.kara-tr-word {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 8px;
  transition: all .25s;
  color: var(--dm-muted);
}
.kara-tr-word.lit {
  color: var(--dm-blue);
  font-weight: 900;
  background: var(--dm-blue-l);
}
.kara-tr-word.done { color: var(--dm-green); }

/* Traduction & contexte */
.kara-meaning {
  font-family: 'Outfit', sans-serif;
  font-size: .88rem;
  font-weight: 700;
  color: var(--dm-text);
  background: #F8FAFC;
  border-radius: 12px;
  padding: 8px 14px;
  margin: 8px 0 4px;
  display: inline-block;
}
[data-theme="dark"] .kara-meaning { background: #1E293B; }

.kara-when {
  font-family: 'Outfit', sans-serif;
  font-size: .76rem;
  color: var(--dm-muted);
  font-weight: 600;
  margin-bottom: 14px;
}

/* Contrôles audio karaoké */
.kara-audio-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.kara-ctrl-row {
  display: flex;
  gap: 7px;
  justify-content: center;
  flex-wrap: wrap;
}
.kara-ctrl-label {
  font-family: 'Outfit', sans-serif;
  font-size: .72rem;
  font-weight: 800;
  color: var(--dm-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 3px;
}

.kara-btn-opt {
  background: var(--dm-card);
  border: 2px solid #E2E8F0;
  border-radius: 50px;
  padding: 6px 13px;
  font-size: .8rem; font-weight: 800;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  color: var(--dm-text);
  transition: all .15s;
}
[data-theme="dark"] .kara-btn-opt { border-color: #334155; }
.kara-btn-opt.active-teal  { background: var(--dm-teal-l);   border-color: var(--dm-teal);   color: var(--dm-teal); }
.kara-btn-opt.active-blue  { background: var(--dm-blue-l);   border-color: var(--dm-blue);   color: var(--dm-blue); }
.kara-btn-opt.active-purple{ background: var(--dm-purple-l); border-color: var(--dm-purple); color: var(--dm-purple); }
.kara-btn-opt:hover { transform: scale(1.05); }

.kara-vol-row {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.kara-vol-icon { font-size: 1rem; }
input[type="range"].kara-vol-slider {
  width: 120px;
  height: 4px;
  accent-color: var(--dm-teal);
  cursor: pointer;
}

/* Bouton play principal */
.kara-play-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--dm-teal), var(--dm-green));
  color: #fff;
  font-size: 1rem; font-weight: 800;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(13,148,136,.3);
  transition: all .18s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}
.kara-play-btn:hover { transform: scale(1.02); }
.kara-play-btn:disabled { opacity: .6; cursor: default; transform: none; }

/* Bouton "Étape suivante" */
.kara-next-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--dm-purple), #6D28D9);
  color: #fff;
  font-size: 1rem; font-weight: 800;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(124,58,237,.3);
  transition: all .18s;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  animation: dmPopIn .3s ease;
}
.kara-next-btn.show { display: flex; }
.kara-next-btn:hover { transform: scale(1.02); }

/* ══════════════════════════════════════════════════════════════
   6.  ÉTAPE 2 — FLASH CARDS
══════════════════════════════════════════════════════════════ */
.flash-card {
  background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
  border: 2px solid rgba(245,183,49,.3);
  border-radius: 24px;
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 6px 24px rgba(245,183,49,.15);
  margin-bottom: 12px;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
[data-theme="dark"] .flash-card {
  background: linear-gradient(135deg, rgba(245,183,49,.1), rgba(217,119,6,.08));
}

.flash-ar-wrap {
  font-family: 'Amiri', serif;
  font-size: 2.1rem;
  direction: rtl;
  font-weight: 700;
  line-height: 1.6;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.flash-word {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  transition: all .3s;
  color: var(--dm-text);
}
.flash-word.hidden {
  background: #CBD5E1;
  color: transparent;
  min-width: 55px;
  cursor: pointer;
}
[data-theme="dark"] .flash-word.hidden { background: #334155; }
.flash-word.hidden:hover { background: #94A3B8; }
.flash-word.revealed {
  background: var(--dm-gold);
  color: #fff;
  animation: dmPopIn .25s ease;
}

.flash-tr-wrap {
  font-family: 'Outfit', sans-serif;
  font-size: .9rem; font-weight: 700;
  color: var(--dm-blue);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.flash-tr-word {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 8px;
  transition: all .3s;
}
.flash-tr-word.hidden {
  background: #E2E8F0;
  color: transparent;
  min-width: 45px;
}
[data-theme="dark"] .flash-tr-word.hidden { background: #334155; }
.flash-tr-word.revealed {
  background: var(--dm-blue-l);
  color: var(--dm-blue);
  animation: dmPopIn .25s ease;
}

.flash-reveal-btn {
  margin-top: 8px;
  padding: 10px 24px;
  border: none;
  border-radius: 50px;
  background: var(--dm-gold);
  color: #fff;
  font-size: .9rem; font-weight: 800;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  transition: all .18s;
  box-shadow: 0 3px 12px rgba(245,183,49,.35);
}
.flash-reveal-btn:hover { transform: scale(1.05); }

.flash-prog-lbl {
  font-family: 'Outfit', sans-serif;
  font-size: .82rem; font-weight: 700;
  color: var(--dm-muted);
}

.flash-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.flash-know-btn, .flash-again-btn {
  flex: 1; padding: 13px;
  border: none; border-radius: 16px;
  font-size: .95rem; font-weight: 800;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  transition: all .18s;
}
.flash-know-btn  { background: linear-gradient(135deg, var(--dm-green), #15803D); color: #fff; box-shadow: 0 3px 12px rgba(22,163,74,.3); }
.flash-again-btn { background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff; box-shadow: 0 3px 12px rgba(245,158,11,.3); }
.flash-know-btn:hover, .flash-again-btn:hover { transform: scale(1.03); }

/* ══════════════════════════════════════════════════════════════
   7.  ÉTAPE 3 — MICRO
══════════════════════════════════════════════════════════════ */
.micro-card {
  background: linear-gradient(135deg, #FDF4FF, #FAE8FF);
  border: 2px solid rgba(168,85,247,.2);
  border-radius: 24px;
  padding: 24px 18px;
  text-align: center;
  margin-bottom: 12px;
  box-shadow: 0 4px 16px rgba(168,85,247,.1);
}
[data-theme="dark"] .micro-card {
  background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(109,40,217,.08));
}

.micro-ar {
  font-family: 'Amiri', serif;
  font-size: 2rem;
  direction: rtl;
  font-weight: 700;
  color: var(--dm-purple);
  margin-bottom: 8px;
  line-height: 1.6;
}
.micro-instruction {
  font-family: 'Outfit', sans-serif;
  font-size: .88rem;
  color: var(--dm-muted);
  font-weight: 600;
  margin-bottom: 16px;
  line-height: 1.6;
}

.micro-listen-btn {
  width: 100%;
  margin-bottom: 14px;
  padding: 12px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--dm-teal), var(--dm-green));
  color: #fff;
  font-size: .92rem; font-weight: 800;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(13,148,136,.25);
  transition: all .18s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.micro-listen-btn:hover { transform: scale(1.02); }

.micro-btn-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.micro-btn {
  width: 82px; height: 82px;
  border-radius: 50%;
  border: none; cursor: pointer;
  font-size: 2rem;
  transition: all .18s;
  background: linear-gradient(135deg, var(--dm-purple), #6D28D9);
  color: #fff;
  box-shadow: 0 6px 20px rgba(124,58,237,.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.micro-btn:hover { transform: scale(1.08); }
.micro-btn.recording {
  background: linear-gradient(135deg, #EF4444, #DC2626);
  animation: dmPulseRing 1s infinite;
  box-shadow: 0 6px 20px rgba(239,68,68,.5);
}

.micro-status {
  font-family: 'Outfit', sans-serif;
  font-size: .82rem; font-weight: 700;
  color: var(--dm-muted);
  min-height: 24px;
  margin-bottom: 10px;
}

/* Résultat micro */
.micro-result {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: rgba(255,255,255,.85);
  border-radius: 16px;
  margin-top: 8px;
  animation: dmFadeIn .3s ease;
  backdrop-filter: blur(4px);
}
[data-theme="dark"] .micro-result { background: rgba(30,41,59,.85); }
.micro-result.show { display: flex; }

.micro-transcript-label {
  font-family: 'Outfit', sans-serif;
  font-size: .82rem; font-weight: 800;
  color: var(--dm-text);
}
.micro-transcript {
  font-family: 'Amiri', serif;
  font-size: .9rem;
  direction: rtl;
  color: var(--dm-text);
  font-weight: 700;
  background: var(--dm-green-l);
  border-radius: 10px;
  padding: 6px 12px;
  width: 100%;
  text-align: center;
}
.micro-score-bar {
  width: 100%;
  background: #E2E8F0;
  border-radius: 50px;
  height: 12px;
  overflow: hidden;
  margin: 2px 0;
}
[data-theme="dark"] .micro-score-bar { background: #334155; }
.micro-score-fill {
  height: 100%;
  border-radius: 50px;
  background: linear-gradient(90deg, var(--dm-green), #4ADE80);
  transition: width .8s ease;
}
.micro-score-label {
  font-family: 'Outfit', sans-serif;
  font-size: .9rem; font-weight: 800;
  color: var(--dm-green);
}

/* Bouton valider micro */
.micro-next-btn {
  width: 100%;
  margin-top: 14px;
  padding: 14px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--dm-gold), #D97706);
  color: #fff;
  font-size: 1rem; font-weight: 800;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(245,183,49,.3);
  transition: all .18s;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  animation: dmPopIn .3s ease;
}
.micro-next-btn.show { display: flex; }
.micro-next-btn:hover { transform: scale(1.02); }

/* ══════════════════════════════════════════════════════════════
   8.  RÉCAPITULATIF SESSION
══════════════════════════════════════════════════════════════ */
.recap-page {
  max-width: 700px;
  margin: 0 auto;
  padding: 1rem 1rem 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.recap-emoji { font-size: 4.5rem; animation: dmFloat 2s ease-in-out infinite; }
.recap-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.8rem; font-weight: 800;
  color: var(--dm-purple);
}
.recap-stars { font-size: 1.6rem; letter-spacing: 5px; margin: 2px 0; }

.recap-details {
  background: var(--dm-card);
  border-radius: 20px;
  padding: 16px 20px;
  width: 100%;
  border: 2px solid #F1F5F9;
  box-shadow: var(--dm-shadow);
}
[data-theme="dark"] .recap-details { border-color: #334155; }

.recap-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid #F1F5F9;
  font-family: 'Outfit', sans-serif;
  font-size: .88rem;
}
[data-theme="dark"] .recap-row { border-color: #334155; }
.recap-row:last-child { border: none; }
.recap-row-label { color: var(--dm-muted); font-weight: 600; }
.recap-row-val   { font-weight: 800; color: var(--dm-text); }

.recap-btn-primary, .recap-btn-secondary {
  width: 100%;
  max-width: 320px;
  padding: 14px;
  border: none;
  border-radius: 18px;
  font-size: 1rem; font-weight: 800;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  transition: all .18s;
}
.recap-btn-primary {
  background: linear-gradient(135deg, var(--dm-purple), #6D28D9);
  color: #fff;
  box-shadow: 0 4px 14px rgba(124,58,237,.3);
}
.recap-btn-secondary {
  background: var(--dm-green-l);
  color: var(--dm-green);
  margin-top: 6px;
}
.recap-btn-primary:hover  { transform: scale(1.03); }
.recap-btn-secondary:hover { background: var(--dm-green); color: #fff; }

/* ══════════════════════════════════════════════════════════════
   9.  LECTEUR PRO (LECTURE DOU'A)
══════════════════════════════════════════════════════════════ */
.player-page {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 1rem 180px;
}

/* Liste des dou'a */
.player-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 12px;
}

.player-item {
  background: var(--dm-card);
  border-radius: 16px;
  border: 2px solid #F1F5F9;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  cursor: pointer;
  transition: all .16s;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  animation: dmFadeIn .25s ease both;
  font-family: 'Outfit', sans-serif;
}
[data-theme="dark"] .player-item { border-color: #334155; }
.player-item:hover { border-color: var(--dm-teal); background: #F0FDFA; }
[data-theme="dark"] .player-item:hover { background: rgba(13,148,136,.1); }
.player-item.playing {
  border-color: var(--dm-teal);
  background: linear-gradient(135deg, #F0FDFA, #CCFBF1);
  box-shadow: 0 4px 16px rgba(13,148,136,.2);
}
[data-theme="dark"] .player-item.playing { background: rgba(13,148,136,.15); }

.pi-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #F1F5F9;
  color: var(--dm-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem; font-weight: 800;
  flex-shrink: 0;
  transition: all .2s;
}
[data-theme="dark"] .pi-num { background: #334155; }
.pi-num.is-playing {
  background: var(--dm-teal);
  color: #fff;
  animation: dmPulseRing 1.2s infinite;
}
.pi-info  { flex: 1; min-width: 0; }
.pi-ar    { font-family: 'Amiri', serif; font-size: 1.05rem; direction: rtl; font-weight: 700; color: var(--dm-green); }
.pi-tr    { font-size: .78rem; color: var(--dm-blue); font-weight: 700; margin-top: 2px; }
.pi-fr    { font-size: .75rem; color: var(--dm-muted); font-weight: 600; }
.pi-icon  { font-size: 1.1rem; color: var(--dm-teal); flex-shrink: 0; }

/* Mini player fixe */
.mini-player {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(13,148,136,.2);
  box-shadow: 0 -8px 32px rgba(0,0,0,.12);
  border-radius: 24px 24px 0 0;
  padding: 14px 16px 22px;
  z-index: 900;
  max-width: 700px;
  margin: 0 auto;
}
[data-theme="dark"] .mini-player {
  background: rgba(15,23,42,.97);
  border-top-color: rgba(13,148,136,.3);
}

.mp-now {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.mp-emoji { font-size: 1.8rem; flex-shrink: 0; }
.mp-info  { flex: 1; min-width: 0; }
.mp-ar {
  font-family: 'Amiri', serif;
  font-size: 1rem;
  direction: rtl;
  font-weight: 700;
  color: var(--dm-green);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-tr {
  font-family: 'Outfit', sans-serif;
  font-size: .75rem;
  color: var(--dm-muted);
  font-weight: 700;
}

/* Karaoké dans le player */
.mp-karaoke {
  font-family: 'Amiri', serif;
  font-size: .9rem;
  direction: rtl;
  text-align: center;
  margin: 4px 0 8px;
  font-weight: 700;
  line-height: 2;
  min-height: 28px;
  color: var(--dm-text);
}
.mp-karaoke .mp-kw { transition: all .2s; display: inline-block; margin: 0 3px; }
.mp-karaoke .mp-kw.lit  { color: var(--dm-teal); transform: scale(1.15); font-weight: 900; }
.mp-karaoke .mp-kw.done { color: var(--dm-green); }

/* Barre de progression */
.mp-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.mp-time {
  font-family: 'Outfit', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  color: var(--dm-muted);
  flex-shrink: 0;
  min-width: 32px;
}
.mp-bar {
  flex: 1; height: 5px;
  background: #E2E8F0;
  border-radius: 50px;
  overflow: hidden;
  cursor: pointer;
}
[data-theme="dark"] .mp-bar { background: #334155; }
.mp-bar-fill {
  height: 100%;
  border-radius: 50px;
  background: linear-gradient(90deg, var(--dm-teal), var(--dm-green));
  transition: width .3s linear;
  width: 0%;
}

/* Contrôles */
.mp-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}
.mp-ctrl {
  background: none; border: none;
  cursor: pointer; font-size: 1.3rem;
  padding: 8px; border-radius: 50%;
  transition: all .15s;
  color: var(--dm-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
}
.mp-ctrl:hover { background: #F1F5F9; transform: scale(1.15); }
[data-theme="dark"] .mp-ctrl:hover { background: #334155; }
.mp-ctrl:active { transform: scale(.9); }

.mp-play-btn {
  background: linear-gradient(135deg, var(--dm-teal), var(--dm-green));
  color: #fff;
  width: 52px; height: 52px;
  border-radius: 50%;
  font-size: 1.4rem;
  box-shadow: 0 4px 16px rgba(13,148,136,.35);
}
.mp-play-btn:hover {
  background: linear-gradient(135deg, #0F766E, #15803D);
  transform: scale(1.08) !important;
}
.mp-ctrl-active { color: var(--dm-teal); }

/* Options */
.mp-options {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: center;
}
.mp-speed-btn {
  background: #F1F5F9;
  border: 2px solid #E2E8F0;
  border-radius: 50px;
  padding: 5px 11px;
  font-size: .78rem; font-weight: 800;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  color: var(--dm-text);
  transition: all .15s;
}
[data-theme="dark"] .mp-speed-btn { background: #334155; border-color: #475569; }
.mp-speed-btn.active { background: var(--dm-teal-l); border-color: var(--dm-teal); color: var(--dm-teal); }

.mp-vol-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
}
.mp-vol-icon { font-size: 1rem; }
input[type="range"].mp-vol-slider {
  width: 70px; height: 4px;
  accent-color: var(--dm-teal);
  cursor: pointer;
}
.mp-rep-btn {
  background: #F1F5F9;
  border: 2px solid #E2E8F0;
  border-radius: 50px;
  padding: 5px 10px;
  font-size: .78rem; font-weight: 800;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  color: var(--dm-text);
  transition: all .15s;
  min-width: 38px;
  text-align: center;
}
[data-theme="dark"] .mp-rep-btn { background: #334155; border-color: #475569; }
.mp-rep-btn.active { background: var(--dm-purple-l); border-color: var(--dm-purple); color: var(--dm-purple); }

/* ══════════════════════════════════════════════════════════════
   10.  KEYFRAMES
══════════════════════════════════════════════════════════════ */
@keyframes dmFadeIn   { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@keyframes dmPopIn    { from{opacity:0;transform:scale(.7)} to{opacity:1;transform:none} }
@keyframes dmFloat    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes dmPulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(13,148,136,.5); }
  70%  { box-shadow: 0 0 0 12px rgba(13,148,136,0); }
  100% { box-shadow: 0 0 0 0 rgba(13,148,136,0); }
}

/* ══════════════════════════════════════════════════════════════
   11.  RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .kara-ar-wrap  { font-size: 1.5rem; }
  .flash-ar-wrap { font-size: 1.7rem; }
  .micro-ar      { font-size: 1.6rem; }
  .mp-options    { gap: 5px; }
  .mp-speed-btn  { padding: 4px 8px; font-size: .72rem; }
  input[type="range"].mp-vol-slider { width: 55px; }
}