@font-face{
  font-family: "Mazius";
  src: url("MaziusDisplay-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Mazius";
  src: url("MaziusDisplay-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Mazius";
  src: url("MaziusDisplay-Extraitalic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Mazius";
  src: url("MaziusDisplay-ExtraItalicBold.woff2") format("woff2");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

* { box-sizing: border-box; 
    margin: 0; 
    padding: 0; }

body { 
    width: 100vw; 
    height: 100vh; 
    overflow: hidden; 
    background-color: #050508; 
    font-family: 'MaziusDisplay-Regular'; 
}
.nav-container { 
    position: absolute; 
    top: 20px; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 500; 
    display: flex; 
    gap: 15px; 
}
.nav-btn { 
    background: rgba(10, 15, 30, 0.8); 
    color: #8da2bb; 
    border: 1px solid #2c3e50; 
    padding: 10px 20px; 
    cursor: pointer; 
    font-weight: bold; 
}
.nav-btn.active, .nav-btn:hover { 
    background: #34495e; 
    color: #fff; 
}
.interface-orbi { 
    position: absolute; 
    top: 90px; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 60%; 
    background: rgba(5, 5, 10, 0.85); 
    border: 1px solid #1a252f; 
    padding: 15px; 
    text-align: center; 
    z-index: 500; 
    color: #fff; 
}
.titre-orbi { 
    font-size: 1.2rem; 
    margin-bottom: 5px; 
}
.bg-grid { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    display: grid; 
    grid-template-columns: repeat(12, 1fr); 
    grid-template-rows: repeat(12, 1fr); 
    gap: 10px; 
    padding: 10px; 
    z-index: 10; 
}
.tile { background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,0.05); transition: transform 1.2s ease, opacity 1.2s; }

.tile-1 { grid-column: 1 / 5; grid-row: 1 / 13; }
.tile-2 { grid-column: 5 / 9; grid-row: 1 / 7; }
.tile-3 { grid-column: 9 / 13; grid-row: 1 / 13; }
.tile-4 { grid-column: 5 / 7; grid-row: 7 / 13; }
.tile-5 { grid-column: 7 / 9; grid-row: 7 / 13; }
.tile-1 { animation: flotterA 8s infinite alternate ease-in-out; }
.tile-2 { animation: flotterB 9s infinite alternate ease-in-out; }
.tile-3 { animation: flotterC 11s infinite alternate ease-in-out; }
.tile-4 { animation: flotterA 10s infinite alternate ease-in-out; }
.tile-5 { animation: flotterB 7s infinite alternate ease-in-out; }

@keyframes flotterA { 0% { margin-top: 0px; } 100% { margin-top: -6px; } }
@keyframes flotterB { 0% { margin-left: 0px; } 100% { margin-left: 6px; } }
@keyframes flotterC { 0% { margin-top: 0px; margin-left: 0px; } 100% { margin-top: -5px; margin-left: 5px; } }
.tile-1.slide-up, .tile-3.slide-up, .tile-5.slide-up { transform: translateY(-100vh); opacity: 0; }
.tile-2.slide-down, .tile-4.slide-down { transform: translateY(100vh); opacity: 0; }
#itemsLayer { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 150; pointer-events: none; }
.item { position: absolute; width: 65px; height: auto; cursor: pointer; z-index: 200; pointer-events: auto !important; transition: all 0.8s ease; }
.suitcase-container { position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); cursor: pointer; z-index: 250 !important; pointer-events: auto !important; }
.suitcase-container img { width: 130px; height: auto; pointer-events: none; }