/* ============================================================
   Écran Choix du niveau
   ============================================================ */
.cn-root{ padding: 26px 18px 24px; }

.cn-title{
  position: relative; z-index: 2; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(24px, 6vw, 30px); margin: 14px 0 4px; text-align: center;
}
.cn-subtitle{
  position: relative; z-index: 2; font-size: 13.5px; color: var(--gold-soft);
  letter-spacing: 0.04em; text-align: center; margin-bottom: 26px; max-width: 340px; font-style: italic;
}

.cn-grid{ position: relative; z-index: 2; width: 100%; max-width: 460px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.cn-card{
  position: relative; border: none; border-radius: 18px; padding: 18px 14px 16px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.4);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  overflow: hidden;
}
.cn-card:hover{ transform: translateY(-3px); filter: brightness(1.05); box-shadow: 0 14px 28px rgba(0,0,0,0.5); }

.cn-card.decouverte{ background: radial-gradient(circle at 30% 15%, var(--decouverte-1), var(--decouverte-2) 75%); color: var(--decouverte-ink); }
.cn-card.challenge{ background: radial-gradient(circle at 30% 15%, var(--challenge-1), var(--challenge-2) 75%); color: var(--challenge-ink); }
.cn-card.maitrise{ background: radial-gradient(circle at 30% 15%, var(--maitrise-1), var(--maitrise-2) 75%); color: var(--maitrise-ink); }
.cn-card.legende{ background: radial-gradient(circle at 30% 15%, var(--legende-1), var(--legende-2) 75%); color: var(--legende-ink); }
.cn-card.cn-card--selected{ outline: 3px solid #fff; outline-offset: -3px; }

.cn-card-icon{ width: 52px; height: 52px; color: currentColor; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.3)); }
.cn-card-name{ font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: 0.02em; }
.cn-card-desc{ font-size: 11px; opacity: 0.85; line-height: 1.3; }

.cn-footer{ position: relative; z-index: 2; margin-top: 26px; font-size: 11px; color: var(--muted); text-align: center; max-width: 380px; line-height: 1.5; }

.cn-cta-row{ position: relative; z-index: 2; margin-top: 22px; width: 100%; max-width: 460px; }
.cn-cta{ width: 100%; padding: 15px 18px; font-size: 16px; }