/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTS-BUNDLE.CSS
   Merged: components.css + bookmarks.css + related-articles.css + reading-progress.css + share.css + parcours.css
   Generated: 2026-02-06
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- components.css --- */

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTS.CSS - Nouveaux composants UI
   - Section Accès rapide (homepage)
   - Bloc "Continuer l'exploration" (fin d'articles)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   ACCÈS RAPIDE - Homepage
   5 boutons principaux pour navigation rapide
   ═══════════════════════════════════════════════════════════════════════════ */

.quick-access-section {
  margin-bottom: var(--space-3xl);
}

.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-md);
}

@media (max-width: 1100px) {
  .quick-access-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .quick-access-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 400px) {
  .quick-access-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }
}

.quick-access-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-fast);
  text-align: center;
  min-height: 120px;
}

.quick-access-btn:hover {
  border-color: var(--color-gold);
  background: rgba(201, 162, 39, 0.08);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), var(--shadow-gold);
}

.quick-access-btn:active {
  transform: translateY(-2px);
  background: rgba(201, 162, 39, 0.12);
}

.quick-access-btn:hover .quick-access-icon {
  transform: scale(1.15);
}

.quick-access-icon {
  font-size: 2rem;
  transition: transform var(--transition-fast);
}

.quick-access-label {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.quick-access-badge {
  font-size: var(--text-xs);
  color: var(--color-gold);
  font-weight: 500;
  margin-top: calc(-1 * var(--space-xs));
}

/* Variante Quiz avec mise en valeur */
.quick-access-btn--quiz {
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.1) 0%, rgba(201, 162, 39, 0.05) 100%);
  border-color: var(--color-border-gold);
}

.quick-access-btn--quiz:hover {
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.15) 0%, rgba(201, 162, 39, 0.08) 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ARTICLES COMPACTS - Homepage
   Liste simple titre + date
   ═══════════════════════════════════════════════════════════════════════════ */

.articles-compact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.article-compact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-fast);
}

.article-compact-item:hover {
  border-color: var(--color-gold);
  background: var(--color-bg-tertiary);
}

.article-compact-item:hover .article-compact-title {
  color: var(--color-gold);
}

.article-compact-title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text-primary);
  transition: color var(--transition-fast);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.article-compact-date {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 500px) {
  .article-compact-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
  
  .article-compact-title {
    white-space: normal;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTINUER L'EXPLORATION - Fin d'articles
   Bloc avec articles similaires, CTA quiz, liens outils
   ═══════════════════════════════════════════════════════════════════════════ */

.continue-exploration {
  margin-top: var(--space-3xl);
  padding-top: var(--space-2xl);
  border-top: 2px solid var(--color-border);
}

.continue-exploration-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Articles similaires */
.similar-articles {
  margin-bottom: var(--space-2xl);
}

.similar-articles-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.similar-article-link {
  display: block;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text-primary);
  font-weight: 500;
  transition: all var(--transition-fast);
}

.similar-article-link:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  transform: translateX(4px);
}

/* CTA Quiz */
.exploration-quiz-cta {
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.12) 0%, rgba(201, 162, 39, 0.05) 100%);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-2xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.exploration-quiz-content {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.exploration-quiz-icon {
  font-size: 2rem;
}

.exploration-quiz-text {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-primary);
}

