/* ============================================================
   Kabbalah Landing V3 — Aurora UI
   Source : docs/plans/2026-05-18-v3-design-aurora-editorial.md
   Reference Framer : docs/plans/notes/2026-05-18-framer-mockup-reference.md
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  --aurora-deep: #0a0420;
  --aurora-mid: #2d1b69;
  --aurora-gold: #d4a017;
  --aurora-gold-dim: #b8870e;
  --aurora-cyan: #4dd4d4;
  --aurora-white: #ffffff;
  --aurora-white-muted: rgba(255, 255, 255, 0.65);
  --aurora-white-faint: rgba(255, 255, 255, 0.45);
  --glass-surface: rgba(255, 255, 255, 0.06);
  --glass-surface-strong: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.12);

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-pill: 100px;
  --radius-card: 20px;
  --radius-card-lg: 24px;
  --container-max: 1200px;
  --container-pad: 80px;

  --shadow-glass: 0 8px 32px rgba(10, 4, 32, 0.4);
  --shadow-cta: 0 4px 24px rgba(212, 160, 23, 0.35);
}

/* ---------- Reset minimal ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--aurora-white);
  background: var(--aurora-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }

::selection { background: var(--aurora-gold); color: var(--aurora-deep); }

/* ---------- Aurora background ---------- */
.aurora-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--aurora-deep);
  overflow: hidden;
}
.aurora-bg::before,
.aurora-bg::after,
.aurora-bg > .blob {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}
.aurora-bg::before {
  top: -30vh;
  right: -10vw;
  width: 70vw;
  height: 70vw;
  background: var(--aurora-mid);
  opacity: 0.55;
  animation: auroraDriftA 60s ease-in-out infinite;
}
.aurora-bg::after {
  bottom: -20vh;
  left: -10vw;
  width: 60vw;
  height: 60vw;
  background: var(--aurora-gold);
  opacity: 0.08;
  animation: auroraDriftB 80s ease-in-out infinite;
}
.aurora-bg > .blob {
  top: 30vh;
  left: 40vw;
  width: 30vw;
  height: 30vw;
  background: var(--aurora-cyan);
  opacity: 0.05;
  animation: auroraDriftC 90s ease-in-out infinite;
}
@keyframes auroraDriftA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-12vw, 8vh) scale(1.15); }
}
@keyframes auroraDriftB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(10vw, -10vh) scale(1.10); }
}
@keyframes auroraDriftC {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-8vw, 12vh); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-bg::before, .aurora-bg::after, .aurora-bg > .blob { animation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Typography ---------- */
.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aurora-white-muted);
  line-height: 1.4;
}
.eyebrow--md { font-size: 12px; letter-spacing: 0.12em; }
.eyebrow--gold { color: var(--aurora-gold); }

.display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--aurora-white);
  text-wrap: balance;
}
.display--xl { font-size: clamp(40px, 7vw, 88px); }
.display--lg { font-size: clamp(36px, 5.5vw, 64px); }
.display--md { font-size: clamp(28px, 4vw, 40px); }
.display--gold { color: var(--aurora-gold); font-weight: 600; }

.subline {
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--aurora-white-muted);
}

.caption {
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--aurora-white-muted);
}

.logo-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: var(--aurora-white);
}

