/**
 * Header CSS for Habitat Module
 */

.page-habitat .card-block, .page-bwa-realizationscategory .card-block {
  padding    : 0;
  margin     : 0;
  background : var(--color-white-default);
}

.page-habitat .page-header, .page-bwa-realizationscategory .page-header {
  overflow : hidden;
}

.habitat-header {
  background    : var(--color-primary);
  box-shadow    : 0 2px 10px rgba(0, 0, 0, 0.1);
  padding       : 15px 0;
  margin-bottom : 0;
  position      : sticky;
  top           : 95px;
  z-index       : 1000;
}

.habitat-nav {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  flex-wrap       : wrap;
}

.habitat-logo img {
  max-height : 50px;
  width      : auto;
}

.habitat-menu {
  display     : flex;
  align-items : center;
  list-style  : none;
  margin      : 0;
  padding     : 0;
  gap         : 2rem;
}

.habitat-menu .menu-accent a {
  color       : var(--color-pro);
  font-weight : 700;
}

.habitat-menu > li {
  position : relative;
}

.habitat-menu > li > a {
  color           : #C6CDE3;
  text-align      : center;
  font-size       : 14px;
  font-style      : normal;
  font-weight     : 500;
  line-height     : normal;
  text-decoration : none;
  display         : block;
  position        : relative;
}

/* Désactiver les classes 'active' automatiques */

.habitat-menu > li.active:not(.menu-active) > a::after {
  width : 0;
}

.habitat-menu > li > a::after {
  content    : '';
  position   : absolute;
  bottom     : 0;
  left       : 0;
  width      : 0;
  height     : 2px;
  transition : width 0.3s ease;
}

.habitat-menu > li:hover > a::after,
.habitat-menu > li.menu-active > a::after {
  width : 100%;
}

/* Dropdown Menu */
.habitat-menu .dropdown {
  position : relative;
}

.habitat-menu .dropdown::after {
  content  : '';
  position : absolute;
  top      : 100%;
  left     : 0;
  right    : 0;
  height   : 35px;
  z-index  : 999;
}

.habitat-menu .dropdown-toggle {
  display     : flex;
  align-items : center;
  gap         : 0.5rem;
  cursor      : pointer;
}

.habitat-menu .dropdown-toggle .caret {
  border-top   : 4px solid;
  border-right : 4px solid transparent;
  border-left  : 4px solid transparent;
  display      : inline-block;
  transition   : transform 0.3s ease;
}

.habitat-menu .dropdown:hover .dropdown-toggle .caret {
  transform : rotate(180deg);
}

.habitat-menu .dropdown-menu {
  position      : absolute;
  top           : 100%;
  left          : 0;
  background    : white;
  min-width     : 250px;
  box-shadow    : 0 8px 25px rgba(0, 0, 0, 0.15);
  border-radius : 8px;
  padding       : 1rem 0;
  list-style    : none;
  margin        : 0;
  opacity       : 0;
  visibility    : hidden;
  transform     : translateY(10px);
  transition    : all 0.3s ease;
  z-index       : 1001;
}

.habitat-menu .dropdown:hover .dropdown-menu {
  display    : flex;
  opacity    : 1;
  visibility : visible;
  transform  : translateY(35px);
}

.habitat-menu .dropdown-menu li {
  margin : 0;
}

.habitat-menu .dropdown-menu a {
  display         : block;
  padding         : 0.75rem 1.5rem;
  text-decoration : none;
  border-radius   : 0;
  transition      : all 0.3s ease;
}

.habitat-menu .dropdown-menu a:hover {
  background-color : #f8f9fa;
}

/* Structure pour le menu des services avec icônes et image preview */
.habitat-menu .dropdown .services-menu {
  display       : none;
  min-width     : 580px;
  border-radius : 24px;
  border        : 0.8px solid #C9C9C9;
  background    : #FFF;
  box-shadow    : 0 4px 20px 0 rgba(0, 0, 0, 0.15);
  padding       : 25px;
}

/* Triangle de bulle vers le haut avec SVG personnalisé */
.habitat-menu .dropdown .dropdown-menu::before {
  content           : '';
  position          : absolute;
  top               : -16px;
  left              : 50px;
  width             : 26.8px;
  height            : 16px;
  background-image  : url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.8 16"><defs><style>.st0{fill:%23c9c9c9;}.st1{fill:%23fff;}</style></defs><path class="st1" d="M26.2,16L15.4,1.5c-1-1.3-3-1.3-4,0L.6,16h25.6Z"/><path class="st0" d="M1.2,16L11.8,1.8c.4-.5,1-.8,1.6-.8s1.2.3,1.6.8l10.6,14.2h1.2L15.8,1.2C15.2.5,14.4,0,13.4,0s-1.8.4-2.4,1.2L0,16h1.2Z"/></svg>');
  background-repeat : no-repeat;
  background-size   : contain;
  z-index           : 2;
}

