/* ============================================================
   accueil-islamique.css — À placer dans css/
   ============================================================ */

/* ── 1. FOND DE LA PAGE ─────────────────────────────────── */
#page-accueil {
  position: relative;
  background: #F7F5F0;
  overflow-x: hidden;
}
#page-accueil::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%232D5F4F' stroke-width='0.8'%3E%3Cpolygon points='60,8 72,40 104,40 78,58 90,90 60,70 30,90 42,58 16,40 48,40'/%3E%3Ccircle cx='60' cy='60' r='50'/%3E%3Ccircle cx='60' cy='60' r='30'/%3E%3Cline x1='10' y1='60' x2='110' y2='60'/%3E%3Cline x1='60' y1='10' x2='60' y2='110'/%3E%3Cline x1='25' y1='25' x2='95' y2='95'/%3E%3Cline x1='95' y1='25' x2='25' y2='95'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
}
#page-accueil .bg-glow-orb {
  position: fixed; border-radius: 50%;
  pointer-events: none; z-index: 0;
  animation: orbFloatAI 14s ease-in-out infinite;
}
#page-accueil .bg-glow-orb-1 {
  width:600px; height:600px; top:-200px; right:-150px;
  background: radial-gradient(circle, rgba(45,95,79,0.06) 0%, transparent 70%);
}
#page-accueil .bg-glow-orb-2 {
  width:500px; height:500px; bottom:-100px; left:-100px;
  background: radial-gradient(circle, rgba(201,166,97,0.05) 0%, transparent 70%);
  animation-delay: -7s;
}
@keyframes orbFloatAI {
  0%,100%{ transform:translate(0,0) scale(1); }
  50%    { transform:translate(-15px,20px) scale(1.04); }
}
#page-accueil > * { position: relative; z-index: 1; }