.exploration-quiz-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-gold);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.exploration-quiz-btn:hover {
  background: var(--color-gold-light);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

@media (max-width: 500px) {
  .exploration-quiz-cta {
    flex-direction: column;
    text-align: center;
  }
  
  .exploration-quiz-content {
    flex-direction: column;
  }
  
  .exploration-quiz-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Outils rapides */
.exploration-quick-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.exploration-tool-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.exploration-tool-link:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   AFFORDANCE - Distinction cliquable vs informatif
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Blocs informatifs (non cliquables) ─── */
.info-block {
  background: var(--color-bg-secondary);
  border-left: 4px solid var(--color-gold);
  box-shadow: none;
  padding: 1.5rem;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  cursor: default;
}

/* Variante pour les principes/citations importantes */
.info-block--principle {
  background: linear-gradient(135deg, rgba(30, 111, 92, 0.08) 0%, rgba(201, 162, 39, 0.08) 100%);
  border-left-color: var(--color-emerald);
  text-align: center;
  border-radius: var(--radius-lg);
  border-left: none;
  border: 1px solid var(--color-border-gold);
}

/* Variante pour les citations/versets */
.info-block--quote {
  background: rgba(201, 162, 39, 0.05);
  font-style: italic;
}

/* Variante pour les stats/références (pas de bordure gauche) */
.info-block--stat {
  border-left: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

/* Liens dans un info-block restent stylés comme liens texte */
.info-block a {
  text-decoration: underline;
  color: var(--color-gold);
}

.info-block a:hover {
  color: var(--color-gold-light);
}

/* ─── Cards cliquables ─── */
.card-link {
  display: block;
  position: relative;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  padding-right: 2.5rem; /* espace pour la flèche */
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card-link:hover {
  border-color: var(--color-gold);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* Flèche indicateur de cliquabilité */
.card-link::after {
  content: "→";
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  font-size: 1.2rem;
  color: var(--color-gold);
  opacity: 0.5;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.card-link:hover::after {
  opacity: 1;
  transform: translateX(4px);
}

/* Dark mode ajustements */
.theme-light .card-link {
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.theme-light .card-link:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Variante compacte (sans flèche visible, pour listes) */
.card-link--compact {
  padding-right: var(--space-lg);
}

.card-link--compact::after {
  display: none;
}

/* Variante grille (pour cards dans une grille) */
.card-link--grid {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITAIRES
   ═══════════════════════════════════════════════════════════════════════════ */

.no-results-message {
  text-align: center;
  padding: var(--space-lg);
  color: var(--color-text-tertiary);
  font-style: italic;
}


/* --- bookmarks.css --- */

/**
 * Bookmarks & Reading Mode Styles
 * Découvrir l'Islam
 */

/* ═══════════════════════════════════════════════════════════════════════════
   BOOKMARK BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */

.bookmark-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-left: var(--space-md);
}

.bookmark-btn:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.bookmark-btn.active {
  background: rgba(201, 162, 39, 0.15);
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.bookmark-icon {
  font-size: var(--text-lg);
  transition: transform 0.2s ease;
}

.bookmark-btn:active .bookmark-icon {
  transform: scale(1.3);
}

/* Toast notification */
.bookmark-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-gold);
  box-shadow: var(--shadow-lg);
  font-weight: 500;
  z-index: 1000;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

.bookmark-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOOKMARKS PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.bookmarks-container {
  max-width: 800px;
  margin: 0 auto;
}

.bookmarks-section {
  margin-bottom: var(--space-2xl);
}

.bookmarks-section h3 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-gold);
  display: inline-block;
}

.bookmarks-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bookmark-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-sm);
  transition: all var(--transition-fast);
}

.bookmark-item:hover {
  border-color: var(--color-gold);
  transform: translateX(4px);
}

.bookmark-link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: 1;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.bookmark-type {
  font-size: var(--text-xl);
  flex-shrink: 0;
}

.bookmark-title {
  font-weight: 500;
  color: var(--color-text-primary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bookmark-date {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

.bookmark-remove {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-tertiary);
  font-size: var(--text-xl);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.bookmark-remove:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Historique - style plus discret */
.history-list .bookmark-item {
  background: transparent;
  border-style: dashed;
  opacity: 0.9;
}

.history-list .bookmark-item:hover {
  opacity: 1;
}

/* Empty state */
.bookmarks-empty {
  text-align: center;
  padding: var(--space-3xl) var(--space-xl);
  color: var(--color-text-secondary);
}

.empty-icon {
  font-size: 4rem;
  display: block;
  margin-bottom: var(--space-lg);
  opacity: 0.5;
}

.bookmarks-empty p {
  font-size: var(--text-lg);
  margin-bottom: var(--space-sm);
}

.empty-hint {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   READING MODE
   ═══════════════════════════════════════════════════════════════════════════ */

.reading-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-right: var(--space-sm);
}

.reading-mode-btn:hover {
  border-color: var(--color-emerald);
  color: var(--color-emerald);
}

.reading-mode-btn.active {
  background: rgba(30, 111, 92, 0.15);
  border-color: var(--color-emerald);
  color: var(--color-emerald);
}

.reading-icon {
  font-size: var(--text-base);
}

/* Mode lecture zen actif */
body.reading-mode {
  /* Masque les éléments distrayants */
  --nav-opacity: 0;
}

body.reading-mode .site-nav,
body.reading-mode .footer,
body.reading-mode .breadcrumb,
body.reading-mode .article-nav,
body.reading-mode .continue-exploration,
body.reading-mode .fab-contact {
  opacity: 0.3;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

body.reading-mode .site-nav:hover,
body.reading-mode .footer:hover,
body.reading-mode .breadcrumb:hover,
body.reading-mode .article-nav:hover,
body.reading-mode .continue-exploration:hover {
  opacity: 1;
  pointer-events: auto;
}

body.reading-mode .main-content {
  max-width: 720px;
  margin: 0 auto;
}

body.reading-mode .article-content {
  font-size: 1.125rem;
  line-height: 1.9;
}

body.reading-mode .article-content p {
  margin-bottom: 1.5em;
}

body.reading-mode .container {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-2xl);
}

/* Indication visuelle du mode actif */
body.reading-mode::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.02) 100%);
  pointer-events: none;
  z-index: -1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DATES DE MODIFICATION
   ═══════════════════════════════════════════════════════════════════════════ */

.article-date--modified {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  opacity: 0.8;
}

.article-date--modified:hover {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .bookmark-btn {
    padding: var(--space-xs);
    margin-left: var(--space-sm);
  }
  
  .bookmark-text {
    display: none;
  }
  
  .reading-text {
    display: none;
  }
  
  .bookmark-item {
    flex-wrap: wrap;
  }
  
  .bookmark-date {
    width: 100%;
    text-align: right;
    margin-top: var(--space-xs);
  }
}


/* --- related-articles.css --- */

/**
 * Related Articles Styles
 * Découvrir l'Islam
 */

.related-articles {
  margin: var(--space-2xl) 0;
  padding: var(--space-xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.related-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-lg) 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.related-icon {
  font-size: var(--text-xl);
}

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

.related-card {
  display: block;
  padding: var(--space-lg);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.related-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-emerald));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.related-card:hover {
  border-color: var(--color-gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.related-card:hover::before {
  opacity: 1;
}

.related-card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.related-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
  align-self: flex-start;
}

.related-badge--sourate {
  background: rgba(201, 162, 39, 0.15);
  color: var(--color-gold);
}

.related-badge--category {
  background: rgba(30, 111, 92, 0.15);
  color: var(--color-emerald);
}

.related-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-sm) 0;
  line-height: 1.4;
}

.related-card-excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-md) 0;
  line-height: 1.5;
  flex: 1;
}

.related-card-meta {
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.related-reason {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

/* Responsive */
@media (max-width: 640px) {
  .related-grid {
    grid-template-columns: 1fr;
  }
  
  .related-articles {
    padding: var(--space-md);
  }
}


/* --- reading-progress.css --- */

/**
 * Reading Progress Styles
 * Barre de progression + Bouton reprise
 * Découvrir l'Islam
 */

/* ═══════════════════════════════════════════════════════════════════════════
   BARRE DE PROGRESSION
   ═══════════════════════════════════════════════════════════════════════════ */

.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(201, 162, 39, 0.1);
  z-index: 9999;
  pointer-events: none;
}

.reading-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-gold), #e4c65b);
  transition: width 0.1s ease-out, background-color 0.3s ease;
  box-shadow: 0 0 10px rgba(201, 162, 39, 0.5);
}

