Merge branch '44-css-actions-community' into 'main'

Amélioration "simple" des actions :

Closes #44

See merge request !37

src/components/OcHomeCommunityActionList/OcHomeCommunityActionList.vue

 <template>
-  <div class="flex flex-row gap-4 justify-between">
+  <div class="flex gap-4 justify-around flex-wrap">
     <template v-for="action in actionList" v-bind:key="action.id">
-      <div :class="[{'pb-6': action.needAccount && !isAuthenticated}, `bg-${color}-200`, `hover:bg-${color}-300`]" class="w-52 h-52 p-4 rounded-md cursor-pointer shadow-md"
+      <div :class="[{'pb-6': action.needAccount && !isAuthenticated}, `bg-${color}-200`, `hover:bg-${color}-300`]" class="size-48 p-4 rounded-md cursor-pointer shadow-md"
         @click="dialogsVisible[action.id] = true">
         <div class="flex flex-col h-full justify-evenly">
-          <h3 class="text-center font-bold">{{ translateValue(action.title) }}</h3>
-          <div v-if="action.fairBadges" class="flex flex-row justify-evenly gap-1">
+          <h3 class="text-center font-semibold">
+            {{ translateValue(action.title) }}
+          </h3>
+          <div v-if="action.fairBadges" class="flex justify-evenly gap-1">
             <OcBadgeFair :fair-badges-visibility="action.fairBadges" size="large"/>
           </div>
         </div>
         <span v-if="action.needAccount && !isAuthenticated" :title="t('homeActions.accountNeeded')" class="fa-solid fa-circle-user float-right pb-4"></span>
       </div>
-      <Dialog v-model:visible="dialogsVisible[action.id]" modal class="max-w-[800px]">
+      <Dialog
+        v-model:visible="dialogsVisible[action.id]"
+        dismissable-mask
+        modal
+        class="max-w-[800px]"
+      >
         <template #header>
-          <div class="flex flex-row gap-8 items-center mr-4">
+          <div class="flex gap-8 items-center mr-4">
             <h3 class="font-title text-4xl uppercase font-bold text-[--p-primary-color]">{{ translateValue(action.title) }}</h3>
-            <div v-if="action.fairBadges" class="flex flex-row justify-evenly gap-1">
+            <div v-if="action.fairBadges" class="flex justify-evenly gap-1">
               <OcBadgeFair :fair-badges-visibility="action.fairBadges" size="xlarge"/>
             </div>
           </div>
         </template>
         <hr class="mb-4">
-        <p class="text-justify w-full text-base font-semibold">
+        <p class="text-justify w-full text-base p-2">
           {{ translateValue(action.description) }}
         </p>
         <span v-if="action.needAccount && !isAuthenticated" :title="t('homeActions.accountNeeded')" class="fa-solid fa-circle-user float-right pb-4"></span>