/* ── Hero ── */
.hero-jlpt {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
                url('img/hero-bg.jpg') center/cover no-repeat;
    padding: clamp(60px,10vw,100px) 0; text-align:center;
}
.hero-jlpt h1 { font-size:clamp(2rem,5vw,3.8rem); font-weight:700; }
.hero-jlpt p  { font-size:clamp(1rem,2vw,1.25rem); color:#cbd5e1; max-width:700px; margin:0 auto; }

/* ── Nav interne ── */
.jlpt-nav {
    background:#1e293b; border-radius:14px; padding:16px 20px;
    display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px;
    border:1px solid rgba(255,255,255,.06);
}
.jlpt-nav a {
    color:#f87171; text-decoration:none; font-size:.85rem; font-weight:600;
    padding:5px 14px; border-radius:20px; border:1px solid rgba(248,113,113,.3);
    transition:background .2s;
}
.jlpt-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:52px 0 24px; color:#fff;
}

/* ── Blocs texte ── */
.info-card {
    background:#1e293b; border-radius:16px; padding:28px 32px;
    border:1px solid rgba(255,255,255,.07); margin-bottom:28px;
    color:#cbd5e1; line-height:1.9;
}
.info-card h3 { color:#f87171; font-size:1.05rem; margin-bottom:12px; font-weight:700; }
.info-card strong { color:#f1f5f9; }

/* ── Niveaux ── */
.niveau-grid {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:24px; margin-bottom:48px;
}

.niveau-card {
    border-radius:20px; overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    transition:transform .2s, box-shadow .2s;
}
.niveau-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,.5); }

.niveau-header {
    padding:28px 24px 20px;
    display:flex; flex-direction:column; align-items:center; gap:6px;
}
.niveau-badge {
    font-size:2.8rem; font-weight:900; letter-spacing:-.02em; line-height:1;
}
.niveau-title { font-size:.9rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.85; }
.niveau-kanji { font-size:1.6rem; font-family:'Noto Sans JP',sans-serif; opacity:.7; }

.niveau-body { background:#1e293b; padding:20px 24px 24px; }
.niveau-body p { font-size:.9rem; color:#94a3b8; line-height:1.75; margin-bottom:14px; }

.niveau-stats {
    display:grid; grid-template-columns:1fr 1fr;
    gap:10px; margin-bottom:16px;
}
.stat-box {
    background:#0f172a; border-radius:10px; padding:10px 12px; text-align:center;
}
.stat-box .stat-val { font-size:1.1rem; font-weight:700; color:#f1f5f9; }
.stat-box .stat-lbl { font-size:.72rem; color:#94a3b8; margin-top:2px; }

.niveau-tags { display:flex; flex-wrap:wrap; gap:6px; }
.niveau-tag {
    font-size:.75rem; padding:3px 10px; border-radius:20px;
    background:#0f172a; color:#94a3b8; border:1px solid rgba(255,255,255,.08);
}

/* Couleurs par niveau */
.n5 .niveau-header { background:linear-gradient(135deg,#065f46,#047857); }
.n5 .niveau-badge  { color:#6ee7b7; }
.n4 .niveau-header { background:linear-gradient(135deg,#1e3a5f,#1d4ed8); }
.n4 .niveau-badge  { color:#93c5fd; }
.n3 .niveau-header { background:linear-gradient(135deg,#4c1d95,#7c3aed); }
.n3 .niveau-badge  { color:#c4b5fd; }
.n2 .niveau-header { background:linear-gradient(135deg,#7c2d12,#c2410c); }
.n2 .niveau-badge  { color:#fdba74; }
.n1 .niveau-header { background:linear-gradient(135deg,#7f1d1d,#dc2626); }
.n1 .niveau-badge  { color:#fca5a5; }

/* ── Tableau épreuves ── */
.epreuve-table {
    width:100%; border-collapse:collapse; margin-bottom:40px; font-size:.88rem;
}
.epreuve-table th {
    background:#dc2626; color:#fff; padding:12px 16px; text-align:left; font-weight:700;
}
.epreuve-table td {
    background:#1e293b; border:1px solid rgba(255,255,255,.06);
    padding:11px 16px; color:#cbd5e1; vertical-align:top;
}
.epreuve-table tr:hover td { background:#243447; }
.epreuve-table .badge-n { font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:10px; white-space:nowrap; }
.bg-n5 { background:#047857; color:#fff; }
.bg-n4 { background:#1d4ed8; color:#fff; }
.bg-n3 { background:#7c3aed; color:#fff; }
.bg-n2 { background:#c2410c; color:#fff; }
.bg-n1 { background:#dc2626; color:#fff; }

/* ── Calendrier ── */
.calendrier-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:40px;
}
.cal-card {
    background:#1e293b; border-radius:16px; padding:24px;
    border:1px solid rgba(255,255,255,.07); text-align:center;
}
.cal-card .cal-session { font-size:1.4rem; font-weight:700; color:#f87171; margin-bottom:6px; }
.cal-card .cal-date    { font-size:1rem; color:#f1f5f9; font-weight:600; margin-bottom:10px; }
.cal-card .cal-info    { font-size:.85rem; color:#94a3b8; line-height:1.7; }
@media(max-width:560px){ .calendrier-grid { grid-template-columns:1fr; } }

/* ── Conseils ── */
.conseil-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
    gap:20px; margin-bottom:40px;
}
.conseil-card {
    background:#1e293b; border-radius:16px; padding:22px 20px;
    border:1px solid rgba(255,255,255,.07);
}
.conseil-card .conseil-icon { font-size:2rem; margin-bottom:10px; }
.conseil-card h4 { font-size:1rem; font-weight:700; color:#f1f5f9; margin-bottom:8px; }
.conseil-card p  { font-size:.87rem; color:#94a3b8; line-height:1.75; margin:0; }

/* ── Ressources ── */
.ressource-list { list-style:none; padding:0; margin-bottom:40px; }
.ressource-list li {
    background:#1e293b; border-radius:12px; padding:16px 20px;
    border:1px solid rgba(255,255,255,.07); margin-bottom:12px;
    display:flex; align-items:flex-start; gap:14px;
}
.ressource-list li i { color:#f87171; font-size:1.2rem; margin-top:2px; flex-shrink:0; }
.ressource-list li .res-title { font-weight:700; color:#f1f5f9; font-size:.95rem; }
.ressource-list li .res-desc  { font-size:.85rem; color:#94a3b8; margin-top:2px; line-height:1.6; }

/* ── Image illustration ── */
.illus-wrap {
    border-radius:16px; overflow:hidden; margin-bottom:40px;
    border:1px solid rgba(255,255,255,.07);
    position:relative;
}
.illus-wrap img { width:100%; height:320px; object-fit:cover; display:block; }
.illus-caption {
    position:absolute; bottom:0; left:0; right:0;
    background:linear-gradient(transparent, rgba(0,0,0,.8));
    padding:20px 24px 16px; color:#cbd5e1; font-size:.85rem;
}