fix social media icons size on small device

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 {