/* clip-musical.css — thème du projet Clip musical : magenta VHS */
.theme-clip-musical { --fond: #120a1f; --accent: #ff2e9a; --bleu: #7fe9ff; }
.theme-clip-musical .decoration-projet { color: var(--vert); }
.theme-clip-musical .cadre-video { box-shadow: 8px 8px 0 var(--accent); }

/* Visuel d'en-tête : une cassette VHS dont les bobines tournent */
.cassette { position: relative; width: 300px; height: 180px; margin: 0 auto; background: #151515; border: 4px solid var(--texte); border-radius: 10px; box-shadow: 10px 10px 0 var(--accent); display: flex; justify-content: center; gap: 60px; align-items: center; }
.cassette__bobine { width: 64px; height: 64px; border-radius: 50%; border: 8px dashed var(--texte); background: var(--noir); animation: tourner 4s linear infinite; }
.cassette__etiquette { position: absolute; left: 14px; right: 14px; bottom: 12px; background: var(--texte); color: var(--noir); font-family: var(--police-pixel); font-size: 0.62rem; letter-spacing: 0.1em; text-align: center; padding: 0.3rem; }
@keyframes tourner { to { transform: rotate(360deg); } }
/* Bandeau façon magnétoscope au-dessus de la vidéo, et cadre de télévision */
.bandeau-vhs { display: flex; gap: 1.5rem; font-family: var(--police-pixel); font-size: 0.7rem; color: var(--vert); margin-bottom: 0.6rem; max-width: 960px; }
.bandeau-vhs__rec { color: var(--rose); margin-left: auto; animation: clignote 1s steps(2, start) infinite; }
.theme-clip-musical .cadre-video { border: 12px solid #1a1a1a; border-radius: 18px; }
.theme-clip-musical .cadre-video video { border-radius: 8px; }
/* Les étapes deviennent des pistes */
.theme-clip-musical .etapes li { grid-template-columns: 5.5rem 1fr; }
.theme-clip-musical .etapes li::before { content: 'Piste ' counter(etape, decimal-leading-zero); font-size: 0.66rem; letter-spacing: 0.06em; }
@media (prefers-reduced-motion: reduce) { .cassette__bobine, .bandeau-vhs__rec { animation: none; } }