Résolution d'affichage de la page d'accueil

style.css

@@ -7,7 +7,7 @@
 }
 
 body {
-    display: flex;
+    /* display: flex; */ /* Remove this line */
     justify-content: center;
     align-items: center;
     min-height: 100vh;
@@ -17,6 +17,7 @@ body {
     margin: 0;
 }
 
+
 header {
     position: fixed;
     background: #162938;
@@ -87,7 +88,8 @@ header {
 
 .wrapper {
     position: fixed;
-    width: 400px;
+    width: 100%;
+    max-width: 400px; /* Set maximum width */
     height: 440px;
     background: transparent;
     border: 2px solid rgba(255, 255, 255, .5);
@@ -105,6 +107,35 @@ header {
     transform: translateX(-50%); 
 }
 
+@media only screen and (max-width: 768px) {
+    .wrapper {
+        max-width: none; /* Remove maximum width for smaller screens */
+    }
+
+    header {
+        padding: 20px 20px; /* Adjust padding for smaller screens */
+    }
+    .navigation {
+        flex-direction: column;
+        align-items: flex-start;
+        position: absolute;
+        top: 80px;
+        left: 0;
+        background: #162938;
+        width: 100%;
+        display: none;
+    }
+    .navigation.active {
+        display: flex;
+    }
+    .navigation a {
+        margin: 10px 0;
+        font-size: 1.2em;
+    }
+}
+
+
+
 .wrapper.active-popup {
     transform: scale(1);
 
@@ -266,6 +297,7 @@ header {
 
 }
 
+
 .presentation {
     display: flex;
     flex-direction: column;
@@ -298,11 +330,12 @@ header {
 
 .photo-grid {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     gap: 20px;
-    text-align: left; /* Nouvelle ligne ajoutée pour aligner le texte à gauche */
+    text-align: left;
 }
 
+
 .photo {
     position: relative;
 }