/* ======================================================
   Innovasun 2FA / Reset - UI (THEME BLANC)
   Objectif : 0 branding WP, full-screen Innovasun,
   compat mobile + desktop.
====================================================== */

/* ---- Kill WordPress login chrome (UNIQUEMENT sur skin Innovasun) ---- */
body.login.inov2fa-skin #login h1,
body.login.inov2fa-skin #login #nav,
body.login.inov2fa-skin #login #backtoblog,
body.login.inov2fa-skin .language-switcher,
body.login.inov2fa-skin .privacy-policy-page-link,
body.login.inov2fa-skin #login_error,
body.login.inov2fa-skin p.message,
body.login.inov2fa-skin .message,
body.login.inov2fa-skin .notice,
body.login.inov2fa-skin .updated,
body.login.inov2fa-skin .error {
  display: none !important;
}

/* ======================================================
   BASE PAGE (blanc)
====================================================== */
body.login.inov2fa-skin{
  margin:0 !important;
  min-height:100vh !important;
  background:#f4f6f9 !important;
}

/* WP wrapper #login neutralisé */
body.login.inov2fa-skin #login{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* Empêche le style WP de casser les inputs */
body.login.inov2fa-skin input[type="text"],
body.login.inov2fa-skin input[type="password"],
body.login.inov2fa-skin input[type="email"],
body.login.inov2fa-skin input[type="tel"]{
  box-shadow: none !important;
  outline: none !important;
}

/* Sécurité: WP met parfois un fond blanc au form, on neutralise */
body.login.inov2fa-skin #login form{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ======================================================
   LAYOUT
====================================================== */
.inov2fa-body{
  margin:0;
  min-height:100vh;
  background:#f4f6f9;
  color:#111827;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

/* IMPORTANT : si WP a mis ses styles, on force notre layout */
body.login.inov2fa-skin .inov2fa-body,
body.login.inov2fa-skin .inov2fa-page{
  min-height:100vh !important;
}

.inov2fa-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
}

.inov2fa-card{
  width:min(520px, 100%);
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:22px;
  box-shadow:0 18px 50px rgba(17,24,39,.12);
  color:#111827;
}

/* ======================================================
   BRAND
====================================================== */
.inov2fa-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

/* Si tu utilises encore le “bloc orange” (fallback) */
.inov2fa-logo{
  width:36px;
  height:36px;
  border-radius:10px;
  background:#ff7a00;
  display:inline-block;
}

.inov2fa-brandname{
  font-weight:800;
  font-size:20px;
  color:#111827;
}

.inov2fa-h1{ margin:8px 0 6px; font-size:22px; color:#111827; }
.inov2fa-h2{ margin:14px 0 10px; font-size:18px; color:#111827; }

.inov2fa-lead{
  margin:0 0 14px;
  color:#4b5563;
  line-height:1.4;
}

.inov2fa-helptext{
  margin:10px 0 0;
  font-size:12px;
  color:#6b7280;
}

.inov2fa-meta{
  margin:0 0 12px;
  color:#374151;
}

.inov2fa-badge{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  margin-left:8px;
}

.inov2fa-badge--ok{
  background:#ecfdf5;
  border:1px solid #a7f3d0;
  color:#065f46;
}

/* ======================================================
   ALERTS
====================================================== */
.inov2fa-alert{
  display:block;
  padding:12px 14px;
  border-radius:12px;
  margin:10px 0 14px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  color:#111827;
}

.inov2fa-alert--ok{
  border-color:#a7f3d0;
  background:#ecfdf5;
  color:#065f46;
}

.inov2fa-alert--err{
  border-color:#fecaca;
  background:#fef2f2;
  color:#7f1d1d;
}

/* ======================================================
   FORM
====================================================== */
.inov2fa-label{
  display:block;
  margin:12px 0 6px;
  font-size:13px;
  color:#374151;
}

.inov2fa-input{
  width:100%;
  box-sizing:border-box;
  height:46px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#ffffff;
  color:#111827;
  padding:0 14px;
  outline:none;
}

.inov2fa-input:focus{
  border-color:#ff7a00;
  box-shadow:0 0 0 4px rgba(255,122,0,.18);
}

/* ======================================================
   BUTTONS
====================================================== */
.inov2fa-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.inov2fa-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius:14px;
  height:46px;
  padding:0 16px;
  font-weight:800;
  cursor:pointer;
  border:1px solid #e5e7eb;
  background:#ffffff;
  color:#111827;
  user-select:none;
}

.inov2fa-btn--primary{
  background:#ff7a00;
  border-color:#ff7a00;
  color:#ffffff;
}

.inov2fa-btn--ghost{
  background:#ffffff;
}

.inov2fa-btn--link{
  border:none;
  background:transparent;
  height:auto;
  padding:10px 0 0;
  color:#e69500;
  font-weight:800;
}

.inov2fa-btn[disabled],
.inov2fa-linkbtn[disabled]{
  opacity:.55;
  cursor:not-allowed;
}

/* ======================================================
   INLINE LINKS + TIMER
====================================================== */
.inov2fa-inline{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
}

.inov2fa-linkbtn{
  border:none;
  background:transparent;
  color:#e69500;
  font-weight:900;
  padding:0;
  cursor:pointer;
  text-decoration:underline;
}

.inov2fa-timer{
  color:#6b7280;
  font-size:12px;
}

/* ======================================================
   STEPS
====================================================== */
.inov2fa-step{ display:none; }
.inov2fa-step-active{ display:block; }

/* ======================================================
   OTP
====================================================== */
.inov2fa-otp{
  display:flex;
  gap:10px;
  justify-content:center;
  margin:14px 0 16px;
}

.inov2fa-otp input.inov2fa-otp-box{
  width:44px;
  height:54px;
  text-align:center;
  font-size:22px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#ffffff;
  color:#111827;
  outline:none;
}

.inov2fa-otp input.inov2fa-otp-box:focus{
  border-color:#ff7a00;
  box-shadow:0 0 0 4px rgba(255,122,0,.18);
}

.inov2fa-otp-hidden{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
}

/* ======================================================
   PASSWORD EYE (si utilisé)
====================================================== */
.inov2fa-passwrap{ position:relative; }

.inov2fa-eye{
  position:absolute;
  right:10px;
  top:8px;
  height:30px;
  width:38px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#ffffff;
  color:#111827;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  line-height:1;
}

.inov2fa-eye::before{
  content:"👁";
}

.inov2fa-eye.is-on::before{
  content:"🙈";
}

/* ======================================================
   MOBILE
====================================================== */
@media (max-width: 420px){
  .inov2fa-page{ padding:18px 12px; }
  .inov2fa-card{ padding:18px; border-radius:16px; }
  .inov2fa-otp{ gap:8px; }
  .inov2fa-otp input.inov2fa-otp-box{ width:40px; height:50px; font-size:20px; }
}

/* ======================================================
   PATCH: Oeil unique (pas en absolute)
   - si tu utilises le bouton .inov2fa-eye--single
====================================================== */
.inov2fa-eye.inov2fa-eye--single{
  position:relative !important;
  right:auto !important;
  top:auto !important;
  width:100% !important;
  height:42px !important;
  margin:10px 0 0 !important;
  border-radius:12px !important;
}

.inov2fa-eye.inov2fa-eye--single::before{
  content:none !important;
}

.inov2fa-eye.inov2fa-eye--single.is-on{
  border-color:#ff7a00 !important;
}