/* avatar.css */

/* Conteneur principal */
#avatar-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}
#avatar-container .videoWrap,
#avatar-container video,
#avatar-container canvas {
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Wrapper vidéo */
.videoWrap {
    text-align: center;
}

/* Messages de chargement */
#loading-message2,
#loading-erreur {
  background-color: black;
  color: white;
  display: none;      /* Masqué par défaut */
  text-align: center;
  padding: 10px;
  border-radius: 4px;
  text-align: center;
}

#loading-message2 h2,
#loading-erreur h2 {
    font-size: 1.5em;
}

/* Élément vidéo */
#mediaElement {
    max-width: 100%;
    text-align: center;
    display: none;
}

.videoEle.show {
    display: block;
}

.videoEle.hide {
    display: none;
}

/* Élément canvas */
#canvasElement {
    max-width: 600px;
    text-align: center;
}

/* Styles supplémentaires (optionnels) */
.videoEle {
    /* Ajoutez des styles supplémentaires si nécessaire */
}
/* Styles pour le conteneur de l'avatar */
#avatar-wrapper {
	display: none;
    margin: 20px auto;
    overflow: hidden;
    position: absolute;
    /* top: -91px; */
    /* left: 0; */
    width: 65%;
    /* height: 100vh; */
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0,0,0,0.5); /* Ombre conséquente */
}

#close-avatar-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    z-index: 10000; /* Pour être sûr que le bouton est au-dessus */
}

/* 5. Responsivité générale */
@media (max-width: 768px) {
	#avatar-wrapper {
		display: none;
		margin: 20px auto;
		overflow: hidden;
		position: absolute;
		/* top: -91px; */
		/* left: 0; */
		width: 95%;
		/* height: 100vh; */
		text-align: center;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 10px;
	}

}