/* 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;
  }
}

/* Styles responsifs pour les détails des services */
@media (max-width: 640px) {
    .service-details-grid {
        grid-template-columns: 1fr !important;
    }
    
    .service-image-mobile {
        height: 8rem !important; /* 128px */
        max-height: 8rem !important;
    }
    
    .service-description-mobile {
        max-height: 6rem !important; /* 96px */
    }
    
    .service-actions-mobile {
        flex-direction: column !important;
    }
    
    .service-actions-mobile button {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.5rem 0.75rem !important;
    }
}