/* ---------- Layout primitives ---------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.section {
  padding: 80px 0;
  position: relative;
}
.section--lg  { padding: 120px 0; }
.section--sm  { padding: 56px 0; }

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  margin-bottom: 48px;
}
.section-head .subline { max-width: 600px; }

/* ---------- Glass primitive ---------- */
.glass {
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.glass--lg { border-radius: var(--radius-card-lg); }
.glass--gold {
  background: rgba(212, 160, 23, 0.10);
  border-color: var(--aurora-gold);
}

/* ---------- Top bar ---------- */
.topbar {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px var(--container-pad);
}
.topbar__lang {
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.topbar__lang a { color: var(--aurora-white-muted); transition: color 200ms ease; }
.topbar__lang a:hover { color: var(--aurora-white); }
.topbar__lang a.active { color: var(--aurora-gold); font-weight: 600; }

/* ---------- Section 1 : Hero ---------- */
.hero {
  min-height: calc(100vh - 96px);
  display: flex;
  align-items: center;
  padding: 40px var(--container-pad) 80px;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 80px;
  align-items: center;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}
.hero__left { display: flex; flex-direction: column; gap: 28px; max-width: 640px; }
.hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aurora-white-muted);
  width: fit-content;
}
.hero__cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* CTA primary */
.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 17px 32px;
  background: var(--aurora-gold);
  color: var(--aurora-deep);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-cta);
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), background 200ms ease;
}
.cta-primary:hover { transform: translateY(-1px); background: #e6b224; }
.cta-primary:active { transform: scale(0.98); }
.cta-primary:focus-visible { outline: 2px solid var(--aurora-cyan); outline-offset: 3px; }

.cta-secondary {
  display: inline-flex;
  align-items: center;
  padding: 13px 26px;
  border: 1px solid var(--aurora-gold);
  color: var(--aurora-gold);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  transition: background 200ms ease, color 200ms ease;
}
.cta-secondary:hover { background: var(--aurora-gold); color: var(--aurora-deep); }
.cta-secondary:focus-visible { outline: 2px solid var(--aurora-cyan); outline-offset: 3px; }

/* Hero demo card */
.demo-card {
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 460px;
  justify-content: space-between;
}
.demo-card__circle {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: rgba(212, 160, 23, 0.18);
  border: 2px solid var(--aurora-gold);
  box-shadow: 0 0 40px rgba(212, 160, 23, 0.3);
}
.demo-card__stats { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.demo-card__stats .caption { text-align: center; }

/* ---------- Section 2 : Bandeau tradition ---------- */
.bandeau {
  padding: 56px var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.bandeau__sources {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  color: var(--aurora-white-muted);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.bandeau__divider {
  width: 60px;
  height: 1px;
  background: var(--aurora-gold);
  opacity: 0.4;
}

/* ---------- Section 3 : Méthodologie ---------- */
.methodo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.methodo-card {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.methodo-card .display--md { color: var(--aurora-gold); }

/* ---------- Section 4 : Démo arbre ---------- */
.demo-section__grid {
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 64px;
  align-items: center;
}
.tree-wrapper {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tree-svg {
  width: 100%;
  height: auto;
  max-width: 400px;
  aspect-ratio: 2 / 3;
}
.tree-svg .sephirah { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.6); stroke-width: 1; transition: fill 300ms ease; }
.tree-svg .sephirah:hover { fill: rgba(255, 255, 255, 0.14); cursor: help; }
.tree-svg .sephirah--dominant { fill: rgba(212, 160, 23, 0.22); stroke: var(--aurora-gold); stroke-width: 2; }
.tree-svg .path-line { stroke: rgba(212, 160, 23, 0.3); stroke-width: 1; fill: none; }
.tree-svg .path-line--central { stroke: rgba(212, 160, 23, 0.8); stroke-width: 2; }
.tree-svg text { font-family: var(--font-display); font-size: 11px; text-anchor: middle; fill: var(--aurora-white-muted); }
.tree-svg text.label--dominant { font-size: 14px; font-style: italic; fill: var(--aurora-gold); }

.demo-text { display: flex; flex-direction: column; gap: 24px; }
.demo-text__divider { width: 100%; height: 1px; background: var(--glass-border); }
.demo-text__list { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Section 5 : Tarification ---------- */
.tarif-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.tarif-card {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.tarif-card__price { color: var(--aurora-gold); }
.tarif-card__divider { width: 100%; height: 1px; background: var(--glass-border); margin: 4px 0; }
.tarif-card__feature { font-size: 13px; line-height: 1.5; color: var(--aurora-white-muted); }
.tarif-card__badge {
  position: absolute;
  top: -12px;
  left: 28px;
  background: var(--aurora-gold);
  color: var(--aurora-deep);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tarif-card__cta {
  margin-top: auto;
  padding-top: 14px;
}

/* ---------- Section 6 : Témoignages ---------- */
.temoignages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.stat-card {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------- Section 7 : FAQ accordion ---------- */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item { padding: 0; overflow: hidden; }
.faq-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 28px;
  text-align: left;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 20px;
  color: var(--aurora-white);
  transition: color 200ms ease;
}
.faq-trigger:hover { color: var(--aurora-gold); }
.faq-trigger:focus-visible { outline: 2px solid var(--aurora-cyan); outline-offset: -2px; }
.faq-trigger__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-left: 16px;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item.is-open .faq-trigger__icon { transform: rotate(45deg); }
.faq-trigger__icon::before,
.faq-trigger__icon::after {
  content: "";
  position: absolute;
  background: var(--aurora-gold);
}
.faq-trigger__icon { position: relative; display: inline-block; }
.faq-trigger__icon::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq-trigger__icon::after  { top: 0; left: 8px; width: 2px; height: 18px; }

.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 350ms cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item.is-open .faq-body { max-height: 600px; }
.faq-body__inner {
  padding: 0 28px 24px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--aurora-white-muted);
}

/* ---------- Section 8 : CTA final ---------- */
.cta-final {
  padding: 100px var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.cta-final .subline { max-width: 540px; }

/* ---------- Section 9 : Footer ---------- */
.footer {
  border-top: 1px solid var(--glass-border);
  padding: 60px var(--container-pad) 32px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer__col h4 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aurora-white);
  margin-bottom: 16px;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__col li a { font-size: 14px; color: var(--aurora-white-muted); transition: color 200ms ease; }
.footer__col li a:hover { color: var(--aurora-gold); }
.footer__brand { display: flex; flex-direction: column; gap: 14px; }
.footer__brand .subline { font-size: 14px; max-width: 280px; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid var(--glass-border);
  font-size: 12px;
  color: var(--aurora-white-faint);
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal[data-delay="100"] { transition-delay: 100ms; }
.reveal[data-delay="200"] { transition-delay: 200ms; }
.reveal[data-delay="300"] { transition-delay: 300ms; }

/* ---------- Mobile breakpoints ---------- */
@media (max-width: 1024px) {
  :root { --container-pad: 48px; }
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .hero__demo-card { max-width: 360px; margin: 0 auto; }
  .methodo-grid { grid-template-columns: 1fr; gap: 20px; }
  .demo-section__grid { grid-template-columns: 1fr; gap: 40px; }
  .tarif-grid { grid-template-columns: repeat(2, 1fr); }
  .temoignages-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 640px) {
  :root { --container-pad: 24px; }
  body { font-size: 15px; }

  .topbar { padding: 20px var(--container-pad); }
  .hero { padding: 24px var(--container-pad) 60px; min-height: auto; }
  .hero__left { gap: 24px; }

  /* Mobile h1 : non-italic + smaller per uupm validation */
  .display--xl {
    font-size: clamp(32px, 9vw, 44px);
    font-style: normal;
    font-weight: 600;
  }
  .display--lg { font-size: clamp(30px, 8vw, 38px); font-style: normal; }
  .display--md { font-size: clamp(24px, 6vw, 30px); }

  .section { padding: 60px 0; }
  .section--lg { padding: 80px 0; }
  .section-head { margin-bottom: 32px; }

  .bandeau__sources { gap: 16px 24px; font-size: 12px; }
  .tarif-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: 14px; text-align: center; }

  .cta-primary { padding: 15px 28px; font-size: 15px; }
  .faq-trigger { font-size: 18px; padding: 18px 22px; }
  .faq-body__inner { padding: 0 22px 20px; font-size: 15px; }
}

/* ============================================================
   PAGES DE CONTENU (SSG) — /cours et suivantes
   Ajouté à l'étape 2 du site public indexable.

   Deux couches distinctes :

   A. Le « pont de tokens ». Les fabriques de src/data/content/*.js sont
      écrites pour l'app et posent parfois des couleurs en var(--text-primary),
      var(--gold)… Ici, aucun thème n'est chargé : ces variables seraient vides
      et le texte tomberait sur la couleur héritée. On FIGE donc le thème Nuit
      de src/styles/tokens.css sur ces pages — valeurs copiées, pas importées :
      un site statique n'a pas de bascule Jour/Nuit à suivre.

   B. Les classes de contenu réellement émises (cm-block, rm-source,
      cours-blockquote, letters-grid…) et le gabarit d'article. Le gate
      scripts/gates/test-ssg-pages.mjs échoue si une classe émise n'est pas
      couverte ici — c'est le garde-fou contre la dérive silencieuse le jour
      où l'app renomme une classe.
   ============================================================ */

/* ---------- A. Pont de tokens (thème Nuit figé) ---------- */
:root {
  --bg-card:        #12172e;
  --bg-elevated:    rgba(240, 237, 227, 0.08);
  --text-primary:   #f0ede3;
  --text-secondary: rgba(240, 237, 227, 0.82);
  --text-dim:       rgba(240, 237, 227, 0.60);
  --text-muted:     rgba(240, 237, 227, 0.42);
  --gold:           var(--aurora-gold);
  --gold-bg:        rgba(212, 160, 23, 0.13);
  --gold-border:    rgba(212, 160, 23, 0.40);
  --border:         rgba(240, 237, 227, 0.12);
  --border-light:   rgba(240, 237, 227, 0.06);
  --accent-binah:   #c8a8f0;
  --radius-sm:      10px;
  --fs-xs:          0.75rem;
  --fs-sm:          0.875rem;
}

/* ---------- B1. Gabarit de page ---------- */
/* Le pied de page reste en bas même sur une page courte. */
body.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.page .page__main { flex: 1 0 auto; }
.page__main {
  position: relative;
  z-index: 1;
  padding: 8px var(--container-pad) 0;
}
.page__article {
  max-width: 760px;
  margin: 0 auto;
}
.page__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 8px 0 40px;
}
.page__head .display { text-wrap: balance; }

/* Navigation d'en-tête : les pages de contenu remplacent le sélecteur de
   langue de la landing par une vraie navigation. */
.sitenav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
}
.sitenav__link {
  color: var(--aurora-white-muted);
  letter-spacing: 0.02em;
  transition: color 200ms ease;
}
.sitenav__link:hover { color: var(--aurora-white); }
.sitenav__link.active { color: var(--aurora-gold); font-weight: 600; }
.sitenav__app {
  padding: 8px 18px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--aurora-white-muted);
  transition: border-color 200ms ease, color 200ms ease;
}
.sitenav__app:hover { border-color: var(--aurora-gold); color: var(--aurora-gold); }
.sitenav__link:focus-visible,
.sitenav__app:focus-visible { outline: 2px solid var(--aurora-cyan); outline-offset: 3px; }

/* Fil d'Ariane */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--aurora-white-faint);
  margin-bottom: 24px;
}
.crumbs a { color: var(--aurora-white-muted); transition: color 200ms ease; }
.crumbs a:hover { color: var(--aurora-gold); }
.crumbs__sep { color: var(--aurora-white-faint); }
.crumbs__current { color: var(--aurora-white-muted); }

/* ---------- B2. Corps rédactionnel ---------- */
/* La mesure prime : ~68 caractères par ligne, interlignage large. Le registre
   novice est narratif — il se lit en continu, pas en diagonale. */
.prose {
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-secondary);
}
.prose p { margin: 0 0 1.1em; }
.prose strong { color: var(--text-primary); font-weight: 600; }
.prose em { color: var(--text-primary); font-style: italic; }
.prose a { color: var(--aurora-gold); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--aurora-white); }
.prose h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  color: var(--aurora-white);
  margin: 2em 0 0.7em;
}
.prose h4 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--aurora-gold);
  margin: 1.6em 0 0.5em;
}
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.prose li { margin: 0.3em 0; }

