/* Effets d'ouverture/fermeture panels animés */
#animated-panels {
  /* Hauteur dynamique selon la largeur de l'écran */
  height: clamp(250px, 40vw, 600px);
  min-height: 250px;
  max-height: 600px;
}
#animated-panels .panel {
  transition: flex 0.5s cubic-bezier(0.4,0,0.2,1), height 0.5s cubic-bezier(0.4,0,0.2,1), background 0.5s;
  min-width: 0;
  min-height: 0;
  height: 100%;
}
#animated-panels .panel .panel-overlay {
  transition: background 0.5s, opacity 0.5s;
  background: rgba(30,30,30,0.4);
  opacity: 1;
}
#animated-panels .panel.hovered .panel-overlay {
  opacity: 0;
}
#animated-panels .panel.grow-both {
  flex: 2 1 0%;
}
#animated-panels .panel.grow-left {
  flex: 2 1 0%;
}
#animated-panels .panel.grow-right {
  flex: 2 1 0%;
}
#animated-panels .panel.grow-top {
  flex: 2 1 0%;
}
#animated-panels .panel.grow-bottom {
  flex: 2 1 0%;
}
#animated-panels .panel.grow-vertical {
  flex: 2 1 0%;
}
@media (max-width: 639px) {
  #animated-panels {
    flex-direction: column !important;
    height: auto !important;
    min-height: 300px;
    max-height: none;
  }
  #animated-panels .panel {
    min-height: 80px;
    height: clamp(80px, 20vh, 200px);
    transition: flex 0.5s cubic-bezier(0.4,0,0.2,1), height 0.5s cubic-bezier(0.4,0,0.2,1), background 0.5s;
  }
  #animated-panels .panel.grow-both,
  #animated-panels .panel.grow-vertical {
    flex: 2 1 0%;
    height: clamp(120px, 40vh, 350px);
  }
  #animated-panels .panel.grow-top {
    flex: 2 1 0%;
    height: clamp(120px, 40vh, 350px);
    margin-bottom: 0;
  }
  #animated-panels .panel.grow-bottom {
    flex: 2 1 0%;
    height: clamp(120px, 40vh, 350px);
    margin-top: 0;
  }
}