/* Compte / Auth — D.Majin */

.section-compte {
  padding: var(--space-2xl) 0;
}

/* Artefacts — même rythme vertical + fond cohérent avec le site */
.section.section-artefacts {
  padding: var(--space-2xl) 0;
  background-color: var(--noir);
  background-image:
    radial-gradient(ellipse 78% 42% at 50% -16%, rgba(0, 245, 212, 0.11), transparent 52%),
    radial-gradient(ellipse 50% 38% at 96% 32%, rgba(254, 228, 64, 0.05), transparent 50%),
    linear-gradient(180deg, var(--noir-2) 0%, var(--noir) 48%, var(--noir-2) 100%);
}

.section.section-artefacts .container-artefacts {
  position: relative;
  z-index: 1;
}

.container-compte {
  max-width: 420px;
  margin: 0 auto;
}

/* Choix initial Créer / Connexion */
.auth-choice {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}

.auth-choice-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: var(--space-xl);
  background: var(--noir-2);
  border: 2px solid var(--noir-3);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  font-family: var(--font-body);
  text-align: center;
}

.auth-choice-btn:hover {
  border-color: var(--turquoise);
  background: var(--turquoise-dim);
}

.auth-choice-create { color: var(--blanc); }
.auth-choice-create:hover { color: var(--turquoise); }

.auth-choice-login { color: var(--gris); }
.auth-choice-login:hover { color: var(--turquoise); }

.auth-choice-icon {
  font-size: 2rem;
  margin-bottom: 0.25rem;
}

.auth-choice-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.05em;
}

.auth-choice-desc {
  font-size: 0.85rem;
  color: var(--gris);
}

.auth-choice-login .auth-choice-desc { color: var(--gris); }

.auth-card,
.auth-form {
  background: var(--noir-2);
  border: 1px solid var(--noir-3);
  border-radius: 12px;
  padding: var(--space-xl);
  margin: var(--space-lg) 0;
}

.auth-card h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--turquoise);
  margin-bottom: var(--space-md);
  letter-spacing: 0.05em;
}

.auth-card label {
  display: block;
  font-size: 0.85rem;
  color: var(--gris);
  margin-top: var(--space-sm);
  margin-bottom: 0.25rem;
}

.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"] {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--noir);
  border: 2px solid var(--noir-3);
  border-radius: 8px;
  color: var(--blanc);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.2s var(--ease);
}

.input-password-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-password-wrap input {
  flex: 1;
  padding-right: 2.75rem;
}

.btn-toggle-pwd {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.25rem;
  opacity: 0.7;
  color: var(--gris);
}

.btn-toggle-pwd:hover {
  opacity: 1;
  color: var(--turquoise);
}

.auth-forgot {
  margin-top: 0.5rem;
  margin-bottom: 0;
  font-size: 0.85rem;
}

.auth-forgot a {
  color: var(--gris);
  text-decoration: none;
}

.auth-forgot a:hover {
  color: var(--turquoise);
  text-decoration: underline;
}

.auth-card input:focus {
  outline: none;
  border-color: var(--turquoise);
}

.auth-card input::placeholder {
  color: var(--gris);
  opacity: 0.7;
}

.btn-full {
  width: 100%;
  margin-top: var(--space-md);
  padding: 0.9rem;
}

.auth-switch {
  margin-top: var(--space-md);
  font-size: 0.9rem;
  color: var(--gris);
  text-align: center;
}

.auth-switch a {
  color: var(--turquoise);
  text-decoration: none;
  font-weight: 500;
}

.auth-switch a:hover {
  text-decoration: underline;
}

/* Choix personnage */
.character-choice {
  display: flex;
  gap: var(--space-md);
  margin: var(--space-sm) 0 var(--space-md);
}

.char-option {
  flex: 1;
  cursor: pointer;
  display: block;
}

.char-option input {
  display: none;
}

.char-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: var(--noir);
  border: 2px solid var(--noir-3);
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s var(--ease);
}

.char-option input:checked + .char-preview {
  border-color: var(--turquoise);
  background: var(--turquoise-dim);
  color: var(--turquoise);
}

.char-preview:hover {
  border-color: var(--gris);
}

.auth-label {
  margin-top: var(--space-md) !important;
}

/* Profil connecté */
.profile-panel {
  margin: var(--space-xl) 0;
}

.profile-header {
  margin-bottom: var(--space-lg);
}

.profile-header h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--turquoise);
  margin-bottom: 0.25rem;
  letter-spacing: 0.05em;
}

.profile-email {
  font-size: 0.95rem;
  color: var(--gris);
}

.profile-pseudo-current {
  font-size: 0.95rem;
  color: var(--turquoise);
  margin: 0 0 0.2rem;
}

