Responsive Design

<!-- Mobile-first : sans préfixe = mobile -->
<div class="text-sm md:text-base lg:text-lg">
  <!--       ↑ mobile    ↑ tablette    ↑ desktop -->
  Ce texte grandit avec l'écran
</div>

<!-- Grille responsive -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- 1 colonne sur mobile, 2 sur tablette, 3 sur desktop -->
  <div>Carte 1</div>
  <div>Carte 2</div>
  <div>Carte 3</div>
</div>

<!-- Cacher/afficher selon l'écran -->
<nav class="hidden md:flex gap-6">Menu desktop</nav>
<button class="md:hidden">☰ Menu mobile</button>

<!-- Sidebar : en dessous sur mobile, à côté sur desktop -->
<div class="flex flex-col lg:flex-row gap-8">
  <aside class="lg:w-64 lg:shrink-0">Sidebar</aside>
  <main class="flex-1">Contenu</main>
</div>

<!-- Padding responsive -->
<section class="px-4 md:px-8 lg:px-16">
  <!-- Plus d'espace sur les grands écrans -->
</section>

<!-- Taille de titre responsive -->
<h1 class="text-2xl md:text-4xl lg:text-5xl font-bold">
  Ce titre s'adapte
</h1>

<!-- Stack vertical → horizontal -->
<div class="flex flex-col sm:flex-row gap-3">
  <button class="flex-1">Bouton 1</button>
  <button class="flex-1">Bouton 2</button>
</div>

<!-- Container centré avec max-width responsive -->
<div class="container mx-auto px-4">
  <!-- max-width s'adapte automatiquement au breakpoint -->
  Contenu centré
</div>

<!-- Alternative : max-w-* + mx-auto (plus explicite) -->
<div class="max-w-4xl mx-auto px-4">
  <!-- Max 896px de large, centré -->
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  <!-- Pattern classique pour le contenu principal -->
</div>

<!-- Le parent doit être un container -->
<div class="@container">
  <!-- Style basé sur la largeur du PARENT -->
  <div class="flex flex-col @md:flex-row gap-4">
    <img class="@md:w-48" src="photo.jpg" />
    <div>
      <h3 class="text-lg @lg:text-xl">Titre</h3>
      <p class="@md:text-base text-sm">Description...</p>
    </div>
  </div>
</div>

<!-- Utile pour les composants réutilisables :
     même composant dans une sidebar (petit) ou en pleine page (grand) -->

<div class="min-h-screen bg-slate-50">
  <!-- Header responsive -->
  <header class="bg-white border-b px-4 py-3">
    <div class="max-w-6xl mx-auto flex items-center justify-between">
      <h1 class="text-lg md:text-xl font-bold">MonApp</h1>

      <!-- Desktop nav -->
      <nav class="hidden md:flex items-center gap-6">
        <a class="text-slate-600 hover:text-slate-900">Accueil</a>
        <a class="text-slate-600 hover:text-slate-900">Cours</a>
        <button class="bg-sky-500 text-white px-4 py-2 rounded-lg">
          S'inscrire
        </button>
      </nav>

      <!-- Mobile burger -->
      <button class="md:hidden p-2">
        <i class="fa-solid fa-bars text-xl"></i>
      </button>
    </div>
  </header>

  <!-- Grille de cartes responsive -->
  <main class="max-w-6xl mx-auto px-4 py-8 md:py-12">
    <h2 class="text-2xl md:text-3xl font-bold mb-6 md:mb-8">
      Nos cours
    </h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
      <!-- Les cartes passent de 1 → 2 → 3 colonnes -->
    </div>
  </main>
</div>