Start mobile friendly

src/app/AppLayout.module.scss

@@ -15,6 +15,36 @@
   position: sticky;
   top: 0;
   z-index: 10;
+
+  @media (max-width: 720px) {
+    padding: var(--space-4) var(--space-5);
+  }
+}
+
+.navToggle {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 0.3rem;
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0;
+  background: transparent;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+
+  @media (max-width: 720px) {
+    display: flex;
+  }
+}
+
+.navToggleBar {
+  display: block;
+  width: 1.1rem;
+  height: 2px;
+  background: var(--text);
+  border-radius: 1px;
 }
 
 .brand {
@@ -29,6 +59,26 @@
 .navLinks {
   display: flex;
   gap: var(--space-2);
+
+  @media (max-width: 720px) {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    flex-direction: column;
+    gap: 0;
+    padding: var(--space-3);
+    background: var(--surface);
+    border-bottom: 1px solid var(--border);
+    box-shadow: var(--shadow-md);
+  }
+}
+
+.navLinksOpen {
+  @media (max-width: 720px) {
+    display: flex;
+  }
 }
 
 .navLink {
@@ -44,6 +94,12 @@
     color: var(--text);
     background: var(--surface-raised);
   }
+
+  @media (max-width: 720px) {
+    width: 100%;
+    padding: var(--space-3);
+    border-radius: 0;
+  }
 }
 
 .navLinkActive {
@@ -61,6 +117,10 @@
   flex: 1;
   padding: var(--space-6) var(--space-7);
   max-width: 100%;
+
+  @media (max-width: 720px) {
+    padding: var(--space-5) var(--space-4);
+  }
 }
 
 .disclaimer {
@@ -69,4 +129,8 @@
   font-size: var(--text-xs);
   color: var(--text-muted);
   text-align: center;
+
+  @media (max-width: 720px) {
+    padding: var(--space-4);
+  }
 }

src/app/AppLayout.test.tsx

