Crée un layout responsif complet pour [type de page].

<stack>
Framework: [Next.js App Router / React / autre]
CSS: [Tailwind CSS v4 / v3]
Composants UI: [shadcn/ui / Radix / Base UI / aucun]
</stack>

<layout-requis>
Type de layout: [dashboard avec sidebar / landing page / blog / e-commerce / documentation]

Décris la structure souhaitée:
- Header: [fixe en haut / disparaît au scroll / transparent sur hero]
- Navigation: [sidebar permanente / hamburger mobile / tabs en bas sur mobile]
- Contenu principal: [une colonne / grille de cartes / deux colonnes]
- Footer: [simple / multi-colonnes / sticky]

Breakpoints souhaités:
- Mobile: < 640px (sm)
- Tablette: 640px - 1024px (sm à lg)
- Desktop: > 1024px (lg+)
</layout-requis>

<instructions>
Pour chaque composant du layout:

1. Structure HTML sémantique
   - Utilise les balises appropriées (header, nav, main, aside, footer)
   - Landmarks ARIA pour l'accessibilité
   - Structure logique pour le SEO

2. Design mobile-first
   - Commence par le mobile puis ajoute les breakpoints
   - Navigation hamburger sur mobile avec menu plein écran
   - Sidebar collapser en overlay sur mobile
   - Grilles: 1 colonne mobile → 2 colonnes tablette → 3-4 colonnes desktop

3. Interactions responsives
   - Menu mobile: ouverture/fermeture avec state React
   - Sidebar collapsible: transition smooth, icônes seules en mode compact
   - Scroll: header qui change de style au scroll (si applicable)
   - Touch-friendly: zones cliquables min 44x44px sur mobile

4. Patterns Tailwind
   - Flexbox pour les layouts 1D (header, footer, nav)
   - Grid pour les layouts 2D (contenu principal, cartes)
   - Container avec max-width et padding responsif
   - Spacing cohérent avec l'échelle Tailwind
</instructions>

<contraintes>
- Mobile-first obligatoire (classes de base = mobile, sm: = tablette, lg: = desktop)
- Pas de CSS custom sauf si absolument nécessaire
- Les images/médias sont responsifs (w-full, aspect-ratio)
- Le contenu ne déborde jamais horizontalement (pas de scroll horizontal)
- La navigation est accessible au clavier (focus visible, tab order logique)
- Les transitions sont subtiles (duration-200, ease-in-out)
</contraintes>