Actualiser style.css

style.css

@@ -485,6 +485,8 @@ footer hr {
     font-size: 0.85em;
     margin-right: 5px;
     transition: all 0.3s;
+    text-decoration: none;
+    display: inline-block;
 }
 
 .btn-danger {
@@ -505,6 +507,24 @@ footer hr {
     background-color: #d68910;
 }
 
+/* ===========================
+   SKELETON LOADING
+=========================== */
+@keyframes skeleton-pulse {
+    0%   { opacity: 1; }
+    50%  { opacity: 0.4; }
+    100% { opacity: 1; }
+}
+
+.skeleton {
+    background-color: #3d5166;
+    border-radius: 5px;
+    height: 14px;
+    margin: 8px auto;
+    width: 70%;
+    animation: skeleton-pulse 1.5s ease-in-out infinite;
+}
+
 /* ===========================
    MODE CLAIR
 =========================== */
@@ -637,4 +657,91 @@ body.light-mode .admin-table td {
 
 body.light-mode .admin-table tr:hover td {
     background-color: #e8f4fd;
+}
+
+body.light-mode .skeleton {
+    background-color: #ccc;
+}
+
+/* ===========================
+   RESPONSIVE MOBILE
+=========================== */
+
+/* Tablette (max 900px) */
+@media (max-width: 900px) {
+    .dashboard {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .graphiques {
+        grid-column: span 2;
+    }
+
+    .alertes {
+        grid-column: span 2;
+    }
+
+    .cards-home {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+/* Mobile (max 600px) */
+@media (max-width: 600px) {
+    nav {
+        padding: 10px 15px;
+        height: auto;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    nav ul {
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 10px;
+    }
+
+    .dashboard {
+        grid-template-columns: 1fr;
+        padding: 10px 15px;
+    }
+
+    .graphiques {
+        grid-column: span 1;
+    }
+
+    .alertes {
+        grid-column: span 1;
+    }
+
+    .cards-home {
+        grid-template-columns: 1fr;
+    }
+
+    .form-box {
+        width: 90%;
+        margin: 30px auto;
+    }
+
+    .hero {
+        padding: 40px 15px 30px;
+    }
+
+    .hero h2 {
+        font-size: 1.5em;
+    }
+
+    .logs-container {
+        margin: 10px 15px;
+        padding: 15px;
+    }
+
+    .admin-table {
+        font-size: 0.8em;
+    }
+
+    .btn-action {
+        display: block;
+        margin-bottom: 5px;
+    }
 }