/* ---------- Responsive / Mobile ---------- */
        @media (max-width: 640px) {
            header {
                flex-direction: column;
                height: auto;
                padding: 10px clamp(16px, 5vw, 48px);
                gap: 6px;
            }

            header nav {
                gap: 20px;
                flex-wrap: wrap;
                justify-content: center;
            }

            /* Masquer le bouton de connexion / infos user sur mobile */
            .auth {
                display: none;
            }

            .section-head {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
                margin-bottom: 24px;
            }

            /* Les cartes s'empilent verticalement au lieu de défiler */
            .grid {
                flex-direction: column;
                overflow-x: visible;
            }

            .card {
                width: 100%;
                max-width: 100%;
            }

            .hero p,
            .about p {
                max-width: 100%;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            * { animation: none !important; transition: none !important; }
            .reveal { opacity: 1 !important; transform: none !important; }
        }