/* Visuels animés en direct et réglage de l'écho (assets/js/personnalisation.js). */
.visuel-scene .visuel-anim { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.45s; }
.visuel-scene img { transition: opacity 0.45s, transform 0.8s; }
.visuel-carte.anime .visuel-anim { opacity: 1; }
.visuel-carte.anime .visuel-scene img { opacity: 0; }
.visuel-carte.joue { box-shadow: 0 0 34px color-mix(in srgb, var(--teinte) 35%, transparent); }
.visuel-carte:hover .visuel-scene img { transform: scale(1.04); }

.echo-reglage { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px 24px; margin-bottom: 30px; padding: 20px 24px;
  border: 1px solid rgba(79, 216, 255, 0.35); background: rgba(2, 9, 24, 0.7);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.echo-tete { display: grid; gap: 2px; min-width: 150px; }
.echo-tete b { font-size: 11px; letter-spacing: 0.22em; color: var(--cyan); font-weight: 500; }
.echo-valeur { font-size: 24px; color: var(--blanc); text-shadow: 0 0 12px rgba(79, 216, 255, 0.6); }
.echo-curseur { --pos: 60%; -webkit-appearance: none; appearance: none; width: 100%; height: 6px; cursor: pointer; background: linear-gradient(90deg, var(--bleu), var(--cyan) var(--pos), rgba(79, 216, 255, 0.15) var(--pos)); outline-offset: 6px; }
.echo-curseur::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; background: var(--blanc); border: 3px solid var(--cyan); transform: rotate(45deg); box-shadow: 0 0 14px var(--cyan); }
.echo-curseur::-moz-range-thumb { width: 18px; height: 18px; background: var(--blanc); border: 3px solid var(--cyan); border-radius: 0; transform: rotate(45deg); box-shadow: 0 0 14px var(--cyan); }
.echo-preregs { display: flex; gap: 6px; }
.echo-preregs button { padding: 8px 12px; font: 500 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #8fb4dc; border: 1px solid var(--trait); transition: 0.2s; }
.echo-preregs button:hover { color: var(--blanc); border-color: rgba(79, 216, 255, 0.6); }
.echo-preregs button.actif { color: var(--noir); background: var(--cyan); border-color: var(--cyan); }
.echo-note { grid-column: 1 / -1; font-size: 14px; color: #a9c3e4; }
@media (max-width: 960px) {
  .echo-reglage { grid-template-columns: 1fr; }
  .echo-preregs { flex-wrap: wrap; }
}
.visuels-badge { display: inline-block; margin-top: 18px; padding: 8px 14px; font-size: 11px; letter-spacing: 0.2em; color: var(--noir) !important; background: linear-gradient(90deg, var(--cyan), var(--violet)); }