/*======================
  Import global styles
======================*/
@import url('global.css');


/*======================
  Header Styles - Bootstrap Compatible
======================*/
.header {
  background-color: var(--blanc);
  position: sticky;
  top: 50px;
  z-index: 9999;
  border-radius: 26px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  width: 90%;
}

.navbar {
  padding: 0 23px;
  height: 72px;
  border-radius: 26px;
}

.navbar-brand {
  position: relative;
  margin-left: -20px;
}

/* fond blanc arrondi pour le logo */
.logo-background {
  position: absolute;
  width: 180px;
  height: 85px; 
  background-color: var(--blanc);
  border-radius: var(--border-radius-xl);
  top: 50px;
  left: -30px;
  z-index: -1;
  transition: all 0.1s ease;
  overflow: hidden;
  /* Prévenir les artefacts de rendu */
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: auto;

  /* Protection contre le téléchargement 
  user-select: none - Empêche la sélection de l'image
  -webkit-user-drag: none - Désactive le glisser-déposer
  -webkit-touch-callout: none - Bloque le menu contextuel sur mobile
  */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.header__logo--img {
  width: 120px;
  height: 120px;
  object-fit: fill;
  z-index: 2;
  margin-top: 20px;
  margin-left: 2px;
  overflow: visible;
  /* Stabiliser le rendu */
  backface-visibility: hidden;
  transform: translateZ(0);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  /* Protection contre le téléchargement 
  user-select: none - Empêche la sélection de l'image
  -webkit-user-drag: none - Désactive le glisser-déposer
  -webkit-touch-callout: none - Bloque le menu contextuel sur mobile
  */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.header__logo--img:hover {
  content: url('/src/assets/logo_meal-after.svg');
} 

/*section logo + accès bêta */
.header .d-flex.align-items-center {
  gap: var(--spacing-md);
}

.header__beta-link--text {
  color: var(--vert-menu);
  font-size: clamp(0.6rem, 1vw, var(--font-size-xs));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-left: 50px;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 2px solid var(--vert-menu);
  border-radius: var(--border-radius);
  transition: var(--transition-normal);
  background-color: transparent;
  white-space: nowrap;
}

/* Navigation desktop */
.navbar-collapse {
  position: static;
  transform: none;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  height: auto;
  width: auto;
  flex-direction: row;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  box-shadow: none;
  border: none;
}

.navbar-nav {
  flex-direction: row;
  width: 90%; /*gérer l'espacement de links */
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  margin-left: 350px;
}

.nav-item {
  margin-bottom: 0;
}

.nav-link {
  font-size: clamp(0.8rem, 1.2vw, var(--font-size-md));
  padding: 0.4rem 1rem;
  border-radius: 8px;
  transition: background-color 0.2s ease, color 0.2s ease;
  color: var(--texte-noir);
  font-weight: 500;
  white-space: nowrap;
}

/* Style pour le hover et focus des liens de navigation - surcharge responsive.css */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  background-color: var(--vert-colline);
  color: var(--blanc);
  border-radius: 16px;
}

.nav-link.active {
  color: var(--blanc) !important;
  background-color: var(--vert-colline);
}


/* Override Bootstrap navbar-toggler */
.navbar-toggler {
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background: rgba(0, 102, 51, 0.05);
  border: 1px solid rgba(0, 102, 51, 0.2);
  transition: all 0.3s ease;
}

.navbar-toggler:hover {
  background-color: rgba(0, 102, 51, 0.15);
  border-color: rgba(0, 102, 51, 0.4);
  transform: scale(1.05);
}

.navbar-toggler:focus {
  /* box-shadow: 0 0 0 0.2rem rgba(0, 102, 51, 0.25); */
  outline: none;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23006633' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}