Actualiser style.css/style.css

style.css/style.css

@@ -1,5 +1,6 @@
-/* --- 0. Général & Reset --- */
+
 * {
+   
     margin: 0;
     padding: 0;
     box-sizing: border-box; 
@@ -7,8 +8,6 @@
 
 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    margin: 0;
-    padding: 0;
     line-height: 1.6;
     color: #333;
     background-color: #f4f7f6; 
@@ -26,17 +25,19 @@ a {
 }
 
 a:hover {
+    color: #0056b3; 
     text-decoration: underline;
 }
 
 .container {
-    max-width: 12px; 
+   
+    max-width: 1200px; 
     margin: 0 auto;
     padding: 0 20px;
 }
 
 
-/* --- 1. Header et Navigation --- */
+
 .header-portfolio {
     background-color: darkblue; 
     color: white;
@@ -51,12 +52,9 @@ a:hover {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 20px;
 }
 
-/* Modification : Logo "Abdul" en BLEU CLAIR */
+
 .nav-principal .logo {
     font-size: 1.8em;
     font-weight: bold;
@@ -74,7 +72,7 @@ a:hover {
     margin-left: 25px;
 }
 
-/* Modification : Liens de navigation en BLEU CLAIR */
+
 .nav-principal ul li a {
     color: #a7d9f7; 
     font-weight: 500;
@@ -86,23 +84,13 @@ a:hover {
     text-decoration: none;
 }
 
-/* Bouton Dark Mode (pour le JavaScript, couleur de base sur fond foncé) */
-#dark-mode-toggle {
-    background: none;
-    border: none;
-    color: white;
-    padding: 0.5rem;
-    cursor: pointer;
-    font-size: 1.5rem;
-    transition: color 0.3s;
-}
 
-/* --- 2. Bouton CTA (Call to Action) --- */
+
 .bouton-cta {
     display: inline-block;
     background-color: #007bff;
     color: white;
-    padding: 10px 10px;
+    padding: 10px 20px; 
     border-radius: 5px;
     margin-top: 10px;
     font-weight: bold;
@@ -115,14 +103,14 @@ a:hover {
 }
 
 
-/* --- 3. Section Accueil --- */
+
 .section-accueil {
     background: linear-gradient(rgba(26, 92, 136, 0.8), rgba(26, 92, 136, 0.8)), url('images/background-reseau.jpg') no-repeat center center fixed; 
     background-size: cover;
     color: white;
     text-align: center;
-    padding: 20px 20px;
-    min-height: 50px;
+    padding: 100px 20px; 
+    min-height: 500px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -146,12 +134,10 @@ a:hover {
 }
 
 
-/* --- 4. Sections Générales --- */
+
 section {
     padding: 80px 20px;
     text-align: center;
-    max-width: 1200px;
-    margin: 0 auto;
 }
 
 .titre-section {
@@ -174,7 +160,7 @@ section {
 }
 
 
-/* --- 5. Cartes : Compétences et Projets --- */
+
 .grille-competences {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -211,12 +197,10 @@ section {
 
 .carte-competence img {
     width: 30px;
-    margin-bottom: 10px;s
+    margin-bottom: 10px;
 }
 
 
-
-
 .icon-reseau::before,
 .icon-pc::before,
 .icon-electricite::before,
@@ -249,7 +233,7 @@ section {
     text-align: left;
     transition: transform 0.3s ease;
     border: 1px solid #ddd;
-} /* AJOUT DE L'ACCOLADE MANQUANTE ICI */
+} 
 
 
 .carte-projet:hover {
@@ -277,6 +261,7 @@ section {
     color: #007bff;
 }
 
+
 .experienc-pro{
     display: block;
     margin-bottom: 10px;
@@ -284,14 +269,22 @@ section {
 }
 
 
-/* --- 7. Section Contact --- */
+
 .section-contact p {
     font-size: 1.1em;
     margin-bottom: 40px;
 }
 
 
-/* --- 8. Médias Queries (Réactivité) --- */
+
+
+@media (max-width: 992px) {
+    .container {
+        max-width: 90%; 
+    }
+}
+
+
 @media (max-width: 768px) {
     .nav-principal {
         flex-direction: column;
@@ -308,10 +301,11 @@ section {
         margin: 0 10px;
     }
     
-    #dark-mode-toggle {
-        position: absolute;
-        top: 10px;
-        right: 20px;
+   
+
+    .section-accueil {
+        min-height: 400px;
+        padding: 50px 20px;
     }
 
     .section-accueil .titre-principal {
@@ -332,4 +326,19 @@ section {
         margin-bottom: 10px;
     }
 }
+
+
+@media (max-width: 600px) {
+    .container {
+        width: 100%;
+        padding: 10px;
+    }
+    
+    .nav-principal ul {
+        flex-direction: column; 
+        align-items: center;
+    }
+    .nav-principal ul li {
+        margin: 5px 0;
+    }
 }