/* Suniia — Formulaires utilisateur (connexion, inscription, mot de passe) */

/* ── Cadre de page : centrage vertical, compact pour tenir en un écran desktop ── */
.path-user .main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 2.5rem 2.5rem;
}

/* ── Carte glassmorphisme ── */
#user-login-form,
#user-register-form,
#user-pass {
  width: 100%;
  max-width: 420px;
  padding: 1.75rem 2rem;
  background: rgba(var(--color-charcoal-rgb), 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--color-champagne-rgb), 0.15);
  box-shadow: 0 8px 32px rgba(var(--color-black-rgb), 0.8);
  border-radius: 12px;
}

/* ── Onglets locaux (Log in / Create account / Reset password) ── */

/* Priority 1 : neutralise les variables Olivero pour les tabs (fond gris, bordure bleue) */
.path-user {
  --tabs-background-color:       transparent;
  --tabs-background-color-hover: transparent;
  --tabs-border-color:           transparent;
  --tabs-text-color:             rgba(var(--color-pearl-rgb), 0.38);
  --tabs-text-color-active:      var(--color-pearl);
  --tabs-highlight-color:        transparent;
}

/* Largeur libre — les tabs ne sont pas contraints à la largeur de la carte */
.path-user .region--highlighted {
  width: auto;
  max-width: none;
  padding-inline: 1rem;
}

/* Liste en rangée sur une seule ligne, centrée */
.path-user .tabs--primary {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0 0.5rem;
  padding: 0;
  margin: 0 0 1.5rem;
  list-style: none;
  border: none;
}

.path-user .tabs__tab {
  display: flex; /* Neutralise le display:none mobile d'Olivero — tous les onglets toujours visibles */
  margin: 0;
  border: none;
}

/* Lien standard — padding horizontal pour zone de clic confortable */
.path-user .tabs__link {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.85rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--color-pearl-rgb), 0.38);
  text-decoration: none;
  transition: color 0.3s ease;
}

.path-user .tabs__link:hover {
  background: transparent;
  border-color: transparent;
  color: var(--color-champagne);
}

/* Lien actif : pastille magenta — indicateur de position clair */
.path-user .tabs__link.is-active {
  background: rgba(var(--color-magenta-rgb), 0.14);
  border-color: rgba(var(--color-magenta-rgb), 0.35);
  color: var(--color-pearl);
  font-weight: 400;
  text-decoration: none;
}

/* Désactive le pseudo-élément ::after d'Olivero (bordure bleue latérale) */
.path-user .tabs__link.is-active::after {
  display: none;
}

/* Cache le bouton hamburger toggle des tabs */
.path-user .tabs__trigger {
  display: none;
}

/* ── Titre h1 ── */
.path-user .page-title {
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-pearl);
  text-align: center;
  margin-block: 0 1.5rem;
}

/* ── Texte d'instruction (ex : password reset) — <p> direct enfant du formulaire ── */
/* Pas de règle Olivero ici : browser defaults (1rem, margin 1em) s'appliquent sans correctif */
#user-pass > p {
  margin-block: 0 1.25rem;
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(var(--color-pearl-rgb), 0.60);
}

/* ── Étoile champ obligatoire — remplace le SVG fill bleu d'Olivero par magenta ── */
.path-user .form-item__label.form-required::after,
.path-user .fieldset__label.form-required::after,
.path-user .required-mark::after {
  background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23B02E6D'/%3E%3C/svg%3E");
}

/* ── Labels ── */
.path-user .form-item__label {
  font-size: 0.6875rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--color-pearl-rgb), 0.50);
  margin-block-end: 0.35rem;
}

/* ── Champs de saisie — neutralise le fond blanc et la bordure grise d'Olivero ── */
.path-user [type="text"],
.path-user [type="password"],
.path-user [type="email"] {
  width: 100%;
  min-height: 2.75rem;
  padding-inline: 0.875rem;
  background: rgba(var(--color-obsidian-rgb), 0.65);
  border: 1px solid rgba(var(--color-pearl-rgb), 0.1);
  border-radius: 6px;
  color: var(--color-pearl);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 300;
  transition: border-color 0.3s ease;
}

.path-user [type="text"]::placeholder,
.path-user [type="password"]::placeholder,
.path-user [type="email"]::placeholder {
  color: rgba(var(--color-pearl-rgb), 0.28);
}

/* ── Focus : remplace le double outline bleu d'Olivero par une bordure dorée ── */
.path-user [type="text"]:focus,
.path-user [type="password"]:focus,
.path-user [type="email"]:focus {
  border: 1px solid var(--color-champagne);
  outline: none;
}

