Refonte UI : finitions (en-tête mobile, menu thème, libellés FR) et charte graphique

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017ADkrVcVFTT14hbB148HYS

design_guidelines.md

@@ -1,155 +1,43 @@
 # Social Flow - Design Guidelines
 
-## Design Approach
+Interface sobre et lisible, en français, pensée d'abord pour être comprise sans formation.
+Toutes les couleurs passent par les tokens de `client/src/index.css` (modes clair et sombre).
 
-**Selected Framework:** Design System Approach inspired by modern SaaS dashboards (Linear, Buffer, Notion) with Material Design principles for data-rich interfaces.
+## Identité
 
-**Core Philosophy:** Professional productivity tool prioritizing clarity, efficiency, and visual hierarchy in dark mode with sophisticated blue/purple branding.
+- **Logo** : `components/brand/logo.tsx` (`<Logo />`, `<LogoMark />`) — deux ondes qui s'écoulent vers un point, sur un carré arrondi en dégradé indigo → corail. Même dessin dans `client/public/favicon.svg`.
+- **Primaire** : indigo `#4F46E5` (`primary`) — actions, éléments actifs, focus.
+- **Accent** : corail `#F97362` (`brand-accent`) — uniquement dans le dégradé de marque.
+- **Dégradé de marque** (`.gradient-brand`, bouton `variant="brand"`) : réservé au logo et à **une seule** action principale par écran (publier, créer, se connecter).
+- **Statuts** : `success` (publié, actif), `warning` (bientôt expiré), `destructive` (échec, suppression), `info` (en cours).
+- **Plateformes** : `facebook`, `instagram`, `tiktok` — via `components/platform-icon.tsx`.
+- Ne jamais utiliser de couleurs Tailwind brutes (`bg-blue-500`, `#1877F2`…) ni `text-white` sur une surface de l'interface.
 
-## Color Palette
+## Typographie
 
-**Dark Mode (Primary Theme):**
-- Background Base: 222 20% 8%
-- Surface Elevated: 222 18% 12%
-- Surface Card: 222 16% 15%
-- Border Subtle: 222 12% 20%
+- Inter (400–700), JetBrains Mono pour les identifiants et le SQL.
+- Titre de page : `PageHeader` (`text-2xl sm:text-[28px] font-semibold`).
+- Titre de carte : `CardTitle` (`text-base font-semibold`), description en `text-muted-foreground`.
 
-**Brand Colors:**
-- Primary Blue: 215 85% 58%
-- Primary Purple: 265 75% 62%
-- Gradient Accent: Linear gradient from Primary Blue to Primary Purple
+## Mise en page
 
-**Functional Colors:**
-- Success Green: 142 76% 48%
-- Warning Orange: 35 95% 58%
-- Error Red: 0 85% 62%
-- Info Cyan: 195 85% 55%
+- **Shell** : `components/layout/app-shell.tsx` — sidebar groupée sur desktop (≥ lg), en-tête + barre de navigation basse sur mobile (Accueil, Calendrier, **Créer**, Médias, Menu). La navigation est définie une seule fois dans `components/layout/nav-config.ts`.
+- **Contenu** : chaque page commence par `<Page width="narrow|default|wide">` puis `<PageHeader icon title description actions />`.
+  - `narrow` (max-w-3xl) : formulaires simples
+  - `default` (max-w-6xl) : la plupart des pages
+  - `wide` (1400px) : tableau de bord, calendrier, médiathèque
+- Une seule version responsive par écran : pas de pages mobiles séparées.
 
-**Text Hierarchy:**
-- Primary Text: 0 0% 95%
-- Secondary Text: 222 10% 65%
-- Tertiary Text: 222 8% 48%
+## Composants
 
-## Typography
+- **Cartes** : `Card` sans surcharge de style (`rounded-xl border shadow-soft`).
+- **États vides** : `components/empty-state.tsx` avec une action suggérée.
+- **Parcours de création** : `components/stepper.tsx` (`Stepper` + `StepNavigation`), utilisé par Publication et Reel. On explique toujours pourquoi une étape est verrouillée.
+- **Choix exclusifs** : cartes sélectionnables (`RadioGroup` dans un `label` bordé), pas de listes déroulantes quand il y a 2 à 4 options.
+- **Suppressions** : toujours confirmées par `AlertDialog`, jamais `confirm()`.
+- **Badges** : variantes `success`, `warning`, `info`, `danger`, `muted`.
 
-**Font Family:**
-- Primary: 'Inter' from Google Fonts (400, 500, 600, 700)
-- Monospace: 'JetBrains Mono' for timestamps and metrics
+## Rédaction
 
