/* ============================================
   AUTH.CSS - AlphaVault AI Authentication Page
   Light Design System (aligné sur landing-institutional.css)
   ============================================ */

   @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=Inter:wght@400;500;600;700;800&display=swap');

   :root{
       /* ---- Mapping vers le design system landing-institutional ---- */
       --lp-bg-dark:      #ffffff;
       --lp-bg-dark-2:    #FAFAFC;
       --lp-ink:          #0a0a0a;
       --lp-ink-soft:     #4a4a52;
       --lp-text-muted:   #6d6d76;
       --lp-text-faint:   #8a8a92;
       --lp-border:       #E4E4EC;
       --lp-border-soft:  rgba(10,10,10,.08);
       --lp-radius-sm:    8px;
       --lp-radius:       14px;
       --lp-radius-lg:    20px;
       --lp-transition:   .2s cubic-bezier(.4,0,.2,1);
   
       --lp-glass-bg:            #F5F5F8;
       --lp-glass-bg-hover:      #EDEDF2;
       --lp-glass-border:        #E4E4EC;
       --lp-glass-border-hv:     #c7c7d4;
       --lp-glass-shadow:        0 6px 16px rgba(10,10,10,.07), 0 1px 3px rgba(10,10,10,.05);
       --lp-glass-inset:         none;
   
       --auth-primary:    #6366f1;
       --auth-accent:     #8b5cf6;
       --auth-accent-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
       --auth-success:    #059669;
       --auth-error:      #dc2626;
       --auth-warning:    #d97706;
   
       --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
       --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   }
   
   /* ============================================
      RESET & BASE STYLES
      ============================================ */
   
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   
   html {
       overflow-y: auto !important;
       height: auto !important;
   }
   
   body {
       font-family: var(--font-sans);
       background: var(--lp-bg-dark);
       color: var(--lp-ink);
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       overflow-x: hidden !important;
       overflow-y: auto !important;
       height: auto !important;
       min-height: 100vh !important;
       position: relative;
       letter-spacing: -0.005em;
   }
   
   body::before{
       content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
       background:
           radial-gradient(circle at 12% 8%,  rgba(99,102,241,.06), transparent 45%),
           radial-gradient(circle at 88% 18%, rgba(139,92,246,.05), transparent 42%),
           radial-gradient(circle at 20% 85%, rgba(99,102,241,.04), transparent 40%),
           radial-gradient(circle at 85% 90%, rgba(139,92,246,.05), transparent 42%),
           linear-gradient(180deg, #ffffff 0%, #FAFAFC 50%, #ffffff 100%);
   }
   
   body i.fas, body i.far, body i.fab{ color: var(--lp-ink) !important; }
   
   /* ============================================
      BACK TO HOME LINK
      ============================================ */
   
   .back-to-home {
       position: fixed;
       top: 2rem;
       left: 2rem;
       z-index: 1000;
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.75rem 1.25rem;
       background: #fff;
       backdrop-filter: none;
       -webkit-backdrop-filter: none;
       border: 1px solid var(--lp-glass-border);
       border-radius: var(--lp-radius-sm);
       color: var(--lp-ink-soft);
       text-decoration: none;
       font-size: 0.875rem;
       font-weight: 600;
       transition: var(--lp-transition);
       box-shadow: var(--lp-glass-shadow);
   }
   
   .back-to-home:hover {
       transform: translateX(-4px);
       background: var(--lp-glass-bg-hover);
       border-color: var(--lp-glass-border-hv);
       color: var(--lp-ink);
   }
   
   .back-to-home i {
       font-size: 0.875rem;
       transition: transform 0.3s ease;
   }
   
   .back-to-home:hover i {
       transform: translateX(-2px);
   }
   
   /* ============================================
      AUTH WRAPPER - MAIN LAYOUT
      ============================================ */
   
   .auth-wrapper {
       display: grid;
       grid-template-columns: 1fr 1fr;
       height: 100vh;
       overflow: hidden;
       position: relative;
       z-index: 1;
   }
   
   /* ============================================
      LEFT SIDE - BRANDING SECTION
      ============================================ */
   
   .auth-branding {
       position: relative;
       background: linear-gradient(160deg, #0a0a0a 0%, #14151a 60%, #0a0a0a 100%);
       padding: 3rem;
       display: flex;
       align-items: center;
       justify-content: center;
       overflow-y: auto;
       border-right: 1px solid var(--lp-border-soft);
   }
   
   .branding-content {
       position: relative;
       z-index: 2;
       max-width: 500px;
       color: #ffffff;
   }
   
   /* Brand Header */
   .brand-header {
       display: flex;
       align-items: center;
       gap: 1rem;
       margin-bottom: 3rem;
   }
   
   .nav-brand .brand-logo img {
       filter: brightness(0) invert(1);
       opacity: .95;
   }
   
   .brand-info {
       display: flex;
       align-items: center;
       gap: 0.75rem;
   }
   
   .brand-name {
       font-family: var(--font-serif);
       font-size: 1.85rem;
       font-weight: 500;
       color: #ffffff;
       letter-spacing: -0.02em;
   }
   
   .brand-name strong {
       font-weight: 700;
       color: #fff;
   }
   
   .ai-badge-auth {
       background: rgba(255,255,255,.08);
       border: 1px solid rgba(255,255,255,.18);
       backdrop-filter: blur(10px);
       color: #ffffff;
       font-size: 0.75rem;
       font-weight: 700;
       padding: 0.375rem 0.75rem;
       border-radius: 20px;
       text-transform: uppercase;
       letter-spacing: 0.1em;
   }
   
   /* Features List */
   .auth-features {
       margin-bottom: 3rem;
   }
   
   .features-title {
       font-family: var(--font-serif);
       font-size: 1.7rem;
       font-weight: 500;
       letter-spacing: -0.02em;
       margin-bottom: 2rem;
       line-height: 1.3;
       color: #ffffff;
   }
   
   .features-list {
       list-style: none;
       display: flex;
       flex-direction: column;
       gap: 1.5rem;
   }
   
   .features-list li {
       display: flex;
       align-items: flex-start;
       gap: 1rem;
   }
   
   .feature-icon-check {
       width: 32px;
       height: 32px;
       background: rgba(255,255,255,.08);
       border: 1px solid rgba(255,255,255,.18);
       backdrop-filter: blur(10px);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
   }
   
   .feature-icon-check i {
       font-size: 0.875rem;
       color: #ffffff !important;
   }
   
   .feature-text h3 {
       font-size: 1.02rem;
       font-weight: 700;
       margin-bottom: 0.25rem;
       color: #ffffff;
   }
   
   .feature-text p {
       font-size: 0.88rem;
       line-height: 1.6;
       color: rgba(255,255,255,.6);
   }
   
   /* Background Decoration */
   .branding-decoration {
       position: absolute;
       inset: 0;
       z-index: 1;
       overflow: hidden;
       pointer-events: none;
   }
   
   .decoration-orb {
       position: absolute;
       border-radius: 50%;
       filter: blur(70px);
       opacity: 0.35;
       animation: float 20s ease-in-out infinite;
   }
   
   .decoration-orb.orb-1 {
       width: 400px;
       height: 400px;
       background: rgba(99,102,241,.55);
       top: -100px;
       right: -100px;
   }
   
   .decoration-orb.orb-2 {
       width: 300px;
       height: 300px;
       background: rgba(139,92,246,.45);
       bottom: -50px;
       left: -50px;
       animation-delay: -10s;
   }
   
   @keyframes float {
       0%, 100% { transform: translate(0, 0); }
       33%       { transform: translate(30px, -30px); }
       66%       { transform: translate(-20px, 20px); }
   }
   
   .decoration-grid {
       position: absolute;
       inset: 0;
       background-image:
           linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
           linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
       background-size: 40px 40px;
       opacity: 0.5;
   }
   
   /* ============================================
      RIGHT SIDE - FORMS CONTAINER
      ============================================ */
   
   .auth-forms-container {
       background:
           radial-gradient(circle at 75% 12%, rgba(99,102,241,.05), transparent 45%),
           radial-gradient(circle at 25% 88%, rgba(139,92,246,.04), transparent 42%),
           var(--lp-bg-dark-2);
       padding: 3rem;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: flex-start;
       position: relative;
       overflow-y: auto;
       overflow-x: hidden;
       scrollbar-width: thin;
       scrollbar-color: rgba(10,10,10,.18) transparent;
   }
   
   .auth-forms-container::-webkit-scrollbar       { width: 6px; }
   .auth-forms-container::-webkit-scrollbar-track { background: transparent; }
   .auth-forms-container::-webkit-scrollbar-thumb {
       background: rgba(10,10,10,.15);
       border-radius: 10px;
   }
   .auth-forms-container::-webkit-scrollbar-thumb:hover {
       background: rgba(10,10,10,.28);
   }
   
   .auth-forms-wrapper {
       width: 100%;
       max-width: 480px;
       margin: auto;
       padding: 2rem 0;
       position: relative;
   }
   
   /* ============================================
      FORM CARDS
      ============================================ */
   
   .auth-form-card {
       background: #ffffff;
       border: 1px solid var(--lp-border);
       border-radius: var(--lp-radius-lg);
       padding: 40px;
       backdrop-filter: none;
       box-shadow: 0 16px 40px rgba(10,10,10,.10), 0 4px 10px rgba(10,10,10,.05);
       animation: fadeInUp 0.5s ease;
   }
   
   .auth-form-card.hidden {
       display: none;
   }
   
   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(20px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   /* Form Header */
   .form-header {
       text-align: center;
       margin-bottom: 2rem;
       position: relative;
   }
   
   .back-btn {
       position: absolute;
       left: 0;
       top: 0;
       background: transparent;
       border: none;
       color: var(--lp-text-muted);
       font-size: 1.25rem;
       cursor: pointer;
       padding: 0.5rem;
       border-radius: 8px;
       transition: var(--lp-transition);
   }
   
   .back-btn:hover {
       background: var(--lp-glass-bg-hover);
       color: var(--lp-ink);
   }
   
   .form-title {
       font-family: var(--font-serif);
       font-size: 2rem;
       font-weight: 500;
       color: var(--lp-ink);
       margin-bottom: 0.5rem;
       letter-spacing: -0.02em;
   }
   
   .form-subtitle {
       font-size: 1rem;
       color: var(--lp-text-muted);
       line-height: 1.6;
   }
   
   /* ============================================
      SOCIAL LOGIN BUTTONS
      ============================================ */
   
   .social-login-buttons {
       display: flex;
       flex-direction: column;
       gap: 0.75rem;
       margin-bottom: 1.5rem;
   }
   
   .social-btn {
       width: 100%;
       padding: 0.875rem 1.25rem;
       border-radius: var(--lp-radius-sm);
       border: 1px solid var(--lp-glass-border);
       background: #ffffff;
       color: var(--lp-ink);
       font-size: 0.9375rem;
       font-weight: 700;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.75rem;
       transition: var(--lp-transition);
       backdrop-filter: none;
   }
   
   .social-btn:hover {
       transform: translateY(-2px);
       background: var(--lp-glass-bg-hover);
       border-color: var(--lp-glass-border-hv);
       box-shadow: 0 8px 20px rgba(10,10,10,.08);
   }
   
   .social-btn:active {
       transform: translateY(0);
   }
   
   .social-btn svg,
   .social-btn i {
       font-size: 1.25rem;
   }
   
   /* ============================================
      DIVIDER
      ============================================ */
   
   .auth-divider {
       display: flex;
       align-items: center;
       gap: 1rem;
       margin: 1.5rem 0;
   }
   
   .divider-line {
       flex: 1;
       height: 1px;
       background: var(--lp-border-soft);
   }
   
   .divider-text {
       font-size: 0.75rem;
       color: var(--lp-text-faint);
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.05em;
   }
   
   /* ============================================
      FORM ELEMENTS
      ============================================ */
   
   .auth-form {
       display: flex;
       flex-direction: column;
       gap: 1.25rem;
   }
   
   .form-row {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 1rem;
   }
   
   .form-group {
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
   }
   
   .form-label {
       font-size: 0.72rem;
       font-weight: 700;
       color: var(--lp-text-faint);
       text-transform: uppercase;
       letter-spacing: 0.05em;
       display: flex;
       align-items: center;
       gap: 0.5rem;
   }
   
   .form-label i {
       font-size: 0.8rem;
       color: var(--lp-text-faint) !important;
   }
   
   .form-label span {
       text-transform: none;
       letter-spacing: normal;
       font-weight: 400;
       font-size: 0.7rem;
   }
   
   .form-input {
       width: 100%;
       padding: 0.875rem 1rem;
       border: 1px solid var(--lp-glass-border);
       border-radius: var(--lp-radius-sm);
       background: var(--lp-glass-bg);
       backdrop-filter: none;
       -webkit-backdrop-filter: none;
       color: var(--lp-ink) !important;
       font-size: 1rem;
       font-family: inherit;
       transition: var(--lp-transition);
       box-shadow: none;
   }
   
   .form-input::placeholder {
       color: var(--lp-text-faint) !important;
   }
   
   .form-input:focus {
       outline: none;
       border-color: var(--auth-primary);
       background: #ffffff;
       box-shadow: 0 0 0 4px rgba(99,102,241,.12);
   }
   
   /* ============================================
      FIX AUTOFILL NAVIGATEUR (Chrome/Safari/Edge)
      Empêche le fond bleu clair natif sur email/password
      ============================================ */
   
      .form-input {
       color-scheme: light;
       caret-color: var(--lp-ink);
   }
   
   .form-input:-webkit-autofill,
   .form-input:-webkit-autofill:hover,
   .form-input:-webkit-autofill:focus,
   .form-input:-webkit-autofill:active {
       -webkit-text-fill-color: var(--lp-ink) !important;
       -webkit-box-shadow: 0 0 0 1000px #F5F5F8 inset !important;
       box-shadow: 0 0 0 1000px #F5F5F8 inset !important;
       background-color: #F5F5F8 !important;
       background-clip: content-box !important;
       border: 1px solid var(--lp-glass-border) !important;
       transition: background-color 600000s ease-in-out 0s, color 600000s ease-in-out 0s;
       animation: none !important;
   }
   
   .form-input:autofill {
       -webkit-text-fill-color: var(--lp-ink) !important;
       background-color: #F5F5F8 !important;
   }
   
   .form-input:-moz-autofill,
   .form-input:-moz-autofill-preview {
       filter: none !important;
       color: var(--lp-ink) !important;
       background-color: #F5F5F8 !important;
   }
   
   .form-input.error {
       border-color: var(--auth-error);
   }
   
   .form-input.error:focus {
       box-shadow: 0 0 0 4px rgba(220,38,38,.12);
   }
   
   .form-error {
       font-size: 0.85rem;
       color: var(--auth-error);
       display: none;
   }
   
   .form-error.active {
       display: block;
   }
   
   /* Password Input Wrapper */
   .password-input-wrapper {
       position: relative;
       display: flex;
       align-items: center;
   }
   
   .password-input-wrapper .form-input {
       padding-right: 3rem;
   }
   
   .password-toggle {
       position: absolute;
       right: 0.75rem;
       background: transparent;
       border: none;
       color: var(--lp-text-muted);
       cursor: pointer;
       padding: 0.5rem;
       border-radius: 8px;
       transition: var(--lp-transition);
   }
   
   .password-toggle:hover {
       background: var(--lp-glass-bg-hover);
       color: var(--lp-ink);
   }
   
   .password-toggle i {
       font-size: 1.125rem;
   }
   
   /* Password Strength Indicator */
   .password-strength {
       display: flex;
       align-items: center;
       gap: 0.75rem;
   }
   
   .strength-bars {
       display: flex;
       gap: 0.25rem;
       flex: 1;
   }
   
   .strength-bar {
       height: 4px;
       flex: 1;
       background: var(--lp-border-soft);
       border-radius: 2px;
       transition: var(--lp-transition);
   }
   
   .strength-bar.active {
       background: var(--auth-error);
   }
   
   .strength-bar.active.medium {
       background: var(--auth-warning);
   }
   
   .strength-bar.active.strong {
       background: var(--auth-success);
   }
   
   .strength-text {
       font-size: 0.72rem;
       font-weight: 700;
       color: var(--lp-text-faint);
       text-transform: uppercase;
       letter-spacing: 0.05em;
       min-width: 80px;
   }
   
   /* Checkbox */
   .checkbox-label {
       display: flex;
       align-items: flex-start;
       gap: 0.75rem;
       cursor: pointer;
       user-select: none;
   }
   
   .checkbox-label input[type="checkbox"] {
       display: none;
   }
   
   .checkbox-custom {
       width: 20px;
       height: 20px;
       border: 1px solid var(--lp-glass-border);
       border-radius: 6px;
       background: #ffffff;
       flex-shrink: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: var(--lp-transition);
       position: relative;
       margin-top: 0.125rem;
   }
   
   .checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
       background: var(--auth-accent-grad);
       border-color: transparent;
   }
   
   .checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
       content: '\f00c';
       font-family: 'Font Awesome 6 Free';
       font-weight: 900;
       color: #fff;
       font-size: 0.75rem;
   }
   
   .checkbox-text {
       font-size: 0.85rem;
       color: var(--lp-text-muted);
       line-height: 1.5;
   }
   
   .terms-link {
       color: var(--auth-primary);
       text-decoration: none;
       font-weight: 700;
       transition: color 0.3s ease;
   }
   
   .terms-link:hover {
       color: var(--auth-accent);
       text-decoration: underline;
   }
   
   /* Form Options */
   .form-options {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 1rem;
   }
   
   .forgot-password {
       font-size: 0.85rem;
       color: var(--auth-primary);
       text-decoration: none;
       font-weight: 700;
       white-space: nowrap;
       transition: color 0.3s ease;
   }
   
   .forgot-password:hover {
       color: var(--auth-accent);
       text-decoration: underline;
   }
   
   /* ============================================
      BUTTONS
      ============================================ */
   
   .btn-auth-primary {
       width: 100%;
       padding: 1rem 1.5rem;
       background: var(--lp-ink);
       color: #ffffff;
       border: 1px solid var(--lp-ink);
       border-radius: var(--lp-radius-sm);
       font-size: 1rem;
       font-weight: 700;
       cursor: pointer;
       position: relative;
       overflow: hidden;
       transition: var(--lp-transition);
   }
   
   .btn-auth-primary:hover {
       background: #1f2128;
       border-color: #1f2128;
       transform: translateY(-1px);
       box-shadow: 0 8px 24px rgba(10,10,10,.2);
   }
   
   .btn-auth-primary:active {
       transform: translateY(0);
   }
   
   .btn-auth-primary.loading {
       pointer-events: none;
       opacity: 0.7;
       cursor: not-allowed;
   }
   
   .btn-text {
       transition: opacity 0.3s ease;
   }
   
   .btn-loader  { display: none !important; }
   .spinner     { display: none !important; }
   
   .btn-auth-secondary {
       width: 100%;
       padding: 1rem 1.5rem;
       background: var(--lp-glass-bg);
       color: var(--lp-ink);
       border: 1px solid var(--lp-glass-border);
       border-radius: var(--lp-radius-sm);
       font-size: 1rem;
       font-weight: 700;
       cursor: pointer;
       transition: var(--lp-transition);
       backdrop-filter: none;
   }
   
   .btn-auth-secondary:hover {
       background: var(--lp-glass-bg-hover);
       border-color: var(--lp-glass-border-hv);
       transform: translateY(-2px);
   }
   
   /* ============================================
      AUTH TYPE TOGGLE (Individual / Enterprise)
      ============================================ */
   
   .auth-type-toggle {
       display: flex;
       gap: 0.5rem;
       padding: 0.375rem;
       background: var(--lp-glass-bg);
       border: 1px solid var(--lp-glass-border);
       border-radius: var(--lp-radius);
       margin-bottom: 1.75rem;
   }
   
   .auth-type-btn {
       flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
       padding: 0.7rem 1rem;
       border: none;
       border-radius: 10px;
       background: transparent;
       color: var(--lp-text-muted);
       font-size: 0.875rem;
       font-weight: 700;
       cursor: pointer;
       transition: var(--lp-transition);
   }
   
   .auth-type-btn.active {
       background: var(--lp-ink);
       color: #ffffff;
   }
   
   .auth-type-btn:not(.active):hover {
       background: var(--lp-glass-bg-hover);
       color: var(--lp-ink);
   }
   
   .enterprise-badge {
       background: rgba(10,10,10,.08);
       border-radius: 6px;
       font-weight: 800;
   }
   
   .auth-type-btn.active .enterprise-badge {
       background: rgba(255,255,255,.18);
       color: #ffffff;
   }
   
   /* ============================================
      ENTERPRISE FORM HEADER
      ============================================ */
   
   .enterprise-form-header {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 16px 18px;
       background: var(--lp-glass-bg) !important;
       background-image: none !important;
       border: 1px solid var(--lp-glass-border);
       border-radius: var(--lp-radius);
       margin-bottom: 1.75rem;
       backdrop-filter: none;
       box-shadow: none;
   }
   
   .enterprise-form-title {
       font-size: 1rem;
       font-weight: 800;
       color: var(--lp-ink);
   }
   
   .enterprise-form-subtitle {
       font-size: 0.8rem;
       color: var(--lp-text-muted);
       margin-top: 2px;
   }
   
   /* ============================================
      OVERRIDE ENTERPRISE.CSS - Neutralise rayures/bleu
      ============================================ */
      .enterprise-form-header,
      .enterprise-form-header::before,
      .enterprise-form-header::after {
          background-image: none !important;
      }
      
      .auth-type-btn.enterprise-btn {
          background: transparent !important;
          background-image: none !important;
      }
      
      .auth-type-btn.enterprise-btn.active {
          background: var(--lp-ink) !important;
          background-image: none !important;
          color: #ffffff !important;
      }
      
      .enterprise-badge {
          background: rgba(10,10,10,.08) !important;
          background-image: none !important;
          color: var(--lp-ink) !important;
      }
      
      .auth-type-btn.active .enterprise-badge {
          background: rgba(255,255,255,.18) !important;
          color: #ffffff !important;
      }
   
   /* ============================================
      FORM FOOTER
      ============================================ */
   
      .form-footer {
       background: transparent !important;
       text-align: center;
       padding-top: 1.5rem;
       border-top: 1px solid var(--lp-border-soft) !important;
       margin-top: 1.5rem;
   }
   
   .switch-form-text {
       font-size: 0.9375rem;
       color: var(--lp-text-muted) !important;
   }
   
   .switch-form-link {
       color: var(--auth-primary) !important;
       text-decoration: none;
       font-weight: 800;
       margin-left: 0.25rem;
       transition: color 0.3s ease;
   }
   
   .switch-form-link:hover {
       color: var(--auth-accent) !important;
       text-decoration: underline;
   }
   
   /* ============================================
      RESET SUCCESS MESSAGE
      ============================================ */
   
   .reset-success {
       text-align: center;
       padding: 2rem 0;
       animation: fadeInUp 0.5s ease;
   }
   
   .reset-success.hidden {
       display: none;
   }
   
   .success-icon {
       width: 80px;
       height: 80px;
       background: linear-gradient(135deg, var(--auth-success) 0%, #047857 100%);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 1.5rem;
       animation: scaleIn 0.5s ease;
   }
   
   @keyframes scaleIn {
       from { transform: scale(0); }
       to   { transform: scale(1); }
   }
   
   .success-icon i {
       font-size: 2.5rem;
       color: #fff !important;
   }
   
   .success-title {
       font-family: var(--font-serif);
       font-size: 1.75rem;
       font-weight: 500;
       color: var(--lp-ink);
       margin-bottom: 0.75rem;
   }
   
   .success-text {
       font-size: 1rem;
       color: var(--lp-text-muted);
       line-height: 1.7;
       margin-bottom: 2rem;
       max-width: 400px;
       margin-left: auto;
       margin-right: auto;
   }
   
   /* ============================================
      TRUST BADGES
      ============================================ */
   
   .trust-badges {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 2rem;
       padding-top: 2rem;
       margin-top: 2rem;
       border-top: 1px solid var(--lp-border-soft);
       max-width: 480px;
       width: 100%;
       position: relative;
       z-index: 1;
   }
   
   .trust-badge {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       color: var(--lp-text-muted);
       font-size: 0.85rem;
       font-weight: 600;
   }
   
   .trust-badge i {
       font-size: 1rem;
       color: var(--auth-success) !important;
   }
   
   /* ============================================
      TOAST NOTIFICATIONS
      ============================================ */
   
   .toast-container {
       position: fixed;
       top: 2rem;
       right: 2rem;
       z-index: 9999;
       display: flex;
       flex-direction: column;
       gap: 0.75rem;
   }
   
   .toast {
       background: #ffffff;
       border: 1px solid var(--lp-glass-border);
       border-left: 4px solid var(--auth-primary);
       border-radius: var(--lp-radius);
       padding: 1rem 1.25rem;
       box-shadow: 0 16px 40px rgba(10,10,10,.14);
       display: flex;
       align-items: center;
       gap: 1rem;
       min-width: 320px;
       max-width: 420px;
       animation: slideInRight 0.3s ease;
       backdrop-filter: none;
   }
   
   @keyframes slideInRight {
       from { transform: translateX(100%); opacity: 0; }
       to   { transform: translateX(0);    opacity: 1; }
   }
   
   .toast.success { border-left-color: var(--auth-success); }
   .toast.error   { border-left-color: var(--auth-error); }
   .toast.warning { border-left-color: var(--auth-warning); }
   
   .toast-icon { font-size: 1.25rem; flex-shrink: 0; }
   
   .toast.success .toast-icon { color: var(--auth-success) !important; }
   .toast.error   .toast-icon { color: var(--auth-error) !important; }
   .toast.warning .toast-icon { color: var(--auth-warning) !important; }
   
   .toast-content { flex: 1; }
   
   .toast-title {
       font-size: 0.9375rem;
       font-weight: 700;
       color: var(--lp-ink);
       margin-bottom: 0.25rem;
   }
   
   .toast-message {
       font-size: 0.875rem;
       color: var(--lp-text-muted);
       line-height: 1.5;
   }
   
   .toast-close {
       background: transparent;
       border: none;
       color: var(--lp-text-muted);
       cursor: pointer;
       padding: 0.25rem;
       border-radius: 6px;
       transition: var(--lp-transition);
   }
   
   .toast-close:hover {
       background: var(--lp-glass-bg-hover);
       color: var(--lp-ink);
   }
   
   .toast-close i { font-size: 1rem; }
   
   /* ============================================
      ACCESSIBILITY
      ============================================ */
   
   *:focus-visible {
       outline: 2px solid var(--auth-primary);
       outline-offset: 2px;
   }
   
   .sr-only {
       position: absolute;
       width: 1px;
       height: 1px;
       padding: 0;
       margin: -1px;
       overflow: hidden;
       clip: rect(0, 0, 0, 0);
       white-space: nowrap;
       border-width: 0;
   }
   
   /* ============================================
      REDUCED MOTION
      ============================================ */
   
   @media (prefers-reduced-motion: reduce) {
       *,
       *::before,
       *::after {
           animation-duration: 0.01ms !important;
           animation-iteration-count: 1 !important;
           transition-duration: 0.01ms !important;
       }
   }
   
   /* ============================================
      PRINT STYLES
      ============================================ */
   
   @media print {
       .auth-branding,
       .back-to-home,
       .trust-badges,
       .toast-container {
           display: none !important;
       }
   
       .auth-wrapper {
           grid-template-columns: 1fr;
       }
   }
   
   /* ============================================
      RESPONSIVE — TABLETTE (≤ 1024px)
      ============================================ */
   
   @media screen and (max-width: 1024px) {
   
       body .auth-wrapper {
           display: grid !important;
           grid-template-columns: 1fr !important;
           height: auto !important;
           min-height: 100vh !important;
           overflow: visible !important;
           overflow-x: hidden !important;
       }
   
       body .auth-branding {
           display: none !important;
       }
   
       body .auth-forms-container {
           display: flex !important;
           flex-direction: column !important;
           align-items: center !important;
           justify-content: flex-start !important;
           min-height: 100vh !important;
           overflow-y: visible !important;
           overflow-x: hidden !important;
           padding: 1.5rem 1.5rem 3rem !important;
           width: 100% !important;
           box-sizing: border-box !important;
           height: auto !important;
       }
   
       body .auth-forms-wrapper {
           width: 100% !important;
           max-width: 480px !important;
           margin: 0 auto !important;
           padding-top: 5rem !important;
           padding-bottom: 2rem !important;
           box-sizing: border-box !important;
       }
   
       body .back-to-home {
           position: fixed !important;
           top: 1rem !important;
           left: 1rem !important;
           padding: 0.625rem 1rem !important;
           font-size: 0.8125rem !important;
           border-radius: 10px !important;
           z-index: 1000 !important;
       }
   }
   
   /* ============================================
      RESPONSIVE — MOBILE (≤ 768px)
      ============================================ */
   
   @media screen and (max-width: 768px) {
   
       body .form-input,
       body input[type="email"].form-input,
       body input[type="password"].form-input,
       body input[type="text"].form-input,
       body input[type="tel"].form-input {
           font-size: 16px !important;
           -webkit-text-size-adjust: 100% !important;
       }
   
       body .btn-auth-primary,
       body .btn-auth-secondary {
           min-height: 52px !important;
           width: 100% !important;
           box-sizing: border-box !important;
       }
   
       body .social-btn {
           min-height: 50px !important;
           width: 100% !important;
           box-sizing: border-box !important;
       }
   
       body .password-toggle {
           min-width: 44px !important;
           min-height: 44px !important;
           display: flex !important;
           align-items: center !important;
           justify-content: center !important;
       }
   
       body .checkbox-label {
           min-height: 44px !important;
           align-items: center !important;
           padding: 0.375rem 0 !important;
       }
   
       body .checkbox-custom {
           width: 22px !important;
           height: 22px !important;
           flex-shrink: 0 !important;
           margin-top: 0 !important;
       }
   
       body .forgot-password {
           display: inline-flex !important;
           align-items: center !important;
           min-height: 44px !important;
       }
   
       body .form-options {
           flex-direction: column !important;
           align-items: flex-start !important;
           gap: 0.25rem !important;
       }
   
       body .auth-form-card {
           padding: 28px 22px !important;
       }
   }
   
   /* ============================================
      RESPONSIVE — MOBILE (≤ 640px)
      ============================================ */
   
   @media screen and (max-width: 640px) {
   
       body .auth-forms-container {
           padding: 1.5rem 1rem 3rem !important;
       }
   
       body .auth-forms-wrapper {
           padding-top: 4rem !important;
           padding-bottom: 2.5rem !important;
       }
   
       body .back-to-home {
           padding: 0.625rem !important;
           border-radius: 50% !important;
           width: 40px !important;
           height: 40px !important;
           min-width: 40px !important;
           min-height: 40px !important;
           justify-content: center !important;
       }
   
       body .back-to-home span {
           display: none !important;
       }
   
       body .form-title {
           font-size: 1.625rem !important;
       }
   
       body .form-row {
           grid-template-columns: 1fr !important;
           gap: 0 !important;
       }
   
       body .toast-container {
           top: 1rem !important;
           right: 0.75rem !important;
           left: 0.75rem !important;
       }
   
       body .toast {
           min-width: auto !important;
           max-width: 100% !important;
           width: 100% !important;
           box-sizing: border-box !important;
       }
   }
   
   /* ============================================
      RESPONSIVE — MOBILE (≤ 480px)
      ============================================ */
   
   @media screen and (max-width: 480px) {
   
       body .auth-type-toggle {
           gap: 0.25rem !important;
           padding: 0.25rem !important;
           margin-bottom: 1.25rem !important;
       }
   
       body .auth-type-btn {
           font-size: 0.8125rem !important;
           padding: 0.5rem 0.5rem !important;
           gap: 0.375rem !important;
           min-height: 44px !important;
       }
   
       body .auth-type-btn .enterprise-badge {
           display: none !important;
       }
   
       body .enterprise-form-header {
           padding: 12px 14px !important;
           gap: 10px !important;
           margin-bottom: 1.25rem !important;
       }
   
       body .enterprise-form-subtitle {
           display: none !important;
       }
   
       body .trust-badges {
           flex-direction: row !important;
           flex-wrap: nowrap !important;
           justify-content: space-between !important;
           align-items: center !important;
           gap: 6px !important;
           padding-top: 1.25rem !important;
           margin-top: 1.25rem !important;
           width: 100% !important;
       }
   
       body .trust-badge {
           font-size: 0.68rem !important;
           gap: 0.3rem !important;
           flex: 1 1 0;
           justify-content: center;
           white-space: nowrap;
       }
   
       body .trust-badge span{
           font-size: 0.68rem !important;
       }
   
       body .trust-badge i {
           font-size: 0.8rem !important;
       }
   
       body .form-title {
           font-size: 1.5rem !important;
       }
   
       body .form-subtitle {
           font-size: 0.9375rem !important;
       }
   }
   
   /* ============================================
      RESPONSIVE — ULTRA-PETIT (≤ 400px)
      ============================================ */
   
   @media screen and (max-width: 400px) {
   
       body .switch-form-text {
           font-size: 0.875rem !important;
           display: flex !important;
           flex-direction: column !important;
           align-items: center !important;
           gap: 0.25rem !important;
       }
   
       body .switch-form-link {
           margin-left: 0 !important;
       }
   }
   
   /* ============================================
      RESPONSIVE — 360px ET MOINS
      ============================================ */
   
   @media screen and (max-width: 360px) {
   
       body .auth-forms-container {
           padding: 1rem 0.75rem 2.5rem !important;
       }
   
       body .auth-forms-wrapper {
           padding-top: 3.75rem !important;
       }
   
       body .form-title {
           font-size: 1.375rem !important;
       }
   
       body .form-input {
           padding: 0.75rem 0.875rem !important;
       }
   
       body .auth-form {
           gap: 1rem !important;
       }
   
       body .auth-type-btn i {
           display: none !important;
       }
   
       body .auth-type-btn {
           font-size: 0.75rem !important;
           padding: 0.5rem 0.25rem !important;
       }
   
       body .trust-badges {
           flex-direction: row !important;
           flex-wrap: wrap !important;
           gap: 0.5rem 0.875rem !important;
       }
   
       body .trust-badge {
           font-size: 0.75rem !important;
       }
   }
   
   /* ============================================
      RESPONSIVE — PAYSAGE MOBILE
      ============================================ */
   
   @media screen and (max-height: 600px) and (orientation: landscape) {
   
       body .auth-forms-wrapper {
           padding-top: 4rem !important;
       }
   
       body .form-header {
           margin-bottom: 0.875rem !important;
       }
   
       body .form-title {
           font-size: 1.375rem !important;
       }
   
       body .auth-divider {
           margin: 0.75rem 0 !important;
       }
   
       body .auth-form {
           gap: 0.875rem !important;
       }
   
       body .social-login-buttons {
           flex-direction: row !important;
       }
   
       body .social-btn {
           flex: 1 !important;
           font-size: 0.8125rem !important;
       }
   
       body .trust-badges {
           display: none !important;
       }
   }
   
   /* ============================================
      SAFE AREA — NOTCH IPHONE X+
      ============================================ */
   
   @supports (padding: env(safe-area-inset-top)) {
   
       @media screen and (max-width: 1024px) {
   
           body .auth-forms-container {
               padding-left: max(1.5rem, env(safe-area-inset-left)) !important;
               padding-right: max(1.5rem, env(safe-area-inset-right)) !important;
               padding-bottom: max(2rem, env(safe-area-inset-bottom)) !important;
           }
   
           body .back-to-home {
               top: max(1rem, env(safe-area-inset-top)) !important;
               left: max(1rem, env(safe-area-inset-left)) !important;
           }
       }
   }
   
   /* ============================================
      OVERRIDE — Neutralise fond blanc résiduel de common.css
      ============================================ */
      .auth-form-card .form-footer,
      .auth-form-card .form-footer * {
          background: transparent !important;
      }
   
      /* ══════════════════════════════════════════════════════════
      FIX DÉFINITIF — LABELS DES CHAMPS (First Name, Last Name,
      Email, Password, Company Names, Job Title, Phone, etc.)
      Doivent être GRIS (même couleur que "OR WITH EMAIL")
      ══════════════════════════════════════════════════════════ */
   
   .auth-form-card .form-label,
   .auth-form-card .form-group label,
   #emailLoginForm .form-label,
   #emailSignupForm .form-label,
   #emailEnterpriseSignupForm .form-label,
   #emailResetForm .form-label,
   .form-label,
   .form-label * {
       color: var(--lp-text-faint) !important;
       -webkit-text-fill-color: var(--lp-text-faint) !important;
       font-size: 0.72rem !important;
       font-weight: 700 !important;
       text-transform: uppercase !important;
       letter-spacing: 0.05em !important;
   }
   
   .form-label i,
   .form-label i.fas,
   .form-label i.far,
   .form-label i.fab {
       color: var(--lp-text-faint) !important;
       -webkit-text-fill-color: var(--lp-text-faint) !important;
   }
   
   /* Texte secondaire à l'intérieur d'un label (ex: "(for enterprise onboarding)") */
   .form-label span {
       color: var(--lp-text-faint) !important;
       -webkit-text-fill-color: var(--lp-text-faint) !important;
       text-transform: none !important;
       letter-spacing: normal !important;
       font-weight: 400 !important;
       font-size: 0.7rem !important;
   }
   
   @media screen and (max-width: 480px) {
   
       body .trust-badges {
           flex-direction: row !important;
           flex-wrap: nowrap !important;
           justify-content: space-between !important;
           align-items: center !important;
           gap: 6px !important;
           padding-top: 1.25rem !important;
           margin-top: 1.25rem !important;
           width: 100% !important;
       }
   
       body .trust-badge {
           font-size: 0.68rem !important;
           gap: 0.3rem !important;
           flex: 1 1 0;
           justify-content: center;
           white-space: nowrap;
       }
   
       body .trust-badge span{
           font-size: 0.68rem !important;
       }
   
       body .trust-badge i {
           font-size: 0.8rem !important;
       }
   }
   
   @media screen and (max-width: 360px) {
       body .trust-badge span{
           display: inline; /* garde le texte visible mais compact */
       }
       body .trust-badge {
           font-size: 0.6rem !important;
       }
   }
   
   .social-btn.microsoft-btn {
       background: #ffffff;
       border: 1px solid #e2e8f0;
       color: #1e293b;
   }
   
   .social-btn.microsoft-btn:hover {
       background: #f8fafc;
       border-color: #00a4ef;
   }
   /* ============================================
      FIN AUTH.CSS
      ============================================ */