/* Blocs du modèle de contenu (content-model.js). */
.cm-block { margin: 0 0 18px; }
.cm-block:last-child { margin-bottom: 0; }

/* Marqueur de source : VISIBLE ici, contrairement à l'app où le registre
   Novice le masque. Sur le site public, les sources sont l'argument. */
.rm-source { display: block; }

/* Citation sourcée (helper quote() de cours.js). */
.cours-blockquote {
  margin: 1.6em 0;
  padding: 18px 22px;
  border-left: 2px solid var(--accent-binah);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  font-style: italic;
  font-size: 16px;
  line-height: 1.65;
}
.cours-blockquote cite {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.06em;
  color: var(--accent-binah);
}

/* Encadré « Pour aller plus loin » (helper refsBox()). */
.cours-refs-box {
  margin: 1.8em 0 0;
  padding: 18px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.cours-refs-box h3 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-binah);
  margin: 0 0 12px;
}
.cours-refs-box ul { list-style: none; margin: 0; padding: 0; }
.cours-refs-box li {
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
}
.cours-refs-box li:last-child { border-bottom: none; }
.cours-refs-box li::before { content: "\25C6\00a0"; color: var(--accent-binah); font-size: 10px; }

/* Renvoi vers les démos interactives, qui ne vivent que dans l'app. */
.cours-demo-note {
  margin: 1.6em 0;
  padding: 14px 18px;
  border: 1px dashed var(--gold-border);
  border-radius: var(--radius-sm);
  background: var(--gold-bg);
  font-size: 15px;
  color: var(--text-secondary);
}

