/* ==========================================================================
   4BODY DIGITAL — Thème partagé
   Univers sombre, accent doré, esprit « sans miroir ».

   Les valeurs sont exactement celles de la version Softr validée : fond
   #121513, cartes #1d211f, or #f1c56b, texte secondaire #9aa49e. Les pages
   home.css et wod-player.css les utilisent en dur (elles ont été écrites
   ainsi), les variables servent aux écrans d'authentification.
   ========================================================================== */
:root {
  --bg:        #121513;
  --bg-soft:   #171b19;
  --card:      #1d211f;
  --card-2:    #2a2e2b;
  --line:      rgba(255,255,255,.08);
  --text:      #ffffff;
  --text-dim:  #9aa49e;
  --text-mute: #7b8580;
  --gold:      #f1c56b;
  --gold-dim:  #c99b45;
  --green:     #4caf6d;
  --red:       #e2664d;
  --radius:    20px;
  --radius-sm: 14px;
  --shadow:    0 20px 50px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { font-family: inherit; }

/* ---- BOUTONS PARTAGÉS (écrans d'authentification) ---------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border-radius: 24px; border: 1.5px solid transparent;
  font-weight: 800; font-size: 15px; cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn-gold { background: var(--gold); color: #1d211f; box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn-block { width: 100%; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ---- CHAMPS DE FORMULAIRE --------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; color: var(--text-dim); font-weight: 600; }
.field input {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--text);
  /* 16px minimum : en dessous, iOS zoome automatiquement à la mise au point. */
  font-size: 16px; padding: 13px 14px; outline: none;
  transition: border-color .15s ease;
}
.field input:focus { border-color: var(--gold-dim); }

/* ---- ÉCRANS D'AUTHENTIFICATION ---------------------------------------- */
.auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-box { width: 100%; max-width: 400px; padding: 34px 28px; }
.auth-logo { height: 22px; width: auto; display: block; margin: 0 auto 22px; object-fit: contain; }
.auth-title { font-size: 24px; font-weight: 800; text-align: center; margin: 0 0 6px; color: var(--gold); }
.auth-sub { font-size: 14px; color: var(--text-dim); text-align: center; margin: 0 0 26px; }
.auth-error, .auth-ok {
  border-radius: var(--radius-sm); padding: 10px 13px;
  font-size: 13px; margin-bottom: 16px; display: none;
}
.auth-error { background: rgba(226,102,77,.12); border: 1px solid rgba(226,102,77,.35); color: #ffb4a3; }
.auth-ok { background: rgba(76,175,109,.12); border: 1px solid rgba(76,175,109,.35); color: #a9e6bb; }
.auth-error.is-visible, .auth-ok.is-visible { display: block; }
.auth-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; font-size: 13px; }
.auth-links a { color: var(--gold-dim); }
.auth-links a:hover { color: var(--gold); }

/* Animation d'entrée des écrans d'authentification : elle se joue seule, sans
   script. Les pages accueil et lecteur redéfinissent `.reveal` pour la
   déclencher seulement quand leurs données sont prêtes (voir leur CSS). */
@keyframes revealUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.reveal { animation: revealUp .6s cubic-bezier(.2,.7,.2,1) both; }
.reveal-1 { animation-delay: .02s; }
.reveal-2 { animation-delay: .10s; }
.reveal-3 { animation-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
}

.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid rgba(241,197,107,.2); border-top-color: var(--gold);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }