Responsive

// Correct : mobile-first (base = mobile, sm/md/lg = enrichissements)
<div className="px-4 sm:px-6 lg:px-8">
  <h1 className="text-xl sm:text-2xl lg:text-3xl">
    Titre
  </h1>
</div>

// Incorrect : desktop-first (surcouche mobile)
// Ne PAS faire ceci :
<div className="px-8 max-sm:px-4">  {/* Anti-pattern */}
  <h1 className="text-3xl max-lg:text-xl">  {/* Anti-pattern */}
    Titre
  </h1>
</div>

// 1 colonne → 2 colonnes → 3 colonnes
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
  <Card>Carte 1</Card>
  <Card>Carte 2</Card>
  <Card>Carte 3</Card>
</div>

// Flex column → row
<div className="flex flex-col sm:flex-row gap-4">
  <div className="flex-1">Element 1</div>
  <div className="flex-1">Element 2</div>
</div>

// Stats : 2 colonnes → 4 colonnes
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
  <StatCard label="PB" value="8.42" />
  <StatCard label="Ao5" value="12.67" />
  <StatCard label="Ao12" value="13.45" />
  <StatCard label="Total" value="1,247" />
</div>

// Form layout : pleine largeur → 2 colonnes
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
  <FormField name="firstName" />
  <FormField name="lastName" />
  <FormField name="email" className="md:col-span-2" />
</div>

// Visible uniquement sur mobile
<MobileBottomNav className="md:hidden" />

// Visible uniquement sur desktop
<Sidebar className="hidden md:flex" />

// Texte abrege sur mobile, complet sur desktop
<span className="sm:hidden">PB</span>
<span className="hidden sm:inline">Personal Best</span>

// Header simplifie sur mobile
<header className="flex items-center justify-between">
  <Logo />
  {/* Navigation complete sur desktop */}
  <nav className="hidden md:flex items-center gap-4">
    <NavLink href="/timer">Timer</NavLink>
    <NavLink href="/algos">Algorithmes</NavLink>
    <NavLink href="/learning">Apprentissage</NavLink>
    <NavLink href="/dashboard">Dashboard</NavLink>
  </nav>
  {/* Menu hamburger sur mobile */}
  <Button variant="ghost" size="icon" className="md:hidden">
    <Menu className="h-5 w-5" />
  </Button>
</header>

// Informations secondaires masquees sur mobile
<div className="flex items-center gap-4">
  <span className="font-mono text-lg">{time}</span>
  <span className="hidden sm:inline text-sm text-muted-foreground">
    {scramble}
  </span>
  <span className="hidden lg:inline text-xs text-muted-foreground">
    {date}
  </span>
</div>

// Titres de page
<h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold">
  Titre de la page
</h1>

// Sous-titres
<h2 className="text-lg sm:text-xl lg:text-2xl font-semibold">
  Section
</h2>

// Timer (tres grand sur desktop)
<div className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-mono font-bold">
  12.34
</div>

// Texte de corps
<p className="text-sm sm:text-base">
  Description du contenu
</p>

// Texte muted (labels, hints)
<span className="text-xs sm:text-sm text-muted-foreground">
  Information secondaire
</span>

// Container principal
<main className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-10">
  {children}
</main>

// Cartes
<Card>
  <CardContent className="p-4 sm:p-6">
    {/* Contenu */}
  </CardContent>
</Card>

// Sections de page
<section className="py-8 sm:py-12 lg:py-16">
  {/* Contenu */}
</section>

// Modales
<DialogContent className="p-4 sm:p-6 max-w-[calc(100vw-2rem)] sm:max-w-lg">
  {/* Contenu */}
</DialogContent>

// Hero section
<div className="px-4 py-12 sm:px-6 sm:py-16 lg:px-8 lg:py-24">
  <h1 className="text-3xl sm:text-4xl lg:text-5xl">
    Speedcube Master
  </h1>
</div>

// Container standard
<div className="max-w-6xl mx-auto px-4 sm:px-6">
  {children}
</div>

// Container etroit (formulaires, articles)
<div className="max-w-2xl mx-auto px-4 sm:px-6">
  {children}
</div>

// Container pleine largeur avec padding (landing pages)
<div className="w-full px-4 sm:px-6 lg:px-8">
  {children}
</div>

// Container responsive composant reutilisable
function Container({
  children,
  size = "default",
}: {
  children: React.ReactNode;
  size?: "narrow" | "default" | "wide" | "full";
}) {
  const maxWidths = {
    narrow: "max-w-2xl",
    default: "max-w-6xl",
    wide: "max-w-7xl",
    full: "w-full",
  };

  return (
    <div className={cn(
      maxWidths[size],
      "mx-auto px-4 sm:px-6",
      size === "full" && "lg:px-8"
    )}>
      {children}
    </div>
  );
}

// Pattern : bottom nav mobile ↔ sidebar desktop
export default function AppLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen">
      {/* Header (toujours visible) */}
      <header className="h-16 border-b border-border bg-card/95 backdrop-blur-md">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 h-full flex items-center">
          <Logo />
          {/* Nav desktop dans le header */}
          <nav className="hidden md:flex items-center gap-6 ml-8">
            <NavLink href="/timer">Timer</NavLink>
            <NavLink href="/algos">Algos</NavLink>
          </nav>
        </div>
      </header>

      {/* Layout principal */}
      <div className="flex">
        {/* Sidebar desktop (dashboard uniquement) */}
        <aside className="hidden md:flex w-64 flex-col border-r border-border
          bg-card min-h-[calc(100vh-4rem)]">
          <nav className="p-4 space-y-1">
            <SidebarLink href="/dashboard" icon={Home}>Accueil</SidebarLink>
            <SidebarLink href="/dashboard/stats" icon={BarChart}>Stats</SidebarLink>
          </nav>
        </aside>

        {/* Contenu */}
        <main className="flex-1 pb-20 md:pb-0"> {/* pb-20 pour la bottom nav */}
          {children}
        </main>
      </div>

      {/* Bottom nav mobile */}
      <MobileBottomNav className="md:hidden" />
    </div>
  );
}