/* Grille de cartes lettres/concepts (helper cardGrid()). */
.letters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  margin: 1.4em 0;
}
.letter-card {
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.lc-hebrew {
  font-size: 20px;
  color: var(--aurora-gold);
  display: inline-block;
  margin-right: 6px;
  vertical-align: -1px;
}
.lc-name { color: var(--text-primary); font-weight: 600; font-size: 15px; }
.lc-attr { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--text-dim); font-style: italic; }

/* Liste gematria / niveaux d'âme (helper gemList()). */
.gem-list { list-style: none; margin: 1.2em 0; padding: 0; }
.gem-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 15px;
}
.gem-name { color: var(--aurora-gold); font-weight: 600; min-width: 140px; }
.gem-val { color: var(--accent-binah); min-width: 56px; }
.gem-note { color: var(--text-dim); font-style: italic; font-size: 14px; }

/* Grille des Partzoufim (helper partzufGrid()). */
.partzuf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1.4em 0; }
.partzuf-card {
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.partzuf-card h5 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 17px;
  color: var(--accent-binah);
}
.partzuf-card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-dim); }

/* Hébreu inséré au fil du texte (registre kabbaliste et encadrés perso). */
.cours-heb { color: var(--aurora-gold); font-weight: 600; }

/* ---------- B3. « Lecture approfondie » (registre disciple) ---------- */
/* <details> natif : aucun JavaScript, donc rien à autoriser dans la CSP. Le
   contenu replié reste dans le DOM, donc dans l'index. */
