/* ═══════════════════════════════════════════════════════════════
   SirajWay — sw-journey.css
   Module « رحلة 365 يوماً إلى الله » / 365-Day Journey to Allah
   Squelette Phase 0 — voir PLAN_365_JOURNEY.md (§4 Composants UI)
   pour le détail. Réutilise au maximum le design-system existant
   (assets/shared.css : .sw-btn, .sw-card, --module-color) — les
   classes ci-dessous ne couvrent que ce qui est réellement nouveau
   pour ce module (streak, badges), pas de nouveau système visuel.
   Couleur de module : var(--color-journey) = #1E8A5A (assets/shared.css)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Compteur de streak (🔥 N jours consécutifs) ────────────────
   Implémenté visuellement en Phase 1, en même temps que la page
   journey/parcours.html. */
.sw-journey-streak {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: var(--text-sm, 0.9rem);
  color: var(--module-color, var(--gold));
}

/* ─── Barre de progression Jour N / 365 ──────────────────────────
   Réutilise le pattern déjà éprouvé et responsive d'islamed/index.html
   (.progress-bar / .progress-fill / .progress-label) — ces classes
   sont volontairement dupliquées ici sous un préfixe .sw-journey-
   pour ne pas coupler ce module à celui d'IslamEd, en attendant une
   éventuelle factorisation commune future. */
.sw-journey-progress {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-full, 9999px);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.sw-journey-progress__fill {
  height: 100%;
  background: var(--module-color, var(--gold));
  border-radius: inherit;
  transition: width var(--duration-slow, 400ms) var(--ease-out, ease);
}

/* ─── Grille de badges (🌱🌿🌙⭐💎🏆) ──────────────────────────────
   Implémentée en Phase 2 (voir PLAN_365_JOURNEY.md §8) : tuile
   verrouillée (grisée) vs. débloquée (couleur pleine + fade-in via
   SWAnim/data-anim déjà présent dans assets/shared.js). */
.sw-journey-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: var(--space-3, 0.75rem);
}
.sw-journey-badge {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--border, rgba(212, 170, 80, 0.2));
  font-size: 1.5rem;
}
.sw-journey-badge--locked {
  opacity: 0.35;
  filter: grayscale(1);
}

/* ═══════════════════════════════════════════════════════════════
   Phase 1 — Structure de page journey/*.html
   Le squelette Phase 0 chargeait shared.css + sw-responsive.css
   (qui ne définissent que des SURCHARGES responsive/typo) mais
   aucune page du site ne définit .sidebar/.mobile-nav/.nav-link
   ailleurs que dans un <style> local à CHAQUE page (convention
   existante, ex. khutbah/index.html). Pour éviter de dupliquer ~150
   lignes de CSS dans chacune des 365 pages générées, on centralise
   ici la structure de base (mobile-nav, sidebar, blocs de contenu),
   avec la couleur de module --color-journey. Les 365 pages restent
   ainsi légères (juste des <link>), au prix d'un écart volontaire
   avec la convention "page 100% autonome" des autres modules.
   ═══════════════════════════════════════════════════════════════ */

