/* ============================================================
   PFPP - Habillage du formulaire de connexion WordPress/Tutor LMS
   Cible le markup genere par wp_login_form() :
   p.login-username / p.login-password / p.login-remember / p.login-submit
   Prefixe .pfp- pour isoler du theme. Entierement responsive.
   ============================================================ */

.pfp-scope{

  position:relative; min-height:min(100vh,720px);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,40px) clamp(14px,4vw,20px);
  background:#efe7ec; color:var(--ink);
  font-family:var(--font); -webkit-font-smoothing:antialiased; isolation:isolate;
}
.pfp-scope *{box-sizing:border-box;}

.pfp-card{
  display:grid; grid-template-columns:1.05fr 1fr;
  width:100%; max-width:980px; min-height:560px;
  background:var(--paper); border-radius:clamp(16px,3vw,26px); overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(77,18,64,.45);
  animation:pfpIn .8s cubic-bezier(.16,1,.3,1) both;
}
.pfp-card--single{grid-template-columns:1fr; max-width:440px; min-height:0;}
@keyframes pfpIn{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- Panneau gauche ---------- */
.pfp-left{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(150deg,var(--prune-d) 0%,var(--prune) 45%,#8a3a5a 78%,var(--orange) 130%);
  padding:clamp(32px,4vw,44px) clamp(28px,3.5vw,40px);
}
.pfp-shapes{position:absolute; inset:0; z-index:0;}
.pfp-s{position:absolute; border-radius:50%; filter:blur(2px); opacity:.5;}
.pfp-s1{width:260px;height:260px; right:-90px; top:-70px;
  background:radial-gradient(circle at 40% 40%,var(--orange),transparent 65%);
  animation:pfpFloat 16s ease-in-out infinite;}
.pfp-s2{width:200px;height:200px; left:-70px; bottom:-60px;
  background:radial-gradient(circle at 50% 50%,var(--prune-l),transparent 68%);
  animation:pfpFloat 20s ease-in-out infinite reverse;}
.pfp-s3{width:120px;height:120px; right:10%; bottom:16%;
  border:1.5px solid rgba(255,255,255,.22); background:transparent; filter:none; opacity:.6;
  animation:pfpFloat 24s ease-in-out infinite;}
.pfp-dots{position:absolute; left:26px; top:40%; width:90px; height:120px; opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.7) 1.4px, transparent 1.5px);
  background-size:16px 16px;}
@keyframes pfpFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-14px)}}

.pfp-left-inner{position:relative; z-index:1; height:100%; display:flex; flex-direction:column;}
.pfp-logo{width:190px; max-width:60%; height:auto; margin-bottom:auto;
  background:rgba(255,255,255,.92); padding:12px 16px; border-radius:14px;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.35);}
.pfp-hero{margin:clamp(24px,3vw,34px) 0 0;}
.pfp-eyebrow{margin:0 0 12px; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:600; color:var(--orange-l);}
.pfp-h1{margin:0 0 16px; font-size:clamp(25px,3.2vw,32px); line-height:1.15; font-weight:700; letter-spacing:-.01em; color:#fff;}
.pfp-h1 em{font-style:normal; color:var(--orange-l);}
.pfp-lede{margin:0; font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.82); max-width:34ch;}
.pfp-note{margin:26px 0 0; font-size:13px; color:rgba(255,255,255,.7);
  padding-top:18px; border-top:1px solid rgba(255,255,255,.16);}

/* ---------- Panneau droit ---------- */
.pfp-right{display:flex; align-items:center; justify-content:center; padding:clamp(32px,4vw,48px) clamp(28px,4vw,44px);}
.pfp-form-wrap{width:100%; max-width:340px;}
.pfp-fhead{margin-bottom:28px;}
.pfp-h2{margin:0 0 6px; font-size:clamp(22px,2.6vw,26px); font-weight:700; color:var(--prune); letter-spacing:-.01em;}
.pfp-fsub{margin:0; font-size:14px; color:var(--muted);}

/* ---- Formulaire natif WordPress : on stylise ses <p> ---- */
#pfp-loginform{display:flex; flex-direction:column; gap:20px; margin:0;}
#pfp-loginform p{margin:0; position:relative;}

/* champs texte / password */
#pfp-loginform .login-username input,
#pfp-loginform .login-password input,
#pfp-loginform input[type=text],
#pfp-loginform input[type=password]{
  width:100%; padding:22px 14px 8px; background:var(--field);
  border:1px solid var(--stroke); border-radius:12px; color:var(--ink);
  font-size:16px; font-family:inherit; outline:none;
  transition:border-color .25s,background .25s;
}
#pfp-loginform input[type=password]{padding-right:46px;}
#pfp-loginform input:focus{border-color:var(--prune-l); background:#fff;}

/* labels au-dessus des champs (le markup natif met le label AVANT l'input) */
#pfp-loginform .login-username label,
#pfp-loginform .login-password label{
  position:absolute; left:15px; top:9px; z-index:2;
  color:var(--muted); font-size:11.5px; font-weight:600;
  letter-spacing:.02em; pointer-events:none;
}