.deep {
  margin: 40px 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.03);
}
.deep > summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 20px 26px;
  cursor: pointer;
  list-style: none;
}
.deep > summary::-webkit-details-marker { display: none; }
.deep > summary::before {
  content: "\25B8";
  color: var(--aurora-gold);
  font-size: 14px;
  transition: transform 200ms ease;
  display: inline-block;
}
.deep[open] > summary::before { transform: rotate(90deg); }
.deep > summary:hover h2 { color: var(--aurora-gold); }
.deep > summary:focus-visible { outline: 2px solid var(--aurora-cyan); outline-offset: -2px; }
.deep > summary h2 {
  display: inline;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  color: var(--aurora-white);
  transition: color 200ms ease;
}
.deep__hint { font-size: 13px; color: var(--aurora-white-faint); }
.deep__body { padding: 0 26px 26px; max-width: none; }
.deep__body > .cm-block > :first-child { margin-top: 0; }

/* ---------- B4. Hub : liste des leçons ---------- */
.lecon-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.lecon-card { padding: 0; }
.lecon-card__link {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
  padding: 22px 26px;
  transition: background 200ms ease;
}
.lecon-card__link:hover { background: rgba(255, 255, 255, 0.04); }
.lecon-card__link:focus-visible { outline: 2px solid var(--aurora-cyan); outline-offset: -2px; }
.lecon-card__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 40px;
  line-height: 1;
  color: var(--aurora-gold);
  opacity: 0.8;
}
.lecon-card__body { display: flex; flex-direction: column; gap: 8px; }
.lecon-card__titre {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: var(--aurora-white);
  transition: color 200ms ease;
}
.lecon-card__extrait { font-size: 15px; line-height: 1.6; color: var(--aurora-white-muted); }
.lecon-card__meta {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aurora-white-faint);
}
.lecon-card__link:hover .lecon-card__titre { color: var(--aurora-gold); }

