/* ============================================================
   Apprendre l'arabe — alphabet vivant
   ============================================================ */
.arabe {
  background: radial-gradient(120% 70% at 50% -10%, #FFFDF8 0%, var(--paper) 55%, var(--paper-warm) 100%);
  min-height: 100vh;
}

.arabe-intro {
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(2rem, 7vh, 4rem) var(--space-lg) var(--space-lg);
  text-align: center;
}
.arabe-intro__ar {
  font-family: var(--font-arabic);
  font-size: clamp(2.6rem, 9vw, 4rem);
  color: var(--gold);
  margin-bottom: 0.4rem;
}
.arabe-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-sm);
}
.arabe-intro p {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 34rem;
  margin: 0 auto var(--space-md);
}
.arabe-intro em { color: var(--gold); font-style: italic; }

/* bandeau "sens de lecture" */
.arabe-sens {
  display: flex; align-items: center; justify-content: center; gap: 0.8rem;
  font-family: var(--font-sans); font-size: 0.82rem; letter-spacing: 0.08em;
  color: var(--ink-mute); margin: var(--space-md) auto var(--space-lg);
}
.arabe-sens span:first-child { color: var(--gold); font-size: 1.4rem; }

/* sections */
.arabe-section { max-width: 60rem; margin: 0 auto; padding: var(--space-xl) var(--space-lg); }
.arabe-section__title {
  text-align: center; font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem); color: var(--ink-title);
  margin-bottom: 0.3rem;
}
.arabe-section__sub {
  text-align: center; font-family: var(--font-sans); font-size: 0.85rem;
  color: var(--ink-mute); margin-bottom: var(--space-lg); letter-spacing: 0.03em;
}
.arabe-rule { width: 56px; height: 1px; background: var(--gold-soft); margin: 0 auto var(--space-lg); }

/* grille de l'alphabet */
.alpha-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: var(--space-sm);
}
.alpha-cell {
  position: relative;
  aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.1rem;
  background: linear-gradient(170deg, var(--paper-warm), var(--paper-deep));
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.alpha-cell:hover, .alpha-cell.is-active {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 14px 30px -22px rgba(27,42,78,0.5);
}
.alpha-cell__ar { font-family: var(--font-arabic); font-size: 2.2rem; line-height: 1; color: var(--ink-title); }
.alpha-cell.is-active .alpha-cell__ar { color: var(--gold); }
.alpha-cell__tr { font-family: var(--font-sans); font-size: 0.66rem; color: var(--ink-mute); letter-spacing: 0.04em; }

/* panneau détail d'une lettre */
.alpha-detail {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: linear-gradient(170deg, #FFFDF8, var(--paper-deep));
  border: 1px solid var(--gold-soft);
  border-radius: 18px;
  text-align: center;
  animation: alphaIn 0.5s cubic-bezier(.2,.7,.2,1) both;
}
.alpha-detail[hidden] { display: none; }
@keyframes alphaIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.alpha-detail__ar { font-family: var(--font-arabic); font-size: clamp(4rem, 16vw, 6rem); line-height: 1; color: var(--gold); animation: brushIn 0.9s cubic-bezier(.4,0,.2,1) both; }
.alpha-detail__ar.is-sayable { cursor: pointer; }
/* tracé calligraphique : la lettre se dévoile de droite à gauche */
@keyframes brushIn { 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) { .alpha-detail__ar { animation: none; } }

/* bouton écouter */
.alpha-listen {
  margin-top: var(--space-md);
  font-family: var(--font-sans); font-size: 0.82rem; letter-spacing: 0.03em;
  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;
}
.alpha-listen:hover { transform: translateY(-2px); filter: brightness(1.05); }
.alpha-listen:active { transform: translateY(0); }
.alpha-detail__nom { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink-title); margin-top: 0.2rem; }
.alpha-detail__tr { font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.alpha-detail__son { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--ink-soft); margin: var(--space-md) auto; max-width: 26rem; }
.alpha-badges { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin: var(--space-sm) 0; }
.alpha-badge { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--ink-soft); background: rgba(46,125,122,0.1); border-radius: 999px; padding: 0.25rem 0.8rem; }
.alpha-ex {
  margin-top: var(--space-md); padding-top: var(--space-md);
  border-top: 1px solid var(--line);
}
.alpha-ex__label { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.alpha-ex__mot { font-family: var(--font-arabic); font-size: 2.6rem; color: var(--ink-title); line-height: 1.6; }
.alpha-ex__tr { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--gold); }
.alpha-ex__sens { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink-soft); }

