Actualiser homepage/css/main.css

homepage/css/main.css

@@ -5,8 +5,8 @@
 :root {
   /* Couleurs */
   --color-bg: #ffffff;
-  --color-text: #414f57;
-  --color-dark: #313f47;
+  --color-text: #797979;
+  --color-dark: #797979;
   --color-border: #c8cccf;
   --color-accent: #ff7496;
 
@@ -133,6 +133,13 @@ textarea {
   text-transform: none; /* meilleure lisibilité */
 }
 
+input[type="text"],
+select {
+  height: 4em;
+  text-align: center;
+  letter-spacing: 0.22em;
+}
+
 input:focus,
 select:focus,
 textarea:focus {
@@ -174,12 +181,22 @@ input[type="submit"]:hover {
    LISTES D’ICÔNES
    ========================================================= */
 
+/* =========================================================
+   LISTES D’ICÔNES (ICÔNES SEULES)
+   ========================================================= */
+
 ul.icons {
   list-style: none;
   display: flex;
-  gap: 0.6em;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 1em;
   padding: 0;
-  margin: 1em 0;
+  margin: 1.2em 0;
+}
+
+ul.icons li {
+  margin: 0;
 }
 
 ul.icons a {
@@ -190,27 +207,24 @@ ul.icons a {
   height: 3.2em;
   border-radius: 50%;
   border: 1px solid var(--color-border);
-  transition: var(--transition);
-  position: relative;
+  color: var(--color-dark);
+  font-size: 1.3rem;
+  transition: all var(--transition);
+  text-decoration: none;
 }
 
 ul.icons a:hover {
   border-color: var(--color-accent);
-}
-
-ul.icons i {
-  font-size: 1.5rem;
-  color: var(--color-dark);
+  color: var(--color-accent);
+  transform: scale(1.1);
 }
 
 /* Mobile */
 @media (max-width: 480px) {
   ul.icons a {
-    width: 2.4em;
-    height: 2.4em;
-  }
-  ul.icons i {
-    font-size: 1rem;
+    width: 2.6em;
+    height: 2.6em;
+    font-size: 1.1rem;
   }
 }