/* ── Hero ── */
.hero-kanji {
    background: linear-gradient(rgba(0,0,0,0.72), rgba(0,0,0,0.72)),
                url('img/vocabulaire.jpg') center/cover no-repeat;
    padding: clamp(50px,9vw,90px) 0; text-align:center;
}
.hero-kanji h1 { font-size:clamp(1.8rem,5vw,3.5rem); font-weight:700; }
.hero-kanji p  { font-size:clamp(1rem,2vw,1.2rem); color:#cbd5e1; }

/* ── Nav interne ── */
.kanji-nav {
    background:#1e293b; border-radius:14px; padding:16px 20px;
    display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px;
    border:1px solid rgba(255,255,255,.06);
}
.kanji-nav a {
    color:#f87171; text-decoration:none; font-size:.88rem; font-weight:600;
    padding:5px 14px; border-radius:20px; border:1px solid rgba(248,113,113,.3);
    transition:background .2s;
}
.kanji-nav a:hover { background:rgba(248,113,113,.15); }

/* ── Section titre ── */
.section-titre {
    font-size:clamp(1.2rem,2.5vw,1.6rem); font-weight:700;
    border-left:5px solid #dc2626; padding-left:16px;
    margin:48px 0 24px; color:#fff;
}

/* ── Blocs théorie ── */
.theory-card {
    background:#1e293b; border-radius:16px; padding:24px 28px;
    border:1px solid rgba(255,255,255,.07); margin-bottom:24px;
    color:#cbd5e1; line-height:1.85;
}
.theory-card h3 { color:#f87171; font-size:1.05rem; margin-bottom:10px; }
.theory-card .kanji-ex { font-size:2.5rem; font-weight:700; color:#f87171; margin-right:12px; }



/* ── Galerie JLPT N5 ── */
.toolbar-kanji {
    background:#1e293b; border-radius:14px; padding:18px 20px;
    margin-bottom:24px; display:flex; gap:12px; flex-wrap:wrap; align-items:center;
    border:1px solid rgba(255,255,255,.07);
}
.toolbar-kanji input {
    background:#0f172a; border:1px solid rgba(255,255,255,.15);
    border-radius:10px; color:#f1f5f9; padding:9px 16px;
    font-size:.9rem; flex:1; min-width:200px; outline:none;
}
.toolbar-kanji input:focus { border-color:#f87171; }
#compteur-kanji { color:#94a3b8; font-size:.88rem; white-space:nowrap; }

#gallery {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:18px;
    margin-bottom:40px;
}

.card-kanji {
    position:relative; height:300px;
    background:#1e293b; border-radius:16px;
    overflow:hidden; cursor:pointer;
    border:1px solid rgba(255,255,255,.07);
    transition:box-shadow .2s, transform .15s;
}
.card-kanji:hover { box-shadow:0 10px 32px rgba(0,0,0,.5); transform:translateY(-2px); }

.kanji-visible {
    display:flex; justify-content:center; align-items:center;
    height:100%; font-size:90px; font-weight:700; line-height:1;
    color:#f87171;
    font-family: 'Noto Sans JP', sans-serif;
}

.overlay {
    position:absolute; inset:0;
    background:rgba(15,23,42,0.97);
    color:#f1f5f9; opacity:0;
    transition:opacity .25s;
    padding:12px;
    overflow-y:auto;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    text-align:center;
    scrollbar-width:none;
}
.overlay::-webkit-scrollbar { display:none; }
.card-kanji:hover .overlay,
.card-kanji.active .overlay { opacity:1; }

.overlay .k-big        { font-size:42px; font-weight:700; color:#ffffff; margin-bottom:6px; }
.overlay .info-row     { font-size:.8rem; color:#94a3b8; margin-bottom:3px; }
.overlay .info-row span { color:#f1f5f9; font-weight:600; }
.overlay .exemple-bloc {
    background:#0f172a; border-radius:8px; padding:8px 12px; margin-top:8px;
    font-size:.78rem; width:100%;
}
.overlay .exemple-bloc .ex-kanji { font-size:1.2rem; color:#f87171; }
.overlay .exemple-bloc .ex-read  { color:#5eead4; }
.overlay .exemple-bloc .ex-trad  { color:#94a3b8; }
.overlay .btn-audio    { align-self:center; margin-top:8px; }

.jlpt-badge {
    position:absolute; top:10px; right:10px;
    background:#16a34a; color:#fff;
    padding:3px 10px; border-radius:20px;
    font-size:.72rem; font-weight:700; z-index:10;
}

.hint-text { text-align:center; color:#94a3b8; font-size:.8rem; margin-bottom:20px; }