/* les quatre formes */
.alpha-forms { margin-top: var(--space-md); }
.alpha-forms__label { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; }
.alpha-forms__row { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.alpha-form { display: flex; flex-direction: column; align-items: center; min-width: 4rem; padding: 0.5rem 0.6rem; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.alpha-form__ar { font-family: var(--font-arabic); font-size: 2rem; line-height: 1.4; color: var(--ink-title); }
.alpha-form__lab { font-family: var(--font-sans); font-size: 0.66rem; color: var(--ink-mute); letter-spacing: 0.03em; }

/* jeu : reconnais la lettre */
.arabe-quiz { max-width: 34rem; margin: 0 auto; padding: var(--space-lg); background: linear-gradient(170deg, var(--paper-warm), var(--paper-deep)); border: 1px solid var(--gold-soft); border-radius: 18px; text-align: center; }
.quiz-score { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-mute); }
.quiz-prompt { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink-soft); margin-top: 0.3rem; }
.quiz-glyph { font-family: var(--font-arabic); font-size: clamp(4rem, 14vw, 5.5rem); color: var(--gold); line-height: 1.3; }
.quiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; max-width: 22rem; margin: var(--space-sm) auto 0; }
.quiz-opt { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink-title); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 0.7rem; cursor: pointer; transition: border-color 0.2s, transform 0.2s; }
.quiz-opt:hover:not(:disabled) { border-color: var(--gold); transform: translateY(-2px); }
.quiz-opt:disabled { cursor: default; opacity: 0.85; }
.quiz-opt.is-good { border-color: #2E7D7A; background: rgba(46,125,122,0.12); color: #2E7D7A; }
.quiz-opt.is-bad { border-color: #b4523f; background: rgba(180,82,63,0.1); color: #b4523f; }
.quiz-feedback { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--ink-soft); margin-top: var(--space-md); min-height: 1.4rem; }
.quiz-next { font-family: var(--font-sans); font-size: 0.85rem; color: var(--paper); background: var(--gold); border: none; border-radius: 999px; padding: 0.5rem 1.4rem; margin-top: 0.7rem; cursor: pointer; }

/* voyelles */
.voy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-md); max-width: 46rem; margin: 0 auto; }
.voy-cell { text-align: center; padding: var(--space-md); background: var(--paper-warm); border: 1px solid var(--line); border-radius: 14px; }
.voy-cell__ar { font-family: var(--font-arabic); font-size: 2.4rem; color: var(--gold); }
.voy-cell__nom { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink-title); }
.voy-cell__son { font-family: var(--font-sans); font-size: 0.78rem; color: var(--ink-mute); margin-top: 0.2rem; }

/* solaires / lunaires */
.lune-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); max-width: 46rem; margin: 0 auto; }
@media (max-width: 560px) { .lune-grid { grid-template-columns: 1fr; } }
.lune-box { padding: var(--space-lg); border-radius: 16px; border: 1px solid var(--line); background: var(--paper-warm); text-align: center; }
.lune-box h3 { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold); margin-bottom: 0.3rem; }
.lune-box p { font-family: var(--font-sans); font-size: 0.85rem; color: var(--ink-mute); margin-bottom: var(--space-sm); }
.lune-box .letters { font-family: var(--font-arabic); font-size: 1.8rem; color: var(--ink-title); line-height: 1.8; letter-spacing: 0.15em; }

/* déchiffrage */
.dechif { display: grid; gap: var(--space-md); max-width: 40rem; margin: 0 auto; }
.dechif-word {
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(170deg, var(--paper-warm), var(--paper-deep));
  border: 1px solid var(--line); border-radius: 14px; text-align: center;
}
.dechif-word__full { font-family: var(--font-arabic); font-size: 2.8rem; color: var(--gold); line-height: 1.5; }
.dechif-word__sens { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--ink-soft); margin-bottom: var(--space-sm); }
.dechif-letters { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; direction: rtl; }
.dechif-letter { display: flex; flex-direction: column; align-items: center; min-width: 2.6rem; padding: 0.3rem 0.4rem; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.dechif-letter__ar { font-family: var(--font-arabic); font-size: 1.6rem; color: var(--ink-title); }
.dechif-letter__tr { font-family: var(--font-sans); font-size: 0.7rem; color: var(--ink-mute); }

/* jardin de beaux mots */
.mots-grid { max-width: 60rem; margin: 0 auto; }
.mots-famille {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  color: var(--gold); text-align: center;
  margin: var(--space-xl) 0 var(--space-md);
  letter-spacing: 0.04em;
}
.mots-famille::before, .mots-famille::after {
  content: '·'; color: var(--gold-soft); margin: 0 0.8rem; font-size: 0.8em;
}
.mots-grid__inner { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-md); }
.mot-card {
  position: relative;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background: linear-gradient(170deg, #FFFDF8, var(--paper-deep));
  border: 1px solid var(--line); border-radius: 16px; text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.mot-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 14px 30px -22px rgba(27,42,78,0.5); }
.mot-card__ar { font-family: var(--font-arabic); font-size: 2.6rem; line-height: 1.6; color: var(--gold); }
.mot-card__tr { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--ink-title); }
.mot-card__sens { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin: 0.15rem 0 0.5rem; }
.mot-card__note { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.5; color: var(--ink-soft); }
.mot-card__say {
  position: absolute; top: 0.6rem; right: 0.6rem;
  width: 2rem; height: 2rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft);
  font-size: 0.85rem; cursor: pointer; line-height: 1; transition: border-color 0.2s, transform 0.2s;
}
.mot-card__say:hover { border-color: var(--gold); transform: scale(1.1); }

/* hub multi-page */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-lg); max-width: 56rem; margin: 0 auto; }
.hub-card {
  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;
}
.hub-card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 18px 36px -24px rgba(27,42,78,0.5); }
.hub-card__ar { font-family: var(--font-arabic); font-size: clamp(2.4rem, 6vw, 3.2rem); color: var(--gold); line-height: 1.3; margin-bottom: 0.4rem; }
.hub-card__title { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink-title); margin-bottom: 0.4rem; }
.hub-card__desc { font-family: var(--font-display); font-style: italic; font-size: 0.98rem; color: var(--ink-soft); line-height: 1.45; }

/* sub-page : intro compacte + étape */
.arabe-intro--sub { padding-top: clamp(1.5rem, 5vh, 3rem); padding-bottom: var(--space-md); }
.arabe-intro--sub .arabe-intro__ar { font-size: clamp(2rem, 7vw, 3rem); }
.arabe-intro--sub h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
.arabe-intro__sub { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--ink-soft); max-width: 32rem; margin: var(--space-sm) auto 0; line-height: 1.55; }
.arabe-step { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; }

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

.arabe-foot { text-align: center; padding: var(--space-2xl) var(--space-lg); }
.arabe-foot a { font-family: var(--font-sans); font-size: 0.85rem; color: var(--gold); text-decoration: none; }