/* 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;
}

/* En dessous de 480px, le hex-btn est contraint à sa taille plancher
   (min-width/min-height ci-dessus) : le sous-texte sur 2 lignes déborde
   alors du polygone hexagonal et se retrouve tronqué. On lui donne un peu
   plus de hauteur et un texte plus compact pour rester dans la zone
   "sûre" de la forme. */
@media (max-width: 480px) {
  .hex-btn {
    height: min(200px, 46vw);
    min-height: 185px;
    gap: 0.35rem;
  }
  .hex-btn .hb-sub {
    font-size: 0.64rem;
    letter-spacing: 0.02em;
    max-width: 92px;
  }
}

.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);
}