/* --- Splash --- */
#splash {
  position: fixed;
  top:0; left:0; right:0; bottom:0;
  background: #0b9ae2;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  transition: opacity 1s ease;
}

#splash.hidden {
  opacity: 0;
  pointer-events: none;
}

#logo {
  width: 50%; 
  max-width:900px;
  animation: pulse 1.5s infinite alternate;
}
@media (max-width:768px){
#logo{
  width: 80%; 
  max-width:900px;
  animation: pulse 1.5s infinite alternate;
}
}

@keyframes pulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.2); }
}

/* --- Carte --- */
html, body { height:100%; margin:0; padding:0; }
#map { position:absolute; inset:0; }

/* --- Slider --- */
.sea-level-slider {
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  width: 500px; max-width:90vw;
  background: rgba(255,255,255,0.9);
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  text-align:center;
  z-index: 2;
  font-family: Arial, sans-serif;
}

.sea-level-slider h3 {
  margin:0 0 8px; font-size:16px; color:#004466;
}

.sea-level-slider input[type="range"]{
  -webkit-appearance:none;
  width:100%; height:12px; border-radius:6px;
  background: linear-gradient(90deg,#b3d9ff 0%,#0066cc 100%);
  outline:none; box-shadow: inset 0 2px 4px rgba(0,0,0,.2);
}

.sea-level-slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #66b3ff, #004466);
  border:2px solid #004466; cursor:pointer;
}

.slider-labels{ display:flex; justify-content:space-between; margin-top:6px; }
.slider-labels span{ font-size:12px; color:#004466; font-weight:600; }

#current-year { font-weight:700; color:#004466; margin-left:6px; }

#footer-logo {
  position: absolute;
  bottom: 10px;
  left: 120px;
  z-index: 5;
}
@media (max-width:768px){
#footer-logo{
 position: absolute;
  bottom: 5px;
  left:10px;
  z-index: 5;
}
}

#footer-logo img {
  width: 120px; /* adapte la taille selon ton besoin */
  opacity: 0.8;
  transition: opacity 0.3s, transform 0.3s;
  cursor: pointer;
}

#footer-logo img:hover {
  opacity: 1;
  transform: scale(1.1);
}

.info-box {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(255,255,255,0.9);
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  font-family: 'Pally', Arial, sans-serif;
  color: #004466;
  z-index: 3;
  font-size: 14px;
}
.info-box strong {
  font-weight: 700;
}

@media (max-width:768px){
.info-box{
  bottom:auto;
  top:20px;
  left:50%;
  transform: translateX(-50%);
  width:150px;
}
}


/* Bouton info */
#info-button {
  position: absolute;
  bottom: 50px;
  left: 20px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #0074D9;
  color: white;
  font-weight: bold;
  font-size: 20px;

  display: flex;           /* centrage flex */
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */

  cursor: help;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  z-index: 1000;
}

/* Mobile */
@media (max-width: 768px) {
  #info-button {
    bottom: 130px; /* ou ce que tu veux */
    width: 25px;
    height: 25px;
    font-size: 12px; /* ajuste pour que 'i' reste lisible */
  }
}



/* Pop-up */
.popup {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  cursor: default;
}

.popup.hidden {
  display: none;
}

.popup-content {
  background: #fff;
  padding: 20px;
  max-width: 500px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  position: relative;
}

/* Sur mobile : plein écran */
@media (max-width: 768px) {
  .popup-content {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    overflow-y: auto;
  }
  
#close-popup {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: grab;
  color: #333;
}}