/* ═══════════════════════════════════════════════════════════════════
   Module compte — flyout de connexion et liens du compte
   ═══════════════════════════════════════════════════════════════════ */

.mc-account-wrap {
  position: relative;
}

.mc-account-fly {
  position: absolute;
  top: calc(100% + 0.625rem);
  right: 0;
  width: 350px;
  background: var(--wp--preset--color--blanc);
  border-radius: var(--wp--custom--radius--lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
  border: 1px solid var(--wp--preset--color--gris-clair);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    opacity 200ms ease,
    transform 200ms ease;
}

.mc-account-fly.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ── Connecté ────────────────────────────────────────────────────── */

.mc-account-fly__connected,
.mc-account-fly__login {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mc-account-fly__greeting {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gris-texte);
}

.mc-account-fly__greeting strong {
  color: var(--wp--preset--color--teal-sombre);
  font-weight: 700;
}

.mc-account-fly__nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.mc-account-fly__link {
  display: block;
  padding: 0.5rem 0.625rem;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  font-variation-settings: "wght" 600;
  color: var(--wp--preset--color--teal-sombre);
  text-decoration: none;
  border-radius: var(--wp--custom--radius--sm);
  transition: background-color 150ms ease;
}

.mc-account-fly__link:hover {
  background: var(--wp--preset--color--gris-clair);
}

.mc-account-fly__link--logout {
  color: var(--wp--preset--color--gris-texte);
  margin-block-start: 0.5rem;
  border-top: 1px solid var(--wp--preset--color--gris-clair);
  padding-block-start: 0.75rem;
  border-radius: 0;
}

/* ── Formulaire de connexion ─────────────────────────────────────── */

.mc-account-fly__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  font-variation-settings: "wght" 700;
  color: var(--wp--preset--color--teal-sombre);
}

.mc-account-fly__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mc-account-fly__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mc-account-fly__label {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  font-variation-settings: "wght" 600;
  color: var(--wp--preset--color--teal-sombre);
}

.mc-account-fly__input {
  height: 44px;
  padding-inline: 0.75rem;
  border: 1.5px solid var(--wp--preset--color--gris-clair);
  border-radius: var(--wp--custom--radius--md);
  font-family: var(--wp--preset--font-family--early-sans);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--teal-sombre);
  background: var(--wp--preset--color--blanc);
  transition: border-color 200ms ease;
}

.mc-account-fly__input:focus {
  outline: none;
  border-color: var(--wp--preset--color--teal);
}

.mc-account-fly__error {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  color: #c0392b;
  background: #fef2f2;
  border-radius: var(--wp--custom--radius--sm);
  padding: 0.5rem 0.625rem;
}

.mc-account-fly__submit {
  width: 100%;
  justify-content: center;
}

.mc-account-fly__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--wp--preset--color--gris-clair);
}

.mc-account-fly__forgot,
.mc-account-fly__register {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gris-texte);
  text-decoration: none;
}

.mc-account-fly__register {
  color: var(--wp--preset--color--teal);
  font-weight: 600;
  font-variation-settings: "wght" 600;
}

.mc-account-fly__forgot:hover {
  text-decoration: underline;
}
.mc-account-fly__register:hover {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .mc-account-fly {
    transition: none;
  }
}