.elementor-72 .elementor-element.elementor-element-9ee7f9a{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:35px;--padding-right:35px;--z-index:556;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-72 .elementor-element.elementor-element-9ee7f9a{--content-width:1600px;}}/* Start custom CSS *//* ========================================
   MENU FLOTTANT BULLE CNCT
   ======================================== */

.cnct-float-nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  box-shadow: none;
}

.cnct-float-nav-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Item de navigation */
.cnct-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 40px;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  border: 2px solid transparent;
}

.cnct-nav-item[data-color="red"] { border-color: #C62828; }
.cnct-nav-item[data-color="blue"] { border-color: #2962FF; }
.cnct-nav-item[data-color="gold"] { border-color: #E1AD01; }

/* Fond coloré au hover/active */
.cnct-nav-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 40px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.cnct-nav-item[data-color="red"]::before { background: #C62828; }
.cnct-nav-item[data-color="blue"]::before { background: #2962FF; }
.cnct-nav-item[data-color="gold"]::before { background: #E1AD01; }

.cnct-nav-item:hover::before,
.cnct-nav-item.active::before {
  opacity: 1;
}

.cnct-nav-item:hover,
.cnct-nav-item.active {
  color: white;
  transform: scale(1.05);
}

/* Anneau SVG tournant */
.cnct-nav-ring {
  position: absolute;
  inset: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Adapter le SVG à la forme pill (pas cercle) */
.cnct-nav-ring circle {
  display: none;
}

.cnct-nav-item:hover .cnct-nav-ring,
.cnct-nav-item.active .cnct-nav-ring {
  opacity: 1;
  transform: rotate(360deg);
}

/* Bordure pill tournante : on utilise un border CSS à la place du SVG cercle */
.cnct-nav-item::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 40px;
  border: 2.5px solid transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: none;
  pointer-events: none;
}

.cnct-nav-item[data-color="red"]::after { border-color: #C62828; }
.cnct-nav-item[data-color="blue"]::after { border-color: #2962FF; }
.cnct-nav-item[data-color="gold"]::after { border-color: #E1AD01; }

.cnct-nav-item:hover::after,
.cnct-nav-item.active::after {
  opacity: 1;
  animation: navBorderSpin 1.5s linear infinite;
}

@keyframes navBorderSpin {
  0% {
    clip-path: inset(0 0 50% 50%);
    transform: rotate(0deg);
  }
  25% {
    clip-path: inset(0 0 0 50%);
  }
  50% {
    clip-path: inset(0 0 0 0);
    transform: rotate(180deg);
  }
  75% {
    clip-path: inset(50% 0 0 0);
  }
  100% {
    clip-path: inset(0 0 50% 50%);
    transform: rotate(360deg);
  }
}

/* Alternative plus simple et élégante : rotation d'un gradient border */
.cnct-nav-item {
  --border-angle: 0deg;
}

.cnct-nav-item:hover,
.cnct-nav-item.active {
  --border-angle: 360deg;
}

/* Glow subtil au hover */
.cnct-nav-item[data-color="red"]:hover,
.cnct-nav-item[data-color="red"].active {
  box-shadow: 0 0 16px rgba(198, 40, 40, 0.3);
}
.cnct-nav-item[data-color="blue"]:hover,
.cnct-nav-item[data-color="blue"].active {
  box-shadow: 0 0 16px rgba(41, 98, 255, 0.3);
}
.cnct-nav-item[data-color="gold"]:hover,
.cnct-nav-item[data-color="gold"].active {
  box-shadow: 0 0 16px rgba(225, 173, 1, 0.3);
}

/* Texte au-dessus du fond */
.cnct-nav-item span {
  position: relative;
  z-index: 1;
}

/* ===== RESPONSIVE ===== */

/* Tablette */
@media (max-width: 1024px) {
  .cnct-float-nav {
    padding: 0;
  }
  .cnct-nav-item {
    padding: 8px 14px;
    font-size: 0.75rem;
  }
  .cnct-float-nav-inner {
    gap: 4px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .cnct-float-nav {
    top: 10px;
    left: 0;
    right: 0;
    transform: none;
    padding: 0 10px;
  }
  .cnct-float-nav-inner {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px 4px;
  }
  .cnct-float-nav-inner::-webkit-scrollbar {
    display: none;
  }
  .cnct-nav-item {
    padding: 8px 16px;
    font-size: 0.75rem;
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}

/* Très petit mobile */
@media (max-width: 400px) {
  .cnct-nav-item {
    padding: 7px 14px;
    font-size: 0.7rem;
  }
}/* End custom CSS */