/* ---------- B5. Pagination entre leçons ---------- */
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 48px 0 0;
}
.pager a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  transition: border-color 200ms ease, background 200ms ease;
}
.pager a:hover { border-color: var(--aurora-gold); background: rgba(255, 255, 255, 0.04); }
.pager a:focus-visible { outline: 2px solid var(--aurora-cyan); outline-offset: 2px; }
.pager__prev { text-align: left; }
.pager__next { text-align: right; }
.pager__dir {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aurora-gold);
}
.pager__titre { font-size: 15px; line-height: 1.4; color: var(--aurora-white-muted); }

/* ---------- B6. Bandeau CTA de fin de page ---------- */
.cta-band {
  max-width: 760px;
  margin: 72px auto 96px;
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.cta-band .subline { max-width: 560px; }

/* Mentions non cliquables du pied de page. */
.footer__mention { font-size: 14px; color: var(--aurora-white-muted); }
.footer__bottom a { color: var(--aurora-white-muted); transition: color 200ms ease; }
.footer__bottom a:hover { color: var(--aurora-gold); }

/* ---------- B7. Adaptations mobiles ---------- */
@media (max-width: 900px) {
  .partzuf-grid { grid-template-columns: 1fr; }
  .pager { grid-template-columns: 1fr; }
  .pager__next { text-align: left; }
}

@media (max-width: 640px) {
  .page__main { padding: 0 var(--container-pad); }
  .sitenav { gap: 14px; font-size: 13px; }
  .sitenav__app { padding: 7px 13px; font-size: 12px; }
  .topbar { flex-wrap: wrap; gap: 12px; }

  .prose { font-size: 16px; }
  .prose h3 { font-size: 22px; }
  .cours-blockquote { padding: 14px 16px; font-size: 15px; }
  .cours-refs-box { padding: 16px 18px; }
  .letters-grid { grid-template-columns: 1fr; }

  .deep > summary { padding: 16px 18px; }
  .deep > summary h2 { font-size: 19px; }
  .deep__body { padding: 0 18px 20px; }

  .lecon-card__link { grid-template-columns: 40px 1fr; gap: 14px; padding: 18px; }
  .lecon-card__num { font-size: 30px; }
  .lecon-card__titre { font-size: 19px; }

  .cta-band { padding: 32px 24px; margin: 48px auto 64px; }
}

/* ============================================================
   C. LETTRES, SENTIERS, SEPHIROT (SSG étape 3)

   Deux ajouts distincts :

   C1. Les UTILITAIRES de l'app. Les fabriques de src/data/content/sephirot.js
       posent .u-prose, .u-grid-2, .u-eyebrow, .heb… — classes définies dans
       src/styles/utilities.css et src/styles/base.css, que le site statique ne
       charge pas. Elles sont RECOPIÉES ici, comme le pont de tokens l'a été à
       l'étape 2 : un site statique n'importe pas la feuille de l'app, et le
       gate test-ssg-pages.mjs échouerait au premier oubli.

   C2. Les classes propres aux pages de corpus : en-tête à glyphe, fiche de
       correspondances, maillage vers les pages voisines.
   ============================================================ */

/* ---------- C1. Utilitaires portés depuis src/styles/ ---------- */

/* Frank Ruhl Libre — même déclaration que src/styles/base.css. La police est
   auto-hébergée sous /fonts/ : rien à ajouter à la CSP (font-src 'self'). Le
   unicode-range borne la substitution aux seuls glyphes hébreux. */
@font-face {
  font-family: 'Frank Ruhl Libre';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/frank-ruhl-libre-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

:root {
  --font-hebrew: 'Frank Ruhl Libre', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.5rem;
  --space-2: 8px;
  --space-3: 12px;
  --measure: 65ch;
}

.heb {
  direction: rtl;
  font-family: var(--font-hebrew);
  font-size: 1.1em;
  letter-spacing: 0.05em;
}

.u-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  line-height: 1.4;
}
.u-eyebrow--muted { color: var(--text-muted); }

.u-meta { font-size: var(--fs-xs); color: var(--text-dim); line-height: 1.5; }
.u-meta-sm { font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.5; }
.u-meta-italic { font-size: var(--fs-xs); color: var(--text-muted); font-style: italic; line-height: 1.5; }

.u-prose { max-width: var(--measure); font-size: var(--fs-base); line-height: 1.7; color: var(--text-secondary); }
.u-prose-sm { max-width: var(--measure); font-size: var(--fs-sm); line-height: 1.65; color: var(--text-secondary); }
.u-prose p + p,
.u-prose-sm p + p { margin-top: var(--space-3); }

.u-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
  margin: 1.4em 0;
}

