/* ===========================================
   Stripe-Style Dropdown - Morph Animation
   Utilise le design existant avec fond pleine largeur
   =========================================== */

:root {
  --morph-duration: 300ms;
  --morph-timing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===========================================
   Triggers de navigation (remplacent les dropdown Webflow)
   =========================================== */

.nav-dropdown-area {
  display: none;
  align-items: center;
  gap: 4px;
  position: relative;
}

@media screen and (min-width: 992px) {
  .nav-dropdown-area {
    display: flex;
  }
}

.morph-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--dark-fint--title-text, #1a1a1a);
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  transition: background-color 0.2s ease;
  line-height: 1;
}

.morph-trigger:hover,
.morph-trigger.is-active {
  background-color: rgba(0, 0, 0, 0.04);
}

.morph-trigger .caret {
  display: flex;
  align-items: center;
}

.morph-trigger .caret svg {
  width: 14px;
  height: 14px;
  transition: transform var(--morph-duration) var(--morph-timing);
}

.morph-trigger.is-active .caret svg {
  transform: rotate(180deg);
}

/* Tarifs link */
.morph-tarifs {
  display: none;
}

@media screen and (min-width: 992px) {
  .morph-tarifs {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    color: var(--dark-fint--title-text, #1a1a1a);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    line-height: 1;
  }

  .morph-tarifs:hover {
    background-color: rgba(0, 0, 0, 0.04);
  }
}

/* ===========================================
   Conteneur dropdown unifié
   =========================================== */

.morph-dropdown-container {
  position: fixed;
  top: var(--navbar-height, 65px);
  left: 0;
  right: 0;
  height: 0;
  background: #ffffff;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 50px 100px -20px rgba(50,50,93,0.25), 0 30px 60px -30px rgba(0,0,0,0.3);
  z-index: 999;
  overflow: hidden;
  pointer-events: none;

  transition: height var(--morph-duration) var(--morph-timing);
}

.morph-dropdown-container.is-active {
  height: var(--dropdown-height, 500px);
  pointer-events: auto;
}

/* ===========================================
   Wrapper du contenu (même largeur que navbar)
   =========================================== */

.morph-dropdown-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(-10px);

  transition:
    opacity var(--morph-duration) var(--morph-timing),
    transform var(--morph-duration) var(--morph-timing);
}

.morph-dropdown-container.is-active .morph-dropdown-content {
  opacity: 1;
  transform: translateY(0);
}

.morph-dropdown-wrapper {
  width: 100%;
  max-width: 68.75rem; /* même largeur que la navbar */
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  height: 100%;
}

/* ===========================================
   Panneaux de contenu avec animation morph
   =========================================== */

.morph-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-30px);

  transition:
    opacity var(--morph-duration) var(--morph-timing),
    transform var(--morph-duration) var(--morph-timing),
    visibility 0s linear var(--morph-duration);
}

.morph-panel.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition:
    opacity var(--morph-duration) var(--morph-timing),
    transform var(--morph-duration) var(--morph-timing),
    visibility 0s linear 0s;
}

.morph-panel.exit-left {
  opacity: 0;
  transform: translateX(-30px);
}

.morph-panel.exit-right {
  opacity: 0;
  transform: translateX(30px);
}

.morph-panel.enter-from-right {
  transform: translateX(30px);
}

.morph-panel.enter-from-left {
  transform: translateX(-30px);
}

/* ===========================================
   Préserver le style Webflow original
   Reset complet des styles qui perturbent le centrage
   =========================================== */

.morph-panel .dropdown-list-2 {
  display: block !important;
  position: relative !important;
  opacity: 1 !important;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  width: 100% !important;
  max-width: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  inset: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

.morph-panel .div-block-660 {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  overflow: visible !important;
}

.morph-panel .dropdown-overflow {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  transform: none !important;
  overflow: visible !important;
  left: auto !important;
  right: auto !important;
}

.morph-panel .dropdown-bg,
.morph-panel .dropdown-bg-full,
.morph-panel .dropdown-sidebar-bg,
.morph-panel .dropdown-inner-shadow {
  display: none !important;
}

.morph-panel .dropdown-list-body {
  padding: 0 !important;
  width: 100% !important;
  overflow: visible !important;
  position: relative !important;
}

.morph-panel .dropdown-list-body > .container-1477 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Grille de contenu - prend toute la largeur du wrapper */
.morph-panel .dropdown-grid {
  width: 100% !important;
  max-width: 68.75rem !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.morph-panel .dropdown-footer-full {
  display: none !important;
}

/* ===========================================
   Responsive - Desktop uniquement
   =========================================== */

@media screen and (max-width: 991px) {
  .morph-dropdown-container,
  .nav-dropdown-area,
  .morph-tarifs {
    display: none !important;
  }

  /* Garder les dropdowns Webflow originaux sur mobile */
  .dropdown-2.w-dropdown {
    display: block !important;
  }
}

@media screen and (min-width: 992px) {
  /* Cacher les dropdowns Webflow originaux sur desktop */
  .dropdown-2.w-dropdown {
    display: none !important;
  }

  .menu-left > a.dropdown-toggle-3.w-nav-link {
    display: none !important;
  }
}

/* ===========================================
   Navbar sticky positioning
   =========================================== */

.navbar-wrapper.w-nav {
  position: sticky !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #ffffff;
}

/* ===========================================
   Fix logo navbar aspect ratio
   =========================================== */

.navbar-3 .brand-3 img {
  width: 120px !important;
  height: 40px !important;
  object-fit: contain !important;
}

/* ===========================================
   Fix hero images aspect ratio
   =========================================== */

.header-image-grid .image-hero1 {
  width: 300px !important;
  height: auto !important;
  object-fit: contain !important;
}

.header-image-grid .image-hero2 {
  width: 250px !important;
  height: auto !important;
  object-fit: contain !important;
}