/* ── Hero ── */
.hero-vocab {
    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-vocab h1 { font-size:clamp(1.8rem,5vw,3.5rem); font-weight:700; }
.hero-vocab p  { font-size:clamp(1rem,2vw,1.2rem); color:#cbd5e1; }

/* ── Toolbar ── */
.toolbar-vocab {
    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-vocab 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-vocab input::placeholder { color:#475569; }
.toolbar-vocab input:focus { border-color:#f87171; }
#compteur { color:#94a3b8; font-size:.88rem; white-space:nowrap; }

/* ── Galerie ── */
#gallery {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:20px;
    margin-bottom:48px;
}

.card {
    position:relative; height:220px;
    border-radius:16px; overflow:hidden;
    cursor:pointer;
    border:1px solid rgba(255,255,255,.07);
    box-shadow:0 4px 14px rgba(0,0,0,.35);
    transition:transform .25s, box-shadow .25s;
}
.card:hover { transform:scale(1.03); box-shadow:0 10px 30px rgba(0,0,0,.55); }

.card img {
    width:100%; height:100%; object-fit:cover;
    display:block;
}

.overlay {
    position:absolute; inset:0;
    background:rgba(15,23,42,0.88);
    display:flex; justify-content:center; align-items:center;
    opacity:0; transition:.3s;
    padding:12px; box-sizing:border-box;
}
.card:hover .overlay,
.card.active .overlay { opacity:1; }

.overlay div { text-align:center; line-height:1.7; }
.overlay .jp  { font-size:1rem; font-weight:700; color:#fbbf24; }
.overlay .kj  { font-size:2rem; font-weight:700; color:#f1f5f9; }
.overlay .fr  { font-size:.9rem; color:#94a3b8; margin-top:4px; }

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