/* ============================================================
   Pages kana (kana.php) : tableaux, caractères, mots en katakana.
   Jetons de couleur et typographie : styles.css (:root).
   ============================================================ */

.kp { max-width: 980px; margin: 0 auto; padding: 28px 20px 72px; }

.kp-crumbs { font-size: .85rem; color: var(--ink-soft); margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.kp-crumbs a { color: var(--blue); }
.kp-crumbs [aria-current] { color: var(--ink); }

/* ---------- En-tête ---------- */
.kp-hero { text-align: center; padding: 20px 0 4px; }
.kp-hero--left { text-align: left; }
.kp-hero h1 { display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem, 5vw, 2.8rem); line-height: 1.15; }
.kp-hero--left h1 { align-items: flex-start; }
.kp-kicker { text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: .78rem; color: var(--gold); margin-bottom: 8px; }
.kp-lead { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.75; max-width: 760px; margin-top: 14px; }
.kp-lead a, .kp-sum a { color: var(--blue); }
.kp-word { font-size: clamp(2.8rem, 11vw, 6rem); font-weight: 900; line-height: 1.5; }
.kp-word rt { font-size: .26em; font-weight: 700; color: var(--blue); letter-spacing: .02em; }
.kp-big { font-size: clamp(6rem, 26vw, 10rem); font-weight: 900; line-height: 1; }
.kp-h1-sub { font-size: clamp(1.15rem, 3.4vw, 1.6rem); font-weight: 800; }
.kp-gloss { margin-top: 4px; font-size: 1.1rem; }
.kp-romaji { color: var(--gold); font-weight: 800; letter-spacing: .02em; }
.kp-listen { margin-top: 16px; }

/* ---------- Cartes ---------- */
.kp-card { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 24px; margin-top: 26px; }
.kp-card h2 { font-size: 1.2rem; font-weight: 800; margin-bottom: 14px; }
.kp-card p { line-height: 1.7; }
.kp-card p + p, .kp-card p + ul { margin-top: 12px; }
.kp-card a { color: var(--blue); }
.kp-note { border-left: 3px solid var(--gold); padding: 8px 14px; background: rgba(255,203,71,.06); border-radius: 0 10px 10px 0; margin-top: 16px; }
.kp-sum { margin-top: 16px; color: var(--ink-soft); }
.kp-sum strong { color: var(--gold); }

/* ---------- Décomposition d'un mot ---------- */
.kp-parts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.kp-parts li > a, .kp-parts li > div { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 76px; min-height: 86px; padding: 10px 12px; border-radius: 12px; background: var(--navy-2); border: 1px solid rgba(255,255,255,.1); color: var(--ink); transition: border-color .15s, transform .15s; }
.kp-parts li > a:hover { border-color: var(--gold); transform: translateY(-2px); }
.kp-part__k { font-size: 2rem; font-weight: 900; line-height: 1.2; }
.kp-part__r { font-size: .85rem; color: var(--blue); font-weight: 700; }
.kp-parts .is-mark > div { max-width: 160px; text-align: center; border-style: dashed; }
.kp-parts .is-mark .kp-part__r { color: var(--ink-soft); font-weight: 500; font-size: .78rem; line-height: 1.35; }

/* ---------- Fiche d'un caractère ---------- */
.kp-facts { display: grid; grid-template-columns: max-content 1fr; gap: 12px 20px; align-items: center; }
.kp-facts dt { color: var(--ink-soft); font-weight: 700; }
.kp-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kp-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--navy-2); border: 1px solid rgba(255,255,255,.14); color: var(--ink) !important; transition: border-color .15s; }
.kp-chip:hover { border-color: var(--gold); }
.kp-chip.is-current { border-color: var(--gold); background: rgba(255,203,71,.1); }
.kp-chip [lang=ja] { font-weight: 900; font-size: 1.2rem; }
.kp-chip small { color: var(--blue); font-weight: 700; }
.kp-plus { color: var(--ink-soft); }
.kp-plus [lang=ja] { color: var(--ink); font-weight: 900; font-size: 1.2rem; }

/* ---------- Listes de mots ---------- */
.kp-words { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; list-style: none; }
.kp-words a, .kp-words div { display: block; height: 100%; padding: 10px 12px; border-radius: 12px; background: var(--navy-2); border: 1px solid rgba(255,255,255,.08); color: var(--ink) !important; }
.kp-words a:hover { border-color: var(--gold); }
.kp-words [lang=ja]:first-child { display: block; font-size: 1.3rem; font-weight: 900; }
.kp-words small { color: var(--ink-soft); }

/* ---------- Mini-quiz ---------- */
.kp-quiz details { background: var(--navy-2); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 10px 16px; margin-top: 10px; }
.kp-quiz summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 1.6rem; font-weight: 900; }
.kp-quiz summary::-webkit-details-marker { display: none; }
.kp-quiz summary::after { content: attr(data-reveal); font-size: .8rem; font-weight: 700; color: var(--blue); }
.kp-quiz details[open] summary::after { content: ''; }
.kp-quiz details p { margin-top: 6px; }

/* ---------- Tableaux ---------- */
.kp-chart-wrap { overflow-x: auto; }
.kp-chart { width: 100%; border-collapse: separate; border-spacing: 6px; table-layout: fixed; }
.kp-chart--combo, .kp-chart--extended { max-width: 480px; }
.kp-chart td { padding: 0; }
.kp-chart a { display: flex; flex-direction: column; align-items: center; padding: 10px 2px; border-radius: 12px; background: var(--navy-2); border: 1px solid rgba(255,255,255,.08); color: var(--ink); transition: border-color .15s, transform .15s; }
.kp-chart a:hover { border-color: var(--gold); transform: translateY(-2px); }
.kp-chart [lang=ja] { font-size: clamp(1.4rem, 5vw, 2.1rem); font-weight: 900; line-height: 1.2; }
.kp-chart small { color: var(--blue); font-weight: 700; }

.kp-list { width: 100%; border-collapse: collapse; }
.kp-list th, .kp-list td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.07); }
.kp-list th { color: var(--ink-soft); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
.kp-list td:first-child a { font-size: 1.2rem; font-weight: 900; color: var(--ink); }
.kp-list td:first-child a:hover { color: var(--gold); }
.kp-list td:nth-child(2) { color: var(--blue); }

/* ---------- Navigation ---------- */
.kp-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 20px; }
.kp-links a { color: var(--blue); font-weight: 700; }
.kp-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 26px; font-weight: 700; }
.kp-pager a { color: var(--blue); }
.kp-pager [lang=ja] { font-size: 1.2rem; }

/* ---------- Appel à jouer ---------- */
.kp-cta { text-align: center; margin-top: 44px; padding: 34px 24px; border-radius: var(--radius); background: linear-gradient(135deg, rgba(255,45,117,.14), rgba(76,201,240,.1)); border: 1px solid rgba(255,255,255,.1); }
.kp-cta h2 { font-size: 1.5rem; font-weight: 900; margin-bottom: 10px; }
.kp-cta p { color: var(--ink-soft); max-width: 640px; margin: 0 auto 18px; line-height: 1.7; }
.kp-cta .kp-cta__small { margin: 16px auto 0; font-size: .9rem; }
.kp-cta__stores { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.kp-cta__stores img { height: 48px; width: auto; }

@media (max-width: 560px) {
  .kp { padding-left: 14px; padding-right: 14px; }
  .kp-card { padding: 18px 14px; }
  .kp-facts { grid-template-columns: 1fr; gap: 6px; }
  .kp-facts dd { margin-bottom: 8px; }
  .kp-chart { border-spacing: 4px; }
}