/* ============================================================
   99 Noms — multi-page
   ============================================================ */
.nd {
  background: radial-gradient(120% 70% at 50% -10%, #FFFDF8 0%, var(--paper) 55%, var(--paper-warm) 100%);
  min-height: 100vh;
}

/* hub */
.nd-hub-intro {
  max-width: 38rem; margin: 0 auto;
  padding: clamp(2rem, 7vh, 4rem) var(--space-lg) var(--space-md);
  text-align: center;
}
.nd-hub-intro__ar {
  font-family: var(--font-arabic);
  font-size: clamp(2.4rem, 8vw, 3.5rem);
  color: var(--gold);
  line-height: 1.4;
  margin-bottom: 0.4rem;
}
.nd-hub-intro h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 6vw, 2.9rem);
  color: var(--ink-title);
  margin-bottom: var(--space-xs);
}
.nd-hub-intro__sub {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  color: var(--ink-soft);
  margin: 0 0 var(--space-md);
}
.nd-hub-intro__sub em { color: var(--gold); }
.nd-seuil {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 32rem;
  margin: var(--space-md) auto 0;
  opacity: 0.94;
}

/* doors */
.nd-hub-doors { max-width: 56rem; margin: 0 auto; padding: var(--space-xl) var(--space-lg); }
.nd-doors-grid {
  display: grid; gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.nd-door {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--space-lg) var(--space-md);
  background: linear-gradient(170deg, #FFFDF8, var(--paper-deep));
  border: 1px solid var(--gold-soft); border-radius: 18px;
  text-decoration: none; color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.nd-door:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 18px 36px -24px rgba(27,42,78,0.5); }
.nd-door__ar { font-family: var(--font-display); font-size: 2.2rem; color: var(--gold); line-height: 1; margin-bottom: 0.5rem; }
.nd-door__title { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink-title); margin-bottom: 0.4rem; }
.nd-door__desc { font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--ink-soft); line-height: 1.5; }

/* notice (al-Kāfījī mention) */
.nd-notice {
  max-width: 36rem; margin: 0 auto;
  padding: var(--space-md) var(--space-lg) var(--space-2xl);
  text-align: center;
}
.nd-notice p {
  font-family: var(--font-display); font-style: italic;
  font-size: 0.96rem; color: var(--ink-mute); line-height: 1.65;
}
.nd-notice a { color: var(--gold); text-decoration: none; border-bottom: 1px dotted var(--gold-soft); }

/* page-nom */
.nd-nom { max-width: 38rem; margin: 0 auto; padding: clamp(1.5rem, 5vh, 3rem) var(--space-lg) var(--space-xl); }
.nd-nom__head { text-align: center; padding-bottom: var(--space-md); border-bottom: 1px solid var(--gold-soft); }
.nd-nom__step { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; }
.nd-nom__ar {
  font-family: var(--font-arabic);
  font-size: clamp(4rem, 14vw, 5.5rem);
  color: var(--gold); line-height: 1.4;
  animation: ndBrushIn 0.9s cubic-bezier(.4,0,.2,1) both;
}
@keyframes ndBrushIn { from { clip-path: inset(0 100% 0 0); opacity: 0.15; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nd-nom__ar { animation: none; } }
.nd-nom__tr { font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--ink-soft); margin-top: 0.1rem; }
.nd-nom__listen {
  margin: var(--space-sm) 0 var(--space-sm);
  font-family: var(--font-sans); font-size: 0.85rem;
  color: var(--paper); background: var(--gold); border: none; border-radius: 999px;
  padding: 0.5rem 1.3rem; cursor: pointer; transition: transform 0.2s, filter 0.2s;
}
.nd-nom__listen:hover { transform: translateY(-2px); filter: brightness(1.05); }
.nd-nom__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 4.5vw, 2.1rem); color: var(--ink-title); margin: var(--space-sm) 0 0.4rem; }
.nd-nom__short { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--ink-soft); margin: 0 auto; max-width: 26rem; line-height: 1.55; }

