body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    font-family: Arial, sans-serif;
    height: 100vh;
}

#loader-container {
    display: flex;
    flex-direction: column; /* Pour empiler les éléments verticalement */
    justify-content: center; /* Centrer verticalement */
    align-items: center; /* Centrer horizontalement */
    height: 100vh; /* Utilise la hauteur de la fenêtre */
}

#loader-container img {
    width: 20vw;
    height: auto;
    cursor: pointer;
    margin-bottom: 1vw;
}

#loader-progress {
    font-weight: normal;
    font-size: 1vw;
    color: #AAB7BF;
    margin-bottom: 1vw;
}

#main-content {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
    max-height: 95%; /* Ajustez selon vos besoins */
    max-width: 95%; /* Ajustez selon vos besoins */
    aspect-ratio: 16 / 9;
}

#app-container {
    flex: 1;
    max-height: 70vh; /* Ajustez selon vos besoins */
    max-width: 100vw; /* Ajustez selon vos besoins */
    aspect-ratio: 16 / 9;
}

#orbit-container-main{
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
    max-height: 100%; /* Ajustez selon vos besoins */
    max-width: 100%; /* Ajustez selon vos besoins */
    aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 4px solid #6786b0; /* Ajoute une bordure de 2px */
    border-radius: 15px; /* Arrondit les coins avec un rayon de 15px */
	box-sizing: border-box;
}

#orbital-image-main{
  position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
    height: 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
	z-index: 1;
}
#orbital-svg-main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Utilisez une largeur de 100% pour rendre le SVG responsive */
    height: 100%; /* Utilisez une hauteur de 100% pour rendre le SVG responsive */
    max-width: 100%; /* Ne dépasse pas la largeur du conteneur */
    max-height: 100%; /* Ne dépasse pas la hauteur du conteneur */
    z-index: 2; /* Positionne l'élément SVG au-dessus de l'élément img */
	cursor: pointer;
}

#zoom-controls {
    position: absolute;
    bottom: 0.5vw;
    left: 0.5vw;
    z-index: 3;
}

#zoom-controls img {
    width: 2.5vw; /* Ajustez la largeur des images de zoom */
    height: auto; /* Ajustez la hauteur des images de zoom */
    margin-right: 0.5vw;
    cursor: pointer;
}

#stage-buttons {
    position: absolute;
    bottom: 0.5vw;
    right: 0.5vw;
    z-index: 3;
}
#stage-buttons img {
    width: 5vw;
    height: auto;
    margin-right: 0.5vw;
    cursor: pointer;
    margin-bottom: 0.5vw;
    display: block; /* Ajoutez cette propriété pour forcer l'empilement vertical */
}

#cadre {
	position: fixed;
	width: 12 vw; /* Ajuste la largeur selon tes préférences */
	height: auto; /* Ajuste la hauteur selon tes préférences */
	background-color: white; /* Couleur de fond avec transparence */
	display: none; /* Initialement masqué */
	z-index: 999;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
	border: 3px solid #6786b0; /* Ajout de la bordure rouge épaisse de 2px */
}
		
#cadre_thumbnail {
	transition: 0.5s;
	height: auto;
	width: 100%;
	overflow: hidden;
}

#cadre_appartement {
	font-weight: bold;
	text-transform: uppercase;
	font-size: 1vw;
	color: #929EA6;
}

.cadre_info_text {
	font-weight: normal;
	font-size: 0.60vw;
	display: flex;
	flex-direction: row;
	/*column-gap: 17px;*/
	color: #AAB7BF;
}

.cadre_info_text p{
	font-weight: bold;
}

#cadre_separator {
	background-color: #6786b0;
	width: 90%;
	height: 0.1vw;
	border-radius: 2px;
}

#cadre_container_infos {
	transition: 0.5s;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	row-gap: 20px;
	padding: 20px;
}

.cadre_p {
	margin: 0;
}

.vendu {
    color: red;
}

.dispo {
	color : green;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

p {
    margin-top: 20px;
}