.hero-bases {
    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-bases h1 { font-size: clamp(1.8rem,5vw,3.5rem); font-weight:700; }
.hero-bases p  { font-size: clamp(1rem,2vw,1.2rem); color:#cbd5e1; }
.bases-section { margin-bottom:60px; }
.bases-section-title {
    font-size: clamp(1.3rem,3vw,1.8rem); font-weight:700;
    border-left:5px solid #dc2626; padding-left:16px;
    margin-bottom:28px; color:#fff;
}

/* Grille de direction cards */
.dir-grid {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:18px;
    margin-bottom:8px;
}
.dir-card {
    background:#1e293b; border-radius:18px;
    border:1px solid rgba(255,255,255,.07);
    padding:24px 18px 20px;
    text-align:center;
    transition:transform .2s, box-shadow .2s;
}
.dir-card:hover { transform:translateY(-5px); box-shadow:0 12px 28px rgba(0,0,0,.5); }
.dir-icon {
    font-size:3rem; color:#dc2626; margin-bottom:10px;
    display:block; line-height:1;
}
.dir-fr   { font-size:1.05rem; font-weight:700; color:#f1f5f9; margin-bottom:6px; }
.dir-jp   { font-family:'Noto Sans JP',sans-serif; font-size:1.5rem; color:#f87171; font-weight:700; margin-bottom:2px; }
.dir-kanji{ font-family:'Noto Sans JP',sans-serif; font-size:.9rem; color:#94a3b8; margin-bottom:8px; }
.dir-romaji{ font-size:.82rem; color:#cbd5e1; background:#0f172a; border-radius:8px; padding:3px 12px; display:inline-block; }

/* Panneau de rue — cadre visuel */
.street-panel {
    background:#162032; border:2px solid #27374d; border-radius:20px;
    padding:28px; margin-bottom:36px;
    display:flex; flex-direction:column; align-items:center; gap:18px;
}
.street-compass {
    display:grid;
    grid-template-columns: 1fr 80px 1fr;
    grid-template-rows: 1fr 80px 1fr;
    gap:8px; width:260px; height:260px;
}
.compass-cell {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:#1e293b; border-radius:12px; padding:8px 4px;
    border:1px solid rgba(255,255,255,.07);
}
.compass-center {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:#dc2626; border-radius:50%; color:#fff; font-size:.75rem; font-weight:700;
    font-family:'Noto Sans JP',sans-serif;
}
.compass-arrow { font-size:1.8rem; color:#f87171; }
.compass-label-fr { font-size:.7rem; color:#cbd5e1; font-weight:600; }
.compass-label-jp { font-family:'Noto Sans JP',sans-serif; font-size:.85rem; color:#f87171; }

/* Panneau directionnel */
.sign-wrap {
    display:flex; flex-direction:column; gap:12px; align-items:center; width:100%;
}
.sign-row {
    background:#0f172a; border:2px solid #27374d; border-radius:12px;
    padding:12px 24px; display:flex; align-items:center; gap:16px;
    width:100%; max-width:440px;
}
.sign-arrow { font-size:2rem; color:#f87171; min-width:36px; text-align:center; }
.sign-jp    { font-family:'Noto Sans JP',sans-serif; font-size:1.1rem; color:#f87171; font-weight:700; }
.sign-fr    { font-size:.88rem; color:#94a3b8; }

/* Tableau */
.table-bases { width:100%; border-collapse:separate; border-spacing:0; border-radius:16px; overflow:hidden; }
.table-bases thead tr { background:#dc2626; }
.table-bases thead th { padding:12px 16px; color:#fff; font-weight:700; font-size:.88rem; text-align:left; border:none; }
.table-bases tbody tr { background:#1e293b; transition:background .15s; }
.table-bases tbody tr:nth-child(even) { background:#162032; }
.table-bases tbody tr:hover { background:#27374d; }
.table-bases td { padding:10px 16px; color:#e2e8f0; font-size:.93rem; border-top:1px solid rgba(255,255,255,.05); }
.table-bases td.jp { font-family:'Noto Sans JP',sans-serif; font-size:1.1rem; color:#f87171; font-weight:600; }
.table-bases td.romaji { color:#94a3b8; font-size:.85rem; }

.memo-bloc {
    background:#0f172a; border-left:5px solid #dc2626;
    border-radius:0 12px 12px 0; padding:14px 18px;
    margin-bottom:22px; font-size:.93rem; color:#cbd5e1; line-height:1.8;
}
.memo-bloc strong { color:#f87171; }

/* Phrase cards */
.phrase-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.phrase-card {
    background:#1e293b; border-radius:14px; padding:18px 20px;
    border:1px solid rgba(255,255,255,.07);
    display:flex; gap:16px; align-items:flex-start;
}
.phrase-icon { font-size:2rem; color:#dc2626; min-width:36px; padding-top:2px; }
.phrase-fr   { font-size:.95rem; font-weight:600; color:#f1f5f9; margin-bottom:4px; }
.phrase-jp   { font-family:'Noto Sans JP',sans-serif; font-size:1.1rem; color:#f87171; font-weight:700; }
.phrase-kanji{ font-family:'Noto Sans JP',sans-serif; font-size:.82rem; color:#94a3b8; }
.phrase-romaji{ font-size:.8rem; color:#cbd5e1; background:#0f172a; border-radius:6px; padding:2px 8px; display:inline-block; margin-top:4px; }

@media(max-width:480px){
    .street-compass { width:220px; height:220px; }
    .compass-arrow { font-size:1.4rem; }
}