.habitat-menu .dropdown .services-content {
  flex            : 1;
  min-width       : 420px;
  max-height      : 470px;
  overflow-y      : auto;
  scrollbar-width : thin;
  scrollbar-color : #ccc transparent;
}

.habitat-menu .dropdown .services-content::-webkit-scrollbar {
  width : 6px;
}

.habitat-menu .dropdown .services-content::-webkit-scrollbar-track {
  background : transparent;
}

.habitat-menu .dropdown .services-content::-webkit-scrollbar-thumb {
  background    : #ccc;
  border-radius : 6px;
}

.habitat-menu .dropdown .services-content::-webkit-scrollbar-thumb:hover {
  background : #999;
}


.habitat-menu .dropdown .services-image {
  width           : 400px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  padding-left    : 20px;
  border-radius   : 0 24px 24px 0;
}

.habitat-menu .dropdown .services-image .image-container {
  width           : 100%;
  height          : 380px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  overflow        : hidden;
  border-radius   : 16px;
  max-width       : 400px;
}

.habitat-menu .dropdown .services-image .service-preview {
  max-width  : 100%;
  max-height : 100%;
  object-fit : contain;
  transition : opacity 0.3s ease;
}

.habitat-menu .dropdown-menu .service-menu-item {
  display       : flex;
  align-items   : center;
  gap           : 10px;
  padding       : 10px 5px;
  min-height    : 60px;
  border-radius : 0;
  transition    : all 0.3s ease;
}

.habitat-menu .dropdown-menu .service-menu-item:hover {
  background-color : #f8f9fa;
  border-radius    : 6px;
}

.habitat-menu .dropdown-menu .service-icon {
  flex-shrink     : 0;
  width           : 40px;
  height          : 40px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  border-radius   : 12px;
  border          : 1px solid #DCDCDC;
  padding         : 10px;
}

.habitat-menu .dropdown-menu .service-icon img {
  width      : 32px;
  height     : 32px;
  object-fit : contain;
}

.habitat-menu .dropdown-menu .service-content {
  flex           : 1;
  display        : flex;
  flex-direction : column;
  gap            : 4px;
}

.habitat-menu .dropdown-menu .service-content strong {
  display     : block;
  color       : #2C3248;
  font-size   : 16px;
  font-style  : normal;
  font-weight : 600;
  line-height : 24px; /* 150% */
}

.habitat-menu .dropdown-menu .service-content small {
  display     : block;
  margin      : 0;
  color       : rgba(0, 0, 0, 0.50);
  font-size   : 15px;
  font-style  : normal;
  font-weight : 400;
  line-height : 22px; /* 146.667% */
}

.habitat-menu .dropdown-menu .service-menu-item:hover .service-content small {
  color : #888;
}

/* Mobile Toggle */
.habitat-mobile-toggle {
  display : none;
}

.navbar-toggle {
  background    : none;
  padding       : 0.5rem;
  border-radius : 4px;
  cursor        : pointer;
}

.navbar-toggle .icon-bar {
  display          : block;
  width            : 22px;
  height           : 2px;
  margin           : 4px 0;
  background-color : var(--color-white-default);
}

.navbar-toggle:hover .icon-bar {
  background-color : white;
}

.sr-only {
  position    : absolute;
  width       : 1px;
  height      : 1px;
  padding     : 0;
  margin      : -1px;
  overflow    : hidden;
  clip        : rect(0, 0, 0, 0);
  white-space : nowrap;
  border      : 0;
}

.dropdown-menu.about-menu {
  flex-direction : column;
}

.dropdown-menu.about-menu a {
  color       : var(--color-primary);
  font-size   : 16px;
  font-style  : normal;
  font-weight : 600;
  line-height : 24px;
}

@media (max-width : 1024px) {
  .habitat-menu .dropdown .services-menu {
    min-width : 480px;
  }

  .habitat-menu .dropdown .services-content {
    min-width : 300px;
  }

  .habitat-menu .dropdown .services-image {
    width : 300px;
  }
}

/* Mobile Responsive */
@media (max-width : 768px) {
  .habitat-header {
    display : none;
  }
}