responsive: refonte mobile complète avec barre de navigation tactile et boutons pleines largeurs

site-web/style.css

@@ -522,13 +522,104 @@ h1 {
     font-size: 0.85rem;
 }
 
+/* RESPONSIVE MOBILE ET NAVIGATION TACTILE */
 @media (max-width: 900px) {
-    h1 { font-size: 3rem; }
+    .navbar {
-    .nav-links { display: none; }
+        height: auto;
-    .stats-bar { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
+        padding: 1rem 0;
-    .footer-grid { grid-template-columns: 1fr 1fr; }
+        flex-direction: column;
+        gap: 1rem;
     }
     
+    .nav-links {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.6rem;
+        width: 100%;
+    }
+
+    .nav-links a {
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid var(--border);
+        padding: 0.45rem 0.9rem;
+        border-radius: 8px;
+        font-size: 0.85rem;
+        text-align: center;
+    }
+
+    .nav-links a.active {
+        background: rgba(56, 189, 248, 0.15);
+        border-color: var(--accent-cyan);
+    }
+
+    .nav-status {
+        width: 100%;
+        justify-content: center;
+    }
+
+    .nav-actions {
+        width: 100%;
+    }
+
+    .nav-actions .btn {
+        width: 100%;
+        justify-content: center;
+    }
+
+    h1 {
+        font-size: 2.5rem;
+        letter-spacing: -1px;
+    }
+
+    .hero {
+        padding: 3rem 1rem 2rem;
+    }
+
+    .hero-desc {
+        font-size: 1.05rem;
+        margin-bottom: 2rem;
+    }
+
+    .hero-cta {
+        flex-direction: column;
+        gap: 0.8rem;
+    }
+
+    .hero-cta .btn {
+        width: 100%;
+        justify-content: center;
+    }
+
+    .stats-bar {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1rem;
+        padding: 1.2rem;
+    }
+
+    .stat-val {
+        font-size: 1.4rem;
+    }
+
+    .section {
+        padding: 3.5rem 1rem;
+    }
+
+    .section-head h2 {
+        font-size: 1.9rem;
+    }
+
+    .pricing-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .footer-grid {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+    }
+}
+
+
 /* NAV ACTIVE */
 .nav-links a.active {
     color: var(--accent-cyan);