/* ── 2. ORNEMENTS SUR LA CARTE HÉRO ────────────────────── */
.hero-welcome-new { position: relative; }
.hero-welcome-new::before {
  content: '';
  position: absolute; top:0; left:15%; right:15%; height:2.5px;
  background: linear-gradient(to right, transparent, #C9A661, transparent);
  opacity: 0.65; border-radius: 0 0 4px 4px; pointer-events: none;
}
.hero-welcome-new::after {
  content: '✦';
  position: absolute; bottom:1.2rem; right:1.5rem;
  font-size:2.8rem; color:rgba(45,95,79,0.04);
  font-family:'Amiri',serif; line-height:1; pointer-events:none;
}

/* ── 3. BANDEAU BIENVENUE ───────────────────────────────── */
.hwn-top-new {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.2rem; padding:0.7rem 1rem;
  background: linear-gradient(135deg, rgba(45,95,79,0.06), rgba(201,166,97,0.05));
  border-radius:12px; border:1px solid rgba(45,95,79,0.1);
  animation: fadeDownAI 0.6s ease both;
}
@keyframes fadeDownAI {
  from{ opacity:0; transform:translateY(-8px); }
  to  { opacity:1; transform:none; }
}
.hwn-top-left { display:flex; align-items:center; gap:0.75rem; }
.hwn-live-dot {
  width:7px; height:7px; border-radius:50%; background:#10B981; flex-shrink:0;
  animation: livePulseAI 2s infinite;
}
@keyframes livePulseAI {
  0%,100%{ box-shadow:0 0 0 0 rgba(16,185,129,0.4); }
  50%    { box-shadow:0 0 0 5px rgba(16,185,129,0); }
}
.hwn-greeting  { font-size:0.74rem; color:#6B7280; }
.hwn-user-name { font-size:0.9rem; font-weight:800; color:#1A1A2E; }
.hwn-level-pill {
  font-size:0.68rem; font-weight:700; color:#C9A661;
  background:rgba(201,166,97,0.1); padding:0.25rem 0.75rem;
  border-radius:50px; border:1px solid rgba(201,166,97,0.22);
}

/* ── 4. BISMILLAH ───────────────────────────────────────── */
.hero-basmala-new {
  text-shadow: 0 2px 14px rgba(45,95,79,0.15) !important;
  letter-spacing: 0.5px;
}

/* ── 5. WIDGET LUNE + CALENDRIER HIJRI ─────────────────── */
.moon-hijri-widget {
  background:white; border-radius:22px;
  border:1.5px solid rgba(45,95,79,0.1);
  padding:1.5rem; position:relative; overflow:hidden;
  box-shadow:0 4px 24px rgba(45,95,79,0.07);
  margin-bottom:0.75rem;
}
.moon-hijri-widget::before {
  content:''; position:absolute; top:0; left:15%; right:15%; height:2px;
  background:linear-gradient(to right,transparent,#C9A661,transparent);
  opacity:0.5;
}
.mhw-glow {
  position:absolute; top:-40px; right:-40px; width:180px; height:180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(201,166,97,0.08),transparent 70%);
  pointer-events:none; animation:orbFloatAI 8s ease-in-out infinite;
}
.mhw-top {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.1rem; position:relative;
}
.mhw-label {
  font-size:0.6rem; font-weight:800; color:#9CA3AF;
  text-transform:uppercase; letter-spacing:2px;
}
.mhw-pill {
  font-size:0.68rem; font-weight:700; padding:0.18rem 0.7rem;
  background:rgba(201,166,97,0.1); border:1px solid rgba(201,166,97,0.22);
  border-radius:50px; color:#C9A661;
}
.mhw-main {
  display:flex; align-items:center; gap:1.2rem;
  margin-bottom:1.2rem; position:relative;
}
.mhw-moon { position:relative; width:76px; height:76px; flex-shrink:0; }
.mhw-moon-sphere {
  width:76px; height:76px; border-radius:50%;
  background:radial-gradient(circle at 38% 35%,#F0E4C0 0%,#D4A843 35%,#8B6010 70%,#5A3D0A 100%);
  box-shadow:0 0 28px rgba(201,166,97,0.22),inset -10px -10px 18px rgba(0,0,0,0.18),inset 4px 4px 8px rgba(255,255,255,0.1);
  animation:moonFloatAI 7s ease-in-out infinite;
  position:relative; overflow:hidden;
}
@keyframes moonFloatAI {
  0%,100%{ transform:translateY(0) rotate(-2deg); }
  50%    { transform:translateY(-7px) rotate(2deg); }
}
.mhw-crater { position:absolute; border-radius:50%; background:rgba(0,0,0,0.12); }
.mhw-crater:nth-child(1){ width:11px;height:11px;top:14px;left:17px; }
.mhw-crater:nth-child(2){ width:7px; height:7px; top:40px;left:46px; }
.mhw-crater:nth-child(3){ width:5px; height:5px; top:25px;left:54px; }
.mhw-moon-shine {
  position:absolute; top:6px; left:9px; width:15px; height:20px;
  border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,0.1),transparent);
  transform:rotate(-30deg);
}
.mhw-moon-star {
  position:absolute; top:-4px; right:-4px; font-size:0.95rem; color:#C9A661;
  animation:starGlowAI 4s ease-in-out infinite;
  text-shadow:0 0 7px rgba(201,166,97,0.7);
}
@keyframes starGlowAI {
  0%,100%{ opacity:0.5; transform:scale(0.9) rotate(0deg); }
  50%    { opacity:1;   transform:scale(1.15) rotate(20deg); }
}
.mhw-day {
  font-size:1.9rem; font-weight:800; color:#1A1A2E; line-height:1;
  font-family:'Cormorant Garamond',serif;
}
.mhw-month-ar {
  font-family:'Amiri',serif; font-size:1.15rem; color:#C9A661;
  direction:rtl; margin:0.1rem 0; text-shadow:0 0 10px rgba(201,166,97,0.2);
}
.mhw-month-fr { font-size:0.72rem; color:#6B7280; font-weight:500; }
.mhw-year     { font-size:0.65rem; color:#9CA3AF; margin-top:0.15rem; }
.mhw-phase    { margin-bottom:0.9rem; }
.mhw-phase-label {
  font-size:0.58rem; font-weight:700; color:#9CA3AF;
  text-transform:uppercase; letter-spacing:1.5px; margin-bottom:0.45rem;
}
.mhw-phase-track {
  height:4px; background:rgba(45,95,79,0.08);
  border-radius:50px; overflow:hidden; margin-bottom:0.4rem;
}
.mhw-phase-fill {
  height:100%; width:58%;
  background:linear-gradient(to right,rgba(201,166,97,0.4),#C9A661);
  border-radius:50px; position:relative;
}
.mhw-phase-fill::after {
  content:''; position:absolute; right:-1px; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%; background:#C9A661;
  box-shadow:0 0 6px rgba(201,166,97,0.7);
}
.mhw-phase-icons { display:flex; justify-content:space-between; }
.mhw-pi { font-size:0.82rem; opacity:0.25; transition:all 0.3s; }
.mhw-pi.now { opacity:1; filter:drop-shadow(0 0 4px rgba(201,166,97,0.6)); transform:scale(1.2); }
.mhw-event {
  display:flex; align-items:center; gap:0.55rem; padding:0.6rem 0.85rem;
  background:rgba(201,166,97,0.06); border:1px solid rgba(201,166,97,0.16);
  border-radius:10px;
}
.mhw-event-dot {
  width:6px; height:6px; border-radius:50%; background:#C9A661; flex-shrink:0;
  animation:livePulseAI 2s infinite;
}
.mhw-event-text { font-size:0.7rem; color:#6B7280; }
.mhw-event-text strong { color:#C9A661; font-weight:700; }

/* ── 6. INVOCATION DU JOUR ──────────────────────────────── */
.dua-day-strip {
  position:relative; background:white;
  border:1.5px solid rgba(201,166,97,0.18); border-radius:18px;
  padding:1.1rem 1.5rem; display:flex; align-items:center; gap:1.4rem;
  cursor:pointer; transition:all 0.3s;
  box-shadow:0 4px 18px rgba(201,166,97,0.06);
  margin-bottom:1.5rem; overflow:hidden;
}
.dua-day-strip:hover {
  border-color:rgba(201,166,97,0.4);
  box-shadow:0 8px 28px rgba(201,166,97,0.12);
  transform:translateY(-2px);
}
.dua-day-strip::before {
  content:'﷽'; position:absolute; right:1.5rem; top:50%; transform:translateY(-50%);
  font-family:'Amiri',serif; font-size:3.2rem;
  color:rgba(201,166,97,0.055); pointer-events:none;
}
.dua-day-icon {
  width:48px; height:48px; flex-shrink:0; border-radius:50%;
  background:rgba(45,95,79,0.06); border:1.5px solid rgba(45,95,79,0.1);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
}
.dua-day-body { flex:1; }
.dua-day-tag {
  font-size:0.6rem; font-weight:800; color:#C9A661;
  text-transform:uppercase; letter-spacing:2px; margin-bottom:0.28rem;
}
.dua-day-arabic { font-family:'Amiri',serif; font-size:1.15rem; color:#1A1A2E; direction:rtl; margin-bottom:0.22rem; }
.dua-day-fr    { font-size:0.78rem; color:#6B7280; font-style:italic; line-height:1.5; }
.dua-day-ref   { color:rgba(201,166,97,0.75); }
.dua-day-arrow { font-size:1rem; color:rgba(201,166,97,0.4); flex-shrink:0; transition:all 0.25s; }
.dua-day-strip:hover .dua-day-arrow { color:#C9A661; transform:translateX(4px); }

/* ── 7. SÉPARATEURS ORNÉS ───────────────────────────────── */
.shn-ornate { display:none; } /* masque les anciens si besoin */
.ornate-section-head {
  display:flex; align-items:center; gap:0.9rem; margin:2rem 0 1.2rem;
}
.osh-line {
  flex:1; height:1px;
  background:linear-gradient(to right,transparent,rgba(45,95,79,0.18),transparent);
}
.osh-content {
  display:flex; align-items:center; gap:0.45rem;
  font-size:0.64rem; font-weight:800; color:#2D5F4F;
  text-transform:uppercase; letter-spacing:2.5px; white-space:nowrap;
}
.osh-star { color:#C9A661; font-size:0.68rem; }

/* ── 8. AMÉLIORATION DES CARTES ACCÈS RAPIDE ──────────── */
.qan-card { transition:all 0.35s cubic-bezier(0.4,0,0.2,1) !important; position:relative; overflow:hidden; }
.qan-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2.5px;
  background:linear-gradient(to right,#2D5F4F,#C9A661);
  transform:scaleX(0); transform-origin:left; transition:transform 0.4s ease; opacity:0.7;
}
.qan-card:hover { transform:translateY(-7px) !important; box-shadow:0 16px 38px rgba(45,95,79,0.12) !important; }
.qan-card:hover::after { transform:scaleX(1); }

/* ── 9. ORNEMENTS COIN ──────────────────────────────────── */
.accueil-corner-ornament {
  position:fixed; pointer-events:none; z-index:0;
  font-family:'Amiri',serif; color:rgba(45,95,79,0.04);
  font-size:7rem; line-height:1; user-select:none;
}
/* Correction : #page-accueil > * { position:relative } a spécificité (0,1,0,0)=100
   supérieure à .accueil-corner-ornament (0,0,1,0)=10, ce qui force position:relative
   et crée un espace invisible avant le hero-grid. On rétablit fixed avec 110. */
#page-accueil .accueil-corner-ornament { position: fixed; }
.aco-tl { top:80px;   left:18px;  transform:rotate(-12deg); }
.aco-br { bottom:40px; right:16px; transform:rotate(12deg); }

/* ── 10. ANIMATIONS D'ENTRÉE ────────────────────────────── */
@keyframes pageBlockIn {
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}
#page-accueil .hero-new-grid        { animation:pageBlockIn 0.7s ease both; }
#page-accueil .dua-day-strip        { animation:pageBlockIn 0.7s ease 0.1s both; }
#page-accueil .verse-new-section    { animation:pageBlockIn 0.7s ease 0.15s both; }
#page-accueil .quick-access-new     { animation:pageBlockIn 0.7s ease 0.2s both; }
#page-accueil .tahara-spotlight-section { animation:pageBlockIn 0.7s ease 0.25s both; }
#page-accueil .salah-spotlight-section  { animation:pageBlockIn 0.7s ease 0.3s both; }
#page-accueil .arabic-compact-new       { animation:pageBlockIn 0.7s ease 0.35s both; }

/* ── 11. MODE SOMBRE ────────────────────────────────────── */
[data-theme="dark"] #page-accueil { background:#111827; }
[data-theme="dark"] #page-accueil::before { opacity:0.012; }
[data-theme="dark"] .moon-hijri-widget,
[data-theme="dark"] .dua-day-strip { background:var(--surface); border-color:rgba(201,166,97,0.12); }
[data-theme="dark"] .hwn-top-new   { background:rgba(201,166,97,0.06); border-color:rgba(201,166,97,0.12); }