/*
 * Les Œufs Frais - Header final v1.0.6
 * Remplace proprement l'affichage du header.
 */

/* Masque les anciens éléments directs du header, sauf le nouveau header final. */
header.lof-final-header-active > *:not([data-lof-final-header="1"]),
.site-header.lof-final-header-active > *:not([data-lof-final-header="1"]),
#masthead.lof-final-header-active > *:not([data-lof-final-header="1"]) {
  display: none !important;
}

.lof-final-header {
  width: 100% !important;
  max-width: 1380px !important;
  margin: 0 auto !important;
  padding: 10px clamp(16px, 2vw, 30px) !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(34px, 4vw, 72px) !important;
  flex-wrap: nowrap !important;
}

.lof-final-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  text-decoration: none !important;
  color: inherit !important;
  min-width: max-content !important;
}

.lof-final-brand-img {
  height: 54px !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
  background: transparent !important;
  flex: 0 0 auto !important;
  filter: drop-shadow(0 4px 8px rgba(59, 36, 18, 0.12));
}

.lof-final-brand-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 5px !important;
  line-height: 1 !important;
  text-align: left !important;
}

.lof-final-brand-title {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #d11f2b !important;
  font-weight: 900 !important;
  font-size: clamp(1.35rem, 1.9vw, 2rem) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.lof-final-brand-subtitle {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #7a4b24 !important;
  font-weight: 800 !important;
  font-size: clamp(0.82rem, 0.95vw, 1.02rem) !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

.lof-final-menu {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(18px, 1.8vw, 34px) !important;
  flex: 0 1 auto !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.lof-final-menu-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  color: #3b2412 !important;
  font-weight: 900 !important;
  font-size: clamp(0.82rem, 0.95vw, 1rem) !important;
  line-height: 1 !important;
}

.lof-final-menu-link:hover,
.lof-final-menu-link:focus {
  color: #c91f28 !important;
}

.lof-final-menu-cta {
  background: #c91f28 !important;
  color: #fff !important;
  padding: 12px 24px !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 22px rgba(201, 31, 40, 0.22) !important;
}

.lof-final-menu-cta:hover,
.lof-final-menu-cta:focus {
  color: #fff !important;
}

/* Tablette : on reste propre, sans décalage. */
@media (max-width: 1180px) {
  .lof-final-header {
    gap: 22px !important;
    max-width: 100% !important;
  }

  .lof-final-brand-img {
    height: 46px !important;
  }

  .lof-final-menu {
    gap: 14px !important;
  }

  .lof-final-menu-link {
    font-size: 0.82rem !important;
  }

  .lof-final-menu-cta {
    padding: 10px 18px !important;
  }
}

/* Responsive : le bloc marque reste centré, le menu passe proprement dessous si nécessaire. */
@media (max-width: 920px) {
  .lof-final-header {
    flex-direction: column !important;
    gap: 12px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .lof-final-brand {
    justify-content: center !important;
  }

  .lof-final-menu {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 12px 18px !important;
  }
}

@media (max-width: 560px) {
  .lof-final-brand-img {
    height: 42px !important;
  }

  .lof-final-brand-title {
    font-size: 1.25rem !important;
  }

  .lof-final-brand-subtitle {
    font-size: 0.78rem !important;
  }

  .lof-final-menu {
    gap: 10px 14px !important;
  }

  .lof-final-menu-link {
    font-size: 0.8rem !important;
  }

  .lof-final-menu-cta {
    padding: 9px 16px !important;
  }
}