body[data-module="journey"] .mobile-nav {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: rgba(6, 8, 16, .97);
  border-bottom: 1px solid var(--border, rgba(212,170,80,.16));
  z-index: 210;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
}
html.sw-light body[data-module="journey"] .mobile-nav {
  background: rgba(248, 243, 232, .97);
  border-bottom-color: rgba(180, 140, 40, .3);
}
body[data-module="journey"] .hamburger {
  display: flex; flex-direction: column; gap: 5px; padding: 6px; cursor: pointer;
}
body[data-module="journey"] .hamburger span {
  display: block; width: 20px; height: 1.5px; background: var(--cream); border-radius: 2px; transition: all .3s;
}
html.sw-light body[data-module="journey"] .hamburger span { background: #2a1e00; }
body[data-module="journey"] .hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body[data-module="journey"] .hamburger.open span:nth-child(2) { opacity: 0; }
body[data-module="journey"] .hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

body[data-module="journey"] .sidebar {
  position: fixed; top: 0; left: 0;
  width: 280px; height: 100vh;
  background: rgba(6, 8, 16, .97);
  border-right: 1px solid var(--border, rgba(212,170,80,.16));
  display: flex; flex-direction: column;
  z-index: 200;
  direction: ltr !important;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
html.sw-light body[data-module="journey"] .sidebar {
  background: rgba(248, 243, 232, .97);
  border-right-color: rgba(180, 140, 40, .3);
}
body[data-module="journey"] .sidebar-logo {
  padding: 22px 18px 16px;
  border-bottom: 1px solid var(--border, rgba(212,170,80,.16));
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
}
body[data-module="journey"] .sidebar-lanterne {
  width: 42px; height: 42px; object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(30,138,90,.4));
}
body[data-module="journey"] .sidebar-logo-text { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: .12em; }
body[data-module="journey"] .sidebar-logo-text .s1 { color: var(--cream); }
body[data-module="journey"] .sidebar-logo-text .s2 { color: var(--gold); }
body[data-module="journey"] .sidebar-nav {
  flex: 1; overflow-y: auto; padding: 12px 0;
  scrollbar-width: thin; scrollbar-color: var(--gold-d) transparent;
}
body[data-module="journey"] .nav-section-label,
body[data-module="journey"] .nav-section-link {
  font-family: var(--font-display); font-size: .78rem; letter-spacing: .18em;
  color: var(--gold-d); text-transform: uppercase;
  padding: 12px 18px 5px; opacity: .75; display: block; text-decoration: none;
}
body[data-module="journey"] .nav-link {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 18px; font-family: var(--font-body); font-size: 1.14rem;
  color: var(--cream2); text-decoration: none; transition: all .2s;
  border-left: 2px solid transparent;
}
body[data-module="journey"] .nav-link:hover,
body[data-module="journey"] .nav-link.active {
  color: var(--module-color); border-left-color: var(--module-color);
  background: rgba(var(--module-color-rgb), .1);
}
body[data-module="journey"] .nav-link .badge {
  margin-left: auto; font-size: .68rem; background: var(--module-color);
  color: #fff; padding: 2px 5px; border-radius: 6px; font-family: var(--font-display);
}
body[data-module="journey"] .sidebar-lang {
  padding: 14px 18px; border-top: 1px solid var(--border, rgba(212,170,80,.16));
  display: flex; gap: 6px;
}
body[data-module="journey"] .lang-btn {
  flex: 1; padding: 6px 4px; border: 1px solid var(--border, rgba(212,170,80,.16));
  background: transparent; color: var(--cream2); border-radius: 4px; cursor: pointer;
  font-family: var(--font-display); font-size: .82rem; transition: all .2s;
}
body[data-module="journey"] .lang-btn.active,
body[data-module="journey"] .lang-btn:hover {
  background: var(--gold); color: var(--black); border-color: var(--gold);
}

body[data-module="journey"] .sw-page { margin-left: 280px; }

/* ─── Blocs de contenu (verset / hadith / invocation) ────────────
   Même vocabulaire visuel que khutbah/*.html (verset-block,
   hadith-block) pour rester cohérent visuellement site-wide, ici
   centralisé une seule fois plutôt que redupliqué à chaque page. */
body[data-module="journey"] .section {
  max-width: 800px;
  padding: 0 64px;
  margin: 0 auto var(--space-8, 2rem);
}
body[data-module="journey"] .hero { padding: 56px 64px 30px; max-width: 800px; margin: 0 auto; }
body[data-module="journey"] .category-pill {
  display: inline-block; font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--module-color);
  background: rgba(var(--module-color-rgb), .12); border: 1px solid rgba(var(--module-color-rgb), .3);
  padding: 4px 12px; border-radius: 20px; margin-bottom: 14px;
}
body[data-module="journey"] .meta-item { font-size: .95rem; color: var(--cream3, #B8AFA0); margin: 10px 0 14px; }
body[data-module="journey"] .kb-label,
body[data-module="journey"] .tamul-label {
  font-family: var(--font-display); font-size: .78rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gold-d); margin-bottom: 10px;
}
body[data-module="journey"] .verset-block {
  background: rgba(var(--module-color-rgb), .06); border: 1px solid rgba(var(--module-color-rgb), .2);
  border-radius: 12px; padding: 22px 26px;
}
body[data-module="journey"] .hadith-block {
  background: rgba(212,170,80,.04); border-left: 3px solid var(--gold);
  padding: 18px 24px; border-radius: 0 10px 10px 0;
}
body[data-module="journey"] .tamul-block {
  background: rgba(var(--module-color-rgb), .04); border: 1px dashed rgba(var(--module-color-rgb), .3);
  border-radius: 12px; padding: 20px 24px;
}
body[data-module="journey"] .verset-ar,
body[data-module="journey"] .hadith-ar-text {
  font-family: var(--font-arabic); direction: rtl; text-align: right;
  color: var(--gold-l, #F0CB6A); margin-bottom: 10px; line-height: 2;
}
body[data-module="journey"] .verset-ref,
body[data-module="journey"] .hadith-ref {
  margin-top: 8px; font-family: var(--font-display); font-size: .75rem;
  color: var(--module-color); letter-spacing: .08em;
}
body[data-module="journey"] .body-text { font-size: 1.05rem; line-height: 1.75; color: var(--cream2); }
body[data-module="journey"] .nextsteps { max-width: 800px; margin: 0 auto var(--space-8, 2rem); padding: 0 64px; }
body[data-module="journey"] .nextstep-card {
  display: block; padding: 16px 22px; border: 1px solid rgba(var(--module-color-rgb), .3);
  border-radius: 10px; text-decoration: none;
}
body[data-module="journey"] .nextstep-card:hover { background: rgba(var(--module-color-rgb), .08); }
body[data-module="journey"] .ns-title { font-family: var(--font-display); font-size: .95rem; color: var(--module-color); }
body[data-module="journey"] .sw-page > .sw-btn { display: block; margin: 0 auto 60px; max-width: 800px; }
body[data-module="journey"] #sw-journey-mark-status {
  max-width: 800px; margin: 0 auto 16px; padding: 0 64px;
  font-size: .92rem; color: var(--module-color); text-align: center;
}

@media (max-width: 900px) {
  body[data-module="journey"] .mobile-nav { display: flex; }
  body[data-module="journey"] .sidebar { transform: translateX(-100%); }
  body[data-module="journey"] .sidebar.open { transform: translateX(0); }
  body[data-module="journey"] .sw-page { margin-left: 0; padding-top: 56px; }
  body[data-module="journey"] .hero,
  body[data-module="journey"] .section,
  body[data-module="journey"] .nextsteps {
    padding-left: 24px; padding-right: 24px;
  }
}

/* ─── Navigation Jour précédent / Jour suivant (bas de chaque jour) ── */
body[data-module="journey"] .day-nav {
  max-width: 800px; margin: 0 auto 60px; padding: 0 64px;
  display: flex; justify-content: space-between; gap: 16px;
}
body[data-module="journey"] .day-nav-link {
  font-family: var(--font-display); font-size: .85rem; letter-spacing: .05em;
  color: var(--module-color); text-decoration: none; padding: 8px 4px;
}
body[data-module="journey"] .day-nav-link:hover { text-decoration: underline; }
body[data-module="journey"] .day-nav-disabled { color: var(--cream3, #B8AFA0); opacity: .5; cursor: default; }
@media (max-width: 900px) { body[data-module="journey"] .day-nav { padding-left: 24px; padding-right: 24px; } }

/* ═══════════════════════════════════════════════════════════════
   MODE JOUR (html.sw-light) — corrections spécifiques au module
   Bug corrigé : plusieurs textes du module utilisaient encore
   var(--cream)/var(--cream2)/var(--cream3) (tons clairs pensés pour
   un fond sombre) sans variante Mode Jour, alors que "Jour" est le
   thème PAR DÉFAUT pour tout nouveau visiteur (voir sw-theme.js).
   Résultat rapporté : texte quasi invisible / page qui semble
   "d'une seule couleur" en mode clair. sw-theme.css couvre déjà
   beaucoup de classes génériques (*-block, *-card, *-ar, *-text,
   *-ref, h1/h2/h3…) site-wide ; ce qui suit couvre ce qui restait
   spécifique aux pages du module Voyage 365 Jours.
   ═══════════════════════════════════════════════════════════════ */
html.sw-light body[data-module="journey"] .jr-title,
html.sw-light body[data-module="journey"] .jr-card-title,
html.sw-light body[data-module="journey"] .pc-title,
html.sw-light body[data-module="journey"] .pc-section-title,
html.sw-light body[data-module="journey"] [style*="color:var(--cream)"],
html.sw-light body[data-module="journey"] [style*="color: var(--cream)"] {
  color: #1e1a14 !important;
}
html.sw-light body[data-module="journey"] .jr-tagline,
html.sw-light body[data-module="journey"] .pc-anon-notice {
  color: #3e3325 !important;
}
html.sw-light body[data-module="journey"] .jr-status,
html.sw-light body[data-module="journey"] .jr-card-theme,
html.sw-light body[data-module="journey"] .jr-empty,
html.sw-light body[data-module="journey"] .footer-links a,
html.sw-light body[data-module="journey"] .pc-stat-label,
html.sw-light body[data-module="journey"] .pc-empty,
html.sw-light body[data-module="journey"] .pc-badges-note,
html.sw-light body[data-module="journey"] .meta-item,
html.sw-light body[data-module="journey"] [style*="color:var(--cream3)"],
html.sw-light body[data-module="journey"] [style*="color: var(--cream3)"] {
  color: #6a5538 !important;
}
html.sw-light body[data-module="journey"] .footer,
html.sw-light body[data-module="journey"] .jr-card,
html.sw-light body[data-module="journey"] .pc-stat {
  background: rgba(255,255,255,.65) !important;
  border-color: #c9bfa5 !important;
}
html.sw-light body[data-module="journey"] .day-nav-disabled { color: #8a7d60 !important; }
html.sw-light body[data-module="journey"] .sw-journey-progress { background: rgba(0,0,0,.08) !important; }