feat: ajout de tooltip sur l'email lors de l'inscription de CFA (#3355)

.talismanrc

@@ -105,6 +105,8 @@ fileignoreconfig:
   checksum: cf94ce9123fc9dee7fcf63a8b67bf6cbc26eb7594595cd8bd188853569f290b1
 - filename: ui/public/modele-import.xlsx
   checksum: 437a1f461d7764c51f288128de18506f4c22078c109238a41e8883a813b7ac55
+- filename: ui/pages/auth/inscription/profil.tsx
+  checksum: 7873a0ce38104e5b892c011bb99621e115cbc0a30bf3b02f916142213d488df8
 scopeconfig:
 - scope: node
 custom_patterns:

ui/pages/auth/inscription/profil.tsx

@@ -17,6 +17,7 @@ import {
   RadioGroup,
   Spinner,
   Text,
+  Tooltip,
 } from "@chakra-ui/react";
 import { Field, Form, Formik } from "formik";
 import { useRouter } from "next/router";
@@ -302,8 +303,45 @@ function ProfileForm({ organisation, fixedEmail }: { organisation: Organisation;
                 isInvalid={meta.error && meta.touched}
                 isDisabled={fixedEmail !== ""}
               >
-                <FormLabel>Votre courriel</FormLabel>
-                <Input {...field} id={field.name} placeholder="Ex : [email protected]" />
+                <FormLabel>
+                  Votre courriel
+                  <Tooltip
+                    background="bluefrance"
+                    color="white"
+                    label={
+                      <Box padding="1w">
+                        <Text as="p">
+                          Pour des raisons de sécurité, merci d&apos;utiliser un email nominatif professionnel lié à
+                          votre organisation.
+                        </Text>
+                        <Text as="p" mt="4">
+                          Exemples : [email protected] ou équivalent.
+                        </Text>
+                        <Text as="p" mt="4">
+                          Nous ne pouvons pas valider les emails (@gmail, @hotmail, @orange, etc.), ni les mails
+                          génériques (contact@, apprentissage@...).
+                        </Text>
+                        <Text as="p" mt="4">
+                          Si cela vous est impossible, merci de nous contacter à
+                          [email protected].
+                        </Text>
+                      </Box>
+                    }
+                    aria-label="Pour des raisons de sécurité, merci d'utiliser un email nominatif professionnel lié à votre organisation.
+                    Exemples : [email protected] ou équivalent. Nous ne pouvons pas valider les emails (@gmail, @hotmail, @orange, etc.), ni les mails génériques (contact@, apprentissage@...).
+                    Si cela vous est impossible, merci de nous contacter à [email protected]."
+                  >
+                    <Box
+                      as="i"
+                      className="ri-error-warning-line"
+                      fontSize="epsilon"
+                      color="red.500"
+                      marginLeft="1w"
+                      verticalAlign="middle"
+                    />
+                  </Tooltip>
+                </FormLabel>
+                <Input {...field} id={field.name} placeholder="Ex : [email protected]" />
                 <FormErrorMessage>{meta.error}</FormErrorMessage>
               </FormControl>
             )}