/* Recherche par famille — modal scoped to the header trigger. */

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

body.codex-family-modal-open {
  overflow: hidden !important;
}

.codex-family-modal[hidden] {
  display: none !important;
}

.codex-family-modal {
  position: fixed !important;
  z-index: 2147483000 !important;
  inset: 0 !important;
  display: flex !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(3, 4, 17, .84) !important;
  font-family: inherit !important;
}

.codex-family-dialog {
  position: relative !important;
  display: grid !important;
  grid-template-rows: 117px minmax(0, 1fr) !important;
  width: min(804px, calc(100vw - 48px)) !important;
  height: min(700px, calc(100vh - 48px)) !important;
  min-height: 420px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35) !important;
  color: #071746 !important;
}

.codex-family-dialog__header {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 36px 64px 0 !important;
  background-image: url('/img/tmp/cms/codex-family-modal-bg.png') !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.codex-family-dialog__title {
  margin: 0 !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 31px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

.codex-family-dialog__close {
  position: absolute !important;
  top: 10px !important;
  right: 14px !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  cursor: pointer !important;
  font-family: Arial, sans-serif !important;
  font-size: 28px !important;
  font-weight: 300 !important;
  line-height: 30px !important;
  opacity: 0 !important;
}

.codex-family-dialog__close:focus-visible,
.codex-family-dialog__close:hover {
  opacity: 1 !important;
}

.codex-family-dialog__search {
  position: absolute !important;
  z-index: 3 !important;
  top: 94px !important;
  left: 50% !important;
  width: 302px !important;
  height: 45px !important;
  transform: translateX(-50%) !important;
}

.codex-family-dialog__input {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 48px 0 31px !important;
  border: 0 !important;
  border-radius: 6px !important;
  outline: 0 !important;
  background: #fff !important;
  color: #6531ff !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 45px !important;
  box-shadow: 0 7px 20px rgba(21, 30, 70, .18) !important;
}

.codex-family-dialog__input::placeholder {
  color: #6531ff !important;
  opacity: 1 !important;
}

.codex-family-dialog__search::after {
  content: '\f002' !important;
  position: absolute !important;
  top: 0 !important;
  right: 22px !important;
  color: #6531ff !important;
  font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', sans-serif !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 45px !important;
  pointer-events: none !important;
}

.codex-family-dialog__body {
  position: relative !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  padding: 47px 31px 17px 7px !important;
  background: #fff !important;
}

.codex-family-dialog__list {
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 7px 0 0 !important;
  scrollbar-color: #6432ff #e5ecfa !important;
  scrollbar-width: thin !important;
}

.codex-family-dialog__list::-webkit-scrollbar {
  width: 6px !important;
}

.codex-family-dialog__list::-webkit-scrollbar-track {
  border-radius: 999px !important;
  background: #e5ecfa !important;
}

.codex-family-dialog__list::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: #6432ff !important;
}

.codex-family-row {
  display: grid !important;
  flex: 0 0 45px !important;
  grid-template-columns: 118px minmax(0, 1fr) !important;
  align-items: center !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 26px !important;
  border-radius: 11px !important;
  color: #071746 !important;
  text-decoration: none !important;
  transition: background .12s ease, color .12s ease !important;
}

.codex-family-row:nth-child(odd) {
  background: #f1f5fa !important;
}

.codex-family-row:hover,
.codex-family-row:focus-visible,
.codex-family-row.is-active {
  outline: 0 !important;
  background: linear-gradient(100deg, #3d7be9, #6429ff) !important;
  color: #fff !important;
}

.codex-family-row__ref,
.codex-family-row__category {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.codex-family-row__ref {
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.codex-family-row__category {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

.codex-family-empty {
  padding: 28px !important;
  color: #071746 !important;
  font-size: 16px !important;
  text-align: center !important;
}

@media (max-width: 767px) {
  .codex-family-modal {
    padding: 12px !important;
  }

  .codex-family-dialog {
    width: calc(100vw - 24px) !important;
    height: calc(100vh - 24px) !important;
    min-height: 360px !important;
    border-radius: 10px !important;
    grid-template-rows: 100px minmax(0, 1fr) !important;
  }

  .codex-family-dialog__header {
    padding: 29px 42px 0 !important;
  }

  .codex-family-dialog__title {
    font-size: 25px !important;
  }

  .codex-family-dialog__search {
    top: 80px !important;
    width: min(302px, calc(100% - 28px)) !important;
  }

  .codex-family-dialog__body {
    padding: 40px 17px 12px 6px !important;
  }

  .codex-family-row {
    grid-template-columns: 88px minmax(0, 1fr) !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
  }

  .codex-family-row__ref,
  .codex-family-row__category {
    font-size: 14px !important;
  }
}