/* — Reset & Global — */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html,body { width:100%; overflow-x:hidden; font-family:sans-serif }
a{color:inherit; text-decoration:none}

/* — Logo — */
#logo { position:fixed; top:20px; left:20px; width:15vw; min-width:200px; z-index:1500;
         mix-blend-mode:difference }

/* — Parallax BG — */
#bg { position:fixed; top:0; left:0; width:100%; height:450vh;
      background:url('assets/map-background.jpg') no-repeat center top;
      background-size:cover; z-index:-1; pointer-events:none;
      transform:translateY(0); will-change:transform }

/* — Encode/Decode Elements — */
.encodedecode { position:absolute; mix-blend-mode:exclusion; pointer-events:none }
/* Définir ici vos positions #e-d1…#e-d11 */

/* — Loader — */
#loader { position:fixed; top:0; left:0; width:100vw; height:100vh;
          background:rgba(255,255,255,0.9);
          display:flex; align-items:center; justify-content:center;
          z-index:2000; opacity:1; transition:opacity 1s ease }
#loader.fade-out { opacity:0; pointer-events:none }
.spinner { width:50px; height:50px;
           border:5px solid rgba(0,0,0,0.1);
           border-top:5px solid #333;
           border-radius:50%; animation:spin 1s linear infinite }
@keyframes spin{to{transform:rotate(360deg)}}

/* — Audio Player — */
#audio-player { position:fixed; top:22px; right:22px; width:55px; height:55px;
                background:#000; border-radius:50%; z-index:1500;
                display:flex; align-items:center; justify-content:center;
                cursor:pointer }
#audio-player .play-icon { width:0; height:0;
  border-left:20px solid #fff;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
}
#audio-player .waves { display:flex; align-items:flex-end; gap:2px;
                       height:100%; padding-bottom:15px; pointer-events:none }
#audio-player.paused .waves { display:none }
#audio-player.paused .play-icon { display:block }
#audio-player:not(.paused) .play-icon { display:none }
#audio-player .wave { width:4px; background:#fff;
                      animation:wave 1s infinite ease-in-out }
#audio-player .wave:nth-child(2){animation-delay:0.1s}
#audio-player .wave:nth-child(3){animation-delay:0.2s}
#audio-player .wave:nth-child(4){animation-delay:0.3s}
@keyframes wave{0%,100%{height:8px}50%{height:24px}}

/* — Gallery — */
.gallery { display:grid; grid-template-columns:repeat(16,1fr);
           gap:20px; width:100%; padding:4%; visibility:hidden;
           align-items:start }
.photo-card { position:relative; background:#fff; padding:14px;
              box-shadow:5px 5px 20px rgba(0,0,0,0.25);
              opacity:0; transform-origin:center;
              transition:opacity .5s ease,transform .5s ease,
                         box-shadow .5s ease;
              grid-column:span var(--span);
              transform:translateY(20px) rotate(var(--angle));
              width:var(--card-width); margin-bottom:16px;
              will-change:transform,opacity }

/* Caption & hover */
.photo-card img { width:100%; display:block;
                  /* Cursor custom sur PNG/.cur */
                  cursor: url('assets/open.png') 12 12, pointer !important; }
.photo-card .caption { font-family:"Vujahday Script",cursive;
                        margin-top:8px; font-size:1rem;
                        text-align:center; color:#222 }
.photo-card.visible { opacity:1;
                      transform:translateY(0) rotate(var(--angle)) }
.photo-card:hover { transform:scale(1.05);
                    box-shadow:0 0 35px rgba(0,0,0,0.4) }

@media(max-width:768px){
  .gallery { grid-template-columns:repeat(8,1fr);
             padding:10%; padding-top:150px }
  .photo-card { padding:5px;
                box-shadow:5px 5px 10px rgba(0,0,0,0.2) }
  .photo-card .caption { font-size:.7rem; color:#444 }
}

/* — Lightbox — */
#lightbox { position:fixed; top:0; left:0; width:100vw; height:100vh;
            background:rgba(0,0,0,0.9);
            display:flex; flex-direction:column;
            align-items:center; justify-content:center;
            visibility:hidden; opacity:0;
            transition:opacity .5s ease; z-index:1000 }
#lightbox.visible { visibility:visible; opacity:1 }
#lightbox-img { max-width:90%; max-height:80%; object-fit:contain;
                cursor: url('assets/close.png') 16 16, pointer !important; }
.lightbox-caption { margin-top:1rem;
                    font-family:"Vujahday Script",cursive;
                    font-size:1.2rem; color:#fff;
                    text-align:center; max-width:80vw;
                    line-height:1.2 }

/* — Footer — */
footer { padding:20px; font-family:monospace; font-size:.8rem }
footer p { margin-bottom:10px }
footer a { color:#000 }