feat: styliser le lien vers le fil BOKANTE

components/teks/repons-mastodon.jsx

@@ -14,7 +14,7 @@ import FormControl from '@mui/material/FormControl'
 import InputLabel from '@mui/material/InputLabel'
 import Select from '@mui/material/Select'
 import MenuItem from '@mui/material/MenuItem'
-import Link from 'next/link'
+import Link from '@mui/material/Link'
 import {Mastodon} from '@icons-pack/react-simple-icons'
 
 const BOKANTE_URL = process.env.NEXT_PUBLIC_BOKANTE_URL || 'https://bokante.o-k-i.net'
@@ -59,7 +59,29 @@ export default function ReponsMastodon({bokanteStatusId}) {
     <Box sx={{maxWidth: 700, margin: '1em auto 0', textAlign: 'center'}}>
       <Typography variant='body2' sx={{mb: 1}}>
         Rejoignez la discussion sur le Fediverse via{' '}
-        <Link href={tootUrl} target='_blank' rel='noopener noreferrer'>BOKANTE (Mastodon)</Link>
+        <Link
+          href={tootUrl}
+          target='_blank'
+          rel='noopener noreferrer'
+          underline='hover'
+          sx={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 0.5,
+            px: 1,
+            py: 0.25,
+            borderRadius: 1,
+            bgcolor: 'action.hover',
+            color: 'primary.main',
+            fontWeight: 500,
+            textDecoration: 'none',
+            '&:hover': {
+              bgcolor: 'action.selected'
+            }
+          }}
+        >
+          BOKANTE (Mastodon)
+        </Link>
       </Typography>
       <Button
         variant='outlined'