/* ═══════════════════════════════════════════════════════════════════════════
   DUAS.CSS - Styles pour la section Invocations
   Page index + fiches individuelles + compteur + favoris
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── PAGE INDEX ─── */

.duas-page .hero {
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
}

.duas-page .hero-icon {
  font-size: 3.5rem;
  margin-bottom: var(--space-md);
  display: block;
}

.duas-page .hero-title {
  margin-bottom: var(--space-sm);
}

.duas-page .hero-subtitle {
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Stats */
.duas-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-md);
  margin: var(--space-2xl) auto;
  max-width: 700px;
  padding: 0 var(--space-md);
}

/* ─── Filtres catégories ─── */

.duas-filters {
  margin: var(--space-xl) auto var(--space-2xl);
  max-width: 900px;
  padding: 0 var(--space-md);
}

.duas-filter-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

.duas-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
}

.duas-filter-btn:hover,
.duas-filter-btn:focus-visible {
  border-color: var(--color-border-gold);
  color: var(--color-gold);
}

.duas-filter-btn.active {
  background: var(--color-gold);
  color: #fff;
  border-color: var(--color-gold);
}

.theme-light .duas-filter-btn.active {
  background: var(--color-gold);
  color: #fff;
}

/* ─── Sections d'accès rapide (Matin/Soir) ─── */

.duas-quick-access {
  margin: var(--space-2xl) auto;
  max-width: 900px;
  padding: 0 var(--space-md);
}

.duas-quick-access .section-title {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.duas-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}

.duas-quick-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: all var(--transition-base);
}

.duas-quick-card:hover {
  border-color: var(--color-border-gold);
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}

.duas-quick-card-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.duas-quick-card-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 var(--space-xs);
}

.duas-quick-card-count {
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
}

/* ─── Dua du jour ─── */

.duas-daily {
  margin: var(--space-2xl) auto;
  max-width: 700px;
  padding: 0 var(--space-md);
}

.duas-daily-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  text-align: center;
  box-shadow: var(--shadow-gold);
}

.duas-daily-label {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gold);
  margin-bottom: var(--space-md);
  font-weight: 600;
}

.duas-daily-arabic {
  font-family: 'Amiri', serif;
  font-size: 1.6rem;
  line-height: 2;
  color: var(--color-gold-light);
  direction: rtl;
  margin-bottom: var(--space-md);
}

.duas-daily-traduction {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  font-style: italic;
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.duas-daily-source {
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
}

.duas-daily-link {
  display: inline-block;
  margin-top: var(--space-md);
  color: var(--color-gold);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
}

.duas-daily-link:hover {
  text-decoration: underline;
}

/* ─── Grille de cards (index) ─── */

.duas-grid-section {
  margin: var(--space-2xl) auto;
  max-width: 1000px;
  padding: 0 var(--space-md);
}

.duas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-md);
}

.dua-card {
  display: block;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
}

.dua-card:hover {
  border-color: var(--color-border-gold);
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}

.dua-card-link {
  display: block;
  padding: var(--space-lg);
  text-decoration: none;
  color: inherit;
}

.dua-card-arabic {
  font-family: 'Amiri', serif;
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--color-gold-light);
  direction: rtl;
  text-align: right;
  margin-bottom: var(--space-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.dua-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-xs);
}

.dua-card-traduction {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.dua-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  flex-wrap: wrap;
}

