From dd54dc88a9793952b3c093d36f9d8932d3b8caee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Fri, 5 Dec 2025 18:20:25 +0100
Subject: [PATCH] chore: mobile footer styles

---
 app/app.vue                  |  2 +-
 app/components/AppFooter.vue | 50 +++++++++++++++++++++++++++++++-----
 2 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 1d67cad..d1bb592 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -16,7 +16,7 @@
   --breakpoint-2xl: 1400px;
 }
 
-html, body, p, a {
+html, body, p, a, address {
   font-family: 'Abbiocco Beta', system-ui, -apple-system, BlinkMacSystemFont,
     'Segoe UI', sans-serif;
 }
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 68fdce7..909fb41 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -1,22 +1,58 @@
 <script setup lang="ts">
 const appConfig = useAppConfig()
+
+onMounted(() => {
+  const protectedEmail = document.getElementById('protected-email')
+  const protectedPhone = document.getElementById('protected-phone')
+
+  if(protectedEmail)
+    protectedEmail.innerHTML = 'moc.' + 'liamg' + '@' + 'dramloc.' + 'ettelrual';
+
+  if(protectedPhone)
+    protectedPhone.textContent = atob('MDYgMDEgOTMgNzUgODc=');
+})
 </script>
 
 <template>
   <footer>
-    <img src="~/assets/images/brand-mobile.svg" :alt="appConfig.title"></img>
-    <address>
-      Laurette Colmard
-      laurette.colmard@gmail.com
-      29 rue Colonel Bougault, 38100 Grenoble (FR)
-      06 01 93 75 87
-    </address>
+    <div class="wrapper">
+      <img src="~/assets/images/brand-mobile.svg" :alt="appConfig.title"></img>
+      <address>
+        Laurette Colmard<br>
+        <span id="protected-email" class="protected"></span><br>
+        29 rue Colonel Bougault, 38100 Grenoble (FR)<br>
+        <span id="protected-phone"></span>
+      </address>
+    </div>
   </footer>
 </template>
 
 <style lang="css" scoped>
+.protected {
+  unicode-bidi: bidi-override;
+  direction: rtl;
+}
+
 footer {
   background-color: var(--primary-color);
   color: var(--secondary-color);
+  padding: 0 1.5rem;
+}
+
+.wrapper {
+  display: flex;
+  align-items: flex-end;
+  gap: 2rem;
+  padding: 1.5rem 0;
+}
+
+address {
+  font-weight: 500;
+  font-size: 0.75rem;
+  line-height: 0.75rem;
+}
+
+img {
+  height: 64px;
 }
 </style>
\ No newline at end of file