/* Hero design 2026 — charbon rayé, mot breton fantôme,
   barre de recherche QUOI / QUAND / OÙ à cheval sur le bas. */

.tk-hero {
  position: relative;
  background: var(--tk-gray-900, #26221f);
  padding: 4.5rem 0 0;
  overflow: visible;
}

.tk-hero__stripes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    #2b2622 0,
    #2b2622 16px,
    #302a25 16px,
    #302a25 32px
  );
}

.tk-hero__content {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding-bottom: 6rem;
}

.tk-hero__ghost {
  position: absolute;
  top: -58px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--tk-font-heading);
  font-weight: var(--tk-font-weight-extrabold, 800);
  font-size: 5.5rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.05);
  white-space: nowrap;
  pointer-events: none;
}

.tk-hero__title {
  position: relative;
  font-family: var(--tk-font-heading);
  font-weight: var(--tk-font-weight-bold, 700);
  font-size: 2.75rem;
  line-height: 1.15;
  color: var(--tk-white, #fff);
  margin: 0;
}

.tk-hero__title-accent {
  color: var(--tk-orange-light, #f0a13a);
}

.tk-hero__lead {
  position: relative;
  color: #c9c1b6;
  font-size: 1.0625rem;
  margin: 1rem auto 0;
  max-width: 640px;
}

/* Barre de recherche à cheval sur le bas du hero */
.tk-hero-search {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  max-width: 940px;
  margin: -2.75rem auto 0;
  transform: translateY(2.75rem);
  background: var(--tk-surface, #fff);
  border-radius: var(--tk-radius-lg, 14px);
  box-shadow: 0 16px 40px rgba(38, 34, 31, 0.16);
}

.tk-hero-search__field {
  flex: 1;
  padding: 14px 22px;
  border-right: 1px solid var(--tk-border-light, #eee8de);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tk-hero-search__field:first-child {
  flex: 1.1;
}

.tk-hero-search__label {
  font-size: 0.65625rem;
  font-weight: var(--tk-font-weight-bold, 700);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tk-gray-500, #8b8377);
}

.tk-hero-search__control {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--tk-font-primary);
  font-size: 0.96875rem;
  font-weight: var(--tk-font-weight-semibold, 600);
  color: var(--tk-gray-900, #26221f);
  margin-top: 2px;
  padding: 0;
  width: 100%;
  appearance: none;
  cursor: pointer;
}

.tk-hero-search__control::placeholder {
  color: var(--tk-gray-400, #b3aa9d);
  font-weight: var(--tk-font-weight-semibold, 600);
}

.tk-hero-search__control:focus-visible {
  outline: 2px solid var(--tk-orange-light);
  outline-offset: 2px;
  border-radius: 4px;
}

.tk-hero-search__submit {
  width: 64px;
  flex: none;
  border: none;
  cursor: pointer;
  background: var(--tk-orange, #ee8b00);
  border-radius: 0 var(--tk-radius-lg, 14px) var(--tk-radius-lg, 14px) 0;
  color: var(--tk-white, #fff);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color var(--tk-transition-fast);
}

.tk-hero-search__submit:hover {
  background: var(--tk-orange-dark, #c26f00);
}

.tk-hero-search__submit-text {
  display: none;
}

/* L'espace occupé par la barre au-dessous du hero */
.tk-hero::after {
  content: '';
  display: block;
  height: 2.75rem;
}

/* Mobile : champs empilés, bouton pleine largeur avec libellé */
@media (max-width: 767.98px) {
  .tk-hero {
    padding-top: 2.5rem;
  }

  .tk-hero__content {
    padding-bottom: 4rem;
  }

  .tk-hero__ghost {
    top: -28px;
    font-size: 2.75rem;
  }

  .tk-hero__title {
    font-size: 1.625rem;
  }

  .tk-hero__lead {
    font-size: 0.875rem;
  }

  .tk-hero-search {
    flex-direction: column;
    padding: 6px;
    margin-top: -2.5rem;
    transform: translateY(2.5rem);
    box-shadow: 0 12px 30px rgba(38, 34, 31, 0.16);
  }

  .tk-hero-search__field {
    border-right: none;
    border-bottom: 1px solid var(--tk-border-light, #eee8de);
    padding: 10px 14px;
  }

  .tk-hero-search__field:last-of-type {
    border-bottom: none;
  }

  .tk-hero-search__submit {
    width: auto;
    margin: 6px;
    padding: 12px;
    border-radius: var(--tk-radius-md, 10px);
    font-size: 0.9375rem;
    font-weight: var(--tk-font-weight-bold, 700);
  }

  .tk-hero-search__submit-text {
    display: inline;
    font-size: 0.9375rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tk-hero-search__submit {
    transition: none;
  }
}