-**Scale:**
-- Headings H1: text-3xl font-semibold
-- Headings H2: text-2xl font-semibold
-- Headings H3: text-xl font-medium
-- Body Large: text-base
-- Body: text-sm
-- Captions: text-xs text-secondary
-
-## Layout System
-
-**Spacing Primitives:** Tailwind units of 2, 4, 6, 8, 12, 16 (e.g., p-4, gap-6, mt-8)
-
-**Grid Structure:**
-- Sidebar: Fixed width 280px (w-70) on desktop, collapsible on mobile
-- Main Content: Flexible with max-w-7xl container
-- Dashboard Grid: grid-cols-1 md:grid-cols-2 lg:grid-cols-3 with gap-6
-
-**Container Widths:**
-- Dashboard sections: max-w-7xl with px-6 to px-8
-- Form containers: max-w-2xl
-- Content cards: Full width within grid columns
-
-## Component Library
-
-### Sidebar Navigation
-- Dark surface (Background Base) with subtle border-right
-- Logo + app name at top (h-16)
-- Navigation items with icons (Heroicons) + labels
-- Active state: Primary gradient background with 12% opacity, blue text
-- Hover: Surface Elevated background
-- Bottom section: User profile card with avatar, name, settings icon
-- Spacing: py-2 between items, px-4 horizontal padding
-
-### Dashboard Cards
-- Background: Surface Card with rounded-xl
-- Border: 1px solid Border Subtle
-- Shadow: Soft shadow (shadow-lg with low opacity)
-- Padding: p-6
-- Header: Flex justify-between with title (text-lg font-semibold) + action button
-- Content spacing: space-y-4 internally
-
-### Post Scheduling Interface
-- Calendar view: Week/month grid with date cells
-- Post cards: Compact cards showing thumbnail + caption preview + platform badges (FB/IG)
-- Drag-and-drop visual indicators
-- Time slots: Hourly breakdown with scheduled posts
-
-### Analytics Cards
-- Metric cards: Large number (text-3xl font-bold) + label + trend indicator
-- Charts: Use Chart.js with gradient fills matching brand colors
-- Grid layout for KPIs: 4 columns on desktop, responsive down
-
-### Forms & Inputs
-- Input fields: Surface Elevated background, border Border Subtle, rounded-lg, px-4 py-3
-- Focus state: Primary Blue border, subtle glow
-- Labels: text-sm font-medium mb-2, Secondary Text color
-- Textarea: min-h-32 for post composition
-- File upload: Dashed border drop zone with center icon and text
-
-### Buttons
-- Primary: Gradient background (blue to purple), text-white, rounded-lg, px-6 py-3, font-medium
-- Secondary: Border Primary Blue, text Primary Blue, transparent background
-- Ghost: Transparent, hover Surface Elevated
-- Icon buttons: w-10 h-10, rounded-lg, center content
-
-### Platform Badges
-- Small pills (px-3 py-1, rounded-full, text-xs font-medium)
-- Facebook: Blue background (215 85% 58% with 15% opacity), blue text
-- Instagram: Purple background (265 75% 62% with 15% opacity), purple text
-
-### Status Indicators
-- Dots with colors: w-2 h-2 rounded-full
-- Scheduled: Primary Blue
-- Published: Success Green
-- Failed: Error Red
-- Draft: Tertiary Text
-
-### Data Tables
-- Header row: Surface Elevated background, font-medium, uppercase text-xs
-- Rows: Border-bottom subtle, hover Surface Card
-- Padding: px-6 py-4
-- Alternating backgrounds for better readability
-
-## Animations
-
-**Minimal & Purposeful:**
-- Page transitions: Fade-in only (150ms)
-- Card hover: Subtle lift (translateY -2px, 200ms)
-- Button interactions: Scale 0.98 on active
-- Navigation: Smooth color transitions (200ms)
-- No distracting scroll animations or complex effects
-
-## Images
-
-**Hero Section:** None - Dashboard-first interface prioritizing immediate utility
-
-**Avatar & Thumbnails:**
-- User avatars: w-10 h-10, rounded-full with border
-- Post thumbnails: aspect-video, rounded-lg, object-cover
-- Platform logos: Use official brand SVGs at 20x20 or 24x24
-
-**Empty States:**
-- Illustration placeholders for "No posts scheduled", "No analytics data"
-- Center aligned with icon, heading, and CTA button
-- Subtle grayscale illustrations maintaining professional tone
-
-## Key Screens Layout
-
-**Dashboard:** 3-column grid with Overview metrics (top row), Recent Posts card, Upcoming Schedule card, Quick Analytics
-
-**Calendrier:** Full-width calendar component, left sidebar filter (platforms, status), right panel for selected post details
-
-**Nouvelle Publication:** Center form (max-w-2xl), left preview panel showing platform-specific mockups, sticky publish/schedule buttons
-
-**Analytiques:** Metric cards grid (4 cols), followed by full-width charts for engagement over time, best posting times heatmap
-
-**Paramètres:** Two-column layout, left navigation tabs, right content panels
+- Verbes d'action clairs : « Importer », « Programmer », « Connecter un compte ».
+- Pas d'anglicismes (« Uploader », « Token ») ni de jargon technique visible par défaut : les détails vont dans un bloc « Besoin d'aide ? » repliable.