refactor: remplacer section contact textuelle par icônes SVG

src/assets/css/styles.css

@@ -1190,39 +1190,49 @@ html.light-theme .hero::before {
     color: var(--or-oki);
 }
 
-.contact-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+.contact-socials {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     gap: 2rem;
+    flex-wrap: wrap;
     max-width: 1200px;
     margin: 0 auto;
 }
 
-.contact-card {
-    text-align: center;
-}
-
-.contact-card h3 {
+.contact-social-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 4rem;
+    height: 4rem;
     color: var(--or-oki);
-    margin-bottom: 1rem;
-    font-size: 1.1rem;
-}
-
-.contact-links {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    font-family: var(--font-body);
-}
-
-.contact-links a {
-    color: var(--blanc-creme);
     text-decoration: none;
-    transition: color 0.2s;
+    transition: transform 0.2s, opacity 0.2s;
+    border-radius: 8px;
+    background: rgba(253, 184, 19, 0.08);
 }
 
-.contact-links a:hover {
-    color: var(--or-oki);
+.contact-social-link:hover {
+    transform: scale(1.15);
+    background: rgba(253, 184, 19, 0.15);
+}
+
+.contact-social-link img {
+    width: 60%;
+    height: 60%;
+    object-fit: contain;
+}
+
+@media (min-width: 768px) {
+    .contact-socials {
+        gap: 2.5rem;
+    }
+
+    .contact-social-link {
+        width: 4.5rem;
+        height: 4.5rem;
+    }
 }
 
 /* Footer */