.reading-progress-fill.complete {
  background: linear-gradient(90deg, var(--color-emerald), #2a9d8f);
  box-shadow: 0 0 10px rgba(30, 111, 92, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOUTON REPRENDRE LA LECTURE
   ═══════════════════════════════════════════════════════════════════════════ */

.resume-reading-btn {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-xl);
  background: var(--color-bg-card);
  border: 2px solid var(--color-gold);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(201, 162, 39, 0.2);
  cursor: pointer;
  z-index: 1000;
  animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: all 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.resume-reading-btn:hover {
  background: var(--color-gold);
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 12px 40px rgba(201, 162, 39, 0.4);
}

.resume-reading-btn:hover .resume-label,
.resume-reading-btn:hover .resume-percent {
  color: #fff;
}

.resume-reading-btn:hover .resume-arrow {
  color: #fff;
  animation: bounce 0.6s ease infinite;
}

.resume-reading-btn.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  pointer-events: none;
}

.resume-icon {
  font-size: var(--text-xl);
}

.resume-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.resume-label {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.resume-percent {
  font-size: var(--text-xs);
  color: var(--color-gold);
  font-weight: 500;
}

.resume-arrow {
  font-size: var(--text-lg);
  color: var(--color-gold);
  margin-left: var(--space-sm);
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LISTE DES LECTURES EN COURS (Page favoris)
   ═══════════════════════════════════════════════════════════════════════════ */

.reading-list-section {
  margin: var(--space-2xl) 0;
  padding: var(--space-xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.reading-list-section h3 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-lg) 0;
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-gold);
  display: inline-block;
}

.reading-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.reading-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-sm);
  transition: all var(--transition-fast);
}

.reading-item:hover {
  border-color: var(--color-gold);
  transform: translateX(4px);
}

.reading-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.reading-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

.reading-title {
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.reading-meta {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

.reading-progress-mini {
  height: 4px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.reading-progress-mini-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-gold), #e4c65b);
  border-radius: var(--radius-sm);
  transition: width 0.3s ease;
}

.reading-delete {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-tertiary);
  font-size: var(--text-xl);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.reading-delete:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.reading-list-empty {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--color-text-secondary);
}

.reading-list-empty .hint {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  margin-top: var(--space-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .resume-reading-btn {
    bottom: 80px;
    padding: var(--space-sm) var(--space-lg);
    left: var(--space-lg);
    right: var(--space-lg);
    transform: none;
  }
  
  .resume-reading-btn:hover {
    transform: translateY(-2px);
  }
  
  .resume-reading-btn.hidden {
    transform: translateY(20px);
  }
  
  .reading-info {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
  
  .reading-title {
    width: 100%;
  }
}


/* --- share.css --- */

/**
 * Share System Styles
 * Découvrir l'Islam
 */

/* ═══════════════════════════════════════════════════════════════════════════
   BOUTON FLOTTANT DE PARTAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.share-floating-btn {
  position: fixed;
  bottom: 100px;
  right: var(--space-xl);
  width: 56px;
  height: 56px;
  background: var(--color-emerald);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(30, 111, 92, 0.4);
  transition: all var(--transition-fast);
  z-index: 100;
}

.share-floating-btn:hover {
  transform: scale(1.1) rotate(15deg);
  background: #2a9d8f;
  box-shadow: 0 6px 20px rgba(30, 111, 92, 0.5);
}

.share-floating-btn .share-icon {
  font-size: var(--text-xl);
  filter: grayscale(1) brightness(2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOUTON DANS LES ARTICLES
   ═══════════════════════════════════════════════════════════════════════════ */

.share-article-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-left: var(--space-md);
}

.share-article-btn:hover {
  border-color: var(--color-emerald);
  color: var(--color-emerald);
  background: rgba(30, 111, 92, 0.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL DE PARTAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.share-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: var(--space-lg);
}

.share-modal-overlay.active {
  opacity: 1;
}

.share-modal {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: modalSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.share-modal-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-xl);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 10;
}

.share-modal-close:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREVIEW DE PARTAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.share-preview {
  padding: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

.share-preview-card {
  display: flex;
  gap: var(--space-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.share-preview-image {
  width: 100px;
  min-height: 100px;
  background: linear-gradient(135deg, #C9963B, #b8872f);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.share-preview-emoji {
  font-size: 3rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.share-preview-content {
  padding: var(--space-md);
  flex: 1;
  min-width: 0;
}

.share-preview-content h4 {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-xs) 0;
  line-height: 1.3;
}

.share-preview-content p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-xs) 0;
  line-height: 1.4;
}

.share-preview-url {
  font-size: var(--text-xs);
  color: var(--color-gold);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOUTONS DE PARTAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.share-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  padding: var(--space-lg);
}

.share-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.share-btn:hover {
  transform: translateY(-2px);
  border-color: var(--color-gold);
  background: var(--color-bg-tertiary);
}

.share-btn-icon {
  font-size: var(--text-2xl);
}

.share-btn-text {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* Couleurs spécifiques */
.share-btn--whatsapp:hover {
  border-color: #25d366;
  background: rgba(37, 211, 102, 0.1);
}

.share-btn--twitter:hover {
  border-color: #1da1f2;
  background: rgba(29, 161, 242, 0.1);
}

.share-btn--facebook:hover {
  border-color: #4267b2;
  background: rgba(66, 103, 178, 0.1);
}

.share-btn--native:hover {
  border-color: var(--color-emerald);
  background: rgba(30, 111, 92, 0.1);
}

.share-btn--copy:hover {
  border-color: var(--color-gold);
  background: rgba(201, 162, 39, 0.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ZONE DE TEXTE À COPIER
   ═══════════════════════════════════════════════════════════════════════════ */

.share-quote {
  padding: var(--space-lg);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}

.share-quote-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-sm) 0;
}

.share-quote-text {
  width: 100%;
  min-height: 80px;
  padding: var(--space-md);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  resize: vertical;
  margin-bottom: var(--space-sm);
  font-family: inherit;
}

.share-quote-copy {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-gold);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.share-quote-copy:hover {
  background: #e4c65b;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD DE PARTAGE QUIZ
   ═══════════════════════════════════════════════════════════════════════════ */

.quiz-share-card {
  background: linear-gradient(135deg, #C9963B, #b8872f);
  border: 1px solid rgba(201, 150, 59, 0.4);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
  text-align: center;
  color: white;
  box-shadow: 0 8px 32px rgba(201, 162, 39, 0.3);
}

.quiz-share-preview {
  margin-bottom: var(--space-lg);
}

.quiz-share-score {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.quiz-share-category {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-xs);
  opacity: 0.95;
}

.quiz-share-message {
  font-size: var(--text-base);
  opacity: 0.9;
}

.quiz-share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  background: white;
  border: none;
  border-radius: var(--radius-xl);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-gold);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: all var(--transition-fast);
}

.quiz-share-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.quiz-share-btn span {
  font-size: var(--text-xl);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATION
   ═══════════════════════════════════════════════════════════════════════════ */

.share-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-emerald);
  box-shadow: var(--shadow-lg);
  font-weight: 500;
  z-index: 1001;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

.share-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .share-floating-btn {
    bottom: 80px;
    right: var(--space-lg);
    width: 48px;
    height: 48px;
  }
  
  .share-preview-card {
    flex-direction: column;
  }
  
  .share-preview-image {
    width: 100%;
    height: 80px;
  }
  
  .share-actions {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .share-btn-text {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .share-actions {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .share-modal {
    margin: var(--space-sm);
  }
}


/* --- parcours.css --- */

/**
 * Parcours Styles - Progression et notifications
 * Découvrir l'Islam
 */

/* ═══════════════════════════════════════════════════════════════════════════
   NOTIFICATIONS DE PROGRESSION
   ═══════════════════════════════════════════════════════════════════════════ */

.parcours-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-xl);
  background: var(--color-bg-card);
  border: 2px solid var(--color-emerald);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 32px rgba(30, 111, 92, 0.3);
  z-index: 1000;
  opacity: 0;
  transition: all 0.3s ease;
}

.parcours-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast-icon {
  font-size: var(--text-2xl);
}

.toast-content {
  display: flex;
  flex-direction: column;
}

.toast-content strong {
  color: var(--color-emerald);
  font-size: var(--text-sm);
}

.toast-content span {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
}

/* ═══════════════════════════════════════════════════════════════════════════
   INDICATEURS SUR LES CARTES DE PARCOURS
   ═══════════════════════════════════════════════════════════════════════════ */

.parcours-card[data-parcours] .parcours-progress {
  transition: all 0.3s ease;
}

.parcours-card[data-parcours] .parcours-cta {
  transition: all 0.3s ease;
}

/* Animation quand une étape est complétée */
@keyframes stepComplete {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.step-dot.completed {
  animation: stepComplete 0.3s ease;
}

/* Badge de complétion sur les cartes */
.parcours-completion-badge {
  position: absolute;
  top: -8px;
  right: var(--space-lg);
  background: var(--color-emerald);
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(30, 111, 92, 0.3);
}

/* Barre de progression sur les cartes */
.parcours-card-progress {
  margin-top: var(--space-sm);
  height: 4px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.parcours-card-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-gold), var(--color-emerald));
  border-radius: var(--radius-sm);
  transition: width 0.5s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE PARCOURS - STYLES SPÉCIFIQUES
   ═══════════════════════════════════════════════════════════════════════════ */

.etape-card {
  position: relative;
  transition: all 0.3s ease;
}

.etape-card:hover {
  transform: translateX(4px);
}

.etape-card.current:hover {
  transform: translateX(8px);
}

/* Animation pulse pour l'étape en cours */
@keyframes pulse-border {
  0%, 100% { 
    box-shadow: 0 8px 32px rgba(201, 162, 39, 0.1);
  }
  50% { 
    box-shadow: 0 8px 32px rgba(201, 162, 39, 0.2);
  }
}

.etape-card.current {
  animation: pulse-border 2s ease infinite;
}

/* Boutons d'action dans les étapes */
.etape-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.btn-mark-complete {
  background: var(--color-emerald);
  color: white;
  border: none;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-lg);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-mark-complete:hover {
  background: #2a9d8f;
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .parcours-toast {
    left: var(--space-lg);
    right: var(--space-lg);
    transform: translateY(20px);
  }
  
  .parcours-toast.show {
    transform: translateY(0);
  }
}