Tooltip anchor before download

src/front/Components/Layouts/Folder/ViewDocuments/classes.module.scss

@@ -16,16 +16,16 @@
 		justify-content: space-between;
 		align-items: center;
 
-		.arrow-container{
+		.arrow-container {
 			cursor: pointer;
 
-			&[data-disabled="true"]{
+			&[data-disabled="true"] {
 				opacity: 0.3;
 				cursor: not-allowed;
 			}
 		}
 
-		.file-container{
+		.file-container {
 			max-width: 1000px;
 			margin: auto;
 			min-height: 700px;
@@ -33,12 +33,17 @@
 		}
 	}
 
-	.footer{
-		width: fit-content;
+	.footer {
 		margin: auto;
-		.ocr-container{
+		.ocr-container {
 			margin-top: 42px;
 		}
+
+		.alert {
+			margin-top: 24px;
+			width: 100%;
+		}
+
 		.buttons-container {
 			display: flex;
 			gap: 24px;

src/front/Components/Layouts/Folder/ViewDocuments/index.tsx

@@ -17,6 +17,7 @@ import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 import Files from "@Front/Api/LeCoffreApi/Notary/Files/Files";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
+import MessageBox from "@Front/Components/Elements/MessageBox";
 
 type IProps = {};
 type IPropsClass = {
@@ -104,6 +105,9 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 							)}
 						</div>
 						<div className={classes["footer"]}>
+							<div className={classes["alert"]}>
+								<MessageBox type={"info"}>Veuillez valider le document afin de pouvoir le télécharger.</MessageBox>
+							</div>
 							{/* {this.state.document?.document_type?.name === "Document d'identité" && (
 								<div className={classes["ocr-container"]}>
 									<OcrResult percentage={this.state.validatedPercentage} />