@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router';
+import AppLayout from './AppLayout.tsx';
+
+describe('AppLayout', () => {
+  it('renders all nav links', () => {
+    render(
+      <MemoryRouter>
+        <AppLayout />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByRole('link', { name: 'Évaluation' })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Discovery' })).toBeInTheDocument();
+  });
+
+  it('toggles the mobile menu open and closed', async () => {
+    const user = userEvent.setup();
+    render(
+      <MemoryRouter>
+        <AppLayout />
+      </MemoryRouter>,
+    );
+
+    const toggle = screen.getByTestId('nav-toggle-button');
+    expect(toggle).toHaveAttribute('aria-expanded', 'false');
+
+    await user.click(toggle);
+    expect(toggle).toHaveAttribute('aria-expanded', 'true');
+
+    await user.click(toggle);
+    expect(toggle).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('closes the mobile menu after clicking a nav link', async () => {
+    const user = userEvent.setup();
+    render(
+      <MemoryRouter>
+        <AppLayout />
+      </MemoryRouter>,
+    );
+
+    await user.click(screen.getByTestId('nav-toggle-button'));
+    expect(screen.getByTestId('nav-toggle-button')).toHaveAttribute('aria-expanded', 'true');
+
+    await user.click(screen.getByRole('link', { name: 'Tirages' }));
+    expect(screen.getByTestId('nav-toggle-button')).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('closes the mobile menu when clicking outside of it', async () => {
+    const user = userEvent.setup();
+    render(
+      <MemoryRouter>
+        <AppLayout />
+      </MemoryRouter>,
+    );
+
+    await user.click(screen.getByTestId('nav-toggle-button'));
+    expect(screen.getByTestId('nav-toggle-button')).toHaveAttribute('aria-expanded', 'true');
+
+    await user.click(screen.getByTestId('app-content'));
+    expect(screen.getByTestId('nav-toggle-button')).toHaveAttribute('aria-expanded', 'false');
+  });
+});

src/app/AppLayout.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react';
 import { NavLink, Outlet } from 'react-router';
 import styles from './AppLayout.module.scss';
 
@@ -10,15 +11,47 @@ const NAV_ITEMS = [
 ];
 
 const AppLayout = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const navRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (!isMenuOpen) return;
+
+    const closeIfOutside = (event: MouseEvent) => {
+      if (navRef.current && !navRef.current.contains(event.target as Node)) {
+        setIsMenuOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', closeIfOutside);
+    return () => document.removeEventListener('mousedown', closeIfOutside);
+  }, [isMenuOpen]);
+
   return (
     <div className={styles.layout}>
-      <nav className={styles.nav}>
+      <nav className={styles.nav} ref={navRef}>
         <span className={styles.brand}>Geometry Lab</span>
-        <div className={styles.navLinks}>
+        <button
+          type="button"
+          className={styles.navToggle}
+          aria-expanded={isMenuOpen}
+          aria-label={isMenuOpen ? 'Fermer le menu' : 'Ouvrir le menu'}
+          onClick={() => setIsMenuOpen((previous) => !previous)}
+          data-testid="nav-toggle-button"
+        >
+          <span className={styles.navToggleBar} />
+          <span className={styles.navToggleBar} />
+          <span className={styles.navToggleBar} />
+        </button>
+        <div
+          className={isMenuOpen ? `${styles.navLinks} ${styles.navLinksOpen}` : styles.navLinks}
+          data-testid="nav-links"
+        >
           {NAV_ITEMS.map((item) => (
             <NavLink
               key={item.to}
               to={item.to}
+              onClick={() => setIsMenuOpen(false)}
               className={({ isActive }) => (isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink)}
             >
               {item.label}

src/components/gridInput/GridInputForm.tsx

@@ -107,7 +107,13 @@ const GridInputForm = ({
 
   return (
     <div className={styles.formWrapper}>
-      <div className={styles.form} data-testid="grid-input-form">
+      <div
+        className={styles.form}
+        data-testid="grid-input-form"
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') handleSubmit();
+        }}
+      >
         <fieldset>
           <legend>Numéros (1-50)</legend>
           {numberInputs.map((value, index) => (

src/pages/evaluation/EvaluationPage.test.tsx

@@ -40,6 +40,25 @@ describe('EvaluationPage', () => {
     expect(screen.getByTestId('variations').querySelectorAll('li')).toHaveLength(3);
   });
 
+  it('evaluates the grid when pressing Enter instead of clicking the button', async () => {
+    vi.stubGlobal('fetch', () => Promise.resolve(new Response(REAL_CSV_TEXT)));
+    const user = userEvent.setup();
+
+    renderWithProviders(<EvaluationPage />);
+
+    const numbers = [3, 7, 19, 31, 42];
+    const stars = [2, 9];
+    for (const [index, value] of numbers.entries()) {
+      await user.type(screen.getByTestId(`number-input-${index}`), String(value));
+    }
+    for (const [index, value] of stars.entries()) {
+      await user.type(screen.getByTestId(`star-input-${index}`), String(value));
+    }
+    await user.keyboard('{Enter}');
+
+    await waitFor(() => expect(screen.getAllByTestId('score-card')).toHaveLength(4));
+  });
+
   it('flags a grid that never appeared in the available history', async () => {
     vi.stubGlobal('fetch', () => Promise.resolve(new Response(REAL_CSV_TEXT)));
     const user = userEvent.setup();

src/pages/geometry/GeometryPage.module.scss

@@ -94,6 +94,7 @@
 .referenceBubbles {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: var(--space-2);
 }
 
@@ -139,6 +140,13 @@
   &:not(:last-child) {
     border-bottom: 1px solid var(--border);
   }
+
+  @media (max-width: 720px) {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-2);
+  }
 }
 
 .neighborDate {
@@ -150,13 +158,18 @@
 .neighborBubbles {
   display: flex;
   gap: var(--space-1);
+  flex-wrap: wrap;
 }
 
 .neighborProximity {
   height: 0.5rem;
   border-radius: var(--radius-sm);
   background: var(--border);
   overflow: hidden;
+
+  @media (max-width: 720px) {
+    width: 100%;
+  }
 }
 
 .neighborProximityFill {