style: réduire taille icônes et uniformiser couleurs

src/assets/css/styles.css

@@ -1194,7 +1194,7 @@ html.light-theme .hero::before {
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: 2rem;
+    gap: 1.5rem;
     flex-wrap: wrap;
     max-width: 1200px;
     margin: 0 auto;
@@ -1204,8 +1204,8 @@ html.light-theme .hero::before {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 4rem;
-    height: 4rem;
+    width: 3rem;
+    height: 3rem;
     color: var(--or-oki);
     text-decoration: none;
     transition: transform 0.2s, opacity 0.2s;
@@ -1219,19 +1219,20 @@ html.light-theme .hero::before {
 }
 
 .contact-social-link img {
-    width: 60%;
-    height: 60%;
+    width: 70%;
+    height: 70%;
     object-fit: contain;
+    filter: brightness(0) saturate(100%) invert(0.9) sepia(0.8) hue-rotate(30deg);
 }
 
 @media (min-width: 768px) {
     .contact-socials {
-        gap: 2.5rem;
+        gap: 2rem;
     }
 
     .contact-social-link {
-        width: 4.5rem;
-        height: 4.5rem;
+        width: 3.5rem;
+        height: 3.5rem;
     }
 }
 
@@ -1301,8 +1302,8 @@ footer .flag-bar {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 2.5rem;
-    height: 2.5rem;
+    width: 1.75rem;
+    height: 1.75rem;
     color: var(--or-oki);
     text-decoration: none;
     transition: transform 0.2s, opacity 0.2s;
@@ -1313,19 +1314,26 @@ footer .flag-bar {
     height: 100%;
 }
 
+.social-link img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    filter: brightness(0) saturate(100%) invert(0.9) sepia(0.8) hue-rotate(30deg);
+}
+
 .social-link:hover {
-    transform: scale(1.1);
-    opacity: 0.8;
+    transform: scale(1.15);
+    opacity: 0.9;
 }
 
 @media (min-width: 768px) {
     .footer-socials {
-        gap: 1.5rem;
+        gap: 1rem;
     }
 
     .social-link {
-        width: 2.75rem;
-        height: 2.75rem;
+        width: 2rem;
+        height: 2rem;
     }
 }