diff --git a/site-web/style.css b/site-web/style.css index 1f58099..849a23c 100644 --- a/site-web/style.css +++ b/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; } - .nav-links { display: none; } - .stats-bar { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } - .footer-grid { grid-template-columns: 1fr 1fr; } + .navbar { + height: auto; + padding: 1rem 0; + 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);