/* ligne animee sous le champ */
.pfp-passwrap::after,
#pfp-loginform .login-username::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; border-radius:2px;
  background:linear-gradient(90deg,var(--prune),var(--orange));
  transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.16,1,.3,1);
}
#pfp-loginform .login-username:focus-within::after,
.pfp-passwrap:focus-within::after{transform:scaleX(1);}

/* oeil afficher/masquer (injecte par le JS) */
.pfp-passwrap{position:relative;}
.pfp-eye{position:absolute; right:9px; top:9px; width:36px; height:36px; display:grid;
  place-items:center; background:none; border:none; color:var(--muted); cursor:pointer;
  border-radius:8px; transition:color .2s,background .2s;}
.pfp-eye:hover{color:var(--prune); background:rgba(105,27,84,.06);}

/* case "Me garder connecte" */
#pfp-loginform .login-remember{font-size:13px; color:var(--muted);}
#pfp-loginform .login-remember label{display:flex; align-items:center; gap:8px; cursor:pointer;}
#pfp-loginform .login-remember input{width:18px; height:18px; accent-color:var(--prune); cursor:pointer;}

/* bouton */
#pfp-loginform .login-submit{margin-top:4px;}
#pfp-loginform #pfp-submit,
#pfp-loginform input[type=submit]{
  width:100%; padding:15px; border:none; border-radius:12px; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:600; color:#fff;
  background:linear-gradient(120deg,var(--prune),var(--orange)); background-size:200% 100%;
  background-position:0 0; transition:background-position .5s,transform .15s,box-shadow .3s;
  box-shadow:0 12px 28px -8px rgba(105,27,84,.5);
}
#pfp-loginform #pfp-submit:hover,
#pfp-loginform input[type=submit]:hover{background-position:100% 0; box-shadow:0 16px 36px -8px rgba(208,111,25,.5);}
#pfp-loginform #pfp-submit:active,
#pfp-loginform input[type=submit]:active{transform:scale(.98);}

/* lien mot de passe oublie */
.pfp-extra{margin-top:16px; text-align:center;}
.pfp-forgot{color:var(--orange); text-decoration:none; font-weight:500; font-size:13px; transition:color .2s;}
.pfp-forgot:hover{color:var(--prune);}

.pfp-foot{margin:24px 0 0; text-align:center; font-size:13px; color:var(--muted);}
.pfp-foot a{color:var(--prune); font-weight:600; text-decoration:none; border-bottom:1px solid var(--orange); padding-bottom:1px;}
.pfp-foot a:hover{color:var(--orange);}

.pfp-scope a:focus-visible,.pfp-scope button:focus-visible,.pfp-scope input:focus-visible{outline:2px solid var(--orange); outline-offset:3px;}

/* ================= RESPONSIVE ================= */
@media (max-width:860px){
  .pfp-scope{min-height:auto;}
  .pfp-card{grid-template-columns:1fr; max-width:460px; min-height:0;}
  .pfp-left{padding:34px 32px 30px;}
  .pfp-logo{width:160px;}
  .pfp-hero{margin-top:22px;}
  .pfp-h1{font-size:26px;}
  .pfp-h1 br{display:none;}
  .pfp-lede{max-width:none;}
  .pfp-note{display:none;}
  .pfp-s1{width:200px;height:200px;}
  .pfp-right{padding:34px 32px 40px;}
}
@media (max-width:480px){
  .pfp-scope{padding:0; background:var(--paper);}
  .pfp-card{border-radius:0; box-shadow:none; max-width:none; min-height:100vh;}
  .pfp-left{padding:28px 24px 26px;}
  .pfp-logo{width:140px; padding:10px 13px;}
  .pfp-hero{margin-top:18px;}
  .pfp-h1{font-size:23px;}
  .pfp-lede{font-size:13.5px;}
  .pfp-right{padding:30px 24px 40px;}
  .pfp-fhead{margin-bottom:22px;}
  #pfp-loginform{gap:18px;}
}
@media (max-height:560px) and (max-width:860px){
  .pfp-card{min-height:0;}
}
@media (prefers-reduced-motion:reduce){
  .pfp-scope *{animation:none !important; transition:none !important;}
}

/* Bouton-lien (etat deja connecte) */
.pfp-btn-link{display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:24px; padding:15px; border-radius:12px; text-decoration:none;
  font-weight:600; font-size:15px; color:#fff;
  background:linear-gradient(120deg,var(--prune),var(--orange)); background-size:200% 100%;
  background-position:0 0; transition:background-position .5s,box-shadow .3s;
  box-shadow:0 12px 28px -8px rgba(105,27,84,.5);}
.pfp-btn-link:hover{background-position:100% 0; box-shadow:0 16px 36px -8px rgba(208,111,25,.5);}

/* Message d'erreur de connexion */
.pfp-alert{margin:0 0 18px; padding:12px 15px; border-radius:11px;
  background:rgba(208,111,25,.10); border:1px solid rgba(208,111,25,.35);
  color:#8a3a10; font-size:13.5px; line-height:1.45;
  display:flex; align-items:flex-start; gap:9px; animation:pfpShake .4s ease;}
.pfp-alert::before{content:"!"; flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  background:var(--orange); color:#fff; font-weight:700; font-size:13px;
  display:grid; place-items:center; margin-top:1px;}
@keyframes pfpShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}