From 4a8f63dcb2eafb6552e4ca23b95d2b20855a64d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Thu, 10 Apr 2025 07:15:59 +0400
Subject: [PATCH] fix social media icons size on small device

---
 css/styles.css | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/css/styles.css b/css/styles.css
index f837cbf..07ffc49 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -810,6 +810,9 @@ img {
     color: var(--text-color);
     font-size: 20px;
     transition: all 0.3s;
+    min-width: 40px;
+    min-height: 40px;
+    aspect-ratio: 1/1;
 }
 
 .footer-social a:hover {
@@ -1091,6 +1094,31 @@ img {
     .info-section {
         padding: 20px 15px;
     }
+    
+    .footer-social {
+        gap: 10px;
+    }
+    
+    .footer-social a {
+        width: 35px;
+        height: 35px;
+        min-width: 35px;
+        min-height: 35px;
+        font-size: 18px;
+        margin: 0 5px;
+    }
+    
+    .mobile-social-icons {
+        gap: 10px;
+    }
+    
+    .mobile-social-icons a {
+        width: 35px;
+        height: 35px;
+        min-width: 35px;
+        min-height: 35px;
+        font-size: 18px;
+    }
 }
 
 @media (max-width: 400px) {
@@ -1105,6 +1133,34 @@ img {
     .cc-license h4 {
         font-size: 14px;
     }
+    
+    .footer-social {
+        gap: 5px;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    
+    .footer-social a {
+        width: 32px;
+        height: 32px;
+        min-width: 32px;
+        min-height: 32px;
+        font-size: 16px;
+        margin: 0 3px;
+    }
+    
+    .mobile-social-icons {
+        gap: 5px;
+        flex-wrap: wrap;
+    }
+    
+    .mobile-social-icons a {
+        width: 32px;
+        height: 32px;
+        min-width: 32px;
+        min-height: 32px;
+        font-size: 16px;
+    }
 }
 
 /* Styles pour le menu dropdown des réseaux sociaux */
@@ -1225,6 +1281,9 @@ i.icon-x,
     border-radius: 50%;
     background-color: #f5f5f5;
     transition: transform 0.2s, background-color 0.2s;
+    min-width: 40px;
+    min-height: 40px;
+    aspect-ratio: 1/1;
 }
 
 .mobile-social-icons a:hover {