/* home.css — Styles propres à la page d'accueil (choix du profil).
   N'est chargé que par index.html : ce sont ces règles qui font de la
   page d'accueil un "sas" distinct plutôt qu'une page de site classique. */

.gate {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6vh 6vw;
}

.gate-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bee-mark {
  width: min(180px, 30vw);
  filter: drop-shadow(0 0 40px rgba(217, 168, 59, 0.25));
  animation: beeIn 1.1s ease both, beeIdle 6s ease-in-out infinite 1.1s;
}
@keyframes beeIn {
  from { opacity: 0; transform: translateY(-16px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes beeIdle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.wordmark {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  letter-spacing: 0.06em;
  margin-top: 0.6rem;
  color: var(--ink);
}
.wordmark span { color: var(--gold); }

.tagline {
  margin-top: 0.8rem;
  max-width: 36ch;
  font-size: 1.02rem;
  color: var(--ink-dim);
}

.profile-choice {
  display: flex;
  gap: clamp(1rem, 4vw, 2.4rem);
  margin-top: 3.2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.hex-btn {
  position: relative;
  width: min(230px, 40vw);
  height: min(200px, 34vw);
  min-width: 170px;
  min-height: 150px;
  clip-path: var(--hex);
  background: linear-gradient(160deg, var(--bg-raised), var(--bg));
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}
.hex-btn:hover, .hex-btn:focus-visible {
  transform: translateY(-6px);
  background: linear-gradient(160deg, #17222c, var(--bg));
  box-shadow: 0 20px 50px -20px rgba(217, 168, 59, 0.35);
}
.hex-btn .hb-icon {
  width: 36px;
  height: 36px;
  clip-path: var(--hex);
  background: var(--gold);
  opacity: 0.9;
}
.hex-btn.particulier .hb-icon { background: var(--stone); }
.hex-btn .hb-label {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.hex-btn .hb-sub {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
  letter-spacing: 0.05em;
}

.gate-hint {
  margin-top: 2.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-end {
  text-align: center;
  margin-top: 1.4rem;
  padding: 1.2rem 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  color: var(--ink-ghost);
}