/* Titre de section nécessaire au plan de la page mais redondant à l'écran
   (le <h1> le dit déjà) : lisible par les lecteurs d'écran, invisible. */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Les fabriques rendent leurs paragraphes DANS .cm-block, avec leurs propres
   marges inline ; les intertitres écrits par le générateur ont en revanche
   besoin du niveau h2, absent de l'étape 2 (le cours n'en émettait pas). */
.prose h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.15;
  color: var(--aurora-white);
  margin: 1.9em 0 0.6em;
}
.prose h2:first-child { margin-top: 0; }
.prose blockquote { margin: 1.6em 0; }
.prose dl { margin: 1.4em 0; }

/* Les fabriques posent .glass sur leurs cartes de correspondances. Sur la
   landing, .glass est translucide avec backdrop-filter : posé au-dessus des
   blobs animés de .aurora-bg, il en capte la couleur, et une carte sur deux
   vire au violet vif au milieu d'un paragraphe. Mesuré sur /sephirot/binah.
   Dans le corps rédactionnel, on veut une surface stable, identique à celle
   des fiches — la matière verre reste au chrome (bandeau CTA, cartes de hub). */
.prose .glass {
  background: var(--bg-card);
  border-color: var(--border);
  border-radius: var(--radius-sm);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Les tailles des utilitaires de prose sont calées sur l'app, où ces blocs
   sont des textes SECONDAIRES sous un chrome de vue. Ici ils sont le corps de
   la page : à 12 px (.u-meta) le chapeau se lit comme une mention légale, et à
   14 px (.u-prose-sm) la klipa et la pratique passent pour des notes de bas de
   page alors qu'elles ont le même rang que la description. On les ramène à la
   mesure du corps rédactionnel — et seulement à l'intérieur de .prose. */
.prose .u-meta {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.prose .u-prose { font-size: 17px; line-height: 1.75; }
.prose .u-prose-sm { font-size: 16px; line-height: 1.7; }

/* ---------- C2. En-tête à glyphe ---------- */
/* Le glyphe hébreu EST le sujet de la page (lettre, sentier, Sephirah) : il est
   posé à côté du titre, pas dedans — un <h1> mêlant hébreu et latin donnerait
   un ordre de lecture bidi imprévisible, et le nom translittéré est ce que
   Google doit lire en premier. aria-hidden : le nom suit immédiatement. */
.entete-glyphe-ligne {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.entete-glyphe {
  font-family: var(--font-hebrew);
  font-size: 68px;
  line-height: 1;
  color: var(--aurora-gold);
  opacity: 0.9;
  flex: none;
}

/* ---------- C3. Fiche de correspondances ---------- */
/* Paires terme/valeur : <dl>, pas <table>. Autant de colonnes que la largeur
   en autorise, le libellé toujours au-dessus de sa valeur — jamais séparé
   d'elle par un saut de colonne. */
.fiche {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  margin: 1.4em 0;
}
.fiche__ligne {
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.fiche__label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.fiche__valeur {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-primary);
}

/* Morale du récit zoharique, et translittération d'une kavvanah : deux voix
   secondaires, mises à distance du corps par la casse et l'italique. */
.lecon {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  color: var(--accent-binah);
  border-left: 2px solid var(--accent-binah);
  padding-left: 18px;
  margin: 1.6em 0;
}
.translit {
  font-style: italic;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* ---------- C4. Maillage vers les pages voisines ---------- */
/* Sans ces liens, chaque page de corpus est un cul-de-sac que seul le sitemap
   fait découvrir. Ils sont CALCULÉS depuis sentiers.json (voir corpus.mjs). */
.liens { margin: 56px 0 0; }
.liens__titre {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 26px;
  color: var(--aurora-white);
  margin: 0 0 8px;
}
.liens__groupe { margin: 26px 0 0; }
.liens__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-binah);
  margin: 0 0 10px;
}
.liens__lead {
  margin: 0 0 14px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--aurora-white-muted);
}
.liens__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.lien-card {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  transition: border-color 200ms ease, background 200ms ease;
}
.lien-card:hover { border-color: var(--aurora-gold); background: rgba(255, 255, 255, 0.04); }
.lien-card:focus-visible { outline: 2px solid var(--aurora-cyan); outline-offset: 2px; }
.lien-card__glyphe {
  font-family: var(--font-hebrew);
  font-size: 26px;
  line-height: 1;
  color: var(--aurora-gold);
  flex: none;
  width: 30px;
  text-align: center;
}
.lien-card__corps { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lien-card__nom { font-size: 15px; font-weight: 600; color: var(--aurora-white); }
.lien-card__note { font-size: 13px; line-height: 1.45; color: var(--aurora-white-faint); }
.lien-card:hover .lien-card__nom { color: var(--aurora-gold); }

/* Sur un hub, le maillage EST le corps de la page : cartes plus hautes, texte
   plus lisible, et le fil des groupes prend l'air. */
.liens--hub { margin-top: 40px; }
.liens--hub .liens__groupe { margin-top: 44px; }
.liens--hub .liens__groupe:first-of-type { margin-top: 0; }
.liens--hub .liens__label { font-size: 12px; color: var(--aurora-gold); }
.liens--hub .lien-card { padding: 18px 20px; align-items: flex-start; }
.liens--hub .lien-card__glyphe { font-size: 32px; width: 36px; }
.liens--hub .lien-card__nom { font-size: 17px; }
.liens--hub .lien-card__note { font-size: 14px; }

/* ---------- C5. Adaptations mobiles ---------- */

/* La navigation est passée de deux entrées à cinq (Sephirot, Sentiers,
   Lettres) : sur une ligne, elle débordait de 37 px dès 390 px de large, et
   dès 900 px en tablette. Elle passe à la ligne plutôt que de pousser le
   bouton « Ouvrir l'application » hors du viewport. Mesuré, pas supposé. */
@media (max-width: 900px) {
  .sitenav { flex-wrap: wrap; row-gap: 10px; }
}

@media (max-width: 640px) {
  .u-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .fiche { grid-template-columns: 1fr; }
  .liens__liste { grid-template-columns: 1fr; }
  .entete-glyphe { font-size: 52px; }
  .entete-glyphe-ligne { gap: 14px; }
  .prose h2 { font-size: 24px; }
  .lecon { font-size: 18px; padding-left: 14px; }
  .liens { margin-top: 40px; }
}