inclus page final

static/css/style_final2_b.css

@@ -0,0 +1,58 @@
+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 {
+    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;
+}
+
+#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;
+}