feat(mail) : décodage des en-têtes MIME + aperçu inline des pièces jointes

- Décode les encoded-words MIME (RFC 2047) des sujets et noms d'expéditeur
  via App\Mail\MimeHeaderDecoder, appliqué dans ImapMailProvider (sync propre)
- Commande app:mail:redecode-headers (--dry-run) pour re-décoder l'existant en base
- Aperçu inline images + PDF en visionneuse modale plein écran (MailAttachmentPreview),
  téléchargement conservé pour les autres types
- Tests unitaires du décodeur + maj docs/mail-integration.md

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/components/mail/MailAttachmentPreview.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+const props = defineProps<{
+    /** Ouverture de la visionneuse. */
+    modelValue: boolean
+    /** Nom du fichier affiché dans la barre. */
+    filename: string
+    /** Type MIME — détermine le rendu (image vs PDF). */
+    mimeType: string
+    /** Object URL du Blob de la pièce jointe. null tant que le contenu charge. */
+    url: string | null
+    /** Téléchargement en cours du contenu. */
+    loading: boolean
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [value: boolean]
+    download: []
+}>()
+
+const { t } = useI18n()
+
+const isImage = computed(() => props.mimeType.startsWith('image/'))
+const isPdf = computed(() => props.mimeType === 'application/pdf')
+
+function close(): void {
+    emit('update:modelValue', false)
+}
+
+function onKeydown(e: KeyboardEvent): void {
+    if (e.key === 'Escape') close()
+}
+
+watch(
+    () => props.modelValue,
+    (open) => {
+        if (open) {
+            window.addEventListener('keydown', onKeydown)
+        } else {
+            window.removeEventListener('keydown', onKeydown)
+        }
+    },
+)
+
+onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
+</script>
+
+<template>
+    <Teleport v-if="modelValue" to="body">
+        <Transition name="mail-preview" appear>
+            <div class="fixed inset-0 z-50 flex flex-col bg-slate-900/80 backdrop-blur-sm">
+                <!-- Barre supérieure -->
+                <div class="flex flex-shrink-0 items-center justify-between gap-4 px-4 py-3 text-white">
+                    <div class="flex min-w-0 items-center gap-2">
+                        <Icon
+                            :name="isImage ? 'material-symbols:image-outline' : 'material-symbols:picture-as-pdf-outline'"
+                            size="18"
+                            class="flex-shrink-0 text-white/70"
+                        />
+                        <span class="truncate text-sm font-medium">{{ filename }}</span>
+                    </div>
+                    <div class="flex flex-shrink-0 items-center gap-1">
+                        <button
+                            type="button"
+                            class="flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-white/90 transition-colors hover:bg-white/10"
+                            @click="emit('download')"
+                        >
+                            <Icon name="material-symbols:download" size="18" />
+                            <span class="hidden sm:inline">{{ t('mail.actions.download') }}</span>
+                        </button>
+                        <button
+                            type="button"
+                            class="rounded-md p-1.5 text-white/90 transition-colors hover:bg-white/10"
+                            :aria-label="t('mail.preview.close')"
+                            @click="close"
+                        >
+                            <Icon name="mdi:close" size="20" />
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Contenu -->
+                <div class="flex min-h-0 flex-1 items-center justify-center overflow-auto p-4" @click.self="close">
+                    <div v-if="loading" class="flex flex-col items-center gap-3 text-white/70">
+                        <Icon name="material-symbols:progress-activity" size="32" class="animate-spin" />
+                        <span class="text-sm">{{ t('mail.preview.loading') }}</span>
+                    </div>
+
+                    <img
+                        v-else-if="isImage && url"
+                        :src="url"
+                        :alt="filename"
+                        class="max-h-full max-w-full rounded-lg object-contain shadow-2xl"
+                    >
+
+                    <iframe
+                        v-else-if="isPdf && url"
+                        :src="url"
+                        :title="filename"
+                        class="h-full w-full max-w-5xl rounded-lg bg-white shadow-2xl"
+                    />
+
+                    <div v-else class="flex flex-col items-center gap-3 text-white/70">
+                        <Icon name="material-symbols:visibility-off-outline" size="32" />
+                        <span class="text-sm">{{ t('mail.preview.unavailable') }}</span>
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<style scoped>
+.mail-preview-enter-active,
+.mail-preview-leave-active {
+    transition: opacity 0.2s ease;
+}
+.mail-preview-enter-from,
+.mail-preview-leave-to {
+    opacity: 0;
+}
+</style>