/* 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}