/* espace-connexion.css — design fidèle aux écrans auth de l'app Padexia
   (fond #050507, mesh animé cyan/violet, Inter, glass, pilules). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

html,body{height:100%;margin:0;overflow:hidden}
.px-page{
  --bg:#050507;
  --accent-cyan:#06B6D4;--accent-violet:#8B5CF6;--accent-rose:#EC4899;--error:#EF4444;
  --px-gradient:linear-gradient(120deg,var(--accent-violet),var(--accent-cyan));
  height:100vh;background:var(--bg);color:#fff;
  font-family:"Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;position:relative;overflow:hidden}
.px-page *{box-sizing:border-box}
.px-page a{color:inherit;text-decoration:none}

/* ---- mesh animé (2 orbs radiaux, ambiance login cyan+violet) ---- */
.px-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.px-blob{position:absolute;width:62vmin;height:62vmin;border-radius:50%;filter:blur(80px);opacity:.85;
  animation:pxDrift 14s ease-in-out infinite alternate}
.px-blob.v{top:-16%;right:-14%;background:radial-gradient(circle,rgba(6,182,212,.25),transparent 70%)}
.px-blob.c{bottom:-16%;left:-14%;animation-delay:-7s;background:radial-gradient(circle,rgba(139,92,246,.22),transparent 70%)}
@keyframes pxDrift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(22px,-22px) scale(1.1)}}

/* ---- carte / colonne centrale ---- */
.card{position:relative;z-index:1;width:min(440px,100%);margin:auto;padding:24px;
  animation:pxIn .8s cubic-bezier(.33,1,.68,1) both}
@keyframes pxIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ---- logo (vrai logo Padexia, comme la nav) ---- */
.logo{display:flex;align-items:center;justify-content:center;margin:6px 0 2px}
.logo img{height:150px;width:auto;object-fit:contain;margin:-52px 0;display:block}

.sub{text-align:center;color:rgba(255,255,255,.55);font-weight:400;font-size:15px;margin:0 0 30px}

/* ---- onglets Connexion / Inscription ---- */
.tabs{display:flex;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:999px;padding:4px;margin-bottom:26px}
.tabs button{flex:1;background:none;border:0;color:rgba(255,255,255,.5);
  font-family:"Inter";font-weight:600;font-size:.9rem;letter-spacing:-.1px;
  padding:11px;border-radius:999px;cursor:pointer;transition:all .25s}
.tabs button.on{background:#fff;color:var(--bg)}

/* ---- champs (radius 18, halo blanc au focus) ---- */
.field{margin-bottom:16px}
.field label{display:block;font-family:"Inter";font-weight:500;font-size:12px;letter-spacing:.02em;
  text-transform:none;color:rgba(255,255,255,.5);margin-bottom:8px;padding-left:2px}
.field input{width:100%;height:60px;border-radius:18px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  padding:0 18px;color:#fff;font-family:"Inter";font-weight:500;font-size:15px;
  outline:none;caret-color:#fff;transition:background .2s,border-color .2s,box-shadow .2s}
.field input::placeholder{color:rgba(255,255,255,.35)}
.field input:focus{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.35);
  box-shadow:0 0 16px -2px rgba(255,255,255,.06)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.forgot{text-align:right;margin:-4px 0 8px}
.forgot a{color:rgba(255,255,255,.65);font-size:13px;font-weight:500}
.forgot a:hover{color:#fff}

/* ---- bouton primaire : pilule blanche + glow cyan (login) ---- */
.btn{width:100%;height:60px;margin-top:8px;border:0;border-radius:999px;
  background:#fff;color:var(--bg);
  font-family:"Inter";font-weight:600;font-size:16px;letter-spacing:-.1px;
  display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  box-shadow:0 0 30px -4px rgba(255,255,255,.15),0 8px 40px rgba(6,182,212,.25);
  transition:transform .12s ease,box-shadow .3s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:1;background:rgba(255,255,255,.35);color:rgba(5,5,7,.6);box-shadow:none;cursor:default}
/* variante signup : glow violet + mesh violet/rose (activés via body.mode-signup) */
body.mode-signup .btn{box-shadow:0 0 30px -4px rgba(255,255,255,.15),0 8px 40px rgba(139,92,246,.25)}
body.mode-signup .px-blob.v{background:radial-gradient(circle,rgba(139,92,246,.25),transparent 70%)}
body.mode-signup .px-blob.c{background:radial-gradient(circle,rgba(236,72,153,.20),transparent 70%)}

/* ---- séparateur OU ---- */
/* VERSION GRATUITE : styles .or / .gbtn retirés (plus de bouton Google). */

.msg{margin-top:16px;font-family:"Inter";font-weight:600;font-size:.9rem;text-align:center;min-height:20px}
.msg.err{color:#ff6b81}.msg.ok{color:#3ddc97}

.foot{text-align:center;margin-top:26px}
.foot a{color:rgba(255,255,255,.4);font-size:13px;font-weight:500}
.foot a:hover{color:rgba(255,255,255,.8)}

/* Lien discret vers l'inscription coach (mode signup) */
.coachlink{text-align:center;margin-top:14px}
.coachlink a{font-family:"Rajdhani",system-ui,sans-serif;font-weight:600;font-size:.9rem;
  color:#00d4ff;opacity:.85;transition:opacity .2s}
.coachlink a:hover{opacity:1;text-decoration:underline}

/* ── Bouton œil : afficher / masquer le mot de passe ─────────────────
   Le bouton se superpose au champ sans en modifier le gabarit : seul le
   padding droit de l'input est augmenté pour que le texte ne passe pas
   dessous. Teinte discrète, alignée sur la DA (blanc translucide, accent
   cyan au survol comme les autres éléments interactifs du site). */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:56px}          /* place réservée au bouton */
.pw-eye{
  position:absolute;top:0;right:0;width:54px;height:60px;
  display:grid;place-items:center;
  background:none;border:0;padding:0;cursor:pointer;
  color:rgba(255,255,255,.42);transition:color .18s;
}
.pw-eye:hover{color:rgba(255,255,255,.8)}
.pw-eye:focus-visible{outline:2px solid #06B6D4;outline-offset:-4px;border-radius:14px}
.pw-eye svg{
  width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}