Adaptation aux mobiles

styles/primary_css.css

@@ -43,6 +43,27 @@ nav a:hover {
     color: white;
 }
 
+@media (max-width: 700px) {
+    header {
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 15px 20px;
+        gap: 12px;
+    }
+
+    nav {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+        width: 100%;
+    }
+
+    nav a {
+        margin-left: 0;
+        padding: 8px 12px;
+    }
+}
+
 /* ---- PAGE LOGIN ---- */
 
 /* Centre la carte au milieu de la page */
@@ -59,6 +80,7 @@ nav a:hover {
     border-radius: 16px;
     padding: 40px;
     width: 340px;
+    max-width: 90%;
     text-align: center;
 }
 
@@ -118,6 +140,18 @@ nav a:hover {
     background-color: #5a52e0;
 }
 
+@media (max-width: 700px) {
+    .login-container {
+        height: auto;
+        min-height: 80vh;
+        padding: 30px 16px;
+    }
+
+    .login-card {
+        padding: 28px 24px;
+    }
+}
+
 /* ---- PAGE AJOUT PROJET ---- */
 .project-container {
     display: flex;
@@ -227,6 +261,29 @@ nav a:hover {
     margin-top: 15px;
 }
 
+@media (max-width: 700px) {
+    .project-container {
+        padding: 10px 16px;
+    }
+
+    .project-form-card {
+        padding: 18px;
+    }
+
+    .form-row {
+        flex-direction: column;
+        gap: 0;
+    }
+
+    .url-input-zone {
+        padding: 24px 12px;
+    }
+
+    .url-input-zone input {
+        width: 100%;
+    }
+}
+
 /* Bouton violet */
 .btn-submit {
     background-color: #6c63ff;
@@ -338,6 +395,33 @@ nav a:hover {
     background-color: #7e2023;
 }
 
+@media (max-width: 700px) {
+    .projects-title {
+        padding: 0 16px 16px 16px;
+        font-size: 20px;
+    }
+
+    .projects-list {
+        grid-template-columns: 1fr;
+        padding: 0 16px 24px 16px;
+        gap: 16px;
+    }
+
+    .project-banner img {
+        height: 180px;
+    }
+
+    .admin-actions {
+        flex-direction: column;
+    }
+
+    .admin-actions .btn-submit {
+        width: 100%;
+        text-align: center;
+        box-sizing: border-box;
+    }
+}
+
 /* ---- FORCER LE FOOTER EN BAS (STICKY FOOTER) ---- */
 html, body {
     height: 100%;