97 lines
2.5 KiB
CSS
97 lines
2.5 KiB
CSS
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url('./img/fond_mystere2_b.webp') no-repeat center center;
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#zone_cartes {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.carte {
|
|
animation: zoomOut 0.4s ease-out; /* Applique l'animation à chaque carte */
|
|
position: absolute;
|
|
width: 15vw; /* Taille des cartes */
|
|
height: calc(15vw * 1.4); /* Respecte le ratio */
|
|
background-size: cover;
|
|
z-index: 10; /* Au-dessus des ronds */
|
|
cursor: grab;
|
|
touch-action: none;
|
|
}
|
|
|
|
|
|
|
|
#zone_cartes .carte.zoom-in {
|
|
transform: scale(1.8) !important;
|
|
z-index: 20 !important;
|
|
transition: transform 0.2s ease-in-out !important;
|
|
}
|
|
|
|
|
|
|
|
#emplacements {
|
|
position: absolute;
|
|
bottom: 150px; /* Augmente la distance par rapport au bas de l'écran */
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 80%; /* Largeur totale de la rangée */
|
|
height: 50px; /* Hauteur totale */
|
|
z-index: 1; /* Sous les cartes */
|
|
}
|
|
|
|
.emplacement {
|
|
width: 5vw; /* Taille des ronds */
|
|
height: 5vw;
|
|
background-color: #34b115; /* Nouvelle couleur */
|
|
border: 2px solid black;
|
|
border-radius: 50%; /* Forme ronde */
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.zone-blanche {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 100px; /* Ajustez la taille selon vos besoins */
|
|
height: 100px; /* Ajustez la taille selon vos besoins */
|
|
background-color: white;
|
|
border: 2px solid black;
|
|
z-index: 5;
|
|
}
|
|
|
|
/* Animation de zoom */
|
|
@keyframes zoomOut {
|
|
from {
|
|
transform: scale(10); /* Taille initiale (double) */
|
|
opacity: 0; /* Invisible */
|
|
}
|
|
to {
|
|
transform: scale(1); /* Taille normale */
|
|
opacity: 1; /* Visible */
|
|
}
|
|
}
|
|
|
|
#mot-forme {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #000; /* Noir */
|
|
text-align: center;
|
|
background-color: rgba(255, 255, 255, 0.5); /* Blanc semi-transparent */
|
|
padding: 10px;
|
|
border-radius: 5px; /* Coins arrondis */
|
|
position: absolute; /* Position absolue */
|
|
top: 10px; /* Distance depuis le haut de la zone */
|
|
left: 10%; /* Centrer horizontalement */
|
|
transform: translateX(-50%); /* Centrer réellement en prenant en compte la largeur */
|
|
z-index: 10; /* S'assurer que l'élément est par-dessus les autres */
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optionnel : ajout d'une ombre */
|
|
} |