.dua-card-categorie {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

.dua-card-repetitions {
  font-size: 0.72rem;
  color: var(--color-text-tertiary);
}

.dua-card-grade {
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.dua-card-grade--sahih {
  background: rgba(30, 111, 92, 0.2);
  color: var(--color-emerald-light);
}

.dua-card-grade--hasan {
  background: rgba(201, 162, 39, 0.15);
  color: var(--color-gold-light);
}

/* ─── FICHE INDIVIDUELLE ─── */

.dua-article {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.dua-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.dua-icon-wrapper {
  margin-bottom: var(--space-md);
}

.dua-icon {
  font-size: 3rem;
}

.dua-title {
  font-size: 1.5rem;
  line-height: 1.3;
}

/* Badges catégorie */
.dua-categorie {
  font-size: 0.8rem;
}

.dua-categorie--quotidien { color: var(--color-emerald-light); }
.dua-categorie--matin-soir { color: var(--color-gold-light); }
.dua-categorie--salat { color: #7b9ec8; }
.dua-categorie--voyage { color: #c78a5e; }
.dua-categorie--epreuves { color: #c75e7b; }
.dua-categorie--social { color: #8ec75e; }
.dua-categorie--spirituel { color: #a87bc7; }
.dua-categorie--occasions { color: #5ec7c1; }

/* Badge grade */
.grade-badge {
  font-size: 0.78rem;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.grade-badge--sahih {
  background: rgba(30, 111, 92, 0.15);
  color: var(--color-emerald-light);
}

.grade-badge--hasan {
  background: rgba(201, 162, 39, 0.15);
  color: var(--color-gold-light);
}

.grade-inline {
  font-size: 0.8rem;
  font-weight: 500;
}

.grade-inline--sahih { color: var(--color-emerald-light); }
.grade-inline--hasan { color: var(--color-gold-light); }

/* ─── Bloc principal (arabe + phonétique + traduction) ─── */

.dua-main-block {
  margin: var(--space-xl) 0;
}

/* Arabe */
.dua-arabic-block {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-lg);
  margin-bottom: var(--space-lg);
  text-align: center;
}

.dua-arabic-text {
  font-family: 'Amiri', serif;
  font-size: 1.8rem;
  line-height: 2.2;
  color: var(--color-gold-light);
  margin: 0;
  word-spacing: 0.1em;
}

@media (min-width: 768px) {
  .dua-arabic-text {
    font-size: 2.2rem;
    line-height: 2.4;
  }
}

/* Phonétique */
.dua-phonetique-block {
  margin-bottom: var(--space-md);
}

.dua-phonetique-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-xs);
  font-weight: 600;
}

.dua-phonetique-text {
  font-size: 1rem;
  color: var(--color-text-secondary);
  font-style: italic;
  line-height: 1.8;
  margin: 0;
  padding: var(--space-md);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
}

/* Traduction */
.dua-traduction-block {
  margin-bottom: var(--space-md);
}

.dua-traduction-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-xs);
  font-weight: 600;
}

.dua-traduction-text {
  font-size: 1.05rem;
  color: var(--color-text-primary);
  line-height: 1.7;
  margin: 0;
  padding: var(--space-md);
  background: var(--color-bg-tertiary);
  border-left: 3px solid var(--color-gold);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Source */
.dua-source-block {
  margin-bottom: var(--space-lg);
}

.dua-source-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-xs);
  font-weight: 600;
}

.dua-source-text {
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ─── Compteur de répétitions ─── */

.dua-counter-block {
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  text-align: center;
}

.dua-counter-header {
  margin-bottom: var(--space-md);
}

.dua-counter-label {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.dua-counter-widget {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.dua-counter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid var(--color-border-gold);
  background: var(--color-bg-card);
  color: var(--color-gold-light);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition-fast);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.dua-counter-btn:hover {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-gold);
  transform: scale(1.05);
}

.dua-counter-btn:active {
  transform: scale(0.95);
}

.dua-counter-btn.completed {
  border-color: var(--color-emerald);
  background: rgba(30, 111, 92, 0.1);
}

.dua-counter-current {
  font-size: 2rem;
  font-weight: 700;
}

.dua-counter-separator {
  font-size: 1.2rem;
  color: var(--color-text-tertiary);
}

.dua-counter-total {
  font-size: 1.2rem;
  color: var(--color-text-tertiary);
}

.dua-counter-reset {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text-tertiary);
  cursor: pointer;
  font-size: 1.2rem;
  font-family: inherit;
  transition: all var(--transition-fast);
}

.dua-counter-reset:hover {
  border-color: var(--color-text-secondary);
  color: var(--color-text-primary);
}

.dua-counter-progress {
  height: 4px;
  background: var(--color-bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
}

.dua-counter-bar {
  height: 100%;
  background: var(--color-gold);
  border-radius: 2px;
  transition: width var(--transition-fast);
}

.dua-counter-bar.complete {
  background: var(--color-emerald);
}

/* ─── Boutons d'action (favoris, mémorisé) ─── */

.dua-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-lg);
}

.dua-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition-fast);
}

.dua-action-btn:hover {
  border-color: var(--color-border-gold);
  color: var(--color-text-primary);
}

/* Favori actif */
.dua-favorite-btn.active {
  border-color: #e74c3c;
  color: #e74c3c;
}

.dua-favorite-btn.active .dua-favorite-icon {
  content: "♥";
}

/* Mémorisé actif */
.dua-memorized-btn.active {
  border-color: var(--color-emerald);
  color: var(--color-emerald-light);
}

/* ─── Contenu article ─── */

.dua-content {
  margin: var(--space-xl) 0;
}

.dua-content h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}

.dua-content blockquote {
  border-left: 3px solid var(--color-gold);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
  background: var(--color-bg-secondary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.dua-content blockquote p {
  color: var(--color-text-secondary);
  font-style: italic;
}

/* ─── Versets liés ─── */

.dua-versets-lies {
  margin: var(--space-xl) 0;
}

.dua-versets-lies h3 {
  margin-bottom: var(--space-md);
}

.dua-versets-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.dua-verset-link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-gold);
  text-decoration: none;
  font-size: 0.85rem;
  transition: all var(--transition-fast);
}

.dua-verset-link:hover {
  border-color: var(--color-border-gold);
  box-shadow: var(--shadow-gold);
}

/* ─── Termes liés ─── */

.dua-termes-lies {
  margin: var(--space-xl) 0;
}

.dua-termes-lies h3 {
  margin-bottom: var(--space-md);
}

.dua-termes-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.dua-terme-link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: 0.85rem;
  transition: all var(--transition-fast);
}

.dua-terme-link:hover {
  border-color: var(--color-border-gold);
  color: var(--color-gold);
}

/* ─── Empty state ─── */

.duas-empty {
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
  color: var(--color-text-tertiary);
}

.duas-empty-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
}

/* ─── Responsive ─── */

@media (max-width: 480px) {
  .duas-grid {
    grid-template-columns: 1fr;
  }
  
  .dua-arabic-text {
    font-size: 1.5rem;
    line-height: 2;
  }
  
  .dua-counter-btn {
    width: 100px;
    height: 100px;
  }
  
  .dua-counter-current {
    font-size: 1.6rem;
  }
  
  .duas-filter-grid {
    justify-content: flex-start;
  }
  
  .duas-quick-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .duas-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}