Update documentation for GherkinHighlighter redesign

Document the new card-based UI layout and design decisions:
- System font for better readability (not sketchy font)
- Card-based layout with collapsible scenarios
- Background (Contexte) always expanded
- Color-coded step keywords
- Compact responsive design

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

docs/cucumber-integration.md

@@ -316,11 +316,47 @@ Rather than checking for specific CSS selectors or test IDs, the integration use
 
 ## UI Integration
 
-The Specs page (`#/specs`) displays feature files with:
-- Collapsible scenarios (failed ones open by default)
-- Test status indicators (pass/fail/skip)
-- Error messages for failed tests
-- Step definition source code tooltips (click "Définitions" button)
+The Specs page (`#/specs`) displays feature files using the `GherkinHighlighter` component.
+
+### GherkinHighlighter Component
+
+Located at `src/components/specs/GherkinHighlighter.tsx`, this component renders Gherkin content in a card-based UI (not code/text style).
+
+**Key design decisions:**
+- **System font**: Uses system UI font instead of the sketchy handwritten font for better readability of specifications
+- **Card-based layout**: Each scenario/background is a collapsible card with colored left border
+- **No header duplication**: Feature metadata (title, priority, category) is shown in `FeatureView`, not duplicated in `GherkinHighlighter`
+- **Background always visible**: The "Contexte" (Background) block is always expanded since it provides essential context
+- **Compact responsive design**: Reduced padding/gaps for both mobile and desktop
+
+**Visual features:**
+- Toolbar with Expand/Collapse all and "Définitions" toggle
+- Color-coded keywords:
+  - Blue: Given/Étant donné (preconditions)
+  - Amber: When/Quand (actions)
+  - Green: Then/Alors (assertions)
+  - Gray: And/Et (continuation)
+- Test status icons per scenario (CheckCircle2/XCircle/AlertCircle)
+- Error messages displayed inline for failed scenarios
+- Step definition tooltips when "Définitions" mode is enabled
+- Tables rendered as styled HTML tables with alternating row colors
+
+**French/English keyword support:**
+The component detects both French and English Gherkin keywords for parsing steps (Étant donné/Given, Quand/When, Alors/Then, Et/And, Exemples/Examples).
+
+**Props:**
+```typescript
+interface GherkinHighlighterProps {
+  content: string;           // Raw Gherkin file content
+  scenarioResults?: Array<{  // Test results per scenario
+    scenarioName: string;
+    status: 'passed' | 'failed' | 'skipped';
+    errorMessage?: string;
+  }>;
+}
+```
+
+### Data Layer
 
 Data is generated by build-time scripts:
 - `src/data/features.ts` - Parsed feature file content

docs/prototyping-tool.md

@@ -106,15 +106,27 @@ BDD specification viewer with test integration:
 
 Detailed specification page:
 
+**Header (from FeatureView):**
 - Priority and category badges
 - Clickable user story link
+- Test status summary (passed/failed/skipped)
 - Linked screens as buttons
-- Gherkin syntax highlighting with:
-  - Collapsible scenarios
-  - Color-coded keywords
-  - Step definition tooltips
-  - Test status indicators
-  - Error messages for failed scenarios
+
+**Gherkin Display (GherkinHighlighter):**
+- Card-based layout (not code/text style) for better readability
+- System font (not sketchy handwritten font) for clarity
+- Expand/Collapse all toolbar with "Définitions" toggle
+- Background (Contexte) always visible, scenarios collapsible
+- Color-coded step keywords with background highlights:
+  - Blue: Given/Étant donné
+  - Amber: When/Quand
+  - Green: Then/Alors
+  - Gray: And/Et
+- Test status indicators per scenario (pass/fail/skip icons)
+- Error messages displayed for failed scenarios
+- Step definition tooltips (when "Définitions" mode enabled)
+- Tables rendered as styled HTML tables
+- Responsive design with compact padding for mobile
 
 ## Component Library