fix: fullwidth separator in forgot password form

src/app/reset-password/forgot-password.component.html

@@ -4,14 +4,16 @@
     <p>Saisissez votre email afin de réinitialiser votre mot de passe</p>
   </div>
   <form [formGroup]="forgotPasswordForm" (ngSubmit)="onSubmit()">
-    <app-input
-      size="large"
-      [placeholder]="'exemple@mail.com'"
-      [label]="'Email du compte'"
-      [value]="email.value"
-      [status]="email.value ? (email.invalid ? 'error' : 'success') : null"
-      (valueChange)="email.setValue($event)"
-    />
+    <div class="fields">
+      <app-input
+        size="large"
+        [placeholder]="'exemple@mail.com'"
+        [label]="'Email du compte'"
+        [value]="email.value"
+        [status]="email.value ? (email.invalid ? 'error' : 'success') : null"
+        (valueChange)="email.setValue($event)"
+      />
+    </div>
 
     <div class="footer">
       <app-button [variant]="'secondary'" [label]="'Annuler'" (action)="goLogin()" />

src/app/reset-password/reset-password.component.scss

@@ -13,14 +13,14 @@
   justify-content: space-between;
   height: 100%;
   width: 100%;
-  max-width: 980px;
   box-sizing: border-box;
   margin: auto;
-  padding: 96px 48px 40px 48px;
+  padding-top: 96px;
+  padding-bottom: 40px;
   gap: 40px;
 
   @media #{$phone} {
-    padding: 32px 16px 32px 16px;
+    padding-block: 32px;
   }
 
   .title {
@@ -28,6 +28,7 @@
     flex-direction: column;
     gap: 16px;
     text-align: center;
+    padding-inline: 16px;
 
     h1 {
       @include font-bold-24;
@@ -42,11 +43,19 @@
     flex-direction: column;
     justify-content: space-between;
     height: 100%;
+    width: 100%;
 
     .fields {
       display: flex;
       flex-direction: column;
+      align-items: center;
       gap: 16px;
+      padding-inline: 16px;
+
+      app-input {
+        width: 100%;
+        max-width: 300px;
+      }
 
       .passwordConditions {
         ul {