/* ______  ______   ___  ______________  _  __
  / __/  |/  / _ | / _ \/_  __/ __/ __ \/ |/ /
 _\ \/ /|_/ / __ |/ , _/ / / _\ \/ /_/ /    / 
/___/_/  /_/_/ |_/_/|_| /_/ /___/\____/_/|_/
*/

/* ---- IMPORT GOOGLE FONT ----------------------------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* ---- PAGE ------------------------------------------------------------------------------------------------------------- */

*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0; }
html, body {height: 100%; overflow-x: hidden; }
body {font-family: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background-color: #000000; color: #f5f7ff; }

/* ---- INTERFACE -------------------------------------------------------------------------------------------------------- */

.login-page {display: flex; min-height: 100vh; width: 100%; max-width: 100vw; overflow: hidden; }
.login-left {position: relative; flex: 0 0 50%; background-color: #000000; background-image: url('../../assets/img/background.jpg'); background-size: cover; background-position: center; }
.login-overlay {position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); }
.login-logo {position: absolute; height: 70px; max-width: 80%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; }
.login-right {flex: 0 0 50%; background-color: #000000; display: flex; align-items: center; justify-content: center; padding: 40px 60px; }
.login-panel {width: 100%; max-width: 380px; }

/* ----- ELEMENTS -------------------------------------------------------------------------------------------------------- */

.login-title {font-size: 30px; font-weight: 500; color: #ffffff; margin-bottom: 0px; }
.login-subtitle {font-size: 30px; font-weight: 500; color: #ffffff; margin-bottom: 20px; }
.login-subtitle .tm {font-size: 13px; vertical-align: super; }

/* ---- FORMULAIRE ------------------------------------------------------------------------------------------------------- */

.form {display: flex; flex-direction: column; gap: 25px; }
.form-group {display: flex; flex-direction: column; gap: 8px; }
.form-group label {font-size: 13px; font-weight: 500; color: #ffffff; }
.form-group input {height: 44px; padding: 0 12px; border-radius: 5px; border: 1px solid #ffffff; background-color: #000000; color: #e5edff; font-size: 14px; outline: none; transition: border-color 0.2s ease, background-color 0.2s ease; }
.form-group input::placeholder {color: #5f6c86; }
.form-group input:focus {border-color: #2563eb; }

/* ---- ALERTES ---------------------------------------------------------------------------------------------------------- */

.alert {border-radius: 5px; padding: 8px 12px; font-size: 0.85rem; margin-bottom: 16px; }
.alert-error {background-color: rgba(249, 115, 115, 0.08);; border: 1px solid #ef4444; color: #ef4444; }
.alert-success {background-color: rgba(22, 163, 74, 0.08); border: 1px solid #3fe77a;; color: #3fe77a; }

.alert-info {background: rgba(37, 99, 235, 0.16); border: 1px solid rgba(37, 99, 235, 0.7); color: #dbeafe; }
.alert-redirect {margin-top: 12px; }

/* ---- BOUTONS ---------------------------------------------------------------------------------------------------------- */

.btn-primary, .btn-secondary {border: none; height: 46px; border-radius: 5px; font-weight: 600; font-size: 15px; cursor: pointer; transition: background-color 0.15s ease; }
.btn-primary {background-color: #2563eb; color: #ffffff; }
.form .btn-primary:not(.btn-validate) {margin-top: 50px; }
.btn-primary:hover {background-color: #1d4ed8; }
.btn-primary[disabled] {opacity: 0.85; cursor: default; }
.btn-secondary {background-color: transparent; color: #e5edff; border: 1px solid #3b82f6; }
.btn-secondary:hover {background-color: rgba(59,130,246,0.1); }
.btn-validate.is-disabled, .btn-validate[disabled] {opacity: 0.45; cursor: default; pointer-events: none; }

/* ---- LABEL + ERREURS -------------------------------------------------------------------------------------------------- */

.label-row {display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.field-error {font-size: 12px; color: #ef4444; min-height: 1em; }

/* ---- ETAT CHAMPS INPUT ------------------------------------------------------------------------------------------------ */

.form-group input {color: #e5edff; }
.form-group input.is-invalid {border-color: #ef4444 !important; color: #ef4444 !important; }
.form-group input.is-invalid:focus {border-color: #2563eb !important; color: #e5edff !important; }
.form-group input.is-valid {border-color: #ffffff !important; color: #e5edff !important; }

/* ---- OEIL CHAMP PASSWORD ---------------------------------------------------------------------------------------------- */

.password-wrapper {position: relative; }
.password-wrapper input {width: 100%; padding-right: 42px; }
.password-toggle {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: transparent; cursor: pointer; padding: 0; }
.password-toggle img {width: 20px; height: 20px; filter: brightness(0) invert(1); position: relative; top: 2px; right: 3px; }

/* ---- CHECKBOX --------------------------------------------------------------------------------------------------------- */

.form-extra {margin-top: 8px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #ffffff; }
.forgot-link {color: #9ca3af; }
.forgot-link:hover {text-decoration: underline; }

/* ---- CHECKBOX STYLE --------------------------------------------------------------------------------------------------- */

.remember-checkbox {display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; position: relative; }
.remember-checkbox input[type="checkbox"] {position: absolute; opacity: 0; pointer-events: none; }
.remember-checkbox span {position: relative; padding-left: 26px; }
.remember-checkbox span::before {content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 4px; border: 2px solid #4b5563; background: transparent; transition: all 0.2s ease; }
.remember-checkbox span::after {content: ""; position: absolute; left: 9px; top: 50%; transform: translate(-50%,-50%); opacity: 0; width: 7px; height: 7px; background: linear-gradient(45deg, transparent 40%, #ffffff 40%, #ffffff 60%, transparent 60%), linear-gradient(-45deg, transparent 40%, #ffffff 40%, #ffffff 60%, transparent 60%); }
.remember-checkbox input[type="checkbox"]:checked + span::before {background-color: #2563eb; border-color: #2563eb; }
.remember-checkbox input[type="checkbox"]:checked + span::after {opacity: 1; }

/* ---- CHAMP EMAIL ------------------------------------------------------------------------------------------------------ */

.email-wrapper {position: relative; }
.email-wrapper input {width: 100%; padding-right: 40px; }
.email-valid-icon {position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; pointer-events: none; transition: filter 0.2s ease; filter: invert(50%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(90%); }
.email-wrapper input.is-valid + .email-valid-icon {filter: invert(72%) sepia(16%) saturate(1421%) hue-rotate(79deg) brightness(92%) contrast(90%); }

/* ---- DESACTIVATION STYLE AUTO-FILL CHROME ----------------------------------------------------------------------------- */

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {-webkit-text-fill-color: #e5edff !important; caret-color: #e5edff; -webkit-box-shadow: 0 0 0 1000px #000000 inset !important; box-shadow: 0 0 0 1000px #000000 inset !important; border: 1px solid #ffffff !important; background-color: #000000 !important; transition: background-color 9999s ease-out, color 9999s ease-out; }

/* ---- ELEMENTS PAGE 2FA -------------------------------------------------------------------------------------------------------------- */

.twofa-text, .twofa-locked-text {font-size: 14px; color: #c7d2e5; margin-bottom: 18px; }
.twofa-locked-text {line-height: 1.4; }
.twofa-form {margin-top: 24px; margin-top: 6px; gap: 0 !important;}
.twofa-inputs {display: flex; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.twofa-inputs input {width: 40px; height: 48px; text-align: center; font-size: 20px; font-weight: 600; border-radius: 12px; border: 1px solid #293345; background-color: #050914; color: #e5edff; outline: none; transition: border-color 0.15s ease; }
.twofa-inputs input:focus {border-color: #3b82f6; }

.twofa-resend-form-locked {display: block; margin: 15px 0 0 0; }
.twofa-actions {margin-top: 30px; display: flex; gap: 10px; flex-wrap: nowrap; width: 100%; }
.twofa-actions .btn-back, .twofa-actions .btn-primary.btn-validate {height: 46px !important; display: flex; align-items: center; justify-content: center; padding: 0 !important; line-height: 46px; }
.btn-back {flex: 3; min-width: 100px; border-radius: 5px; font-weight: 600; font-size: 14px; background-color: #374151; color: #e5edff; border: none; cursor: pointer; }
.btn-back:hover {background-color: #2563eb; color: #ffffff; }
.twofa-actions .btn-primary.btn-validate {flex: 7; margin-top: 0; }

.twofa-countdown {font-size: 14px; color: #c7d2e5; margin-bottom: 8px; }
.twofa-inputs input.is-invalid {border-color: #ef4444 !important; color: #ef4444 !important; }
.twofa-inputs input.is-invalid:focus {border-color: #2563eb !important; color: #e5edff !important; }
.twofa-messages {margin-top: 10px; min-height: 20px; }
.twofa-expired-message, .field-error-twofa {margin: 0 0 15px 0; padding: 8px 12px; border-radius: 6px; border: 1px solid #ef4444; background: rgba(249, 115, 115, 0.08); color: #ef4444; font-size: 0.85rem; font-weight: 400; line-height: 1.4; }
.twofa-resend-form {display: none; margin: 0 0 15px 0; padding: 8px 12px; border-radius: 6px; border: 1px solid #3b82f6; background: rgba(37, 99, 235, 0.08); }
.twofa-resend-link {font-family: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; display: block; width: 100%; text-align: left;              /* aligné comme la popup rouge */ background: none; border: none; padding: 0; font-size: 0.85rem;            /* même taille que la rouge */ font-weight: 400;              /* même graisse (normal)    */ color: #3b82f6; cursor: pointer; text-decoration: none; text-align: left !important; }
.twofa-resend-link .twofa-resend-highlight {text-decoration: underline; font-weight: 600; }
.twofa-resend-link:disabled, #twofa-resend-btn[disabled] {cursor: default; opacity: 0.6; }
.twofa-resend-form.twofa-resend-form-locked {display: block !important; }
.twofa-timer {font-weight: 700; color: #ffffff; }

/* ---- MOT DE PASSE OUBLIÉ / RESET ---------------------------------------------------- */

.forgot-text {font-size: 14px; color: #c7d2e5; margin-bottom: 20px; }
.forgot-back-link {margin-top: 16px; font-size: 13px; }
.forgot-back-link a {color: #bfdbfe; text-decoration: none; }
.forgot-back-link a:hover {text-decoration: underline; }
.hp-wrapper {position: absolute; left: -9999px; visibility: hidden; }
.pwd-criteria {list-style: none; margin: 4px 0 18px 0; padding: 0; font-size: 12px; color: #9ca3af; }
.pwd-criterion {position: relative; padding-left: 20px; margin-bottom: 4px; }
.pwd-criterion::before {content: "•"; position: absolute; left: 0; top: 0; color: #6b7280; }
.pwd-criterion.is-valid {color: #bbf7d0; }
.pwd-criterion.is-valid::before {content: "✔"; color: #22c55e; }

/* ==== MODE MOBILE ====================================================================================================== */

@media (max-width: 960px) {

  .login-page {flex-direction: column; }
  .login-left {flex: 0 0 20vh; min-height: 200px; }
  .login-right {flex: 0 0 auto; padding: 30px 30px 25vh 30px; }
  .login-panel {max-width: 100%; }
  .login-title {font-size: 30px; }
  .login-subtitle {font-size: 27px; margin-bottom: 30px !important; }
  .form .btn-primary:not(.btn-validate) {margin-top: 30px !important; }

}

@media (max-width: 640px) {

  html, body {height: auto; }
  .login-page {flex-direction: column; height: auto; min-height: 100vh; overflow-y: auto; overflow-x: hidden; }
  .login-left {display: block; flex: 0 0 20vh; }
  .login-right {flex: 0 0 auto; padding: 30px 30px 25vh 30px; }
  .login-panel {max-width: 100%; }
  .login-title {font-size: 6vw; }
  .login-subtitle {font-size: 6vw; }
  .twofa-actions {flex-direction: row; flex-wrap: nowrap; width: 100%; gap: 10px; align-items: center; }
  .twofa-actions .btn-primary.btn-validate { margin-top: 0; }
  .twofa-actions .btn-back { min-width: 0; }

}