.profile-card {
  background: var(--noir-2);
  border: 1px solid var(--noir-3);
  border-radius: 12px;
  padding: var(--space-xl);
  margin-bottom: var(--space-md);
}

.profile-card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--turquoise);
  margin-bottom: 0.25rem;
  letter-spacing: 0.03em;
}

.profile-desc {
  font-size: 0.9rem;
  color: var(--gris);
}

.profile-desc-muted {
  opacity: 0.75;
  font-size: 0.85rem;
  margin-bottom: var(--space-md);
}

.profile-card input[type="text"] {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--noir);
  border: 2px solid var(--noir-3);
  border-radius: 8px;
  color: var(--blanc);
  font-family: var(--font-body);
  font-size: 1rem;
}

.btn-save-char {
  margin-top: var(--space-md);
  width: 100%;
}

.profile-artifacts {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--turquoise);
  margin-bottom: var(--space-sm);
}

.btn-small {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

.btn-logout {
  margin-top: var(--space-lg);
  width: 100%;
  padding: 0.75rem;
  background: transparent;
  border: 2px solid var(--noir-3);
  color: var(--gris);
  cursor: pointer;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: all 0.2s var(--ease);
}

.btn-logout:hover {
  border-color: #ff6464;
  color: #ff8888;
}

/* Message */
.auth-message {
  padding: var(--space-sm) var(--space-md);
  border-radius: 8px;
  margin: var(--space-sm) 0;
  font-size: 0.9rem;
}

.auth-message.success {
  background: rgba(0, 245, 212, 0.15);
  border: 1px solid var(--turquoise);
  color: var(--turquoise);
}

.auth-message.error {
  background: rgba(255, 100, 100, 0.15);
  border: 1px solid #ff6464;
  color: #ff8888;
}

.auth-message.hidden,
.auth-choice.hidden,
.auth-form.hidden,
.profile-panel.hidden {
  display: none;
}

/* ============================================
   Mobile — Compte / Auth
   ============================================ */

@media (max-width: 768px) {
  .section-compte {
    padding: var(--space-lg) 0;
    padding-top: max(var(--space-lg), env(safe-area-inset-top));
    padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom));
  }

  .container-compte {
    max-width: 100%;
    padding: 0 var(--space-md);
  }

  .auth-choice {
    margin: var(--space-md) 0;
    gap: var(--space-sm);
  }

  .auth-choice-btn {
    padding: var(--space-lg);
  }

  .auth-choice-title {
    font-size: 1.1rem;
  }

  .auth-choice-desc {
    font-size: 0.8rem;
  }

  .auth-card,
  .auth-form {
    padding: var(--space-md);
    margin: var(--space-md) 0;
  }

  .auth-card h2 {
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
  }

  .auth-card input[type="email"],
  .auth-card input[type="password"],
  .auth-card input[type="text"] {
    padding: 0.65rem 0.9rem;
    font-size: 16px; /* évite zoom iOS sur focus */
  }

  .btn-full {
    padding: 0.8rem;
  }

  .character-choice {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .char-preview {
    padding: var(--space-sm);
    font-size: 0.9rem;
  }

  .profile-panel {
    margin: var(--space-md) 0;
  }

  .profile-header h2 {
    font-size: 1.25rem;
  }

  .profile-card {
    padding: var(--space-md);
  }

  .profile-card h3 {
    font-size: 1rem;
  }

  .profile-desc {
    font-size: 0.85rem;
  }

  .section-nav {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .section-nav .btn-page-link {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .auth-choice-btn {
    padding: var(--space-md);
  }

  .auth-choice-title {
    font-size: 1rem;
  }

  .auth-card h2 {
    font-size: 1.1rem;
  }

  .profile-header h2 {
    font-size: 1.1rem;
  }
}

/* Quêtes — compte joueur */
.profile-card-quests .quest-card {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
}

.profile-card-quests .quest-card + .quest-card {
  margin-top: var(--space-md);
}

.quest-desc {
  font-size: 0.9rem;
  opacity: 0.9;
  margin: 0.5rem 0 0.75rem;
}

.quest-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.quest-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan, #00f5d4), var(--jaune, #fee440));
  border-radius: 999px;
  transition: width 0.35s ease;
}

.quest-progress-label {
  font-size: 0.85rem;
  margin: 0.35rem 0 0.6rem;
  opacity: 0.85;
}

.quest-steps,
.quest-onsite-steps {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.88rem;
}

.quest-step-done {
  color: #6ee7b7;
}

.quest-step-locked {
  opacity: 0.55;
}

.quest-step-hint {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  opacity: 0.7;
  margin-top: 0.15rem;
}

.quest-card-feedback {
  border-color: rgba(254, 228, 64, 0.35);
}