/* Cartes de personnages : portrait 3/4 et liseré de couleur (variable --accent). */

.voices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.voice { position: relative; background: var(--panel-solid); border: 1px solid var(--line); overflow: hidden; transition: border-color .3s, transform .4s var(--ease); }
.voice::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2; background: var(--accent); }
.voice:hover { border-color: rgba(255, 255, 255, .7); transform: translateY(-4px); }
.voice-img { aspect-ratio: 3 / 4; overflow: hidden; }
.voice-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter 1.6s ease; }
.voice:hover .voice-img img { transform: scale(1.05); }
.voice-body { padding: 16px 18px 20px; }
.voice .tag { color: var(--accent); }
.voice h3 { margin: 4px 0 8px; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--pearl); }
.voice-body p:last-child { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--muted); }

@media (max-width: 1180px) { .voices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .voices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 420px) { .voices { grid-template-columns: minmax(0, 1fr); } }