/**
 * Point d'entrée Alpha-test de l'accueil.
 *
 * Référence Figma: Next/Social/AlphaTestEntry (2086:3434).
 * Le contexte du fil pilote les deux couleurs d'identité.
 */

.fl-alpha-test-entry {
  --fl-alpha-entry-accent: var(--fl-color-entity-particulier-clair, #00a2b7);
  --fl-alpha-entry-accent-light: var(--fl-color-entity-particulier-fonce, #63dbeb);
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fl-space-12, 12px);
  padding: var(--fl-space-20, 20px);
  border: 1px solid var(--fl-color-border, #e6ecf5);
  border-radius: var(--fl-radius-16, 16px);
  background: var(--fl-color-surface, #fff);
  color: var(--fl-color-text-primary, #111);
  font-family: var(--fl-font-family-body, Poppins, Helvetica, sans-serif);
}

.fl-alpha-test-entry--public {
  --fl-alpha-entry-accent: var(--fl-color-entity-particulierpro-clair, #198fd8);
  --fl-alpha-entry-accent-light: var(--fl-color-entity-particulierpro-fonce, #7acbff);
}

.fl-alpha-test-entry--sidebar {
  margin-top: var(--fl-space-12, 12px);
}

.fl-alpha-test-entry--mobile {
  display: none;
  max-width: 358px;
  margin-right: auto;
  margin-bottom: var(--fl-space-16, 16px);
  margin-left: auto;
}

.fl-alpha-test-entry__context,
.fl-alpha-test-entry__mission,
.fl-alpha-test-entry__primary-action {
  box-sizing: border-box;
  width: 100%;
  border-radius: var(--fl-radius-12, 12px);
}

.fl-alpha-test-entry__context {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: var(--fl-space-8, 8px);
  padding: var(--fl-space-12, 12px);
  overflow: hidden;
  background: var(--fl-alpha-entry-accent-light);
  color: #fff;
  font-size: 10px;
  font-weight: var(--fl-font-weight-semibold, 600);
  line-height: 1.4;
  text-transform: uppercase;
}

.fl-alpha-test-entry__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  display: block;
}

.fl-alpha-test-entry__dot img {
  width: 8px;
  height: 8px;
  display: block;
}

.fl-alpha-test-entry__eyebrow,
.fl-alpha-test-entry h2,
.fl-alpha-test-entry__body,
.fl-alpha-test-entry__mission p,
.fl-alpha-test-entry__mission strong,
.fl-alpha-test-entry__proof {
  width: 100%;
  margin: 0;
}

.fl-alpha-test-entry__eyebrow {
  color: var(--fl-color-text-primary, #111);
  font-size: 10px;
  font-weight: var(--fl-font-weight-semibold, 600);
  line-height: 1.4;
  text-transform: uppercase;
}

.fl-alpha-test-entry h2 {
  color: var(--fl-color-text-primary, #111);
  font-size: 20px;
  font-weight: var(--fl-font-weight-bold, 700);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.fl-alpha-test-entry__body {
  color: var(--fl-color-text-secondary, #555);
  font-size: 12px;
  font-weight: var(--fl-font-weight-regular, 400);
  line-height: 1.55;
}

.fl-alpha-test-entry__mission {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fl-space-8, 8px);
  padding: var(--fl-space-12, 12px);
  overflow: hidden;
  background: var(--fl-alpha-entry-accent-light);
  color: #fff;
}

.fl-alpha-test-entry__mission p {
  font-size: 9px;
  font-weight: var(--fl-font-weight-semibold, 600);
  line-height: 1.4;
  text-transform: uppercase;
}

.fl-alpha-test-entry__mission strong {
  font-size: 12px;
  font-weight: var(--fl-font-weight-semibold, 600);
  line-height: 1.5;
}

.fl-alpha-test-entry__proof {
  display: flex;
  align-items: center;
  gap: var(--fl-space-8, 8px);
  color: var(--fl-color-text-muted, #798ea4);
  font-size: 10px;
  font-weight: var(--fl-font-weight-medium, 500);
  line-height: 1.5;
}

.fl-alpha-test-entry__primary-action {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: var(--fl-space-12, 12px) var(--fl-space-20, 20px);
  background: var(--fl-alpha-entry-accent);
  color: #fff;
  font-size: 13px;
  font-weight: var(--fl-font-weight-semibold, 600);
  line-height: 1.4;
  text-decoration: none;
  transition: filter 150ms ease, transform 150ms ease;
}

.fl-alpha-test-entry__primary-action:hover {
  color: #fff;
  text-decoration: none;
  filter: brightness(0.96);
  transform: translateY(-1px);
}

.fl-alpha-test-entry__primary-action:focus-visible,
.fl-alpha-test-entry__secondary-action:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--fl-alpha-entry-accent) 42%, transparent);
  outline-offset: 3px;
}

.fl-alpha-test-entry__secondary-action {
  display: inline-flex;
  align-items: center;
  gap: var(--fl-space-8, 8px);
  color: var(--fl-color-text-primary, #111);
  font-size: 12px;
  font-weight: var(--fl-font-weight-semibold, 600);
  line-height: 1.5;
  text-decoration: none;
}

.fl-alpha-test-entry__secondary-action:hover {
  color: var(--fl-alpha-entry-accent);
  text-decoration: none;
}

body.night-mode .fl-alpha-test-entry {
  border-color: var(--fl-color-dark-border, #2e3f4d);
  background: var(--fl-color-dark-surface, #262d34);
}

body.night-mode .fl-alpha-test-entry h2,
body.night-mode .fl-alpha-test-entry__eyebrow,
body.night-mode .fl-alpha-test-entry__secondary-action {
  color: var(--fl-color-dark-text, #c1d4e3);
}

body.night-mode .fl-alpha-test-entry__body {
  color: var(--fl-color-dark-input-text, #eaeaea);
}

@media (max-width: 767px) {
  .fl-alpha-test-entry--sidebar {
    display: none;
  }

  .fl-alpha-test-entry--mobile {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fl-alpha-test-entry__primary-action {
    transition: none;
  }
}