/* ── Bouton de connexion ── */
.path-user .button--primary {
  width: 100%;
  justify-content: center;
  /* padding-block explicite — Olivero applique padding-block:1px 0 qui écrase min-height */
  padding-block: 0.75rem;
  padding-inline: 1.5rem;
  margin-block: 2rem 0;
  background-color: var(--color-magenta);
  border: 1px solid var(--color-magenta);
  border-radius: 6px;
  color: var(--color-pearl);
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  animation: form-halo-pulse 3s ease-in-out infinite;
}

.path-user .button--primary:hover,
.path-user .button--primary:focus {
  background-color: var(--color-magenta);
  border-color: var(--color-magenta);
  color: var(--color-pearl);
  opacity: 0.82;
}

/* ── Liens secondaires (mot de passe oublié, créer un compte) ── */
.path-user .main-content a:not(.button) {
  color: rgba(var(--color-champagne-rgb), 0.55);
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: color 0.3s ease;
}

.path-user .main-content a:not(.button):hover {
  color: var(--color-champagne);
}

/* ── Champ Sexe (Gender) — même style visuel que les onglets locaux ── */

/* Fieldset : supprime tout fond et bordure Olivero */
.path-user #edit-field-gender-wrapper fieldset {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
}

/* La bordure grise vient de .fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper (0,3,0) :
   l'ID selector #edit-field-gender-wrapper (1,0,0) suffit à gagner */
.path-user #edit-field-gender-wrapper .fieldset__wrapper {
  border: none;
  padding: 0;
}

/* Legend : neutralise le fond gris-bleu d'Olivero */
.path-user #edit-field-gender-wrapper .fieldset__legend {
  background: transparent;
  float: none;
  width: 100%;
  padding: 0;
  margin-block-end: 0.35rem;
  border-radius: 0;
}

.path-user #edit-field-gender-wrapper .fieldset__label {
  padding: 0;
  font-size: 0.6875rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--color-pearl-rgb), 0.50);
}

/* Groupe : rangée pleine largeur, équirépartie */
.path-user .form-boolean-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  width: 100%;
}

/* Chaque item prend la même part — flex: 1 */
.path-user .form-boolean-group .form-type-radio {
  flex: 1;
  margin: 0;
  position: relative;
}

/* Masque le radio natif en conservant l'accessibilité clavier */
.path-user .form-boolean-group .form-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Label = pill inactif, identique aux onglets locaux inactifs */
.path-user .form-boolean-group .form-item__label.option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.3rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-size: 0.6875rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--color-pearl-rgb), 0.38);
  cursor: pointer;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0;
}

/* Hover */
.path-user .form-boolean-group .form-item__label.option:hover {
  color: var(--color-champagne);
  background: transparent;
  border-color: transparent;
}

/* Sélectionné : pastille champagne — plus subtil que magenta sur fond sombre */
.path-user .form-boolean-group .form-radio:checked + .form-item__label.option {
  background: rgba(var(--color-champagne-rgb), 0.15);
  border-color: rgba(var(--color-champagne-rgb), 0.50);
  color: var(--color-champagne);
  font-weight: 400;
}

/* Focus clavier : outline magenta */
.path-user .form-boolean-group .form-radio:focus + .form-item__label.option {
  outline: 2px solid rgba(var(--color-magenta-rgb), 0.50);
  outline-offset: 2px;
}

/* ── Description des champs ── */
.path-user .form-item__description {
  font-size: 0.6875rem;
  font-weight: 300;
  color: rgba(var(--color-pearl-rgb), 0.35);
  margin-block-start: 0.4rem;
}

/* ── Keyframe : halo respirant sur le bouton ── */
@keyframes form-halo-pulse {
  0%, 100% { box-shadow: 0 0 18px 4px rgba(var(--color-magenta-rgb), 0.30); }
  50%       { box-shadow: 0 0 32px 10px rgba(var(--color-magenta-rgb), 0.55); }
}

/* ── Mobile : réduction des marges pour que le bouton reste visible sans défilement ── */
@media (max-width: 43.75rem) {
  .path-user .main-content {
    padding-block: 0.75rem 1.5rem;
  }

  .path-user .tabs--primary {
    margin-block-end: 0.75rem;
  }

  .path-user .page-title {
    font-size: 1rem;
    margin-block-end: 0.875rem;
  }

  #user-login-form,
  #user-register-form,
  #user-pass {
    padding: 1.25rem 1.25rem;
  }

  .path-user .button--primary {
    margin-block-start: 1.25rem;
  }
}

/* ── Correction débordement .layout-container d'Olivero sur les pages formulaires ──
   Olivero applique padding-inline et max-width via .layout-container qui peuvent
   provoquer un scroll horizontal dans notre contexte de centrage flex. */
.path-user .layout-container {
  max-width: 100%;
  padding-inline: 1rem;
  overflow-x: hidden;
}