.hero-bases {
    background: linear-gradient(rgba(0,0,0,0.72), rgba(0,0,0,0.72)),
                url('img/fuji.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;
}

/* Cartes de phrases */
.phrase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.phrase-card {
    background: #1e293b;
    border-radius: 16px;
    padding: 18px 20px;
    border: 1px solid rgba(255,255,255,.07);
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
}
.phrase-card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0,0,0,.4); }
.phrase-fr  { font-size: 1rem; font-weight: 600; color: #f1f5f9; margin-bottom: 3px; }
.phrase-en  { font-size: .82rem; color: #94a3b8; margin-bottom: 8px; font-style: italic; }
.phrase-jp  { font-family:'Noto Sans JP',sans-serif; font-size: clamp(1.2rem,3vw,1.5rem); color: #f87171; font-weight:700; margin-bottom:3px; line-height:1.3; }
.phrase-kanji { font-family:'Noto Sans JP',sans-serif; font-size:.9rem; color:#94a3b8; margin-bottom:6px; }
.phrase-romaji { font-size:.85rem; color:#cbd5e1; background:#0f172a; border-radius:8px; padding:4px 10px; display:inline-block; letter-spacing:.5px; }
.cat-badge { display:inline-block; background:#dc2626; color:#fff; font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:20px; margin-bottom:8px; letter-spacing:.5px; text-transform:uppercase; }

.btn-audio {
    display: inline-flex; align-items: center; gap: 6px;
    background: #dc2626; color: #fff; border: none; border-radius: 8px;
    padding: 5px 12px; font-size: .8rem; font-weight: 600;
    cursor: pointer; margin-top: auto; padding-top: 10px;
    transition: background .15s, transform .1s; align-self: flex-start;
}
.btn-audio:hover  { background: #b91c1c; }
.btn-audio:active { transform: scale(.96); }

/* Bouton audio compact pour les tableaux */
.btn-audio-sm {
    display: inline-flex; align-items: center; gap: 4px;
    background: transparent; color: #f87171; border: 1px solid #dc2626;
    border-radius: 6px; padding: 2px 8px; font-size: .75rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: background .15s, color .15s;
}
.btn-audio-sm:hover  { background: #dc2626; color: #fff; }
.btn-audio-sm:active { transform: scale(.96); }

/* Tableaux */
.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; }
.table-bases td.td-audio { width:60px; text-align:center; }

/* Bloc info */
.memo-bloc {
    background:#0f172a; border-left:5px solid #dc2626;
    border-radius:0 12px 12px 0; padding:16px 20px;
    margin-bottom:24px; font-size:.93rem; color:#cbd5e1; line-height:1.8;
}
.memo-bloc strong { color:#f87171; }

/* Heures animaux */
.zodiac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 28px;
}
.zodiac-card {
    background: #1e293b;
    border-radius: 12px;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,.07);
    font-size: .9rem;
}
.zodiac-kanji { font-family:'Noto Sans JP',sans-serif; font-size:1.4rem; color:#f87171; font-weight:700; margin-right:8px; }
.zodiac-hours { color:#94a3b8; font-size:.8rem; }