.nd-nom__layers { padding: var(--space-xl) 0; display: grid; gap: var(--space-lg); }
.nd-layer { padding: var(--space-lg) var(--space-md); background: linear-gradient(170deg, #FFFDF8, var(--paper-deep)); border: 1px solid var(--line); border-radius: 14px; }
.nd-layer__label { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; }
.nd-layer__body { font-family: var(--font-display); font-size: 1.04rem; color: var(--ink-soft); line-height: 1.7; }
.nd-layer__body em { color: var(--gold); font-style: italic; }
.nd-layer--sufi { border-left: 3px solid var(--gold); background: linear-gradient(170deg, #FFFDF4, var(--paper-warm)); }
.nd-layer--part { border-left: 3px solid var(--gold-soft); font-style: italic; }
.nd-layer--part .nd-layer__body { color: var(--ink-title); }

/* prev / hub / next nav */
.nd-step-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-md);
  max-width: 38rem; margin: 0 auto; padding: var(--space-lg) 0;
  border-top: 1px solid var(--gold-soft);
}
.nd-step-nav a { font-family: var(--font-sans); font-size: 0.86rem; color: var(--gold); text-decoration: none; transition: color 0.2s; }
.nd-step-nav a em { color: var(--ink-title); font-style: italic; }
.nd-step-nav a:hover { color: var(--ink-title); }
.nd-step-nav__prev { justify-self: start; }
.nd-step-nav__next { justify-self: end; text-align: right; }
.nd-step-nav__hub { justify-self: center; font-style: italic; color: var(--ink-mute) !important; }
.nd-step-nav__edge { justify-self: stretch; }
@media (max-width: 600px) {
  .nd-step-nav { grid-template-columns: 1fr; text-align: center; gap: 0.6rem; }
  .nd-step-nav__prev, .nd-step-nav__next { justify-self: center; text-align: center; }
}

/* tirage */
.nd-tirage { max-width: 30rem; margin: 0 auto; padding: var(--space-xl) var(--space-lg); text-align: center; }
.nd-tirage__card {
  padding: var(--space-xl) var(--space-lg);
  background: linear-gradient(170deg, #FFFDF8, var(--paper-deep));
  border: 1px solid var(--gold-soft); border-radius: 18px;
  min-height: 18rem;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  animation: ndFadeIn 0.5s ease both;
}
@keyframes ndFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.nd-tirage__loading { font-family: var(--font-display); font-style: italic; color: var(--ink-mute); }
.nd-tirage__step { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; }
.nd-tirage__ar { font-family: var(--font-arabic); font-size: clamp(3.5rem, 12vw, 4.8rem); color: var(--gold); line-height: 1.4; animation: ndBrushIn 0.9s cubic-bezier(.4,0,.2,1) both; }
.nd-tirage__tr { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--ink-soft); }
.nd-tirage__fr { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink-title); margin: 0.4rem 0; }
.nd-tirage__short { font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--ink-soft); max-width: 22rem; line-height: 1.55; }
.nd-tirage__link { display: inline-block; margin-top: var(--space-md); font-family: var(--font-sans); font-size: 0.82rem; color: var(--gold); text-decoration: none; border-bottom: 1px dotted var(--gold-soft); }
.nd-tirage__again {
  margin-top: var(--space-lg);
  font-family: var(--font-sans); font-size: 0.9rem;
  color: var(--paper); background: var(--gold); border: none; border-radius: 999px;
  padding: 0.7rem 1.6rem; cursor: pointer; transition: transform 0.2s, filter 0.2s;
}
.nd-tirage__again:hover { transform: translateY(-2px); filter: brightness(1.05); }
.nd-tirage__hint { font-family: var(--font-display); font-style: italic; font-size: 0.92rem; color: var(--ink-mute); margin-top: var(--space-md); }

/* liste */
.nd-liste { max-width: 60rem; margin: 0 auto; padding: var(--space-xl) var(--space-lg); }
.nd-liste__filter { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: var(--space-lg); }
.nd-fam-btn {
  font-family: var(--font-sans); font-size: 0.84rem;
  background: var(--paper); color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.5rem 1.1rem; cursor: pointer; transition: all 0.2s;
}
.nd-fam-btn:hover { border-color: var(--gold); }
.nd-fam-btn.is-active { background: var(--gold); color: var(--paper); border-color: var(--gold); }
.nd-liste__grid {
  display: grid; gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.nd-liste-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--space-md) var(--space-sm);
  background: linear-gradient(170deg, #FFFDF8, var(--paper-deep));
  border: 1px solid var(--line); border-radius: 14px;
  text-decoration: none; color: inherit;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.nd-liste-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 14px 30px -22px rgba(27,42,78,0.5); }
.nd-liste-card__n { font-family: var(--font-sans); font-size: 0.7rem; color: var(--ink-mute); letter-spacing: 0.06em; }
.nd-liste-card__ar { font-family: var(--font-arabic); font-size: 2.2rem; color: var(--gold); line-height: 1.4; }
.nd-liste-card__tr { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--ink-soft); }
.nd-liste-card__fr { font-family: var(--font-display); font-size: 0.92rem; color: var(--ink-title); margin-top: 0.2rem; }
.nd-liste-card.is-hidden { display: none; }

/* al-Kāfījī */
.nd-kafiji { max-width: 38rem; margin: 0 auto; padding: var(--space-xl) var(--space-lg); text-align: center; }
.nd-kafiji__line { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink-soft); margin: 0.4rem 0; }
.nd-kafiji__notice { font-family: var(--font-display); font-size: 1.04rem; color: var(--ink-soft); line-height: 1.7; margin-top: var(--space-lg); text-align: left; }
.nd-kafiji__notice em { color: var(--gold); }