/* Connexion : complément de la direction visuelle définie dans index.css. */
.login-page .main-product {
   min-height: 650px;
}

.login-page .find-box {
   max-width: 760px;
}

.login-page .login-panel {
   padding-top: clamp(28px, 4vw, 46px);
   padding-bottom: clamp(28px, 4vw, 46px);
}

.login-page .login-title {
   margin: 12px 0 0;
   color: #49657d;
   font-size: 20px;
   font-weight: 600;
}

.login-page .login-message {
   min-height: 28px;
   margin-top: 8px;
}

.login-page .product-sh {
   display: block;
   margin-top: 18px;
}

.login-page .login-form {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 18px;
}

.login-page .login-field {
   min-width: 0;
   text-align: right;
}

.login-page .login-field label {
   display: block;
   margin-bottom: 7px;
   color: #27445c;
   font-size: 15px;
   font-weight: 700;
}

.login-page .input-with-icon {
   position: relative;
}

.login-page .input-with-icon > i {
   position: absolute;
   z-index: 1;
   top: 50%;
   right: 17px;
   color: #147ac1;
   font-size: 18px;
   transform: translateY(-50%);
   pointer-events: none;
}

.login-page .form-sh input[type="text"],
.login-page .form-sh input[type="password"] {
   width: 100%;
   min-height: 56px;
   padding: 10px 48px 10px 15px;
   text-align: right;
   color: #102a43;
   font-size: 16px;
   font-weight: 500;
   background: #f8fbff;
   border: 1px solid #cbd9e6;
   border-radius: 12px;
   outline: none;
   transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.login-page .form-sh input[type="text"]:focus,
.login-page .form-sh input[type="password"]:focus {
   background: #fff;
   border-color: #147ac1;
   box-shadow: 0 0 0 4px rgba(20, 122, 193, .12);
}

.login-page .form-sh input::placeholder {
   color: #829ab1;
   opacity: 1;
}

.login-page .login-submit {
   grid-column: 1 / -1;
}

.login-page .form-sh button.home-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   width: 100%;
   min-height: 58px;
   padding: 10px 20px;
   color: #fff;
   font-size: 18px;
   font-weight: 700;
   line-height: 1.4;
   background: linear-gradient(135deg, #147ac1, #075a98);
   border: 2px solid #147ac1;
   border-radius: 12px;
   box-shadow: 0 10px 24px rgba(20, 122, 193, .24);
   transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.login-page .form-sh button.home-btn:hover,
.login-page .form-sh button.home-btn:focus {
   color: #fff;
   background: linear-gradient(135deg, #0f6fab, #064b80);
   box-shadow: 0 14px 28px rgba(7, 90, 152, .22);
   transform: translateY(-2px);
}

.login-page .login-secondary-actions {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 14px;
   margin-top: 14px;
}

.login-page .form-sh a.login-home-btn {
   color: #49657d;
   background: #eef3f7;
   border-color: #d4e0ea;
}

.login-page .form-sh a.login-home-btn:hover,
.login-page .form-sh a.login-home-btn:focus {
   color: #fff;
   background: #49657d;
   border-color: #49657d;
}

@media (max-width: 767px) {
   .login-page .main-product {
      min-height: auto;
   }

   .login-page .login-form,
   .login-page .login-secondary-actions {
      grid-template-columns: 1fr;
      gap: 12px;
   }

   .login-page .login-submit {
      grid-column: auto;
   }
}

@media (max-width: 380px) {
   .login-page .form-sh input[type="text"],
   .login-page .form-sh input[type="password"] {
      min-height: 52px;
   }
}

@media (prefers-reduced-motion: reduce) {
   .login-page .form-sh input,
   .login-page .form-sh button.home-btn {
      transition: none;
   }
}