# ============================================================================
# [LIVRE] TAILWIND CSS - GUIDE ULTRA-DÉTAILLÉ POUR ÉTUDIANTS EN GÉNIE LOGICIEL
# ============================================================================
#
# [OBJECTIF] GUIDE COMPLET POUR MAÎTRISER TAILWIND CSS DE ZÉRO À EXPERT
#
# Ce guide est organisé en 5 parties progressives :
#
# PARTIE 1 : FONDAMENTAUX
# - Chapitre 0 : Introduction à Tailwind CSS
# - Chapitre 1 : Installation et Configuration
# - Chapitre 2 : Système de Spacing et Sizing
# - Chapitre 3 : Typographie
# - Chapitre 4 : Couleurs
#
# PARTIE 2 : MISE EN PAGE (LAYOUT)
# - Chapitre 5 : Flexbox Complet
# - Chapitre 6 : CSS Grid Complet
# - Chapitre 7 : Positionnement
# - Chapitre 8 : Display et Overflow
#
# PARTIE 3 : COMPOSANTS VISUELS
# - Chapitre 9  : Backgrounds et Borders
# - Chapitre 10 : Ombres, Opacité, Effets
# - Chapitre 11 : Transitions et Animations
# - Chapitre 12 : Formulaires et Interactivité
#
# PARTIE 4 : RESPONSIVE ET DARK MODE
# - Chapitre 13 : Responsive Design (Breakpoints)
# - Chapitre 14 : Dark Mode
# - Chapitre 15 : Pseudo-classes (hover, focus, active...)
# - Chapitre 16 : Customisation (tailwind.config.js)
#
# PARTIE 5 : AVANCÉ ET PRODUCTION
# - Chapitre 17 : Composants Réutilisables (@apply)
# - Chapitre 18 : Tailwind avec React/Vue/HTML
# - Chapitre 19 : Optimisation et Purge CSS
# - Chapitre 20 : Best Practices et Patterns
#
# [TEMPS] TEMPS DE LECTURE TOTAL : ~20-25 heures
# [DOCS] PRÉREQUIS : HTML de base, notions CSS
#
# ============================================================================
# Voir les artifacts générés pour le contenu complet de chaque partie.
# ============================================================================

# ============================================================================
# [LIVRE] TAILWIND CSS - PARTIE 1 : FONDAMENTAUX
# ============================================================================
#
# [OBJECTIF] CETTE PARTIE COUVRE :
# - Chapitre 0 : Introduction à Tailwind CSS
# - Chapitre 1 : Installation et Configuration
# - Chapitre 2 : Système de Spacing et Sizing
# - Chapitre 3 : Typographie
# - Chapitre 4 : Couleurs
#
# [TEMPS] TEMPS : ~5-6 heures
# [DOCS] PRÉREQUIS : HTML de base, notions CSS
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 0 : INTRODUCTION À TAILWIND CSS
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Ce qu'est Tailwind CSS et sa philosophie
[OK] Différence avec Bootstrap et CSS classique
[OK] Avantages et inconvénients
[OK] Quand utiliser Tailwind
[OK] Le concept "utility-first"
"""


# ----------------------------------------------------------------------------
# [REFLEXION] QU'EST-CE QUE TAILWIND CSS ?
# ----------------------------------------------------------------------------

"""
DÉFINITION SIMPLE

Tailwind CSS est un framework CSS "utility-first" qui vous donne
des classes CSS prédéfinies très petites pour styler directement
dans votre HTML sans écrire de CSS personnalisé.


[IDEE] UTILITY-FIRST = CLASSES UTILITAIRES

Au lieu d'écrire :
    .mon-bouton {
      background-color: blue;
      color: white;
      padding: 8px 16px;
      border-radius: 4px;
    }

Vous écrivez directement dans le HTML :
    <button class="bg-blue-500 text-white px-4 py-2 rounded">
      Cliquer ici
    </button>

CHAQUE CLASSE FAIT UNE SEULE CHOSE :
  bg-blue-500  -> background-color: #3b82f6
  text-white   -> color: white
  px-4         -> padding-left: 1rem; padding-right: 1rem
  py-2         -> padding-top: 0.5rem; padding-bottom: 0.5rem
  rounded      -> border-radius: 0.25rem


ANALOGIE [BRICK]

CSS Classique = Construire avec des briques LEGO prédéfinies
  -> Vous avez des pièces toutes faites (bouton, carte, navbar)

Tailwind = Construire avec des briques LEGO atomiques
  -> Vous avez les plus petits éléments (couleur, espace, taille)
  -> Vous assemblez comme vous voulez
"""


# ----------------------------------------------------------------------------
# [RECHERCHE] TAILWIND VS AUTRES APPROCHES
# ----------------------------------------------------------------------------

"""
COMPARAISON COMPLÈTE


┌─────────────────┬──────────────┬──────────────┬──────────────────┐
│                 │   TAILWIND   │  BOOTSTRAP   │   CSS CLASSIQUE  │
├─────────────────┼──────────────┼──────────────┼──────────────────┤
│ Approche        │ Utility-first│ Component    │ Sémantique       │
│ Classes         │ Atomiques    │ Prédéfinies  │ Personnalisées   │
│ Flexibilité     │ Très haute   │ Moyenne      │ Totale           │
│ Courbe          │ Modérée      │ Facile       │ Longue           │
│ Taille finale   │ Très petite  │ Moyenne      │ Variable         │
│ Personnalisation│ Facile       │ Complexe     │ Native           │
│ Responsive      │ Intégré      │ Intégré      │ Manuel           │
│ Dark Mode       │ Intégré      │ Partiel      │ Manuel           │
└─────────────────┴──────────────┴──────────────┴──────────────────┘


CSS CLASSIQUE [X] Problèmes courants

1. CONFLITS DE NOMS
   .button, .btn, .my-button -> Quel nom choisir ?

2. SPÉCIFICITÉ
   .header .nav .link -> Cascade CSS compliquée

3. FICHIERS ÉNORMES
   Votre styles.css finit par faire 3000 lignes

4. DUPLICATION
   Le même style padding:16px répété 50 fois

5. MAINTENANCE
   "À quoi sert cette classe .card-wrapper-v2 ?"

6. MORT AU REFACTORING
   Changer CSS -> Casse autre chose ailleurs


BOOTSTRAP [ATTENTION] Limitations

1. APPARENCE GÉNÉRIQUE
   Tous les sites Bootstrap se ressemblent

2. CLASSES PRÉDÉFINIES
   Difficile de modifier .btn-primary

3. FICHIER CSS LOURD
   Import de tout Bootstrap même si utilisé à 20%

4. DÉPENDANCE FORTE
   Changer Bootstrap version -> Tout casser


TAILWIND CSS [OK] Avantages

1. PAS DE CONFLITS
   Chaque classe fait exactement une chose

2. PAS DE CSS INUTILE
   Tailwind ne génère que les classes utilisées

3. COHÉRENCE DESIGN
   Même palette, même espacement partout

4. RESPONSIVE FACILE
   md:flex lg:grid directement dans HTML

5. MAINTENANCE SIMPLE
   "Voir la classe = Comprendre le style"

6. PERSONNALISABLE
   tailwind.config.js = votre design system


TAILWIND CSS [X] Inconvénients

1. HTML "VERBEUX"
   Beaucoup de classes dans le HTML

2. COURBE D'APPRENTISSAGE
   Mémoriser les classes au début

3. LISIBILITÉ INITIALE
   class="flex items-center justify-between p-4 bg-white shadow-md"

[IDEE] SOLUTION : Avec la pratique (2-3 semaines),
   vous lisez les classes aussi vite que du CSS natif !
"""


# ----------------------------------------------------------------------------
# [OBJECTIF] QUAND UTILISER TAILWIND ?
# ----------------------------------------------------------------------------

"""
[OK] TAILWIND EST IDÉAL POUR :

1. PROJETS REACT / VUE / ANGULAR
   Composants avec styles colocalisés

2. DESIGN SYSTEMS PERSONNALISÉS
   Votre propre système de design

3. DÉVELOPPEURS FULLSTACK
   Pas de designer dédié

4. PROTOTYPAGE RAPIDE
   Interface fonctionnelle en 1 heure

5. PETITES ÉQUIPES
   Tout le monde utilise les mêmes tokens

6. APPLICATIONS MODERNES
   SaaS, dashboards, landing pages

7. APPLIS AVEC DARK MODE
   Intégré nativement

8. MOBILE-FIRST
   Responsive par défaut


[X] TAILWIND MOINS ADAPTÉ POUR :

1. SITES WORDPRESS/CMS SIMPLES
   (utiliser Bootstrap ou CSS direct)

2. ÉQUIPE SANS EXPÉRIENCE TAILWIND
   (courbe d'apprentissage)

3. DESIGN "CLASSIQUE" PRÉDÉFINI
   (Bootstrap suffit)
"""


# ----------------------------------------------------------------------------
# [IDEE] CONCEPT CLÉ : COMMENT TAILWIND FONCTIONNE
# ----------------------------------------------------------------------------

"""
FONCTIONNEMENT INTERNE

1. VOUS ÉCRIVEZ DU HTML avec classes Tailwind
   <div class="flex p-4 bg-blue-500 text-white">

2. TAILWIND SCANNE votre code
   -> Cherche toutes les classes utilisées

3. GÉNÈRE UN CSS MINIMAL
   -> Seulement les classes que vous utilisez
   -> En production : parfois < 10KB de CSS !

4. RÉSULTAT FINAL
   -> HTML avec classes
   -> CSS ultra-léger généré automatiquement


EXEMPLE VISUEL

VOTRE HTML :
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        Bouton
    </button>

CSS GÉNÉRÉ AUTOMATIQUEMENT :
    .bg-blue-500 { background-color: #3b82f6; }
    .hover\:bg-blue-700:hover { background-color: #1d4ed8; }
    .text-white { color: rgb(255 255 255); }
    .font-bold { font-weight: 700; }
    .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .px-4 { padding-left: 1rem; padding-right: 1rem; }
    .rounded { border-radius: 0.25rem; }

[OBJECTIF] PAS DE CSS MANUEL ! Tailwind s'occupe de tout.
"""


# ============================================================================
# [GUIDE] CHAPITRE 1 : INSTALLATION ET CONFIGURATION
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Installer Tailwind avec npm (méthode pro)
[OK] Installer Tailwind via CDN (méthode rapide)
[OK] Configurer tailwind.config.js
[OK] Utiliser les directives @tailwind
[OK] Lancer le serveur de développement
"""


# ----------------------------------------------------------------------------
# [RAPIDE] MÉTHODE 1 : CDN (Pour tester rapidement)
# ----------------------------------------------------------------------------

"""
LA PLUS SIMPLE - En 1 ligne !

QUAND UTILISER ?
[OK] Prototypage rapide
[OK] Démo ou test
[OK] Apprentissage
[OK] Projet HTML simple

COMMENT ?
"""

# index.html
"""
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Site</title>

    <!-- [IDEE] UNE SEULE LIGNE pour utiliser Tailwind ! -->
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <!-- Toutes les classes Tailwind disponibles immédiatement -->
    <h1 class="text-3xl font-bold text-blue-600 text-center mt-8">
        Bonjour Tailwind ! [BRAVO]
    </h1>

    <div class="flex justify-center mt-4">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            Cliquer ici
        </button>
    </div>
</body>
</html>
"""

"""
[ATTENTION] LIMITATIONS CDN

[X] Pas de personnalisation avancée
[X] Toutes les classes chargées (plus lourd)
[X] Pas optimal pour production
[X] Pas d'intégration build tools

[OK] Parfait pour : HTML statique, démo, apprentissage
"""


# ----------------------------------------------------------------------------
# [OUTILS] MÉTHODE 2 : NPM (Méthode Professionnelle)
# ----------------------------------------------------------------------------

"""
ÉTAPE 1 : Prérequis
"""

# Installer Node.js et npm d'abord
# https://nodejs.org/

# Vérifier installation
node --version   # v18.0.0 ou plus
npm --version    # 8.0.0 ou plus

"""
ÉTAPE 2 : Créer un projet
"""

# Créer dossier projet
mkdir mon-projet-tailwind
cd mon-projet-tailwind

# Initialiser npm
npm init -y

"""
ÉTAPE 3 : Installer Tailwind
"""

# Installer Tailwind CSS et ses dépendances
npm install -D tailwindcss postcss autoprefixer

# Générer tailwind.config.js
npx tailwindcss init

"""
[IDEE] QUE FONT CES PACKAGES ?

tailwindcss    -> Le framework lui-même
postcss        -> Processeur CSS (Tailwind l'utilise)
autoprefixer   -> Ajoute préfixes vendeurs (-webkit-, etc.)


ÉTAPE 4 : Configurer tailwind.config.js
"""

# tailwind.config.js (généré automatiquement)
"""
/** @type {import('tailwindcss').Config} */
module.exports = {
  // [IDEE] content = Où Tailwind cherche les classes à inclure
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx}",
    "./*.html"
  ],
  theme: {
    extend: {
      // Vos customisations ici (chapitre 16)
    },
  },
  plugins: [],
}
"""

"""
[IDEE] POURQUOI content ?

Tailwind scanne ces fichiers pour trouver les classes utilisées.
Seules les classes trouvées sont incluses dans le CSS final.

EXEMPLES SELON PROJET :

HTML simple :
content: ["./*.html"]

React :
content: ["./src/**/*.{js,jsx,ts,tsx}"]

Vue :
content: ["./src/**/*.vue", "./src/**/*.js"]

Next.js :
content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"]
"""

"""
ÉTAPE 5 : Créer fichier CSS source
"""

# src/input.css (ou styles/main.css)
"""
/* [IDEE] LES 3 DIRECTIVES TAILWIND */
@tailwind base;       /* Reset CSS + styles de base */
@tailwind components; /* Classes de composants */
@tailwind utilities;  /* Toutes les classes utilitaires */
"""

"""
[IDEE] QUE FONT LES DIRECTIVES ?

@tailwind base;
    -> Applique un "normalize/reset" CSS
    -> Styles par défaut cohérents entre navigateurs
    -> Exemple : margin:0 sur body, box-sizing: border-box

@tailwind components;
    -> Emplacement pour vos @apply (chapitre 17)
    -> Classes de composants personnalisées

@tailwind utilities;
    -> Toutes les classes utilitaires (bg-blue-500, flex, etc.)
    -> LA PARTIE PRINCIPALE
"""

"""
ÉTAPE 6 : Lancer Tailwind
"""

# Compiler en mode watch (développement)
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

"""
[IDEE] EXPLIQUÉ :
  -i ./src/input.css    -> Fichier CSS source (avec les directives)
  -o ./dist/output.css  -> Fichier CSS de sortie (généré)
  --watch               -> Recompile à chaque changement

MODE PRODUCTION (sans watch) :
  npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify
"""

"""
ÉTAPE 7 : Utiliser dans HTML
"""

# index.html
"""
<!DOCTYPE html>
<html>
<head>
    <!-- [OK] Lier le fichier CSS généré -->
    <link href="./dist/output.css" rel="stylesheet">
</head>
<body>
    <h1 class="text-3xl font-bold underline">
        Tailwind CSS fonctionne ! [OK]
    </h1>
</body>
</html>
"""


# ----------------------------------------------------------------------------
# [RAPIDE] MÉTHODE 3 : AVEC VITE (Ultra-rapide, recommandée)
# ----------------------------------------------------------------------------

"""
Vite = Outil de build ultra-rapide pour projets modernes
"""

# Créer projet Vite
npm create vite@latest mon-projet -- --template vanilla
cd mon-projet
npm install

# Installer Tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p   # -p génère aussi postcss.config.js

# Modifier tailwind.config.js
"""
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
"""

# Créer/modifier src/style.css
"""
@tailwind base;
@tailwind components;
@tailwind utilities;
"""

# Démarrer
npm run dev
# -> http://localhost:5173 avec hot-reload !

"""
AVEC REACT (Create React App) :
"""

npx create-react-app mon-app
cd mon-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Dans src/index.css, remplacer tout par :
"""
@tailwind base;
@tailwind components;
@tailwind utilities;
"""

npm start


# ----------------------------------------------------------------------------
# [CONFIG] TAILWIND.CONFIG.JS EN DÉTAIL
# ----------------------------------------------------------------------------

"""
FICHIER DE CONFIGURATION COMPLET
"""

# tailwind.config.js
"""
/** @type {import('tailwindcss').Config} */
module.exports = {

  // ─── CONTENT ───────────────────────────────────────────────────────────
  // Fichiers à scanner pour les classes Tailwind
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx,vue}",
    "./public/index.html",
  ],

  // ─── DARK MODE ─────────────────────────────────────────────────────────
  // 'media'  -> Suit préférence système (prefers-color-scheme)
  // 'class'  -> Activé manuellement avec classe .dark sur <html>
  darkMode: 'class',

  // ─── THEME ─────────────────────────────────────────────────────────────
  theme: {
    // extend = Ajouter SANS remplacer les valeurs par défaut
    extend: {
      colors: {
        brand: '#0ea5e9',   // Nouvelle couleur
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
      spacing: {
        '18': '4.5rem',    // Ajouter p-18, m-18...
      },
      borderRadius: {
        '4xl': '2rem',
      },
    },
  },

  // ─── PLUGINS ───────────────────────────────────────────────────────────
  plugins: [
    require('@tailwindcss/forms'),        // Styles formulaires
    require('@tailwindcss/typography'),   // Prose/articles
    require('@tailwindcss/aspect-ratio'), // Ratios d'aspect
  ],
}
"""


# ============================================================================
# [GUIDE] CHAPITRE 2 : SYSTÈME DE SPACING ET SIZING
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Comprendre l'échelle de spacing Tailwind
[OK] Utiliser padding, margin, gap
[OK] Contrôler largeur et hauteur
[OK] Utiliser les valeurs arbitraires
[OK] Min/Max width et height
"""


# ----------------------------------------------------------------------------
# [MESURE] L'ÉCHELLE DE SPACING TAILWIND
# ----------------------------------------------------------------------------

"""
CONCEPT FONDAMENTAL

Tailwind utilise une ÉCHELLE NUMÉRIQUE pour les espacements.
Chaque nombre correspond à une taille en rem (relative à la police).

FORMULE : Valeur en rem = Nombre / 4
Exemple  : 4 -> 4/4 = 1rem = 16px

TABLEAU COMPLET :
┌────────┬─────────┬──────────┐
│ Classe │  rem    │   px     │
├────────┼─────────┼──────────┤
│ 0      │ 0       │ 0px      │
│ px     │ 1px     │ 1px      │
│ 0.5    │ 0.125rem│ 2px      │
│ 1      │ 0.25rem │ 4px      │
│ 1.5    │ 0.375rem│ 6px      │
│ 2      │ 0.5rem  │ 8px      │
│ 2.5    │ 0.625rem│ 10px     │
│ 3      │ 0.75rem │ 12px     │
│ 3.5    │ 0.875rem│ 14px     │
│ 4      │ 1rem    │ 16px     │
│ 5      │ 1.25rem │ 20px     │
│ 6      │ 1.5rem  │ 24px     │
│ 7      │ 1.75rem │ 28px     │
│ 8      │ 2rem    │ 32px     │
│ 9      │ 2.25rem │ 36px     │
│ 10     │ 2.5rem  │ 40px     │
│ 11     │ 2.75rem │ 44px     │
│ 12     │ 3rem    │ 48px     │
│ 14     │ 3.5rem  │ 56px     │
│ 16     │ 4rem    │ 64px     │
│ 20     │ 5rem    │ 80px     │
│ 24     │ 6rem    │ 96px     │
│ 28     │ 7rem    │ 112px    │
│ 32     │ 8rem    │ 128px    │
│ 36     │ 9rem    │ 144px    │
│ 40     │ 10rem   │ 160px    │
│ 44     │ 11rem   │ 176px    │
│ 48     │ 12rem   │ 192px    │
│ 52     │ 13rem   │ 208px    │
│ 56     │ 14rem   │ 224px    │
│ 60     │ 15rem   │ 240px    │
│ 64     │ 16rem   │ 256px    │
│ 72     │ 18rem   │ 288px    │
│ 80     │ 20rem   │ 320px    │
│ 96     │ 24rem   │ 384px    │
└────────┴─────────┴──────────┘

[IDEE] ASTUCE MÉMORISATION
  4 -> 1rem -> 16px (base)
  8 -> 2rem -> 32px
  16 -> 4rem -> 64px
"""


# ----------------------------------------------------------------------------
# [BLACK_SQUARE_BUTTON] PADDING
# ----------------------------------------------------------------------------

"""
PADDING = Espace INTÉRIEUR d'un élément

CONVENTIONS :
  p-{n}    -> padding sur les 4 côtés
  px-{n}   -> padding horizontal (gauche + droite)
  py-{n}   -> padding vertical (haut + bas)
  pt-{n}   -> padding top
  pr-{n}   -> padding right
  pb-{n}   -> padding bottom
  pl-{n}   -> padding left
  ps-{n}   -> padding inline-start (LTR=left, RTL=right)
  pe-{n}   -> padding inline-end (LTR=right, RTL=left)
"""

# Exemples concrets
"""
<!-- Padding sur tous les côtés -->
<div class="p-4">   <!-- padding: 1rem (16px) -->
<div class="p-8">   <!-- padding: 2rem (32px) -->
<div class="p-0">   <!-- padding: 0 -->

<!-- Padding horizontal et vertical séparés -->
<div class="px-6 py-3">  <!-- px: 1.5rem, py: 0.75rem -->

<!-- Bouton typique -->
<button class="px-4 py-2">Bouton</button>
<!-- padding-left: 1rem, padding-right: 1rem -->
<!-- padding-top: 0.5rem, padding-bottom: 0.5rem -->

<!-- Card avec beaucoup d'espace -->
<div class="p-8">  <!-- padding: 2rem partout -->

<!-- Section avec grand padding vertical -->
<section class="py-16 px-4">
  <!-- Beaucoup d'espace vertical, peu horizontal -->
</section>

<!-- VALEUR ARBITRAIRE (n'importe quel px) -->
<div class="p-[13px]">   <!-- padding: 13px EXACTEMENT -->
<div class="px-[5%]">    <!-- padding horizontal: 5% -->
"""

"""
[IDEE] VALEURS ARBITRAIRES

Si aucune valeur prédéfinie ne convient :
  p-[13px]    -> Exactement 13px
  px-[5%]     -> 5% en horizontal
  py-[0.375rem] -> 0.375rem en vertical

SYNTAXE : nom-classe-[valeur]
Ça marche pour TOUTES les classes Tailwind !
"""


# ----------------------------------------------------------------------------
# [PACKAGE] MARGIN
# ----------------------------------------------------------------------------

"""
MARGIN = Espace EXTÉRIEUR d'un élément (entre éléments)

CONVENTIONS :
  m-{n}     -> margin sur les 4 côtés
  mx-{n}    -> margin horizontal
  my-{n}    -> margin vertical
  mt-{n}    -> margin top
  mr-{n}    -> margin right
  mb-{n}    -> margin bottom
  ml-{n}    -> margin left
  ms-{n}    -> margin inline-start
  me-{n}    -> margin inline-end

VALEUR SPÉCIALE :
  m-auto    -> margin auto (centrer horizontalement)
  mx-auto   -> centrer horizontalement <- TRÈS UTILISÉ
"""

# Exemples concrets
"""
<!-- Centrer un élément horizontalement -->
<div class="mx-auto max-w-4xl">
  Contenu centré avec largeur max
</div>

<!-- Espacement entre éléments -->
<div class="mb-4">Premier bloc</div>
<div class="mb-4">Deuxième bloc</div>

<!-- Margin top pour espacer du header -->
<main class="mt-16">
  Contenu avec espace au-dessus
</main>

<!-- Margin négatif (oui, ça existe !) -->
<div class="-mt-4">  <!-- margin-top: -1rem -->
  Remonter un élément

<!-- Auto margin pour centrer -->
<img class="mx-auto" src="logo.png">
"""

"""
SPACE-X ET SPACE-Y (Espacement entre enfants)

[IDEE] TRÈS UTILE : Ajouter espace entre éléments sans
   toucher au premier ou au dernier
"""

"""
<!-- Sans space-x : doit gérer marge manuellement -->
<div class="flex">
  <div class="mr-4">Item 1</div>
  <div class="mr-4">Item 2</div>
  <div>Item 3</div>  <!-- <- Sans marge car dernier -->
</div>

<!-- Avec space-x : automatique et propre ! -->
<div class="flex space-x-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <!-- Tailwind ajoute margin-left sur tous sauf le 1er -->
</div>

<!-- Vertical -->
<div class="flex flex-col space-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
"""


# ----------------------------------------------------------------------------
# [MESURE] WIDTH (LARGEUR)
# ----------------------------------------------------------------------------

"""
CLASSES DE LARGEUR

LARGEUR FIXE (basée sur l'échelle de spacing) :
  w-0       -> width: 0
  w-px      -> width: 1px
  w-1       -> width: 0.25rem (4px)
  w-4       -> width: 1rem (16px)
  w-8       -> width: 2rem (32px)
  w-16      -> width: 4rem (64px)
  w-32      -> width: 8rem (128px)
  w-64      -> width: 16rem (256px)
  w-96      -> width: 24rem (384px)

LARGEUR FRACTIONNELLE :
  w-1/2     -> width: 50%
  w-1/3     -> width: 33.333%
  w-2/3     -> width: 66.666%
  w-1/4     -> width: 25%
  w-3/4     -> width: 75%
  w-1/5     -> width: 20%
  w-2/5     -> width: 40%
  w-3/5     -> width: 60%
  w-4/5     -> width: 80%
  w-1/6     -> width: 16.666%
  w-5/6     -> width: 83.333%

LARGEUR SPÉCIALE :
  w-full    -> width: 100%  <- Très utilisé
  w-screen  -> width: 100vw (toute la fenêtre)
  w-min     -> width: min-content
  w-max     -> width: max-content
  w-fit     -> width: fit-content
  w-auto    -> width: auto
"""

# Exemples concrets
"""
<!-- Pleine largeur du parent -->
<input class="w-full" type="text">

<!-- Moitié de la largeur -->
<div class="w-1/2">Moitié</div>

<!-- Largeur fixe -->
<img class="w-32 h-32" src="avatar.png">  <!-- 128x128px -->

<!-- Largeur responsive -->
<div class="w-full md:w-1/2 lg:w-1/3">
  100% sur mobile, 50% sur tablette, 33% sur desktop
</div>

<!-- Largeur arbitraire -->
<div class="w-[350px]">Exactement 350px</div>
<div class="w-[90%]">Exactement 90%</div>
"""

"""
MAX-WIDTH (Largeur maximale)

[IDEE] max-w = Largeur maximale = TRÈS IMPORTANT pour la lisibilité

  max-w-xs     -> max-width: 20rem (320px)
  max-w-sm     -> max-width: 24rem (384px)
  max-w-md     -> max-width: 28rem (448px)
  max-w-lg     -> max-width: 32rem (512px)
  max-w-xl     -> max-width: 36rem (576px)
  max-w-2xl    -> max-width: 42rem (672px)
  max-w-3xl    -> max-width: 48rem (768px)
  max-w-4xl    -> max-width: 56rem (896px)
  max-w-5xl    -> max-width: 64rem (1024px)
  max-w-6xl    -> max-width: 72rem (1152px)
  max-w-7xl    -> max-width: 80rem (1280px)
  max-w-full   -> max-width: 100%
  max-w-screen-sm  -> max-width: 640px
  max-w-screen-md  -> max-width: 768px
  max-w-screen-lg  -> max-width: 1024px
  max-w-screen-xl  -> max-width: 1280px
  max-w-screen-2xl -> max-width: 1536px
  max-w-none   -> max-width: none
  max-w-prose  -> max-width: 65ch (65 caractères, idéal pour lecture)
"""

"""
<!-- Container centré avec largeur max = PATTERN TRÈS COURANT -->
<div class="max-w-7xl mx-auto px-4">
  Contenu centré, max 1280px de large
</div>

<!-- Article lisible -->
<article class="max-w-prose mx-auto">
  Texte à 65 caractères max pour lisibilité optimale
</article>

<!-- Modal -->
<div class="max-w-md mx-auto p-6 bg-white rounded-xl">
  Contenu modal, max 448px
</div>
"""


# ----------------------------------------------------------------------------
# [MESURE] HEIGHT (HAUTEUR)
# ----------------------------------------------------------------------------

"""
CLASSES DE HAUTEUR

HAUTEUR FIXE :
  h-0       -> height: 0
  h-px      -> height: 1px
  h-1 à h-96 -> même échelle que width

HAUTEUR SPÉCIALE :
  h-auto    -> height: auto
  h-full    -> height: 100% (du parent)
  h-screen  -> height: 100vh (toute la fenêtre)
  h-svh     -> height: 100svh (Small Viewport Height)
  h-lvh     -> height: 100lvh (Large Viewport Height)
  h-dvh     -> height: 100dvh (Dynamic Viewport Height)
  h-min     -> height: min-content
  h-max     -> height: max-content
  h-fit     -> height: fit-content

MIN/MAX HEIGHT :
  min-h-0      -> min-height: 0
  min-h-full   -> min-height: 100%
  min-h-screen -> min-height: 100vh
  max-h-full   -> max-height: 100%
  max-h-screen -> max-height: 100vh
  max-h-{n}    -> max-height: valeur fixe
"""

# Exemples concrets
"""
<!-- Page pleine hauteur -->
<div class="min-h-screen bg-gray-100">
  Contenu qui occupe au moins toute la fenêtre
</div>

<!-- Section hero pleine hauteur -->
<section class="h-screen flex items-center justify-center">
  <h1>Bienvenue</h1>
</section>

<!-- Sidebar avec hauteur définie -->
<aside class="h-full overflow-y-auto">
  Sidebar scrollable
</aside>

<!-- Avatar carré -->
<img class="w-12 h-12 rounded-full" src="avatar.jpg">

<!-- Divider horizontal -->
<hr class="h-px bg-gray-200 border-0">
"""


# ----------------------------------------------------------------------------
# [COURS] EXERCICE PRATIQUE 1 : CARD COMPONENT
# ----------------------------------------------------------------------------

"""
OBJECTIF : Créer une carte de profil avec spacing correct

RÉSULTAT ATTENDU :
┌────────────────────────────────────────┐
│                                        │
│   [Photo]  Alice Martin                │
│            Développeuse Full Stack     │
│            alice@example.com           │
│                                        │
│   [Bouton: Voir le profil]             │
│                                        │
└────────────────────────────────────────┘

SOLUTION :
"""

"""
<div class="max-w-sm mx-auto bg-white rounded-xl shadow-md p-6">

  <!-- Photo + Info côte à côte -->
  <div class="flex items-center space-x-4">

    <!-- Photo de profil -->
    <img
      class="w-16 h-16 rounded-full"
      src="avatar.jpg"
      alt="Avatar"
    >

    <!-- Informations texte -->
    <div>
      <h2 class="text-xl font-bold text-gray-900">Alice Martin</h2>
      <p class="text-gray-600">Développeuse Full Stack</p>
      <p class="text-sm text-gray-400">alice@example.com</p>
    </div>
  </div>

  <!-- Bouton en bas -->
  <div class="mt-6">
    <button class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg">
      Voir le profil
    </button>
  </div>

</div>
"""

"""
CLASSES ANALYSÉES :
  max-w-sm      -> Largeur max 384px
  mx-auto       -> Centré horizontalement
  p-6           -> Padding intérieur 1.5rem
  flex          -> Flexbox (horizontal par défaut)
  items-center  -> Centré verticalement
  space-x-4     -> Espace de 1rem entre les enfants
  w-16 h-16     -> 64x64px
  rounded-full  -> Cercle parfait
  mt-6          -> Margin top 1.5rem
  w-full        -> Bouton pleine largeur
  py-2 px-4     -> Padding bouton standard
  rounded-lg    -> Coins arrondis moyens
"""


# ============================================================================
# [GUIDE] CHAPITRE 3 : TYPOGRAPHIE
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Contrôler taille de police
[OK] Poids et style de police
[OK] Alignement et espacement
[OK] Couleur de texte
[OK] Decoration et transformation
"""


# ----------------------------------------------------------------------------
# [NOTE] TAILLE DE TEXTE (font-size)
# ----------------------------------------------------------------------------

"""
CLASSES DE TAILLE

  text-xs      -> font-size: 0.75rem   (12px)
  text-sm      -> font-size: 0.875rem  (14px)
  text-base    -> font-size: 1rem      (16px) <- Défaut
  text-lg      -> font-size: 1.125rem  (18px)
  text-xl      -> font-size: 1.25rem   (20px)
  text-2xl     -> font-size: 1.5rem    (24px)
  text-3xl     -> font-size: 1.875rem  (30px)
  text-4xl     -> font-size: 2.25rem   (36px)
  text-5xl     -> font-size: 3rem      (48px)
  text-6xl     -> font-size: 3.75rem   (60px)
  text-7xl     -> font-size: 4.5rem    (72px)
  text-8xl     -> font-size: 6rem      (96px)
  text-9xl     -> font-size: 8rem      (128px)
"""

# Exemples concrets
"""
<p class="text-xs">Très petit (12px) - annotations, footnotes</p>
<p class="text-sm">Petit (14px) - texte secondaire</p>
<p class="text-base">Normal (16px) - corps de texte</p>
<p class="text-lg">Grand (18px) - lead paragraph</p>
<h4 class="text-xl">Titre niveau 4 (20px)</h4>
<h3 class="text-2xl">Titre niveau 3 (24px)</h3>
<h2 class="text-3xl">Titre niveau 2 (30px)</h2>
<h1 class="text-4xl">Titre niveau 1 (36px)</h1>
<h1 class="text-5xl">Grand titre (48px)</h1>
<h1 class="text-6xl">Hero title (60px)</h1>

<!-- Taille responsive -->
<h1 class="text-3xl md:text-5xl lg:text-7xl">
  Titre qui grandit avec l'écran
</h1>

<!-- Taille arbitraire -->
<p class="text-[17px]">Exactement 17px</p>
"""


# ----------------------------------------------------------------------------
# [EDIT] POIDS DE POLICE (font-weight)
# ----------------------------------------------------------------------------

"""
CLASSES DE POIDS

  font-thin       -> font-weight: 100
  font-extralight -> font-weight: 200
  font-light      -> font-weight: 300
  font-normal     -> font-weight: 400  <- Défaut
  font-medium     -> font-weight: 500
  font-semibold   -> font-weight: 600
  font-bold       -> font-weight: 700  <- Très courant
  font-extrabold  -> font-weight: 800
  font-black      -> font-weight: 900
"""

"""
<p class="font-thin">Fin (100)</p>
<p class="font-light">Léger (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Médium (500)</p>
<p class="font-semibold">Semi-gras (600)</p>
<p class="font-bold">Gras (700)</p>
<p class="font-extrabold">Extra gras (800)</p>
<p class="font-black">Noir (900)</p>

<!-- Combinaison courante -->
<h1 class="text-4xl font-bold">Titre impactant</h1>
<p class="text-sm font-medium text-gray-500">Sous-titre discret</p>
"""


# ----------------------------------------------------------------------------
# [TEXTE] STYLE ET FAMILLE DE POLICE
# ----------------------------------------------------------------------------

"""
STYLE DE POLICE

  italic     -> font-style: italic
  not-italic -> font-style: normal

FAMILLE DE POLICE

  font-sans   -> font-family: ui-sans-serif, system-ui, sans-serif
  font-serif  -> font-family: ui-serif, Georgia, serif
  font:mono   -> font-family: ui-monospace, Courier New, monospace
"""

"""
<em class="italic">Texte en italique</em>
<p class="font-sans">Interface (sans-serif)</p>
<blockquote class="font-serif">Citation (serif)</blockquote>
<code class="font-mono">Code source</code>

<!-- Police personnalisée dans tailwind.config.js -->
<!-- theme: { extend: { fontFamily: { heading: ['Playfair Display', 'serif'] } } } -->
<h1 class="font-heading">Titre avec police personnalisée</h1>
"""


# ----------------------------------------------------------------------------
# [MESURE] LINE HEIGHT (Hauteur de ligne) ET LETTER SPACING
# ----------------------------------------------------------------------------

"""
LINE HEIGHT (interligne)

  leading-none    -> line-height: 1
  leading-tight   -> line-height: 1.25
  leading-snug    -> line-height: 1.375
  leading-normal  -> line-height: 1.5  <- Défaut
  leading-relaxed -> line-height: 1.625
  leading-loose   -> line-height: 2
  leading-3 à leading-10 -> valeurs fixes

LETTER SPACING (espacement des lettres)

  tracking-tighter -> letter-spacing: -0.05em
  tracking-tight   -> letter-spacing: -0.025em
  tracking-normal  -> letter-spacing: 0         <- Défaut
  tracking-wide    -> letter-spacing: 0.025em
  tracking-wider   -> letter-spacing: 0.05em
  tracking-widest  -> letter-spacing: 0.1em
"""

"""
<!-- Titre serré et grand -->
<h1 class="text-6xl font-black leading-none tracking-tighter">
  IMPACT
</h1>

<!-- Texte de lecture confortable -->
<p class="text-base leading-relaxed">
  Paragraphe facile à lire avec bon interligne
</p>

<!-- Label uppercase -->
<span class="text-xs font-semibold tracking-widest uppercase text-gray-500">
  Catégorie
</span>
"""


# ----------------------------------------------------------------------------
# [SYMBOLE] ALIGNEMENT ET TRANSFORMATION DE TEXTE
# ----------------------------------------------------------------------------

"""
ALIGNEMENT

  text-left    -> text-align: left     <- Défaut
  text-center  -> text-align: center
  text-right   -> text-align: right
  text-justify -> text-align: justify

TRANSFORMATION

  uppercase    -> text-transform: uppercase
  lowercase    -> text-transform: lowercase
  capitalize   -> text-transform: capitalize
  normal-case  -> text-transform: none

DECORATION

  underline       -> text-decoration: underline
  overline        -> text-decoration: overline
  line-through    -> text-decoration: line-through
  no-underline    -> text-decoration: none

TRUNCATE (Couper le texte)

  truncate         -> text-overflow: ellipsis sur une ligne
  text-ellipsis    -> text-overflow: ellipsis
  text-clip        -> text-overflow: clip
  line-clamp-{n}   -> Limiter à n lignes (avec @tailwindcss/line-clamp)
"""

"""
<h1 class="text-center text-4xl font-bold">Titre centré</h1>
<p class="text-right text-sm">Aligné à droite</p>
<p class="text-justify">Texte justifié dans son conteneur</p>

<span class="uppercase tracking-widest text-xs">TITRE DE SECTION</span>
<span class="capitalize">alice martin -> Alice Martin</span>
<del class="line-through text-gray-400">Prix barré</del>
<a class="underline hover:no-underline">Lien soulignéapos;</a>

<!-- Couper texte long sur une ligne -->
<p class="truncate w-48">
  Ce texte très long sera coupé avec ...
</p>

<!-- Limiter à 2 lignes -->
<p class="line-clamp-2 text-gray-600">
  Ce paragraphe sera limité à 2 lignes maximum,
  le reste sera coupé avec des points de suspension.
  Même s'il est très long.
</p>
"""


# ----------------------------------------------------------------------------
# [DESIGN] COULEUR DE TEXTE
# ----------------------------------------------------------------------------

"""
CONVENTION : text-{couleur}-{nuance}

Nuances : 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
  50  = Très clair
  500 = Moyen (souvent le plus saturé)
  900 = Très foncé

COULEURS DISPONIBLES :
  slate, gray, zinc, neutral, stone -> Gris neutres
  red, orange, amber, yellow        -> Chauds
  lime, green, emerald, teal        -> Verts
  cyan, sky, blue, indigo, violet   -> Bleus/violets
  purple, fuchsia, pink, rose       -> Roses/violets
  white, black                      -> Spéciaux
"""

"""
<!-- Texte principal -->
<p class="text-gray-900">Texte très foncé (quasi-noir)</p>
<p class="text-gray-700">Texte foncé (corps)</p>
<p class="text-gray-500">Texte gris moyen (secondaire)</p>
<p class="text-gray-400">Texte clair (placeholder)</p>
<p class="text-gray-300">Texte très clair</p>

<!-- Couleurs de marque -->
<p class="text-blue-600">Texte bleu (liens)</p>
<p class="text-green-600">Texte vert (succès)</p>
<p class="text-red-600">Texte rouge (erreur)</p>
<p class="text-yellow-500">Texte jaune (alerte)</p>

<!-- Cas d'usage courants -->
<h1 class="text-gray-900 font-bold">Titre principal</h1>
<h2 class="text-gray-700">Sous-titre</h2>
<p class="text-gray-600">Corps du texte</p>
<span class="text-gray-400 text-sm">Métadonnée</span>

<!-- Lien avec hover -->
<a href="#" class="text-blue-600 hover:text-blue-800">
  Lien avec survol
</a>

<!-- Opacité du texte -->
<p class="text-black/50">Noir à 50% d'opacité</p>
<p class="text-blue-600/75">Bleu à 75% d'opacité</p>
"""


# ============================================================================
# [GUIDE] CHAPITRE 4 : COULEURS
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Utiliser la palette de couleurs Tailwind
[OK] Background, text, border en couleur
[OK] Opacité des couleurs
[OK] Gradients
[OK] Ajouter des couleurs personnalisées
"""


# ----------------------------------------------------------------------------
# [DESIGN] LA PALETTE TAILWIND
# ----------------------------------------------------------------------------

"""
PALETTE COMPLÈTE (les 22 couleurs)

NEUTRES :
  slate     -> Gris légèrement bleuté
  gray      -> Gris pur
  zinc      -> Gris légèrement froid
  neutral   -> Gris très pur
  stone     -> Gris légèrement chaud

COULEURS :
  red       -> Rouge
  orange    -> Orange
  amber     -> Ambre/doré
  yellow    -> Jaune
  lime      -> Vert citron
  green     -> Vert
  emerald   -> Vert émeraude
  teal      -> Bleu-vert
  cyan      -> Cyan
  sky       -> Bleu ciel
  blue      -> Bleu
  indigo    -> Indigo
  violet    -> Violet
  purple    -> Pourpre
  fuchsia   -> Fuchsia
  pink      -> Rose
  rose      -> Rose rougeâtre

NUANCES (pour chaque couleur) :
  50   -> Très très clair (fond de page)
  100  -> Très clair
  200  -> Clair
  300  -> Moyen-clair
  400  -> Moyen
  500  -> Référence (couleur "pure")
  600  -> Moyen-foncé
  700  -> Foncé
  800  -> Très foncé
  900  -> Très très foncé
  950  -> Presque noir (Tailwind v3.3+)
"""

"""
EXEMPLES D'UTILISATION :
  text-blue-500      -> Texte bleu moyen
  bg-green-100       -> Fond vert très clair (badge vert)
  border-red-300     -> Bordure rouge claire
  ring-yellow-400    -> Ring/outline jaune moyen
  shadow-gray-200    -> Ombre grise légère
"""


# ----------------------------------------------------------------------------
# [LOWER_LEFT_CRAYON] BACKGROUND COLOR
# ----------------------------------------------------------------------------

"""
CLASSES BACKGROUND :

  bg-{couleur}-{nuance}

  bg-white         -> Blanc
  bg-black         -> Noir
  bg-transparent   -> Transparent
  bg-current       -> Couleur courante
  bg-inherit       -> Héritée du parent
"""

"""
<!-- Fonds de page typiques -->
<body class="bg-white">Fond blanc (clair)</body>
<body class="bg-gray-50">Fond très légèrement gris (apps)</body>
<body class="bg-gray-900">Fond très sombre (dark mode)</body>

<!-- Éléments colorés -->
<div class="bg-blue-500 text-white p-4">Bloc bleu</div>
<div class="bg-green-100 text-green-800 p-4">Badge vert clair</div>
<div class="bg-red-50 text-red-700 border border-red-200 p-4">Alerte rouge</div>

<!-- Hover : changer couleur fond -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
  Bouton interactif
</button>

<!-- Opacité du fond -->
<div class="bg-black/20">Fond noir à 20% (overlay)</div>
<div class="bg-blue-500/50">Fond bleu à 50%</div>
"""


# ----------------------------------------------------------------------------
# [RAINBOW] GRADIENTS
# ----------------------------------------------------------------------------

"""
CLASSES DE GRADIENT

DIRECTION :
  bg-gradient-to-t  -> vers le haut (top)
  bg-gradient-to-tr -> vers le coin haut-droit
  bg-gradient-to-r  -> vers la droite (right)
  bg-gradient-to-br -> vers le coin bas-droit (très courant)
  bg-gradient-to-b  -> vers le bas (bottom)
  bg-gradient-to-bl -> vers le coin bas-gauche
  bg-gradient-to-l  -> vers la gauche (left)
  bg-gradient-to-tl -> vers le coin haut-gauche

COULEURS DE DÉGRADÉ :
  from-{couleur}   -> Couleur de départ
  via-{couleur}    -> Couleur intermédiaire (optionnel)
  to-{couleur}     -> Couleur de fin
"""

"""
<!-- Gradient simple gauche-droite -->
<div class="bg-gradient-to-r from-blue-500 to-purple-500 text-white p-8">
  Gradient bleu vers violet
</div>

<!-- Gradient diagonal avec via -->
<div class="bg-gradient-to-br from-pink-500 via-red-500 to-yellow-500 text-white p-8">
  Sunset gradient
</div>

<!-- Bouton gradient moderne -->
<button class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-semibold px-6 py-3 rounded-lg shadow-lg">
  Bouton premium
</button>

<!-- Hero section avec gradient sombre -->
<section class="bg-gradient-to-b from-gray-900 to-gray-800 text-white min-h-screen">
  Hero sombre
</section>

<!-- Gradient avec transparence -->
<div class="bg-gradient-to-t from-black/60 to-transparent absolute inset-0">
  Overlay sur image
</div>
"""


# ----------------------------------------------------------------------------
# [IDEE] PERSONNALISER LES COULEURS
# ----------------------------------------------------------------------------

"""
DANS tailwind.config.js
"""

# tailwind.config.js
"""
module.exports = {
  theme: {
    extend: {
      colors: {
        // Couleur simple
        brand: '#0ea5e9',

        // Couleur avec nuances
        primary: {
          50:  '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#3b82f6',   // <- Référence
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e40af',
          900: '#1e3a8a',
        },

        // Utiliser couleurs CSS personnalisées
        surface: 'rgb(var(--color-surface) / <alpha-value>)',
      },
    },
  },
}
"""

"""
UTILISATION :
  text-brand       -> color: #0ea5e9
  bg-primary-500   -> background-color: #3b82f6
  border-primary-200 -> border-color: #bfdbfe
"""


# ----------------------------------------------------------------------------
# [DOCS] RÉCAPITULATIF PARTIE 1
# ----------------------------------------------------------------------------

"""
[OK] CE QUE VOUS AVEZ APPRIS

Chapitre 0 : Introduction
[OK] Philosophie utility-first
[OK] Comparaison Bootstrap vs CSS vs Tailwind
[OK] Quand utiliser Tailwind

Chapitre 1 : Installation
[OK] CDN (rapide, prototype)
[OK] NPM + tailwindcss CLI (professionnel)
[OK] Vite + Tailwind (moderne)
[OK] tailwind.config.js
[OK] Directives @tailwind

Chapitre 2 : Spacing et Sizing
[OK] Échelle de spacing (0->96)
[OK] Padding (p-, px-, py-, pt-, pr-, pb-, pl-)
[OK] Margin (m-, mx-, my-, mt-, mr-, mb-, ml-)
[OK] space-x et space-y
[OK] Width (w-, max-w-)
[OK] Height (h-, min-h-, max-h-)
[OK] Valeurs arbitraires (w-[350px])

Chapitre 3 : Typographie
[OK] Taille de texte (text-xs -> text-9xl)
[OK] Poids (font-thin -> font-black)
[OK] Style et famille (italic, font-sans/serif/mono)
[OK] Line height (leading-)
[OK] Letter spacing (tracking-)
[OK] Alignement (text-left/center/right)
[OK] Transformation (uppercase/capitalize)
[OK] Decoration (underline/line-through)
[OK] Couleur de texte (text-{color}-{shade})

Chapitre 4 : Couleurs
[OK] Palette complète (22 couleurs × 11 nuances)
[OK] Background (bg-)
[OK] Opacité (/50, /75, /100)
[OK] Gradients (from-, via-, to-)
[OK] Couleurs personnalisées

[OBJECTIF] PROCHAINE ÉTAPE : PARTIE 2 - Mise en Page (Flexbox, Grid)
"""

# ============================================================================
# [LIVRE] TAILWIND CSS - PARTIE 2 : MISE EN PAGE (LAYOUT)
# ============================================================================
#
# [OBJECTIF] CETTE PARTIE COUVRE :
# - Chapitre 5 : Flexbox Complet
# - Chapitre 6 : CSS Grid Complet
# - Chapitre 7 : Positionnement
# - Chapitre 8 : Display et Overflow
#
# [TEMPS] TEMPS : ~5-6 heures
# [DOCS] PRÉREQUIS : Partie 1 complétée
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 5 : FLEXBOX COMPLET
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Activer Flexbox
[OK] Direction et wrap
[OK] justify-content (alignement axe principal)
[OK] align-items (alignement axe croisé)
[OK] Contrôler les enfants flex (flex-grow, shrink, basis)
[OK] Order des éléments
"""


# ----------------------------------------------------------------------------
# [MELANGE] BASES FLEXBOX
# ----------------------------------------------------------------------------

"""
ACTIVER FLEXBOX

  flex          -> display: flex (horizontal par défaut)
  inline-flex   -> display: inline-flex

DIRECTION

  flex-row      -> Horizontal gauche->droite <- Défaut
  flex-row-reverse    -> Horizontal droite->gauche
  flex-col      -> Vertical haut->bas
  flex-col-reverse    -> Vertical bas->haut

WRAP (retour à la ligne)

  flex-nowrap   -> Pas de retour à la ligne <- Défaut
  flex-wrap     -> Retour à la ligne si débordement
  flex-wrap-reverse   -> Retour à la ligne inversé
"""

# Exemples
"""
<!-- ─── LIGNE HORIZONTALE DE BOUTONS ─── -->
<div class="flex space-x-2">
  <button class="px-4 py-2 bg-blue-500 text-white rounded">Bouton 1</button>
  <button class="px-4 py-2 bg-gray-200 rounded">Bouton 2</button>
  <button class="px-4 py-2 bg-gray-200 rounded">Bouton 3</button>
</div>

<!-- ─── COLONNE VERTICALE ─── -->
<div class="flex flex-col space-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- ─── ITEMS QUI PEUVENT REVENIR À LA LIGNE ─── -->
<div class="flex flex-wrap gap-4">
  <div class="bg-blue-100 p-4 rounded">Tag 1</div>
  <div class="bg-blue-100 p-4 rounded">Tag 2</div>
  <div class="bg-blue-100 p-4 rounded">Tag 3</div>
  <div class="bg-blue-100 p-4 rounded">Tag 4</div>
  <div class="bg-blue-100 p-4 rounded">Tag 5</div>
</div>
"""


# ----------------------------------------------------------------------------
# <-> JUSTIFY-CONTENT (Axe principal)
# ----------------------------------------------------------------------------

"""
justify-{valeur} = Distribution sur l'axe PRINCIPAL
(horizontal si flex-row, vertical si flex-col)

  justify-start    -> Début                <- Défaut
  justify-center   -> Centre               <- Très utilisé
  justify-end      -> Fin
  justify-between  -> Espaces ENTRE        <- Très utilisé
  justify-around   -> Espaces AUTOUR
  justify-evenly   -> Espaces ÉGAUX

VISUALISATION (flex-row) :

justify-start :   [A] [B] [C]            <--> vide
justify-center :  <--> [A] [B] [C] <-->
justify-end :     vide <--> [A] [B] [C]
justify-between : [A]    [B]    [C]
justify-around :   [A]  [B]  [C]
justify-evenly :  [A] [B] [C]  <- espace égal partout
"""

"""
<!-- NAVIGATION ENTRE LEFT ET RIGHT -->
<nav class="flex justify-between items-center px-6 py-4 bg-white shadow">
  <a href="/" class="text-xl font-bold">Logo</a>
  <div class="flex space-x-4">
    <a href="#">Accueil</a>
    <a href="#">À propos</a>
    <a href="#">Contact</a>
  </div>
</nav>

<!-- CENTRER UN ÉLÉMENT -->
<div class="flex justify-center">
  <div class="bg-blue-500 text-white p-4">Centré</div>
</div>

<!-- FOOTER AVEC ÉLÉMENTS RÉPARTIS -->
<footer class="flex justify-between p-6 bg-gray-900 text-white">
  <span>© 2024</span>
  <span>Mention légale</span>
  <span>Contact</span>
</footer>
"""


# ----------------------------------------------------------------------------
# ^v ALIGN-ITEMS (Axe croisé)
# ----------------------------------------------------------------------------

"""
items-{valeur} = Alignement sur l'axe CROISÉ
(vertical si flex-row, horizontal si flex-col)

  items-start    -> Haut (ou gauche)
  items-center   -> Milieu           <- Très utilisé
  items-end      -> Bas (ou droite)
  items-stretch  -> Étirer           <- Défaut
  items-baseline -> Ligne de base du texte
"""

"""
<!-- ─── PATTERN LE PLUS COURANT ─── -->
<!-- flex + items-center = centrer verticalement -->
<div class="flex items-center h-16 bg-gray-100">
  <span class="text-lg">Je suis centré verticalement</span>
</div>

<!-- ─── CENTRAGE PARFAIT (h+v) ─── -->
<div class="flex items-center justify-center h-screen bg-gray-900">
  <div class="bg-white p-8 rounded-xl shadow-2xl">
    Contenu parfaitement centré
  </div>
</div>

<!-- ─── ICON + TEXTE ALIGNÉS ─── -->
<div class="flex items-center space-x-2">
  <svg class="w-5 h-5 text-green-500" .../>
  <span>Texte aligné avec l'icône</span>
</div>

<!-- ─── ITEMS ALIGNÉS EN BAS ─── -->
<div class="flex items-end space-x-2 h-24">
  <span class="text-xs">Petit</span>
  <span class="text-2xl">Grand</span>
  <span class="text-base">Moyen</span>
  <!-- Tous alignés sur la même ligne du bas -->
</div>
"""


# ----------------------------------------------------------------------------
# [OBJECTIF] SELF ALIGNMENT (Contrôle individuel)
# ----------------------------------------------------------------------------

"""
self-{valeur} = Aligner UN enfant individuellement

  self-auto     -> Auto (hérite d'items-)
  self-start    -> Haut
  self-center   -> Milieu
  self-end      -> Bas
  self-stretch  -> Étirer
"""

"""
<div class="flex h-32 items-start">
  <div class="self-auto">Auto (start)</div>
  <div class="self-center">Centre</div>
  <div class="self-end">En bas</div>
  <div class="self-stretch bg-blue-100">Étiré</div>
</div>
"""


# ----------------------------------------------------------------------------
# [PACKAGE] FLEX CHILDREN (Contrôle des enfants)
# ----------------------------------------------------------------------------

"""
FLEX-GROW (s'étendre pour occuper l'espace disponible)

  flex-1        -> flex: 1 1 0%       <- Très utilisé
  flex-auto     -> flex: 1 1 auto
  flex-initial  -> flex: 0 1 auto    <- Défaut
  flex-none     -> flex: none

  grow          -> flex-grow: 1
  grow-0        -> flex-grow: 0

FLEX-SHRINK (rétrécir si pas assez de place)

  shrink        -> flex-shrink: 1    <- Défaut
  shrink-0      -> flex-shrink: 0

FLEX-BASIS (taille de base)

  basis-{n}     -> flex-basis: {valeur} (même échelle spacing)
  basis-full    -> flex-basis: 100%
  basis-auto    -> flex-basis: auto
"""

"""
<!-- ─── LAYOUT SIDEBAR + CONTENT ─── -->
<div class="flex h-screen">
  <!-- Sidebar: largeur fixe, ne rétrécit pas -->
  <aside class="w-64 shrink-0 bg-gray-900 text-white">
    Sidebar 256px
  </aside>

  <!-- Contenu: prend tout l'espace restant -->
  <main class="flex-1 overflow-y-auto p-6">
    Contenu flexible
  </main>
</div>

<!-- ─── 3 COLONNES ÉGALES ─── -->
<div class="flex">
  <div class="flex-1 p-4">Colonne 1</div>
  <div class="flex-1 p-4">Colonne 2</div>
  <div class="flex-1 p-4">Colonne 3</div>
</div>

<!-- ─── BARRE DE RECHERCHE ─── -->
<div class="flex items-center">
  <!-- Input prend tout l'espace disponible -->
  <input class="flex-1 border rounded-l px-4 py-2" placeholder="Rechercher...">
  <!-- Bouton taille fixe -->
  <button class="shrink-0 bg-blue-500 text-white px-4 py-2 rounded-r">
    Chercher
  </button>
</div>
"""


# ----------------------------------------------------------------------------
# [GRAPHIQUE] GAP (Espace entre éléments)
# ----------------------------------------------------------------------------

"""
GAP = Espace entre éléments flex/grid
(Remplace space-x/space-y dans certains cas)

  gap-{n}   -> gap sur les 2 axes
  gap-x-{n} -> gap horizontal
  gap-y-{n} -> gap vertical

AVANTAGE vs space-x/space-y :
  [OK] Fonctionne avec flex-wrap (retour à la ligne)
  [OK] Plus propre conceptuellement
  [OK] Fonctionne aussi avec Grid
"""

"""
<!-- ─── TAGS AVEC RETOUR À LA LIGNE ─── -->
<div class="flex flex-wrap gap-2">
  <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">React</span>
  <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">Vue</span>
  <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Angular</span>
  <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">Svelte</span>
</div>

<!-- ─── BOUTONS D'ACTION ─── -->
<div class="flex gap-3 justify-end mt-4">
  <button class="px-4 py-2 border rounded">Annuler</button>
  <button class="px-4 py-2 bg-blue-500 text-white rounded">Valider</button>
</div>
"""


# ----------------------------------------------------------------------------
# [COURS] EXERCICE PRATIQUE 2 : NAVBAR RESPONSIVE
# ----------------------------------------------------------------------------

"""
OBJECTIF : Créer une navigation professionnelle

SOLUTION :
"""

"""
<nav class="bg-white shadow-sm">
  <div class="max-w-7xl mx-auto px-4">
    <div class="flex items-center justify-between h-16">

      <!-- LOGO (gauche) -->
      <div class="flex items-center space-x-2">
        <div class="w-8 h-8 bg-blue-600 rounded-lg"></div>
        <span class="text-xl font-bold text-gray-900">MyApp</span>
      </div>

      <!-- LIENS NAVIGATION (centre) -->
      <div class="hidden md:flex items-center space-x-6">
        <a href="#" class="text-gray-600 hover:text-gray-900 font-medium">Accueil</a>
        <a href="#" class="text-gray-600 hover:text-gray-900 font-medium">Produit</a>
        <a href="#" class="text-gray-600 hover:text-gray-900 font-medium">Tarifs</a>
        <a href="#" class="text-gray-600 hover:text-gray-900 font-medium">À propos</a>
      </div>

      <!-- ACTIONS (droite) -->
      <div class="flex items-center space-x-3">
        <a href="#" class="text-gray-600 hover:text-gray-900 font-medium hidden md:block">
          Connexion
        </a>
        <a href="#" class="bg-blue-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-700">
          Commencer
        </a>
      </div>

    </div>
  </div>
</nav>
"""


# ============================================================================
# [GUIDE] CHAPITRE 6 : CSS GRID COMPLET
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Créer une grille
[OK] Définir colonnes et lignes
[OK] Contrôler l'espacement
[OK] Faire s'étendre des éléments
[OK] Placer précisément des éléments
[OK] Template areas
"""


# ----------------------------------------------------------------------------
# [BLACK_SQUARE_BUTTON] BASES CSS GRID
# ----------------------------------------------------------------------------

"""
ACTIVER GRID

  grid         -> display: grid
  inline-grid  -> display: inline-grid

COLONNES

  grid-cols-{n} -> Nombre de colonnes égales (1 à 12)
  grid-cols-none -> Pas de colonnes définies

  grid-cols-1   -> 1 colonne
  grid-cols-2   -> 2 colonnes égales
  grid-cols-3   -> 3 colonnes égales
  grid-cols-4   -> 4 colonnes égales
  grid-cols-6   -> 6 colonnes égales
  grid-cols-12  -> 12 colonnes égales

LIGNES

  grid-rows-{n} -> Nombre de lignes
  grid-rows-1 à grid-rows-6
"""

"""
<!-- ─── GRILLE 3 COLONNES SIMPLES ─── -->
<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-100 p-4">1</div>
  <div class="bg-blue-100 p-4">2</div>
  <div class="bg-blue-100 p-4">3</div>
  <div class="bg-blue-100 p-4">4</div>  <!-- 2e ligne auto -->
  <div class="bg-blue-100 p-4">5</div>
  <div class="bg-blue-100 p-4">6</div>
</div>

<!-- ─── GRILLE RESPONSIVE : 1 -> 2 -> 3 COLONNES ─── -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white rounded-xl shadow p-6">Card 1</div>
  <div class="bg-white rounded-xl shadow p-6">Card 2</div>
  <div class="bg-white rounded-xl shadow p-6">Card 3</div>
  <div class="bg-white rounded-xl shadow p-6">Card 4</div>
  <div class="bg-white rounded-xl shadow p-6">Card 5</div>
  <div class="bg-white rounded-xl shadow p-6">Card 6</div>
</div>
"""


# ----------------------------------------------------------------------------
# [MESURE] COL-SPAN ET ROW-SPAN (Fusionner cellules)
# ----------------------------------------------------------------------------

"""
COL-SPAN (occuper plusieurs colonnes)

  col-span-1   -> Occupe 1 colonne <- Défaut
  col-span-2   -> Occupe 2 colonnes
  col-span-3   -> Occupe 3 colonnes
  col-span-4   -> Occupe 4 colonnes
  col-span-6   -> Occupe 6 colonnes (moitié d'un grid-12)
  col-span-full -> Occupe TOUTES les colonnes <- Très utile

ROW-SPAN (occuper plusieurs lignes)

  row-span-1   -> Occupe 1 ligne <- Défaut
  row-span-2   -> Occupe 2 lignes
  row-span-3   -> Occupe 3 lignes
  row-span-full -> Occupe toutes les lignes
"""

"""
<!-- ─── LAYOUT MAGAZINE ─── -->
<div class="grid grid-cols-3 gap-4">

  <!-- Article principal : occupe 2 colonnes -->
  <div class="col-span-2 bg-blue-500 text-white p-6 rounded-xl">
    <h2 class="text-2xl font-bold">Article Principal</h2>
    <p>Contenu plus large...</p>
  </div>

  <!-- Sidebar : 1 colonne, 2 lignes de hauteur -->
  <div class="row-span-2 bg-gray-100 p-4 rounded-xl">
    <h3 class="font-bold mb-4">À la une</h3>
    <ul class="space-y-2">
      <li>Article 1</li>
      <li>Article 2</li>
      <li>Article 3</li>
    </ul>
  </div>

  <!-- 2 petits articles sur la 2e ligne -->
  <div class="bg-green-100 p-4 rounded-xl">Article secondaire 1</div>
  <div class="bg-yellow-100 p-4 rounded-xl">Article secondaire 2</div>

</div>

<!-- ─── BANNER PLEINE LARGEUR ─── -->
<div class="grid grid-cols-4 gap-4">
  <!-- Banner qui prend toute la largeur -->
  <div class="col-span-full bg-gradient-to-r from-blue-600 to-purple-600 text-white p-8 rounded-xl">
    <h1 class="text-3xl font-bold">Promotion du mois</h1>
  </div>

  <!-- 4 produits dessous -->
  <div class="bg-white shadow rounded-xl p-4">Produit 1</div>
  <div class="bg-white shadow rounded-xl p-4">Produit 2</div>
  <div class="bg-white shadow rounded-xl p-4">Produit 3</div>
  <div class="bg-white shadow rounded-xl p-4">Produit 4</div>
</div>
"""


# ----------------------------------------------------------------------------
# [OBJECTIF] PLACER PRÉCISÉMENT LES ÉLÉMENTS
# ----------------------------------------------------------------------------

"""
COL-START / COL-END (Position exacte sur les colonnes)

  col-start-{n}  -> Commencer à la ligne de colonne n
  col-end-{n}    -> Finir à la ligne de colonne n
  col-auto       -> Placement automatique

ROW-START / ROW-END (Position exacte sur les lignes)

  row-start-{n}  -> Commencer à la ligne de ligne n
  row-end-{n}    -> Finir à la ligne de ligne n
"""

"""
<!-- Grille 4 colonnes, placement précis -->
<div class="grid grid-cols-4 grid-rows-3 gap-4 h-64">

  <!-- En-tête : colonnes 1 à 5 (toute la largeur) -->
  <div class="col-start-1 col-end-5 bg-blue-500 text-white p-4 rounded">Header</div>

  <!-- Contenu principal : colonnes 1 à 4, ligne 2 -->
  <div class="col-start-1 col-end-4 row-start-2 bg-white shadow p-4 rounded">Main Content</div>

  <!-- Sidebar : colonne 4, lignes 2 à 4 -->
  <div class="col-start-4 row-start-2 row-end-4 bg-gray-100 p-4 rounded">Sidebar</div>

  <!-- Pied de page : toute la largeur, ligne 3 -->
  <div class="col-start-1 col-end-4 row-start-3 bg-gray-800 text-white p-4 rounded">Footer</div>

</div>
"""


# ----------------------------------------------------------------------------
# [OUTIL] COLONNES AVEC TAILLES PERSONNALISÉES
# ----------------------------------------------------------------------------

"""
GRID-TEMPLATE-COLUMNS PERSONNALISÉ

Avec valeurs arbitraires :

  grid-cols-[repeat(2,1fr)]    -> 2 colonnes flexibles
  grid-cols-[200px_1fr_2fr]    -> 200px fixe + flex proportionnel
  grid-cols-[auto_1fr_auto]    -> auto + flexible + auto

AUTO-FILL ET AUTO-FIT (Grid responsive automatique)

  grid-cols-[repeat(auto-fill,minmax(200px,1fr))]
  -> Autant de colonnes que possible, min 200px
"""

"""
<!-- ─── GRILLE AUTO-RESPONSIVE PARFAITE ─── -->
<!-- S'adapte automatiquement sans media queries ! -->
<div class="grid gap-6" style="grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))">
  <div class="bg-white rounded-xl shadow p-6">Card 1</div>
  <div class="bg-white rounded-xl shadow p-6">Card 2</div>
  <div class="bg-white rounded-xl shadow p-6">Card 3</div>
  <div class="bg-white rounded-xl shadow p-6">Card 4</div>
</div>
<!-- Sur large écran: 4 colonnes -> 3 -> 2 -> 1 sur mobile -->

<!-- Alternative avec classe arbitraire Tailwind -->
<div class="grid gap-6 grid-cols-[repeat(auto-fill,minmax(280px,1fr))]">
  ...
</div>
"""


# ----------------------------------------------------------------------------
# [COURS] EXERCICE PRATIQUE 3 : DASHBOARD LAYOUT
# ----------------------------------------------------------------------------

"""
OBJECTIF : Layout de tableau de bord complet

SOLUTION :
"""

"""
<div class="min-h-screen bg-gray-100">

  <!-- ─── HEADER ─── -->
  <header class="bg-white shadow-sm">
    <div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
      <h1 class="text-xl font-bold text-gray-900">Dashboard</h1>
      <div class="flex items-center space-x-3">
        <button class="p-2 text-gray-500 hover:text-gray-700">[NOTIF]</button>
        <img class="w-8 h-8 rounded-full" src="avatar.jpg" alt="Profile">
      </div>
    </div>
  </header>

  <!-- ─── BODY : SIDEBAR + CONTENU ─── -->
  <div class="flex">

    <!-- SIDEBAR -->
    <aside class="w-64 bg-white shadow-sm min-h-screen p-4">
      <nav class="space-y-1">
        <a href="#" class="flex items-center space-x-3 px-3 py-2 rounded-lg bg-blue-50 text-blue-700 font-medium">
          <span>[GRAPHIQUE]</span><span>Vue d'ensemble</span>
        </a>
        <a href="#" class="flex items-center space-x-3 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50">
          <span>[UTILISATEURS]</span><span>Utilisateurs</span>
        </a>
        <a href="#" class="flex items-center space-x-3 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50">
          <span>[PACKAGE]</span><span>Produits</span>
        </a>
        <a href="#" class="flex items-center space-x-3 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50">
          <span>[CONFIG]</span><span>Paramètres</span>
        </a>
      </nav>
    </aside>

    <!-- CONTENU PRINCIPAL -->
    <main class="flex-1 p-6">

      <!-- Stats Grid -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">

        <div class="bg-white rounded-xl shadow-sm p-6">
          <p class="text-sm text-gray-500 font-medium">Revenus</p>
          <p class="text-2xl font-bold text-gray-900 mt-1">€24,500</p>
          <p class="text-sm text-green-600 mt-1">^ 12% ce mois</p>
        </div>

        <div class="bg-white rounded-xl shadow-sm p-6">
          <p class="text-sm text-gray-500 font-medium">Commandes</p>
          <p class="text-2xl font-bold text-gray-900 mt-1">1,847</p>
          <p class="text-sm text-green-600 mt-1">^ 8% ce mois</p>
        </div>

        <div class="bg-white rounded-xl shadow-sm p-6">
          <p class="text-sm text-gray-500 font-medium">Clients</p>
          <p class="text-2xl font-bold text-gray-900 mt-1">9,235</p>
          <p class="text-sm text-blue-600 mt-1">+124 nouveaux</p>
        </div>

        <div class="bg-white rounded-xl shadow-sm p-6">
          <p class="text-sm text-gray-500 font-medium">Taux conversion</p>
          <p class="text-2xl font-bold text-gray-900 mt-1">3.24%</p>
          <p class="text-sm text-red-600 mt-1">v 0.4% ce mois</p>
        </div>

      </div>

      <!-- Tableau recent + aside -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

        <!-- Tableau des transactions (2/3) -->
        <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-6">
          <h2 class="text-lg font-semibold text-gray-900 mb-4">Transactions récentes</h2>
          <!-- tableau ici -->
        </div>

        <!-- Top produits (1/3) -->
        <div class="bg-white rounded-xl shadow-sm p-6">
          <h2 class="text-lg font-semibold text-gray-900 mb-4">Top Produits</h2>
          <!-- liste ici -->
        </div>

      </div>

    </main>
  </div>
</div>
"""


# ============================================================================
# [GUIDE] CHAPITRE 7 : POSITIONNEMENT
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Position static, relative, absolute, fixed, sticky
[OK] Propriétés top, right, bottom, left
[OK] Z-index
[OK] Techniques d'overlay et superposition
"""


# ----------------------------------------------------------------------------
# [IMPORTANT] TYPES DE POSITIONNEMENT
# ----------------------------------------------------------------------------

"""
CLASSES DE POSITION

  static    -> position: static     <- Défaut (flux normal)
  relative  -> position: relative   <- Point de référence
  absolute  -> position: absolute   <- Relatif à l'ancêtre "relative"
  fixed     -> position: fixed      <- Relatif à la fenêtre
  sticky    -> position: sticky     <- Entre relative et fixed

POSITION INSET (top, right, bottom, left)

  inset-{n}   -> top + right + bottom + left = valeur
  inset-x-{n} -> left + right
  inset-y-{n} -> top + bottom
  top-{n}     -> top: valeur
  right-{n}   -> right: valeur
  bottom-{n}  -> bottom: valeur
  left-{n}    -> left: valeur

  VALEURS SPÉCIALES :
  inset-0      -> Tous les 4 côtés = 0 (couvre entièrement le parent)
  inset-auto   -> auto
  top-full     -> top: 100% (juste en dessous)
  top-1/2      -> top: 50%
  -top-4       -> top: -1rem (négatif)

Z-INDEX

  z-0     -> z-index: 0
  z-10    -> z-index: 10
  z-20    -> z-index: 20
  z-30    -> z-index: 30
  z-40    -> z-index: 40
  z-50    -> z-index: 50
  z-auto  -> z-index: auto
"""


# ----------------------------------------------------------------------------
# [FRAME_WITH_PICTURE] EXEMPLES DE POSITIONNEMENT
# ----------------------------------------------------------------------------

"""
ABSOLUTE : OVERLAY SUR IMAGE
"""

"""
<!-- ─── IMAGE AVEC BADGE ─── -->
<div class="relative w-48">
  <img class="w-full rounded-xl" src="product.jpg" alt="Produit">

  <!-- Badge positionné en absolu sur l'image -->
  <span class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">
    -20%
  </span>
</div>

<!-- ─── CARD AVEC GRADIENT OVERLAY ─── -->
<div class="relative overflow-hidden rounded-xl h-64">
  <img class="w-full h-full object-cover" src="background.jpg">

  <!-- Gradient sombre sur l'image -->
  <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>

  <!-- Texte par-dessus -->
  <div class="absolute bottom-4 left-4 text-white">
    <h3 class="text-xl font-bold">Titre de la carte</h3>
    <p class="text-sm text-gray-300">Sous-titre</p>
  </div>
</div>
"""

"""
FIXED : ÉLÉMENTS COLLÉS À LA FENÊTRE
"""

"""
<!-- ─── HEADER FIXED (SCROLL) ─── -->
<header class="fixed top-0 left-0 right-0 bg-white shadow-md z-50">
  <nav class="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
    <span class="font-bold text-xl">Logo</span>
    <!-- liens... -->
  </nav>
</header>

<!-- Compensate pour le header fixed -->
<main class="mt-16">
  <!-- Contenu -->
</main>

<!-- ─── BOUTON FAB (Floating Action Button) ─── -->
<button class="fixed bottom-8 right-8 w-14 h-14 bg-blue-600 text-white rounded-full shadow-lg flex items-center justify-center hover:bg-blue-700 z-50">
  <span class="text-2xl">+</span>
</button>

<!-- ─── TOAST / NOTIFICATION ─── -->
<div class="fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50">
  [OK] Sauvegardé avec succès !
</div>
"""

"""
STICKY : ÉLÉMENTS COLLANTS
"""

"""
<!-- ─── TABLE OF CONTENTS STICKY ─── -->
<div class="flex gap-8">

  <!-- Contenu principal -->
  <article class="flex-1 prose">
    <h2 id="intro">Introduction</h2>
    <p>...</p>
    <h2 id="setup">Installation</h2>
    <p>...</p>
  </article>

  <!-- TOC qui reste visible en scrollant -->
  <aside class="w-64">
    <div class="sticky top-8">
      <h3 class="font-bold mb-2">Sommaire</h3>
      <ul class="space-y-1 text-sm">
        <li><a href="#intro" class="text-blue-600">Introduction</a></li>
        <li><a href="#setup" class="text-blue-600">Installation</a></li>
      </ul>
    </div>
  </aside>

</div>

<!-- ─── THEAD STICKY DANS TABLEAU ─── -->
<div class="overflow-auto max-h-64">
  <table class="w-full">
    <thead class="sticky top-0 bg-white shadow-sm">
      <tr>
        <th class="px-4 py-2 text-left">Nom</th>
        <th class="px-4 py-2 text-left">Email</th>
      </tr>
    </thead>
    <tbody>
      <!-- lignes... -->
    </tbody>
  </table>
</div>
"""


# ----------------------------------------------------------------------------
# [SCENARIO] TRANSFORM (Transformations CSS)
# ----------------------------------------------------------------------------

"""
TRANSLATE (Déplacer)

  translate-x-{n}  -> translateX
  translate-y-{n}  -> translateY
  -translate-x-{n} -> valeur négative
  -translate-y-{n} -> valeur négative

  translate-x-1/2  -> 50%
  translate-x-full -> 100%

CENTRAGE CLASSIQUE AVEC TRANSLATE :

  absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
  -> Centre parfaitement dans son parent !

SCALE (Mettre à l'échelle)

  scale-0    -> scale: 0
  scale-50   -> scale: 0.5
  scale-75   -> scale: 0.75
  scale-90   -> scale: 0.9
  scale-95   -> scale: 0.95
  scale-100  -> scale: 1 (défaut)
  scale-105  -> scale: 1.05
  scale-110  -> scale: 1.1
  scale-125  -> scale: 1.25
  scale-150  -> scale: 1.5

ROTATE (Rotation)

  rotate-0   -> 0deg
  rotate-1   -> 1deg
  rotate-2   -> 2deg
  rotate-3   -> 3deg
  rotate-6   -> 6deg
  rotate-12  -> 12deg
  rotate-45  -> 45deg
  rotate-90  -> 90deg
  rotate-180 -> 180deg
  -rotate-45 -> -45deg (anti-horaire)

SKEW (Déformation)

  skew-x-{n} -> skewX
  skew-y-{n} -> skewY
"""

"""
<!-- ─── CENTRAGE PARFAIT AVEC TRANSFORM ─── -->
<div class="relative h-64 bg-gray-100">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
              bg-white p-6 rounded-xl shadow-lg">
    Centré parfaitement !
  </div>
</div>

<!-- ─── EFFET HOVER SCALE ─── -->
<div class="transform hover:scale-105 transition-transform duration-200 cursor-pointer">
  <img src="card.jpg" class="rounded-xl">
</div>

<!-- ─── ICÔNE ROTATIVE ─── -->
<button class="flex items-center space-x-2">
  <span>Afficher plus</span>
  <svg class="w-4 h-4 transform rotate-90">...</svg>
</button>
"""


# ============================================================================
# [GUIDE] CHAPITRE 8 : DISPLAY ET OVERFLOW
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Toutes les valeurs de display
[OK] Visibilité des éléments
[OK] Contrôler l'overflow
[OK] Object-fit pour images
[OK] Aspect ratio
"""


# ----------------------------------------------------------------------------
# [TELEVISION] DISPLAY
# ----------------------------------------------------------------------------

"""
CLASSES DISPLAY

  block         -> display: block
  inline-block  -> display: inline-block
  inline        -> display: inline
  flex          -> display: flex (chapitre 5)
  inline-flex   -> display: inline-flex
  grid          -> display: grid (chapitre 6)
  inline-grid   -> display: inline-grid
  hidden        -> display: none <- Masquer élément
  table         -> display: table
  table-row     -> display: table-row
  table-cell    -> display: table-cell
  list-item     -> display: list-item
  flow-root     -> display: flow-root

VISIBILITÉ (sans retrait du flux)

  visible     -> visibility: visible
  invisible   -> visibility: hidden (occupe l'espace mais invisible)

OPACITY

  opacity-0    -> opacity: 0   (transparent)
  opacity-5    -> opacity: 0.05
  opacity-10   -> opacity: 0.1
  opacity-20   -> opacity: 0.2
  opacity-25   -> opacity: 0.25
  opacity-30   -> opacity: 0.3
  opacity-40   -> opacity: 0.4
  opacity-50   -> opacity: 0.5 (semi-transparent)
  opacity-60   -> opacity: 0.6
  opacity-70   -> opacity: 0.7
  opacity-75   -> opacity: 0.75
  opacity-80   -> opacity: 0.8
  opacity-90   -> opacity: 0.9
  opacity-95   -> opacity: 0.95
  opacity-100  -> opacity: 1   (opaque)
"""

"""
<!-- ─── HIDDEN / SHOW RESPONSIVE ─── -->
<!-- Caché sur mobile, visible sur desktop -->
<div class="hidden md:block">
  Visible seulement sur tablette et desktop
</div>

<!-- Visible sur mobile, caché sur desktop -->
<div class="block md:hidden">
  Visible seulement sur mobile
</div>

<!-- ─── ÉLÉMENT DÉSACTIVÉ (VISUELLEMENT) ─── -->
<button class="opacity-50 cursor-not-allowed" disabled>
  Bouton désactivé
</button>

<!-- ─── OVERLAY SEMI-TRANSPARENT ─── -->
<div class="fixed inset-0 bg-black opacity-50 z-40"></div>
"""


# ----------------------------------------------------------------------------
# [DOC] OVERFLOW
# ----------------------------------------------------------------------------

"""
OVERFLOW (Contenu qui déborde)

  overflow-auto    -> Scroll si nécessaire
  overflow-hidden  -> Couper le contenu <- Très utilisé
  overflow-visible -> Laisser déborder (défaut)
  overflow-scroll  -> Toujours afficher scrollbar
  overflow-clip    -> Couper sans scrollbar

  overflow-x-auto    -> Scroll horizontal si nécessaire
  overflow-y-auto    -> Scroll vertical si nécessaire
  overflow-x-hidden  -> Couper horizontal <- Très utilisé
  overflow-y-hidden  -> Couper vertical
  overflow-x-scroll  -> Toujours scroll horizontal
  overflow-y-scroll  -> Toujours scroll vertical
"""

"""
<!-- ─── IMAGE AVEC COINS ARRONDIS (CLASSIQUE) ─── -->
<!-- overflow-hidden + rounded = indispensable ! -->
<div class="overflow-hidden rounded-xl">
  <img src="photo.jpg" class="w-full hover:scale-105 transition-transform">
</div>

<!-- ─── TABLEAU AVEC SCROLL HORIZONTAL ─── -->
<div class="overflow-x-auto">
  <table class="w-full min-w-[600px]">
    <!-- tableau large qui scroll sur mobile -->
  </table>
</div>

<!-- ─── ZONE DE TEXTE SCROLLABLE ─── -->
<div class="h-64 overflow-y-auto border rounded-lg p-4">
  <!-- Long texte avec scroll vertical -->
  <p>Beaucoup de texte...</p>
</div>

<!-- ─── SIDEBAR SCROLLABLE ─── -->
<aside class="h-screen overflow-y-auto w-64 bg-gray-900">
  <!-- Menu long avec scroll -->
</aside>
"""


# ----------------------------------------------------------------------------
# [FRAME_WITH_PICTURE] OBJECT-FIT ET ASPECT-RATIO
# ----------------------------------------------------------------------------

"""
OBJECT-FIT (Comment l'image remplit son conteneur)

  object-contain  -> Taille complète visible (peut avoir des bandes)
  object-cover    -> Couvre tout (peut recadrer) <- Plus courant
  object-fill     -> Étire pour remplir (distorsion)
  object-none     -> Taille originale
  object-scale-down -> Plus petit entre contain et none

OBJECT-POSITION (Point focal de l'image)

  object-top       -> Haut
  object-center    -> Centre <- Défaut
  object-bottom    -> Bas
  object-left      -> Gauche
  object-right     -> Droite

ASPECT-RATIO

  aspect-auto    -> auto
  aspect-square  -> 1/1 (carré parfait)
  aspect-video   -> 16/9 (vidéo)
  aspect-[4/3]   -> 4:3 (valeur arbitraire)
"""

"""
<!-- ─── GALERIE D'IMAGES UNIFORMES ─── -->
<div class="grid grid-cols-3 gap-4">
  <div class="aspect-square overflow-hidden rounded-lg">
    <img class="w-full h-full object-cover" src="photo1.jpg">
  </div>
  <div class="aspect-square overflow-hidden rounded-lg">
    <img class="w-full h-full object-cover" src="photo2.jpg">
  </div>
  <div class="aspect-square overflow-hidden rounded-lg">
    <img class="w-full h-full object-cover" src="photo3.jpg">
  </div>
</div>

<!-- ─── AVATAR CARRÉ ─── -->
<div class="w-16 h-16 overflow-hidden rounded-full">
  <img class="w-full h-full object-cover object-top" src="avatar.jpg">
</div>

<!-- ─── VIDÉO RESPONSIVE ─── -->
<div class="aspect-video w-full">
  <iframe class="w-full h-full" src="https://...youtube..."></iframe>
</div>

<!-- ─── CARD IMAGE + TEXTE ─── -->
<div class="bg-white rounded-xl overflow-hidden shadow">
  <!-- Image en haut : carré -->
  <div class="aspect-[3/2] overflow-hidden">
    <img class="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
         src="blog-post.jpg">
  </div>
  <!-- Contenu en bas -->
  <div class="p-6">
    <h3 class="font-bold text-lg">Titre du post</h3>
    <p class="text-gray-600 mt-2">Description...</p>
  </div>
</div>
"""


# ----------------------------------------------------------------------------
# [DOCS] RÉCAPITULATIF PARTIE 2
# ----------------------------------------------------------------------------

"""
[OK] CE QUE VOUS AVEZ APPRIS

Chapitre 5 : Flexbox
[OK] flex, flex-col, flex-row
[OK] flex-wrap, flex-nowrap
[OK] justify-start/center/end/between/around/evenly
[OK] items-start/center/end/stretch/baseline
[OK] self-{valeur}
[OK] flex-1, flex-auto, flex-none
[OK] grow, shrink
[OK] gap, gap-x, gap-y
[OK] space-x, space-y

Chapitre 6 : Grid
[OK] grid, grid-cols-{n}
[OK] col-span, row-span
[OK] col-start, col-end, row-start, row-end
[OK] grid-rows
[OK] auto-fill et auto-fit

Chapitre 7 : Positionnement
[OK] static/relative/absolute/fixed/sticky
[OK] inset-{n}, top/right/bottom/left
[OK] z-index (z-0 à z-50)
[OK] translate, scale, rotate, skew

Chapitre 8 : Display et Overflow
[OK] block/inline-block/inline/hidden
[OK] visible/invisible
[OK] opacity-{n}
[OK] overflow-hidden/auto/scroll
[OK] object-cover/contain/fill
[OK] aspect-square/video

[OBJECTIF] PROCHAINE ÉTAPE : PARTIE 3 - Composants Visuels (Backgrounds, Borders, Animations)
"""

# ============================================================================
# [LIVRE] TAILWIND CSS - PARTIE 3 : COMPOSANTS VISUELS
# ============================================================================
#
# [OBJECTIF] CETTE PARTIE COUVRE :
# - Chapitre 9  : Backgrounds et Borders
# - Chapitre 10 : Ombres, Opacité, Effets visuels
# - Chapitre 11 : Transitions et Animations
# - Chapitre 12 : Formulaires et Interactivité
#
# [TEMPS] TEMPS : ~5-6 heures
# [DOCS] PRÉREQUIS : Parties 1 et 2 complétées
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 9 : BACKGROUNDS ET BORDERS
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Tous les styles de background
[OK] Background size, position, repeat
[OK] Border width, style, color, radius
[OK] Outline et ring
[OK] Créer des séparateurs et dividers
"""


# ----------------------------------------------------------------------------
# [FRAME_WITH_PICTURE] BACKGROUND IMAGE ET TAILLE
# ----------------------------------------------------------------------------

"""
BACKGROUND SIZE

  bg-auto      -> background-size: auto
  bg-cover     -> background-size: cover    (couvre tout, peut recadrer)
  bg-contain   -> background-size: contain  (tout visible, peut avoir bandes)

BACKGROUND POSITION

  bg-bottom       -> center bottom
  bg-center       -> center center <- Défaut
  bg-left         -> center left
  bg-left-bottom  -> left bottom
  bg-left-top     -> left top
  bg-right        -> center right
  bg-right-bottom -> right bottom
  bg-right-top    -> right top
  bg-top          -> center top

BACKGROUND REPEAT

  bg-repeat     -> Répéter (défaut)
  bg-no-repeat  -> Ne pas répéter <- Le plus courant
  bg-repeat-x   -> Répéter horizontalement
  bg-repeat-y   -> Répéter verticalement
  bg-repeat-round -> Répéter arrondi
  bg-repeat-space -> Répéter avec espaces

BACKGROUND ATTACHMENT

  bg-fixed    -> Parallax effect (fixé à la fenêtre)
  bg-local    -> Défile avec le contenu
  bg-scroll   -> Défile avec l'élément (défaut)

BACKGROUND ORIGIN / CLIP

  bg-origin-border  -> Commence au bord
  bg-origin-padding -> Commence au padding
  bg-origin-content -> Commence au contenu

  bg-clip-border    -> Jusqu'au bord
  bg-clip-padding   -> Jusqu'au padding
  bg-clip-content   -> Jusqu'au contenu
  bg-clip-text      -> Clip sur le TEXTE <- Effet spectaculaire !
"""

"""
<!-- ─── SECTION HERO AVEC BACKGROUND IMAGE ─── -->
<!-- (L'URL d'image s'ajoute avec inline style ou classe arbitraire) -->
<section
  class="bg-cover bg-center bg-no-repeat min-h-screen flex items-center"
  style="background-image: url('hero.jpg')"
>
  <!-- Overlay sombre -->
  <div class="absolute inset-0 bg-black/50"></div>

  <div class="relative text-white text-center max-w-4xl mx-auto px-4">
    <h1 class="text-5xl font-bold mb-6">Titre impactant</h1>
    <p class="text-xl text-gray-200">Sous-titre accrocheur</p>
  </div>
</section>

<!-- ─── TEXTURE DE FOND ─── -->
<div class="bg-repeat bg-[url('/pattern.svg')]">
  Fond avec motif répété
</div>

<!-- ─── TEXTE AVEC GRADIENT (bg-clip-text) ─── -->
<h1 class="text-6xl font-black bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
  Texte Dégradé Spectaculaire
</h1>

<!-- ─── EFFET PARALLAX ─── -->
<div
  class="bg-fixed bg-cover bg-center h-64"
  style="background-image: url('landscape.jpg')"
>
  <!-- Le fond reste fixe au scroll -->
</div>
"""


# ----------------------------------------------------------------------------
# [BLACK_SQUARE_BUTTON] BORDERS (BORDURES)
# ============================================================================

"""
BORDER WIDTH (Épaisseur)

  border       -> border-width: 1px <- Le défaut
  border-0     -> border-width: 0   <- Enlever bordure
  border-2     -> border-width: 2px
  border-4     -> border-width: 4px
  border-8     -> border-width: 8px

CÔTÉS SPÉCIFIQUES :
  border-t     -> top only (1px)
  border-r     -> right only (1px)
  border-b     -> bottom only (1px)
  border-l     -> left only (1px)
  border-x     -> left + right
  border-y     -> top + bottom

  border-t-2   -> top: 2px
  border-l-4   -> left: 4px
  (etc.)

BORDER STYLE

  border-solid   -> Solide <- Défaut avec border
  border-dashed  -> Tirets
  border-dotted  -> Points
  border-double  -> Double
  border-none    -> Aucun

BORDER COLOR

  border-{couleur}-{nuance}
  border-gray-200    -> Très clair (discret)
  border-gray-300    -> Clair (standard)
  border-blue-500    -> Bleu (focus)
  border-red-400     -> Rouge (erreur)
  border-transparent -> Invisible (pour conserver la taille)
"""

# Exemples de borders
"""
<!-- ─── INPUT AVEC BORDURE ─── -->
<input class="border border-gray-300 rounded-lg px-4 py-2 w-full
              focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200">

<!-- ─── CARD AVEC BORDURE SUBTILE ─── -->
<div class="border border-gray-200 rounded-xl p-6 bg-white">
  Card avec bordure légère
</div>

<!-- ─── CARD HOVER AVEC BORDURE COLORÉE ─── -->
<div class="border border-gray-200 hover:border-blue-400 rounded-xl p-6 transition-colors">
  Card interactive
</div>

<!-- ─── SÉPARATEUR HORIZONTAL ─── -->
<div class="border-t border-gray-200 my-6"></div>

<!-- ─── BADGE AVEC BORDURE ─── -->
<span class="border border-green-300 text-green-700 bg-green-50 px-3 py-1 rounded-full text-sm font-medium">
  Actif
</span>

<!-- ─── SÉPARATEUR AVEC TEXTE ─── -->
<div class="flex items-center gap-4">
  <div class="flex-1 border-t border-gray-300"></div>
  <span class="text-gray-500 text-sm">ou</span>
  <div class="flex-1 border-t border-gray-300"></div>
</div>

<!-- ─── BORDURE SEULEMENT D'UN CÔTÉ ─── -->
<div class="border-l-4 border-blue-500 pl-4 py-2 bg-blue-50">
  <p class="font-medium">Information importante</p>
  <p class="text-sm text-gray-600">Détails ici...</p>
</div>

<!-- ─── LISTE AVEC SÉPARATEURS ─── -->
<ul class="divide-y divide-gray-200">
  <li class="py-4">Item 1</li>
  <li class="py-4">Item 2</li>
  <li class="py-4">Item 3</li>
</ul>
"""


# ----------------------------------------------------------------------------
# [BLEU] BORDER RADIUS (COINS ARRONDIS)
# ----------------------------------------------------------------------------

"""
BORDER RADIUS

  rounded-none   -> border-radius: 0
  rounded-sm     -> border-radius: 0.125rem (2px)
  rounded        -> border-radius: 0.25rem  (4px) <- Défaut "arrondi"
  rounded-md     -> border-radius: 0.375rem (6px)
  rounded-lg     -> border-radius: 0.5rem   (8px)  <- Très courant
  rounded-xl     -> border-radius: 0.75rem  (12px) <- Cartes modernes
  rounded-2xl    -> border-radius: 1rem     (16px)
  rounded-3xl    -> border-radius: 1.5rem   (24px)
  rounded-full   -> border-radius: 9999px   <- Cercle ou pilule

CÔTÉS SPÉCIFIQUES :

  rounded-t-{taille}   -> Haut gauche + haut droit
  rounded-r-{taille}   -> Haut droit + bas droit
  rounded-b-{taille}   -> Bas gauche + bas droit
  rounded-l-{taille}   -> Haut gauche + bas gauche

COINS INDIVIDUELS :

  rounded-tl-{taille}  -> Haut gauche uniquement
  rounded-tr-{taille}  -> Haut droit uniquement
  rounded-bl-{taille}  -> Bas gauche uniquement
  rounded-br-{taille}  -> Bas droit uniquement
"""

"""
<!-- ─── STYLES COURANTS ─── -->

<!-- Bouton rectangle -->
<button class="bg-blue-500 text-white px-4 py-2 rounded">Bouton carré</button>

<!-- Bouton arrondi classique -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg">Bouton moderne</button>

<!-- Bouton "pill" -->
<button class="bg-blue-500 text-white px-6 py-2 rounded-full">Bouton pill</button>

<!-- Badge pill -->
<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">
  Nouveau
</span>

<!-- Avatar circulaire -->
<img class="w-12 h-12 rounded-full" src="avatar.jpg">

<!-- Card moderne -->
<div class="bg-white rounded-2xl shadow-lg p-6">Carte avec grands coins</div>

<!-- ─── GROUPEMENT DE BOUTONS ─── -->
<div class="flex">
  <button class="px-4 py-2 bg-blue-500 text-white rounded-l-lg border-r border-blue-600">
    Gauche
  </button>
  <button class="px-4 py-2 bg-blue-500 text-white">
    Milieu
  </button>
  <button class="px-4 py-2 bg-blue-500 text-white rounded-r-lg border-l border-blue-600">
    Droite
  </button>
</div>
"""


# ----------------------------------------------------------------------------
# [RING] RING (OUTLINE MODERNE)
# ----------------------------------------------------------------------------

"""
RING = Contour/focus ring (basé sur box-shadow)
Plus moderne et flexible que outline

CLASSES RING :

  ring         -> box-shadow: 0 0 0 3px   <- Défaut (3px)
  ring-0       -> Désactiver
  ring-1       -> 1px
  ring-2       -> 2px
  ring-4       -> 4px
  ring-8       -> 8px

  ring-inset   -> Ring intérieur

COULEUR :
  ring-{couleur}-{nuance}
  ring-blue-500
  ring-red-400
  ring-transparent

OFFSET (espace entre élément et ring) :
  ring-offset-0   -> 0px
  ring-offset-1   -> 1px
  ring-offset-2   -> 2px  <- Le plus courant
  ring-offset-4   -> 4px
  ring-offset-8   -> 8px

  ring-offset-white      -> Fond blanc du ring
  ring-offset-gray-900   -> Fond sombre (dark mode)
"""

"""
<!-- ─── FOCUS STYLES (ACCESSIBILITÉ) ─── -->

<!-- Input professionnel -->
<input class="border border-gray-300 rounded-lg px-4 py-2 w-full
              focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
              transition-shadow">

<!-- Bouton avec focus visible -->
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg
               focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  Bouton accessible
</button>

<!-- ─── INDICATEUR ACTIF ─── -->
<div class="ring-2 ring-blue-500 ring-offset-2 rounded-xl p-4">
  Élément sélectionné
</div>
"""


# ============================================================================
# [GUIDE] CHAPITRE 10 : OMBRES, OPACITÉ ET EFFETS
# ============================================================================


# ----------------------------------------------------------------------------
# [NEW_MOON_SYMBOL] BOX SHADOW (OMBRES)
# ----------------------------------------------------------------------------

"""
BOX SHADOW

  shadow-none    -> Aucune ombre
  shadow-sm      -> Très légère (sous-titile)
  shadow         -> Légère <- Standard
  shadow-md      -> Modérée <- Cartes
  shadow-lg      -> Grande <- Modales
  shadow-xl      -> Très grande <- Popovers
  shadow-2xl     -> Immense <- Dropdowns
  shadow-inner   -> Ombre interne (ombre enfoncée)

COULEUR D'OMBRE (v3.3+) :
  shadow-{couleur}/{opacité}
  shadow-blue-500/25    -> Ombre bleue à 25%
"""

"""
<!-- ─── HIERARCHY DE PROFONDEUR ─── -->

<!-- Carte plate -->
<div class="bg-white shadow-sm rounded-xl p-6">Presque plat</div>

<!-- Carte standard -->
<div class="bg-white shadow rounded-xl p-6">Standard</div>

<!-- Carte surélevée -->
<div class="bg-white shadow-md rounded-xl p-6">Surélevée</div>

<!-- Modal ou popup -->
<div class="bg-white shadow-xl rounded-xl p-6">Modal</div>

<!-- ─── HOVER POUR EFFET "SOULEVER" ─── -->
<div class="bg-white shadow hover:shadow-xl rounded-xl p-6
            transform hover:-translate-y-1 transition-all duration-200">
  Cette carte se soulève au survol !
</div>

<!-- ─── OMBRE COLORÉE (Effet moderne) ─── -->
<button class="bg-blue-600 text-white px-6 py-3 rounded-xl
               shadow-lg shadow-blue-500/30 hover:shadow-blue-500/50
               transition-shadow">
  Bouton avec ombre colorée
</button>

<!-- ─── OMBRE INTERNE (INPUT ENFONCÉ) ─── -->
<input class="shadow-inner bg-gray-50 border border-gray-300 rounded-lg px-4 py-2">
"""


# ----------------------------------------------------------------------------
# [BLEU] BLUR ET FILTER EFFECTS
# ----------------------------------------------------------------------------

"""
BLUR (Flou)

  blur-none  -> Aucun flou
  blur-sm    -> blur(4px)
  blur       -> blur(8px)
  blur-md    -> blur(12px)
  blur-lg    -> blur(16px)
  blur-xl    -> blur(24px)
  blur-2xl   -> blur(40px)
  blur-3xl   -> blur(64px)

BACKDROP BLUR (Flou de l'arrière-plan = Effet verre)

  backdrop-blur-none  -> Aucun
  backdrop-blur-sm    -> backdrop-filter: blur(4px)
  backdrop-blur       -> backdrop-filter: blur(8px)
  backdrop-blur-md    -> backdrop-filter: blur(12px)
  backdrop-blur-lg    -> backdrop-filter: blur(16px)
  backdrop-blur-xl    -> backdrop-filter: blur(24px)
  backdrop-blur-2xl   -> backdrop-filter: blur(40px)
  backdrop-blur-3xl   -> backdrop-filter: blur(64px)

BRIGHTNESS / CONTRAST

  brightness-50    -> brightness(0.5) sombre
  brightness-75    -> brightness(0.75)
  brightness-90    -> brightness(0.9)
  brightness-100   -> Normale <- Défaut
  brightness-110   -> Plus lumineux
  brightness-125   -> Encore plus lumineux
  brightness-150   -> Très lumineux
  brightness-200   -> Très très lumineux

  contrast-{50|75|100|125|150|200}

GRAYSCALE, SEPIA, INVERT

  grayscale       -> Noir et blanc
  grayscale-0     -> Couleur normale

  sepia           -> Sépia
  sepia-0         -> Normal

  invert          -> Inverser couleurs
  invert-0        -> Normal

  hue-rotate-{deg} -> hue-rotate (15, 30, 60, 90, 180, 270...)

SATURATE

  saturate-0      -> Désaturé (gris)
  saturate-50     -> Peu saturé
  saturate-100    -> Normal
  saturate-150    -> Plus saturé
  saturate-200    -> Très saturé
"""

"""
<!-- ─── EFFET GLASSMORPHISM (VERRE DÉPOLI) ─── -->
<!-- Très tendance ! -->
<div class="relative h-64 bg-gradient-to-br from-purple-600 to-blue-600 rounded-2xl overflow-hidden">
  <!-- Arrière-plan coloré -->
  <div class="absolute inset-0 bg-gradient-to-br from-purple-500 to-blue-500"></div>

  <!-- Carte "verre" par-dessus -->
  <div class="absolute inset-4 bg-white/10 backdrop-blur-md rounded-xl border border-white/20 p-6">
    <h2 class="text-white text-xl font-bold">Effet Verre</h2>
    <p class="text-white/70 mt-2">Glassmorphism avec backdrop-blur</p>
  </div>
</div>

<!-- ─── IMAGE EN NOIR ET BLANC AVEC HOVER COULEUR ─── -->
<img class="grayscale hover:grayscale-0 transition-all duration-300 cursor-pointer"
     src="photo.jpg" alt="Photo">

<!-- ─── NAVBAR GLASSMORPHISM ─── -->
<nav class="fixed top-0 left-0 right-0 bg-white/80 backdrop-blur-md border-b border-gray-200/50 z-50">
  <!-- Contenu navbar -->
</nav>
"""


# ============================================================================
# [GUIDE] CHAPITRE 11 : TRANSITIONS ET ANIMATIONS
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Ajouter des transitions CSS
[OK] Contrôler durée et timing
[OK] Utiliser les animations Tailwind
[OK] Créer des effets hover avancés
[OK] Animation d'entrée
"""


# ----------------------------------------------------------------------------
# [TEMPS] TRANSITIONS
# ----------------------------------------------------------------------------

"""
TRANSITION PROPERTY (Quelle propriété animer)

  transition-none       -> Aucune transition
  transition-all        -> Toutes les propriétés
  transition            -> Propriétés communes (colors, shadow...)
  transition-colors     -> Couleurs uniquement
  transition-opacity    -> Opacité uniquement
  transition-shadow     -> Ombres uniquement
  transition-transform  -> Transform uniquement

DURÉE (transition-duration)

  duration-0     -> 0ms (instantané)
  duration-75    -> 75ms (très rapide)
  duration-100   -> 100ms
  duration-150   -> 150ms
  duration-200   -> 200ms <- Boutons, hover léger
  duration-300   -> 300ms <- Standard <- Très courant
  duration-500   -> 500ms <- Animations médiocres
  duration-700   -> 700ms
  duration-1000  -> 1000ms (1 seconde)

TIMING FUNCTION (Accélération)

  ease-linear   -> Vitesse constante
  ease-in       -> Lent -> rapide
  ease-out      -> Rapide -> lent <- Sortie naturelle
  ease-in-out   -> Lent -> rapide -> lent <- Le plus courant

DELAY (Délai)

  delay-0     -> 0ms
  delay-75    -> 75ms
  delay-100   -> 100ms
  delay-150   -> 150ms
  delay-200   -> 200ms
  delay-300   -> 300ms
  delay-500   -> 500ms
  delay-700   -> 700ms
  delay-1000  -> 1000ms
"""

"""
<!-- ─── PATTERN DE BASE ─── -->
<!-- transition + duration + ease = combo standard -->

<!-- Bouton avec hover de couleur -->
<button class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded
               transition-colors duration-200">
  Hover moi
</button>

<!-- ─── CARD QUI SE SOULÈVE ─── -->
<div class="bg-white shadow hover:shadow-xl rounded-xl p-6
            transform hover:-translate-y-2
            transition-all duration-300 ease-out cursor-pointer">
  Card interactive
</div>

<!-- ─── BOUTON AVEC SCALE ─── -->
<button class="bg-green-500 text-white px-4 py-2 rounded
               transform hover:scale-105 active:scale-95
               transition-transform duration-150">
  Effet appui
</button>

<!-- ─── LIEN NAV AVEC UNDERLINE ANIMÉ ─── -->
<a href="#" class="relative text-gray-700 hover:text-blue-600 transition-colors duration-200
                   after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5
                   after:bg-blue-600 after:transition-all after:duration-300
                   hover:after:w-full">
  Lien avec underline animé
</a>

<!-- ─── APPARITION EN FONDU ─── -->
<div class="opacity-0 hover:opacity-100 transition-opacity duration-300">
  Apparaît au survol
</div>

<!-- ─── ANIMATION EN STAGGER (avec delay) ─── -->
<div class="flex space-x-2">
  <div class="bg-blue-500 w-4 h-4 rounded delay-0 animate-bounce">
  <div class="bg-blue-500 w-4 h-4 rounded delay-150 animate-bounce">
  <div class="bg-blue-500 w-4 h-4 rounded delay-300 animate-bounce">
</div>
"""


# ----------------------------------------------------------------------------
# [DEMARRAGE] ANIMATIONS TAILWIND
# ----------------------------------------------------------------------------

"""
ANIMATIONS INTÉGRÉES (+ transition)

  animate-none     -> Aucune animation
  animate-spin     -> Rotation infinie (chargement)
  animate-ping     -> Pulsation (notification)
  animate-pulse    -> Battement (skeleton)
  animate-bounce   -> Rebond (indicateur scroll)
"""

"""
<!-- ─── INDICATEUR DE CHARGEMENT ─── -->
<div class="flex items-center space-x-2">
  <div class="w-4 h-4 rounded-full border-2 border-blue-500 border-t-transparent animate-spin"></div>
  <span class="text-gray-600">Chargement...</span>
</div>

<!-- Spinner plus grand -->
<div class="w-8 h-8 rounded-full border-4 border-gray-200 border-t-blue-600 animate-spin mx-auto"></div>

<!-- ─── BADGE NOTIFICATION ─── -->
<div class="relative w-10 h-10">
  <button class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center">
    [NOTIF]
  </button>
  <!-- Ping = notification non lue -->
  <span class="absolute -top-1 -right-1 flex h-3 w-3">
    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
    <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
  </span>
</div>

<!-- ─── SKELETON LOADING ─── -->
<div class="bg-white rounded-xl shadow p-6 animate-pulse">
  <!-- Photo placeholder -->
  <div class="flex items-center space-x-4">
    <div class="w-12 h-12 rounded-full bg-gray-300"></div>
    <div class="space-y-2 flex-1">
      <div class="h-4 bg-gray-300 rounded w-3/4"></div>
      <div class="h-4 bg-gray-300 rounded w-1/2"></div>
    </div>
  </div>
  <!-- Content placeholder -->
  <div class="mt-4 space-y-3">
    <div class="h-4 bg-gray-300 rounded"></div>
    <div class="h-4 bg-gray-300 rounded"></div>
    <div class="h-4 bg-gray-300 rounded w-5/6"></div>
  </div>
</div>

<!-- ─── SCROLL INDICATOR ─── -->
<div class="fixed bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center text-gray-400">
  <span class="text-sm mb-2">Défiler</span>
  <div class="w-6 h-10 rounded-full border-2 border-gray-400 flex justify-center pt-1">
    <div class="w-1 h-3 bg-gray-400 rounded-full animate-bounce"></div>
  </div>
</div>
"""


# ============================================================================
# [GUIDE] CHAPITRE 12 : FORMULAIRES ET INTERACTIVITÉ
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Styler tous les éléments de formulaire
[OK] États focus, disabled, readonly
[OK] Validation visuelle (error, success)
[OK] Créer des composants de formulaire complets
[OK] Cursor et pointer-events
"""


# ----------------------------------------------------------------------------
# [NOTE] ÉLÉMENTS DE FORMULAIRE DE BASE
# ----------------------------------------------------------------------------

"""
CURSOR

  cursor-auto        -> Automatique
  cursor-default     -> Flèche par défaut
  cursor-pointer     -> Main (lien/bouton) <- Très courant
  cursor-wait        -> Sablier (chargement)
  cursor-text        -> Curseur texte (I-beam)
  cursor-move        -> Déplacement
  cursor-not-allowed -> Cercle interdit (désactivé)
  cursor-grab        -> Main ouverte (drag)
  cursor-grabbing    -> Main fermée (drag actif)
  cursor-zoom-in     -> Loupe +
  cursor-zoom-out    -> Loupe -

POINTER EVENTS

  pointer-events-none  -> Ignorer les clics (overlay non-interactif)
  pointer-events-auto  -> Comportement normal

USER SELECT

  select-none   -> Pas de sélection de texte
  select-text   -> Sélection normale
  select-all    -> Tout sélectionner au clic
  select-auto   -> Auto
"""

"""
<!-- ─── INPUT DE BASE ─── -->
<input
  type="text"
  class="w-full px-4 py-2
         border border-gray-300 rounded-lg
         bg-white text-gray-900 placeholder-gray-400
         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
         transition-shadow duration-200"
  placeholder="Votre nom"
>

<!-- ─── TEXTAREA ─── -->
<textarea
  class="w-full px-4 py-3
         border border-gray-300 rounded-lg resize-none
         bg-white text-gray-900 placeholder-gray-400
         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
         transition-shadow duration-200"
  rows="4"
  placeholder="Votre message..."
></textarea>

<!-- ─── SELECT ─── -->
<select
  class="w-full px-4 py-2
         border border-gray-300 rounded-lg
         bg-white text-gray-900
         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
         cursor-pointer"
>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<!-- ─── CHECKBOX ─── -->
<label class="flex items-center space-x-2 cursor-pointer">
  <input
    type="checkbox"
    class="w-4 h-4 text-blue-600 border-gray-300 rounded
           focus:ring-2 focus:ring-blue-500 cursor-pointer"
  >
  <span class="text-gray-700">J'accepte les conditions</span>
</label>

<!-- ─── RADIO ─── -->
<div class="space-y-2">
  <label class="flex items-center space-x-2 cursor-pointer">
    <input type="radio" name="option" class="text-blue-600 focus:ring-blue-500 cursor-pointer">
    <span>Option A</span>
  </label>
  <label class="flex items-center space-x-2 cursor-pointer">
    <input type="radio" name="option" class="text-blue-600 focus:ring-blue-500 cursor-pointer">
    <span>Option B</span>
  </label>
</div>
"""


# ----------------------------------------------------------------------------
# [DESIGN] ÉTATS DES FORMULAIRES
# ----------------------------------------------------------------------------

"""
ÉTATS DE VALIDATION

Erreur :
  border-red-500
  text-red-600
  ring-red-300
  bg-red-50

Succès :
  border-green-500
  text-green-600
  ring-green-300
  bg-green-50

Désactivé :
  opacity-50
  cursor-not-allowed
  bg-gray-100
"""

"""
<!-- ─── FORMULAIRE COMPLET AVEC VALIDATION ─── -->

<!-- Input NORMAL -->
<div class="mb-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
  <input type="email"
    class="w-full px-4 py-2 border border-gray-300 rounded-lg
           focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>

<!-- Input ERREUR -->
<div class="mb-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
  <input type="email"
    class="w-full px-4 py-2 border border-red-500 rounded-lg bg-red-50
           text-red-900 focus:outline-none focus:ring-2 focus:ring-red-300">
  <p class="mt-1 text-sm text-red-600">[ATTENTION] Email invalide</p>
</div>

<!-- Input SUCCÈS -->
<div class="mb-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
  <div class="relative">
    <input type="email"
      class="w-full px-4 py-2 border border-green-500 rounded-lg bg-green-50
             text-green-900 focus:outline-none focus:ring-2 focus:ring-green-300 pr-10">
    <div class="absolute inset-y-0 right-0 flex items-center pr-3">
      <span class="text-green-500">[OK]</span>
    </div>
  </div>
  <p class="mt-1 text-sm text-green-600">[OK] Email valide</p>
</div>

<!-- Input DÉSACTIVÉ -->
<div class="mb-4">
  <label class="block text-sm font-medium text-gray-400 mb-1">Champ désactivé</label>
  <input type="text"
    class="w-full px-4 py-2 border border-gray-200 rounded-lg
           bg-gray-100 text-gray-400 cursor-not-allowed"
    disabled value="Non modifiable">
</div>

<!-- ─── FORMULAIRE DE CONNEXION COMPLET ─── -->
<div class="min-h-screen bg-gray-50 flex items-center justify-center px-4">
  <div class="bg-white rounded-2xl shadow-xl w-full max-w-md p-8">

    <!-- En-tête -->
    <div class="text-center mb-8">
      <div class="w-16 h-16 bg-blue-600 rounded-2xl mx-auto mb-4 flex items-center justify-center">
        <span class="text-white text-2xl">[SECURISE]</span>
      </div>
      <h1 class="text-2xl font-bold text-gray-900">Connexion</h1>
      <p class="text-gray-500 mt-1">Heureux de vous revoir !</p>
    </div>

    <!-- Formulaire -->
    <form class="space-y-5">

      <!-- Email -->
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1.5">
          Adresse e-mail
        </label>
        <input type="email"
          class="w-full px-4 py-2.5 border border-gray-300 rounded-xl
                 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
                 transition-shadow"
          placeholder="vous@exemple.com">
      </div>

      <!-- Mot de passe -->
      <div>
        <div class="flex justify-between items-center mb-1.5">
          <label class="block text-sm font-medium text-gray-700">Mot de passe</label>
          <a href="#" class="text-sm text-blue-600 hover:underline">Oublié ?</a>
        </div>
        <input type="password"
          class="w-full px-4 py-2.5 border border-gray-300 rounded-xl
                 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
                 transition-shadow"
          placeholder="••••••••">
      </div>

      <!-- Remember me -->
      <label class="flex items-center space-x-2 cursor-pointer">
        <input type="checkbox"
          class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
        <span class="text-sm text-gray-600">Se souvenir de moi</span>
      </label>

      <!-- Submit -->
      <button type="submit"
        class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2.5 rounded-xl
               transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
        Se connecter
      </button>

    </form>

    <!-- Séparateur -->
    <div class="flex items-center gap-4 my-6">
      <div class="flex-1 border-t border-gray-200"></div>
      <span class="text-gray-400 text-sm">ou continuer avec</span>
      <div class="flex-1 border-t border-gray-200"></div>
    </div>

    <!-- Social login -->
    <div class="grid grid-cols-2 gap-3">
      <button class="flex items-center justify-center gap-2 px-4 py-2.5
                     border border-gray-300 rounded-xl hover:bg-gray-50
                     transition-colors text-sm font-medium text-gray-700">
        Google
      </button>
      <button class="flex items-center justify-center gap-2 px-4 py-2.5
                     border border-gray-300 rounded-xl hover:bg-gray-50
                     transition-colors text-sm font-medium text-gray-700">
        GitHub
      </button>
    </div>

    <!-- Lien inscription -->
    <p class="text-center text-sm text-gray-600 mt-6">
      Pas encore de compte ?
      <a href="#" class="text-blue-600 font-medium hover:underline">S'inscrire</a>
    </p>

  </div>
</div>
"""


# ----------------------------------------------------------------------------
# [COURS] EXERCICE PRATIQUE 4 : COMPOSANTS UI COMPLETS
# ----------------------------------------------------------------------------

"""
COMPOSANT 1 : Alerte/Notification
"""

"""
<!-- ─── ALERTES ─── -->

<!-- Succès -->
<div class="flex items-start gap-4 bg-green-50 border border-green-200 text-green-800 rounded-xl p-4">
  <span class="text-green-500 mt-0.5">[OK]</span>
  <div>
    <p class="font-medium">Sauvegardé avec succès</p>
    <p class="text-sm text-green-700 mt-1">Vos modifications ont été appliquées.</p>
  </div>
  <button class="ml-auto text-green-400 hover:text-green-600 transition-colors">[X]</button>
</div>

<!-- Erreur -->
<div class="flex items-start gap-4 bg-red-50 border border-red-200 text-red-800 rounded-xl p-4">
  <span class="text-red-500 mt-0.5">[ATTENTION]</span>
  <div>
    <p class="font-medium">Une erreur s'est produite</p>
    <p class="text-sm text-red-700 mt-1">Vérifiez votre connexion et réessayez.</p>
  </div>
</div>

<!-- Info -->
<div class="flex items-start gap-4 bg-blue-50 border border-blue-200 text-blue-800 rounded-xl p-4">
  <span class="text-blue-500 mt-0.5">ℹ</span>
  <div>
    <p class="font-medium">Mise à jour disponible</p>
    <p class="text-sm text-blue-700 mt-1">Version 2.0 est maintenant disponible.</p>
  </div>
</div>

<!-- Avertissement -->
<div class="flex items-start gap-4 bg-yellow-50 border border-yellow-200 text-yellow-800 rounded-xl p-4">
  <span class="text-yellow-500 mt-0.5">[RAPIDE]</span>
  <div>
    <p class="font-medium">Attention requise</p>
    <p class="text-sm text-yellow-700 mt-1">Votre abonnement expire dans 3 jours.</p>
  </div>
</div>
"""

"""
COMPOSANT 2 : Badge / Pill
"""

"""
<!-- ─── BADGES ─── -->
<div class="flex flex-wrap gap-2">

  <!-- Couleurs -->
  <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Nouveau</span>
  <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Actif</span>
  <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Erreur</span>
  <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded-full">En attente</span>
  <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Archivé</span>

  <!-- Avec point coloré -->
  <span class="flex items-center gap-1.5 bg-green-50 text-green-700 text-xs font-medium px-2.5 py-0.5 rounded-full border border-green-200">
    <span class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></span>
    En ligne
  </span>

</div>
"""

"""
COMPOSANT 3 : Avatar
"""

"""
<!-- ─── AVATARS ─── -->

<!-- Simple -->
<img class="w-10 h-10 rounded-full object-cover" src="avatar.jpg" alt="Alice">

<!-- Avec initiales (fallback) -->
<div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold text-sm">
  AM
</div>

<!-- Stack d'avatars -->
<div class="flex -space-x-2">
  <img class="w-8 h-8 rounded-full border-2 border-white object-cover" src="user1.jpg">
  <img class="w-8 h-8 rounded-full border-2 border-white object-cover" src="user2.jpg">
  <img class="w-8 h-8 rounded-full border-2 border-white object-cover" src="user3.jpg">
  <div class="w-8 h-8 rounded-full border-2 border-white bg-gray-100 flex items-center justify-center text-xs text-gray-600 font-medium">
    +5
  </div>
</div>

<!-- Avec badge statut -->
<div class="relative w-10 h-10">
  <img class="w-full h-full rounded-full object-cover" src="avatar.jpg">
  <span class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 rounded-full border-2 border-white"></span>
</div>
"""


# ----------------------------------------------------------------------------
# [DOCS] RÉCAPITULATIF PARTIE 3
# ----------------------------------------------------------------------------

"""
[OK] CE QUE VOUS AVEZ APPRIS

Chapitre 9 : Backgrounds et Borders
[OK] bg-cover/contain, bg-center/top/bottom
[OK] bg-fixed (parallax), bg-no-repeat
[OK] bg-clip-text (texte dégradé)
[OK] border, border-{n}, border-t/r/b/l
[OK] border-dashed/dotted/double
[OK] rounded jusqu'à rounded-full
[OK] divide-y/x (séparateurs automatiques)
[OK] ring, ring-offset

Chapitre 10 : Effets visuels
[OK] shadow-sm -> shadow-2xl
[OK] shadow colorées (shadow-{color}/opacity)
[OK] blur, backdrop-blur (glassmorphism)
[OK] brightness, contrast, grayscale, sepia
[OK] saturate, hue-rotate, invert

Chapitre 11 : Transitions et Animations
[OK] transition-{all/colors/shadow/transform/opacity}
[OK] duration-{75->1000}
[OK] ease-in/out/in-out/linear
[OK] delay-{n}
[OK] animate-spin (loading)
[OK] animate-ping (notification)
[OK] animate-pulse (skeleton)
[OK] animate-bounce

Chapitre 12 : Formulaires
[OK] Inputs, textareas, selects
[OK] Checkboxes et radios
[OK] États: focus, disabled, erreur, succès
[OK] cursor-pointer/not-allowed
[OK] Formulaire de connexion complet
[OK] Composants: alertes, badges, avatars

[OBJECTIF] PROCHAINE ÉTAPE : PARTIE 4 - Responsive, Dark Mode, Pseudo-classes
"""

# ============================================================================
# [LIVRE] TAILWIND CSS - PARTIE 4 : RESPONSIVE, DARK MODE ET PSEUDO-CLASSES
# ============================================================================
#
# [OBJECTIF] CETTE PARTIE COUVRE :
# - Chapitre 13 : Responsive Design (Breakpoints)
# - Chapitre 14 : Dark Mode
# - Chapitre 15 : Pseudo-classes (hover, focus, active, group...)
# - Chapitre 16 : Customisation (tailwind.config.js)
#
# [TEMPS] TEMPS : ~5-6 heures
# [DOCS] PRÉREQUIS : Parties 1, 2 et 3 complétées
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 13 : RESPONSIVE DESIGN
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Comprendre les breakpoints Tailwind
[OK] Approche mobile-first
[OK] Appliquer des styles conditionnels par taille
[OK] Rendre tout composant responsive
[OK] Typographie responsive
[OK] Navigation responsive
"""


# ----------------------------------------------------------------------------
# [MOBILE] BREAKPOINTS TAILWIND
# ----------------------------------------------------------------------------

"""
BREAKPOINTS PAR DÉFAUT

┌──────────────┬───────────────────┬─────────────────────────────────┐
│ Préfixe      │  Largeur min      │  Description                    │
├──────────────┼───────────────────┼─────────────────────────────────┤
│ (aucun)      │  0px (tout)       │ Mobile (≥ 0px)                  │
│ sm:          │  640px            │ Petite tablette (≥ 640px)       │
│ md:          │  768px            │ Tablette (≥ 768px)              │
│ lg:          │  1024px           │ Petit desktop (≥ 1024px)        │
│ xl:          │  1280px           │ Desktop (≥ 1280px)              │
│ 2xl:         │  1536px           │ Grand desktop (≥ 1536px)        │
└──────────────┴───────────────────┴─────────────────────────────────┘


SYNTAXE : {breakpoint}:{classe}

Exemples :
  sm:text-lg       -> text-lg si ≥ 640px
  md:flex          -> flex si ≥ 768px
  lg:grid-cols-3   -> 3 colonnes si ≥ 1024px
  xl:max-w-7xl     -> largeur max si ≥ 1280px


[IDEE] PHILOSOPHIE MOBILE-FIRST

Tailwind est MOBILE-FIRST :

  SANS PRÉFIXE = Appliqué sur TOUS les écrans (≥ 0px)
  AVEC PRÉFIXE = Appliqué à partir de ce breakpoint

NON INTUITIF AU DÉBUT :

  class="text-sm md:text-base lg:text-lg"

  -> 0px–767px   : text-sm    (mobile)
  -> 768px–1023px: text-base  (tablette)
  -> ≥ 1024px    : text-lg    (desktop)


MAUVAISE COMPRÉHENSION (piège classique) :

  [X] sm:text-red = "SEULEMENT sur petits écrans"
  [OK] sm:text-red = "Sur les écrans ≥ 640px"
"""


# ----------------------------------------------------------------------------
# [MESURE] RESPONSIVE EN PRATIQUE
# ----------------------------------------------------------------------------

"""
GRILLE RESPONSIVE
"""

"""
<!-- ─── CARDS: 1->2->3->4 COLONNES ─── -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <div class="bg-white rounded-xl shadow p-6">Card 1</div>
  <div class="bg-white rounded-xl shadow p-6">Card 2</div>
  <div class="bg-white rounded-xl shadow p-6">Card 3</div>
  <div class="bg-white rounded-xl shadow p-6">Card 4</div>
</div>

<!-- RÉSULTAT :
  Mobile (0-640px)   : 1 colonne
  Sm (640-1024px)    : 2 colonnes
  Lg (1024-1280px)   : 3 colonnes
  Xl (≥1280px)       : 4 colonnes
-->
"""

"""
LAYOUT RESPONSIVE
"""

"""
<!-- ─── SIDEBAR: Vertical sur mobile, horizontal sur desktop ─── -->
<div class="flex flex-col md:flex-row min-h-screen">

  <!-- Sidebar : Pleine largeur en haut sur mobile, 256px à gauche sur desktop -->
  <aside class="w-full md:w-64 bg-gray-900 text-white md:min-h-screen p-4">
    <nav class="flex flex-row md:flex-col space-x-4 md:space-x-0 md:space-y-2">
      <a href="#" class="px-3 py-2 rounded-lg text-gray-300 hover:bg-gray-700">Accueil</a>
      <a href="#" class="px-3 py-2 rounded-lg text-gray-300 hover:bg-gray-700">Profil</a>
      <a href="#" class="px-3 py-2 rounded-lg text-gray-300 hover:bg-gray-700">Paramètres</a>
    </nav>
  </aside>

  <!-- Contenu principal -->
  <main class="flex-1 p-4 md:p-8">
    Contenu
  </main>
</div>
"""

"""
TYPOGRAPHIE RESPONSIVE
"""

"""
<!-- ─── HERO SECTION RESPONSIVE ─── -->
<section class="py-16 md:py-24 lg:py-32 bg-gradient-to-b from-blue-900 to-blue-700 text-white text-center">
  <div class="max-w-4xl mx-auto px-4">

    <!-- Titre: grandit avec l'écran -->
    <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl
               font-black leading-tight mb-6">
      Construisez<br>
      <span class="text-blue-300">plus vite</span>
    </h1>

    <!-- Description: visible seulement sur tablette+ -->
    <p class="hidden sm:block text-lg md:text-xl text-blue-200 mb-8 max-w-2xl mx-auto">
      La plateforme tout-en-un pour les équipes modernes.
    </p>

    <!-- Boutons: colonne sur mobile, ligne sur tablette -->
    <div class="flex flex-col sm:flex-row gap-3 justify-center">
      <a href="#" class="bg-white text-blue-900 font-semibold px-8 py-3 rounded-xl hover:bg-blue-50">
        Commencer gratuitement
      </a>
      <a href="#" class="border border-white/30 text-white font-semibold px-8 py-3 rounded-xl hover:bg-white/10">
        Voir la démo
      </a>
    </div>

  </div>
</section>
"""

"""
SPACING RESPONSIVE
"""

"""
<!-- ─── PADDING ADAPTATIF ─── -->
<section class="px-4 sm:px-6 lg:px-8 py-8 sm:py-12 lg:py-16">
  <!-- Plus d'espace sur les grands écrans -->
</section>

<!-- ─── CONTAINER STANDARD ─── -->
<!-- Pattern le plus commun en développement web -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  <!-- Centré, max 1280px, padding adaptatif -->
</div>
"""

"""
AFFICHAGE CONDITIONNEL
"""

"""
<!-- ─── VISIBLE SEULEMENT SUR MOBILE ─── -->
<button class="md:hidden p-2">[TRIGRAM_FOR_HEAVEN]</button>

<!-- ─── VISIBLE SEULEMENT SUR DESKTOP ─── -->
<nav class="hidden md:flex space-x-6">
  <a href="#">Accueil</a>
  <a href="#">Produit</a>
</nav>

<!-- ─── TAILLE D'IMAGE RESPONSIVE ─── -->
<img
  class="w-full sm:w-1/2 lg:w-1/3 mx-auto rounded-xl"
  src="image.jpg"
>

<!-- ─── NOMBRE DE COLONNES ADAPTATIF ─── -->
<div class="columns-1 sm:columns-2 lg:columns-3 gap-4">
  <!-- Colonnes CSS masonry effect -->
  <div class="break-inside-avoid mb-4">Item 1</div>
  <div class="break-inside-avoid mb-4">Item 2</div>
</div>
"""


# ----------------------------------------------------------------------------
# [COURS] EXERCICE PRATIQUE 5 : PAGE LANDING RESPONSIVE
# ----------------------------------------------------------------------------

"""
SOLUTION : Pricing Section Responsive
"""

"""
<section class="py-16 bg-gray-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

    <!-- En-tête -->
    <div class="text-center mb-12">
      <h2 class="text-3xl md:text-4xl font-bold text-gray-900">
        Tarifs simples
      </h2>
      <p class="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
        Commencez gratuitement. Montez en puissance selon vos besoins.
      </p>
    </div>

    <!-- Cards de tarifs : 1 col mobile, 3 cols desktop -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

      <!-- Gratuit -->
      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
        <h3 class="text-lg font-semibold text-gray-900">Gratuit</h3>
        <div class="mt-4 flex items-baseline gap-1">
          <span class="text-4xl font-black text-gray-900">0€</span>
          <span class="text-gray-500">/mois</span>
        </div>
        <ul class="mt-8 space-y-3">
          <li class="flex items-center gap-2 text-gray-600">
            <span class="text-green-500">[OK]</span> 5 projets
          </li>
          <li class="flex items-center gap-2 text-gray-600">
            <span class="text-green-500">[OK]</span> 1 GB stockage
          </li>
          <li class="flex items-center gap-2 text-gray-400">
            <span>[X]</span> <del>Équipe</del>
          </li>
        </ul>
        <button class="mt-8 w-full border border-gray-300 text-gray-700 font-medium py-2.5 rounded-xl hover:bg-gray-50 transition-colors">
          Commencer
        </button>
      </div>

      <!-- Pro (mis en avant) -->
      <div class="bg-blue-600 rounded-2xl shadow-xl border border-blue-500 p-8 relative">
        <div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-orange-500 text-white text-xs font-bold px-4 py-1.5 rounded-full">
          LE PLUS POPULAIRE
        </div>
        <h3 class="text-lg font-semibold text-white">Pro</h3>
        <div class="mt-4 flex items-baseline gap-1">
          <span class="text-4xl font-black text-white">29€</span>
          <span class="text-blue-200">/mois</span>
        </div>
        <ul class="mt-8 space-y-3">
          <li class="flex items-center gap-2 text-blue-100">
            <span class="text-blue-300">[OK]</span> Projets illimités
          </li>
          <li class="flex items-center gap-2 text-blue-100">
            <span class="text-blue-300">[OK]</span> 100 GB stockage
          </li>
          <li class="flex items-center gap-2 text-blue-100">
            <span class="text-blue-300">[OK]</span> Équipe 10 membres
          </li>
        </ul>
        <button class="mt-8 w-full bg-white text-blue-600 font-semibold py-2.5 rounded-xl hover:bg-blue-50 transition-colors">
          Commencer l'essai
        </button>
      </div>

      <!-- Entreprise -->
      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
        <h3 class="text-lg font-semibold text-gray-900">Entreprise</h3>
        <div class="mt-4 flex items-baseline gap-1">
          <span class="text-4xl font-black text-gray-900">Sur devis</span>
        </div>
        <ul class="mt-8 space-y-3">
          <li class="flex items-center gap-2 text-gray-600">
            <span class="text-green-500">[OK]</span> Tout ce qui est Pro
          </li>
          <li class="flex items-center gap-2 text-gray-600">
            <span class="text-green-500">[OK]</span> Stockage illimité
          </li>
          <li class="flex items-center gap-2 text-gray-600">
            <span class="text-green-500">[OK]</span> Support dédié 24/7
          </li>
        </ul>
        <button class="mt-8 w-full border border-gray-300 text-gray-700 font-medium py-2.5 rounded-xl hover:bg-gray-50 transition-colors">
          Nous contacter
        </button>
      </div>

    </div>
  </div>
</section>
"""


# ============================================================================
# [GUIDE] CHAPITRE 14 : DARK MODE
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Configurer le dark mode
[OK] Préfixe dark: sur toutes les classes
[OK] Basculer manuellement
[OK] Créer un toggle dark mode en JavaScript
"""


# ----------------------------------------------------------------------------
# [CONFIG] CONFIGURATION
# ----------------------------------------------------------------------------

"""
DEUX MODES DE FONCTIONNEMENT

1. 'media' -> Suit la préférence système (prefers-color-scheme)
2. 'class' -> Contrôlé manuellement avec classe .dark sur <html>
"""

# tailwind.config.js
"""
module.exports = {
  darkMode: 'class',  // ou 'media'
  ...
}
"""

"""
SYNTAXE : dark:{classe}

Exemples :
  dark:bg-gray-900      -> fond sombre en dark mode
  dark:text-white       -> texte blanc en dark mode
  dark:border-gray-700  -> bordure grise en dark mode
"""


# ----------------------------------------------------------------------------
# [CRESCENT_MOON] DARK MODE EN PRATIQUE
# ----------------------------------------------------------------------------

"""
PALETTE DARK MODE TYPIQUE :

CLAIR                   SOMBRE
─────────────────────────────────────
bg-white                dark:bg-gray-900
bg-gray-50              dark:bg-gray-800
bg-gray-100             dark:bg-gray-700
text-gray-900           dark:text-white
text-gray-600           dark:text-gray-300
text-gray-400           dark:text-gray-500
border-gray-200         dark:border-gray-700
shadow                  dark:shadow-gray-900/50
"""

"""
<!-- ─── COMPOSANTS DARK MODE ─── -->

<!-- Card -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6
            border border-gray-200 dark:border-gray-700">
  <h2 class="text-gray-900 dark:text-white font-bold">Titre</h2>
  <p class="text-gray-600 dark:text-gray-300 mt-2">Description</p>
  <button class="mt-4 bg-blue-600 dark:bg-blue-500 text-white px-4 py-2 rounded-lg
                 hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors">
    Action
  </button>
</div>

<!-- Navbar -->
<nav class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
  <div class="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
    <span class="font-bold text-gray-900 dark:text-white">Logo</span>
    <div class="flex space-x-4">
      <a class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
        Accueil
      </a>
    </div>
  </div>
</nav>

<!-- Input -->
<input class="w-full px-4 py-2
              bg-white dark:bg-gray-800
              border border-gray-300 dark:border-gray-600
              text-gray-900 dark:text-white
              placeholder-gray-400 dark:placeholder-gray-500
              rounded-lg
              focus:ring-2 focus:ring-blue-500 focus:outline-none"
  placeholder="Chercher...">

<!-- Badge -->
<span class="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200
             px-3 py-1 rounded-full text-sm font-medium">
  Nouveau
</span>
"""

"""
TOGGLE DARK MODE (JavaScript)
"""

"""
<!-- Bouton toggle -->
<button
  id="darkModeToggle"
  class="p-2 rounded-full bg-gray-100 dark:bg-gray-800
         text-gray-600 dark:text-gray-300
         hover:bg-gray-200 dark:hover:bg-gray-700
         transition-colors"
  onclick="toggleDarkMode()"
>
  <!-- Icône lune (dark) ou soleil (light) -->
  <svg id="lightIcon" class="w-5 h-5 hidden dark:block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
  </svg>
  <svg id="darkIcon" class="w-5 h-5 block dark:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
  </svg>
</button>

<script>
  // Vérifier la préférence sauvegardée ou système
  if (localStorage.theme === 'dark' ||
      (!('theme' in localStorage) &&
       window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark')
  }

  function toggleDarkMode() {
    const html = document.documentElement
    if (html.classList.contains('dark')) {
      html.classList.remove('dark')
      localStorage.theme = 'light'
    } else {
      html.classList.add('dark')
      localStorage.theme = 'dark'
    }
  }
</script>
"""


# ============================================================================
# [GUIDE] CHAPITRE 15 : PSEUDO-CLASSES ET ÉTATS
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] hover, focus, active, visited
[OK] focus-within, focus-visible
[OK] disabled, required, valid, invalid
[OK] first, last, odd, even
[OK] group (état du parent vers enfant)
[OK] peer (état de l'élément frère)
"""


# ----------------------------------------------------------------------------
# [SOURIS] ÉTATS INTERACTIFS
# ----------------------------------------------------------------------------

"""
ÉTATS DE BASE

SYNTAXE : {état}:{classe}

  hover:     -> Au survol de la souris
  focus:     -> Quand l'élément a le focus
  active:    -> Pendant le clic (mousedown)
  visited:   -> Liens déjà visités
  first-line -> Première ligne de texte
  first-letter -> Première lettre

ACCESSIBILITÉ
  focus-visible: -> Focus clavier seulement (pas clic souris)
  focus-within:  -> Quand un enfant a le focus

ÉTATS FORMULAIRES
  disabled:  -> Élément désactivé
  enabled:   -> Élément activé
  checked:   -> Checkbox/radio coché
  required:  -> Champ requis
  valid:     -> Champ valide
  invalid:   -> Champ invalide
  read-only: -> Champ lecture seule
  placeholder-shown: -> Quand placeholder visible

POSITION
  first:    -> Premier enfant
  last:     -> Dernier enfant
  only:     -> Seul enfant
  odd:      -> Enfants impairs (1, 3, 5...)
  even:     -> Enfants pairs (2, 4, 6...)
  nth-child: -> Sélecteur nth-child
"""

"""
HOVER
"""
"""
<!-- ─── EFFETS HOVER ─── -->

<!-- Changement de couleur -->
<button class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded transition-colors">
  Hover couleur
</button>

<!-- Changement de texte (avec group) -->
<a class="text-gray-600 hover:text-blue-600 hover:underline transition-colors">Lien</a>

<!-- Opacité -->
<img class="opacity-100 hover:opacity-80 transition-opacity" src="...">

<!-- Élévation -->
<div class="shadow-md hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200">
  Card interactive
</div>

<!-- Afficher/cacher -->
<div class="group">
  <button>Menu</button>
  <!-- Caché par défaut, visible au hover du parent -->
  <div class="hidden group-hover:block absolute bg-white shadow-lg rounded-xl p-4">
    Dropdown menu
  </div>
</div>
"""

"""
FOCUS
"""
"""
<!-- ─── FOCUS STYLES ─── -->

<!-- Input avec anneau focus -->
<input class="border border-gray-300 rounded-lg px-4 py-2
              focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
              transition-shadow">

<!-- Button avec focus visible (accessibilité) -->
<button class="px-4 py-2 bg-blue-500 text-white rounded
               focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
  Accessible
</button>

<!-- Container qui met en évidence quand un enfant a le focus -->
<div class="border border-gray-300 rounded-lg focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-200 transition-shadow">
  <input class="px-4 py-2 outline-none rounded-lg w-full" placeholder="Chercher...">
</div>
"""

"""
ACTIVE
"""
"""
<!-- ─── EFFET D'APPUI ─── -->
<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700
               transform active:scale-95
               text-white px-4 py-2 rounded-lg transition-all duration-75">
  Appuyer ici
</button>
"""

"""
DISABLED
"""
"""
<!-- ─── ÉTATS DÉSACTIVÉS ─── -->

<!-- Bouton désactivé avec style -->
<button
  class="px-4 py-2 rounded-lg font-medium
         bg-blue-600 text-white
         disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-blue-600"
  disabled
>
  Soumettre
</button>

<!-- Input désactivé -->
<input
  class="border rounded-lg px-4 py-2 bg-gray-50
         disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed"
  disabled
  value="Non modifiable"
>
"""

"""
CHECKED (pour switches et checkboxes stylisées)
"""
"""
<!-- ─── TOGGLE SWITCH ─── -->
<label class="flex items-center cursor-pointer">
  <!-- L'input caché -->
  <input type="checkbox" class="sr-only peer" id="toggle">

  <!-- Le visuel du toggle -->
  <div class="w-11 h-6 bg-gray-300 rounded-full
              peer peer-checked:bg-blue-600
              peer-focus:ring-2 peer-focus:ring-blue-300
              transition-colors duration-200
              after:content-[''] after:absolute after:top-0.5 after:left-0.5
              after:bg-white after:rounded-full after:h-5 after:w-5
              after:transition-transform after:duration-200
              peer-checked:after:translate-x-5
              relative">
  </div>

  <span class="ml-3 text-gray-700 font-medium">Notifications</span>
</label>
"""


# ----------------------------------------------------------------------------
# [FAMILY] GROUP (Styler l'enfant selon l'état du parent)
# ----------------------------------------------------------------------------

"""
[IDEE] group = Super-pouvoir de Tailwind !

PROBLÈME : Changer l'enfant au hover du PARENT ?

SOLUTION : Mettre group sur le parent, group-hover: sur l'enfant
"""

"""
<!-- ─── CARD AVEC ANIMATIONS SUR HOVER ─── -->
<div class="group bg-white rounded-xl shadow hover:shadow-xl transition-all duration-300 overflow-hidden cursor-pointer">

  <!-- Image qui zoom au hover de la card -->
  <div class="overflow-hidden h-48">
    <img class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-300"
         src="image.jpg">
  </div>

  <!-- Contenu -->
  <div class="p-6">
    <!-- Titre qui change couleur au hover de la card -->
    <h3 class="text-xl font-bold text-gray-900 group-hover:text-blue-600 transition-colors">
      Titre de la carte
    </h3>

    <!-- Texte qui apparaît au hover -->
    <p class="text-gray-600 mt-2">Description de base...</p>

    <!-- Bouton caché qui apparaît au hover -->
    <button class="mt-4 w-full bg-blue-600 text-white py-2 rounded-lg
                   opacity-0 group-hover:opacity-100
                   transform translate-y-2 group-hover:translate-y-0
                   transition-all duration-200">
      En savoir plus
    </button>
  </div>
</div>

<!-- ─── MENU NAV AVEC DROPDOWN ─── -->
<div class="relative group">
  <button class="flex items-center gap-1 text-gray-600 group-hover:text-blue-600 transition-colors">
    Produits
    <!-- Icône qui tourne au hover -->
    <svg class="w-4 h-4 transform group-hover:rotate-180 transition-transform duration-200">
      <!-- chevron down icon -->
    </svg>
  </button>

  <!-- Dropdown caché par défaut -->
  <div class="absolute top-full left-0 mt-2 w-48
              bg-white rounded-xl shadow-xl border border-gray-100
              opacity-0 invisible group-hover:opacity-100 group-hover:visible
              translate-y-2 group-hover:translate-y-0
              transition-all duration-200 z-50">
    <div class="p-2">
      <a class="block px-4 py-2 text-gray-700 hover:bg-gray-50 rounded-lg">Fonctionnalité 1</a>
      <a class="block px-4 py-2 text-gray-700 hover:bg-gray-50 rounded-lg">Fonctionnalité 2</a>
    </div>
  </div>
</div>
"""


# ----------------------------------------------------------------------------
# [UTILISATEURS] PEER (Styler selon l'état d'un frère)
# ----------------------------------------------------------------------------

"""
[IDEE] peer = Styler selon l'état d'un FRÈRE (sibling)

USAGE CLASSIQUE : Label qui change quand l'input est focus/invalid
"""

"""
<!-- ─── FLOATING LABEL EFFECT ─── -->
<div class="relative mt-4">
  <!-- Input avec class peer -->
  <input
    type="text"
    id="email"
    placeholder=" "
    class="peer w-full px-4 pt-6 pb-2 border border-gray-300 rounded-lg
           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
  >

  <!-- Label qui "flotte" quand l'input est focus ou rempli -->
  <label
    for="email"
    class="absolute top-4 left-4 text-gray-400 text-base
           peer-focus:top-2 peer-focus:text-xs peer-focus:text-blue-600
           peer-[:not(:placeholder-shown)]:top-2 peer-[:not(:placeholder-shown)]:text-xs
           transition-all duration-200 cursor-text"
  >
    Adresse e-mail
  </label>
</div>

<!-- ─── VALIDATION EN TEMPS RÉEL ─── -->
<div>
  <input
    type="email"
    class="peer w-full px-4 py-2 border rounded-lg
           border-gray-300 invalid:border-red-500 valid:border-green-500
           focus:outline-none"
    placeholder="email@exemple.com"
    required
  >
  <!-- Message d'erreur visible seulement si invalid ET pas vide -->
  <p class="mt-1 text-sm text-red-600 hidden peer-[&:not(:placeholder-shown)]:peer-invalid:block">
    [ATTENTION] Email invalide
  </p>
  <p class="mt-1 text-sm text-green-600 hidden peer-[&:not(:placeholder-shown)]:peer-valid:block">
    [OK] Email valide
  </p>
</div>
"""


# ----------------------------------------------------------------------------
# [NOMBRE] FIRST, LAST, ODD, EVEN
# ----------------------------------------------------------------------------

"""
CIBLER LES ÉLÉMENTS PAR POSITION
"""

"""
<!-- ─── TABLE AVEC LIGNES ALTERNÉES ─── -->
<table class="w-full">
  <tbody>
    <tr class="odd:bg-white even:bg-gray-50 hover:bg-blue-50 transition-colors">
      <td class="px-4 py-3 first:font-bold">Alice</td>
      <td class="px-4 py-3">Développeuse</td>
      <td class="px-4 py-3 last:text-right">€ 75,000</td>
    </tr>
    <tr class="odd:bg-white even:bg-gray-50 hover:bg-blue-50 transition-colors">
      <td class="px-4 py-3 first:font-bold">Bob</td>
      <td class="px-4 py-3">Designer</td>
      <td class="px-4 py-3 last:text-right">€ 65,000</td>
    </tr>
  </tbody>
</table>

<!-- ─── LISTE SANS SÉPARATEUR EN DERNIER ─── -->
<ul>
  <li class="py-4 border-b border-gray-200 last:border-b-0">
    Élément 1
  </li>
  <li class="py-4 border-b border-gray-200 last:border-b-0">
    Élément 2
  </li>
  <li class="py-4 border-b border-gray-200 last:border-b-0">
    Élément 3 (sans bordure en bas)
  </li>
</ul>
"""


# ============================================================================
# [GUIDE] CHAPITRE 16 : CUSTOMISATION (tailwind.config.js)
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Étendre le thème par défaut
[OK] Ajouter couleurs, polices, espaces personnalisés
[OK] Créer des breakpoints custom
[OK] Ajouter des plugins
[OK] CSS variables avec Tailwind
"""


# ----------------------------------------------------------------------------
# [DESIGN] PERSONNALISER LE THÈME
# ----------------------------------------------------------------------------

# tailwind.config.js
"""
module.exports = {
  darkMode: 'class',
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],

  theme: {
    // ─── REMPLACER entièrement (attention !) ─────────────────────────────
    // screens: { mobile: '640px' },  // Remplace TOUT les breakpoints

    // ─── ÉTENDRE (recommandé) ─────────────────────────────────────────────
    extend: {

      // ── COULEURS PERSONNALISÉES ──────────────────────────────────────────
      colors: {

        // Couleur simple
        brand: '#7c3aed',

        // Couleur avec nuances complètes
        primary: {
          50:  '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e40af',
          900: '#1e3a8a',
          950: '#172554',
        },

        // Couleurs sémantiques
        success: {
          light: '#d1fae5',
          DEFAULT: '#10b981',
          dark: '#065f46',
        },
        danger: {
          light: '#fee2e2',
          DEFAULT: '#ef4444',
          dark: '#991b1b',
        },

        // Support CSS variables (dark mode flexible)
        surface: 'rgb(var(--color-surface) / <alpha-value>)',
        'on-surface': 'rgb(var(--color-on-surface) / <alpha-value>)',
      },

      // ── POLICES ──────────────────────────────────────────────────────────
      fontFamily: {
        sans:    ['Inter', 'system-ui', 'sans-serif'],
        serif:   ['Playfair Display', 'Georgia', 'serif'],
        mono:    ['JetBrains Mono', 'Courier New', 'monospace'],
        display: ['Space Grotesk', 'sans-serif'],
      },

      // ── TAILLES DE TEXTE ─────────────────────────────────────────────────
      fontSize: {
        'xxs': ['0.625rem', { lineHeight: '0.875rem' }],  // 10px
        '4.5xl': ['2.5rem', { lineHeight: '3rem' }],
      },

      // ── SPACING ──────────────────────────────────────────────────────────
      spacing: {
        '13': '3.25rem',    // 52px
        '15': '3.75rem',    // 60px
        '18': '4.5rem',     // 72px
        '128': '32rem',     // 512px
        '144': '36rem',     // 576px
        'screen-10': '10vw',
      },

      // ── BORDER RADIUS ────────────────────────────────────────────────────
      borderRadius: {
        '4xl': '2rem',
        '5xl': '2.5rem',
      },

      // ── OMBRES ───────────────────────────────────────────────────────────
      boxShadow: {
        'card': '0 1px 3px 0 rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.07)',
        'card-hover': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
        'glow-blue': '0 0 20px rgb(59 130 246 / 0.5)',
        'inner-sm': 'inset 0 1px 2px 0 rgb(0 0 0 / 0.05)',
      },

      // ── BREAKPOINTS PERSONNALISÉS ─────────────────────────────────────────
      screens: {
        'xs': '480px',        // Nouveau breakpoint
        '3xl': '1920px',      // Très grand écran
      },

      // ── ANIMATIONS ───────────────────────────────────────────────────────
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in-out',
        'slide-up': 'slideUp 0.3s ease-out',
        'slide-down': 'slideDown 0.3s ease-out',
        'scale-in': 'scaleIn 0.2s ease-out',
        'wiggle': 'wiggle 1s ease-in-out infinite',
      },

      // ── KEYFRAMES ────────────────────────────────────────────────────────
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(20px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        slideDown: {
          '0%': { transform: 'translateY(-20px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        scaleIn: {
          '0%': { transform: 'scale(0.95)', opacity: '0' },
          '100%': { transform: 'scale(1)', opacity: '1' },
        },
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
      },

      // ── Z-INDEX ──────────────────────────────────────────────────────────
      zIndex: {
        '60': '60',
        '70': '70',
        '80': '80',
        '90': '90',
        '100': '100',
      },

      // ── HAUTEUR ──────────────────────────────────────────────────────────
      height: {
        'screen-90': '90vh',
        'screen-80': '80vh',
      },

      // ── TRANSITIONS ──────────────────────────────────────────────────────
      transitionDuration: {
        '400': '400ms',
        '600': '600ms',
        '800': '800ms',
        '900': '900ms',
      },
    },
  },

  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
}
"""

"""
UTILISATION DES VALEURS CUSTOM :
  bg-primary-600         -> background-color: #2563eb
  text-brand             -> color: #7c3aed
  font-display           -> font-family: 'Space Grotesk'
  p-18                   -> padding: 4.5rem
  shadow-card            -> box-shadow: ...
  animate-fade-in        -> animation: fadeIn 0.5s ease-in-out
  xs:text-sm             -> text-sm sur ≥ 480px
"""


# ----------------------------------------------------------------------------
# [DOCS] RÉCAPITULATIF PARTIE 4
# ----------------------------------------------------------------------------

"""
[OK] CE QUE VOUS AVEZ APPRIS

Chapitre 13 : Responsive Design
[OK] Breakpoints sm/md/lg/xl/2xl
[OK] Philosophie mobile-first
[OK] Grilles responsive (grid-cols-1 md:grid-cols-3)
[OK] Layouts responsive (flex-col md:flex-row)
[OK] Texte responsive (text-3xl md:text-5xl lg:text-7xl)
[OK] Affichage conditionnel (hidden md:block)
[OK] Container responsive (max-w-7xl mx-auto px-4 sm:px-6 lg:px-8)

Chapitre 14 : Dark Mode
[OK] darkMode: 'class' vs 'media'
[OK] Préfixe dark: sur toutes les classes
[OK] Palette dark mode (gray-900, gray-800...)
[OK] Toggle dark mode avec JavaScript

Chapitre 15 : Pseudo-classes
[OK] hover:, focus:, active:, visited:
[OK] focus-within:, focus-visible:
[OK] disabled:, checked:, required:, valid:, invalid:
[OK] first:, last:, odd:, even:
[OK] group / group-hover (enfant réagit au hover du parent)
[OK] peer / peer-focus (label flottant)

Chapitre 16 : Customisation
[OK] theme.extend (ajouter sans remplacer)
[OK] Couleurs personnalisées (simples et avec nuances)
[OK] Polices custom
[OK] Spacing, border-radius, shadows
[OK] Breakpoints custom
[OK] Animations et keyframes

[OBJECTIF] PROCHAINE ÉTAPE : PARTIE 5 - Avancé et Production
"""

# ============================================================================
# [LIVRE] TAILWIND CSS - PARTIE 5 : AVANCÉ ET PRODUCTION
# ============================================================================
#
# [OBJECTIF] CETTE PARTIE COUVRE :
# - Chapitre 17 : Composants Réutilisables (@apply)
# - Chapitre 18 : Tailwind avec React/Vue/HTML
# - Chapitre 19 : Optimisation et Production
# - Chapitre 20 : Best Practices, Patterns et Composants Complets
#
# [TEMPS] TEMPS : ~5-6 heures
# [DOCS] PRÉREQUIS : Parties 1, 2, 3 et 4 complétées
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 17 : COMPOSANTS RÉUTILISABLES (@apply)
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Quand utiliser @apply (et quand ne pas l'utiliser)
[OK] Créer des composants CSS avec @apply
[OK] Layer (base, components, utilities)
[OK] CSS variables + Tailwind
"""


# ----------------------------------------------------------------------------
# [REFLEXION] LE PROBLÈME DE LA RÉPÉTITION
# ----------------------------------------------------------------------------

"""
PROBLÈME RÉEL

Vous avez partout ce bouton :
"""

"""
<!-- Répété 50x dans l'app -->
<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-4 py-2
               rounded-lg transition-colors duration-200 focus:outline-none
               focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  Bouton 1
</button>

<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-4 py-2
               rounded-lg transition-colors duration-200 focus:outline-none
               focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  Bouton 2
</button>
"""

"""
[X] PROBLÈMES :
1. Répétition longue
2. Si on change -> modifier 50 endroits
3. HTML verbeux

[OK] SOLUTIONS :
A) @apply dans CSS (petites apps HTML statiques)
B) Composant React/Vue (apps modernes) <- MEILLEURE SOLUTION
"""


# ----------------------------------------------------------------------------
# [DESIGN] @APPLY
# ----------------------------------------------------------------------------

"""
SYNTAXE DANS VOTRE FICHIER CSS
"""

# src/input.css
"""
@tailwind base;
@tailwind components;
@tailwind utilities;


/* ─── COMPOSANTS (@layer components) ──────────────────────────────────── */

@layer components {

  /* Bouton principal */
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2
           font-semibold rounded-lg transition-all duration-200
           focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .btn-primary {
    @apply btn bg-blue-600 hover:bg-blue-700 text-white
           focus:ring-blue-500;
  }

  .btn-secondary {
    @apply btn border border-gray-300 hover:bg-gray-50 text-gray-700
           focus:ring-gray-400;
  }

  .btn-danger {
    @apply btn bg-red-600 hover:bg-red-700 text-white
           focus:ring-red-500;
  }

  .btn-ghost {
    @apply btn hover:bg-gray-100 text-gray-600
           focus:ring-gray-400;
  }

  /* Tailles de boutons */
  .btn-sm {
    @apply px-3 py-1.5 text-sm rounded-md;
  }

  .btn-lg {
    @apply px-6 py-3 text-lg rounded-xl;
  }

  /* Input standard */
  .input {
    @apply w-full px-4 py-2.5 border border-gray-300 rounded-lg
           bg-white text-gray-900 placeholder-gray-400
           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
           transition-shadow duration-200
           disabled:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50;
  }

  .input-error {
    @apply input border-red-500 bg-red-50 text-red-900 placeholder-red-300
           focus:ring-red-300;
  }

  /* Card */
  .card {
    @apply bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden;
  }

  .card-body {
    @apply p-6;
  }

  .card-hover {
    @apply card hover:shadow-md transition-shadow duration-200 cursor-pointer;
  }

  /* Badge */
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full
           text-xs font-medium;
  }

  .badge-blue   { @apply badge bg-blue-100 text-blue-800; }
  .badge-green  { @apply badge bg-green-100 text-green-800; }
  .badge-red    { @apply badge bg-red-100 text-red-800; }
  .badge-yellow { @apply badge bg-yellow-100 text-yellow-800; }
  .badge-gray   { @apply badge bg-gray-100 text-gray-800; }

  /* Container */
  .container-app {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* Section */
  .section {
    @apply py-12 md:py-16 lg:py-24;
  }

}


/* ─── UTILITAIRES PERSONNALISÉS (@layer utilities) ─────────────────────── */

@layer utilities {

  /* Animation d'entrée */
  .animate-enter {
    @apply animate-fade-in;
  }

  /* Texte gradient */
  .text-gradient {
    @apply bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent;
  }

  /* Centre parfait (position absolute) */
  .center-absolute {
    @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
  }

  /* Scrollbar cachée */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Texte ne peut pas être sélectionné */
  .select-none-important {
    -webkit-user-select: none !important;
    user-select: none !important;
  }

}


/* ─── BASE STYLES (@layer base) ────────────────────────────────────────── */

@layer base {

  /* Focus visible styles globaux */
  * {
    @apply focus-visible:outline-2 focus-visible:outline-blue-500;
  }

  /* Smooth scroll */
  html {
    @apply scroll-smooth;
  }

  /* Typography par défaut */
  body {
    @apply text-gray-900 bg-white antialiased;
  }

  h1 { @apply text-4xl font-bold tracking-tight; }
  h2 { @apply text-3xl font-bold; }
  h3 { @apply text-2xl font-semibold; }
  h4 { @apply text-xl font-semibold; }
  h5 { @apply text-lg font-medium; }
  h6 { @apply text-base font-medium; }

  a {
    @apply text-blue-600 hover:text-blue-800 transition-colors;
  }

}
"""

"""
UTILISATION DANS HTML :
"""

"""
<!-- Avant @apply -->
<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-4 py-2 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  Envoyer
</button>

<!-- Après @apply -->
<button class="btn-primary">Envoyer</button>
<button class="btn-secondary">Annuler</button>
<button class="btn-danger btn-sm">Supprimer</button>

<input class="input" type="email" placeholder="Email">
<input class="input-error" type="email" placeholder="Email invalide">

<div class="card">
  <div class="card-body">
    <h3>Titre</h3>
  </div>
</div>

<span class="badge-green">Actif</span>
<span class="badge-red">Erreur</span>
"""

"""
[IDEE] QUAND UTILISER @APPLY ?

[OK] Projets HTML/CSS statiques (sans framework JS)
[OK] Classes répétées PARTOUT dans un grand projet
[OK] Styles de base des éléments (h1, h2, etc.)
[OK] Design system partagé entre plusieurs projets

[X] NE PAS UTILISER QUAND :
-> Vous utilisez React/Vue/Svelte
-> Vous pouvez créer un composant à la place
-> La classe n'est utilisée que 2-3 fois
-> Ça va à l'encontre de la philosophie utility-first
"""


# ============================================================================
# [GUIDE] CHAPITRE 18 : TAILWIND AVEC REACT, VUE ET HTML
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Patterns React avec Tailwind
[OK] Composants dynamiques avec props
[OK] cn() / clsx pour gérer les classes conditionnelles
[OK] Tailwind avec Vue
[OK] Tailwind avec Next.js
"""


# ----------------------------------------------------------------------------
# [SCIENCE] TAILWIND AVEC REACT
# ----------------------------------------------------------------------------

"""
INSTALLATION AVEC CREATE REACT APP
"""

"""
npx create-react-app mon-app
cd mon-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# tailwind.config.js :
content: ["./src/**/*.{js,jsx,ts,tsx}"]

# Dans src/index.css :
@tailwind base;
@tailwind components;
@tailwind utilities;

npm start
"""

"""
INSTALLATION AVEC VITE + REACT
"""

"""
npm create vite@latest mon-app -- --template react
cd mon-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# tailwind.config.js :
content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"]

# Dans src/index.css :
@tailwind base;
@tailwind components;
@tailwind utilities;

npm run dev
"""


# ----------------------------------------------------------------------------
# [MODULE] COMPOSANTS REACT AVEC TAILWIND
# ----------------------------------------------------------------------------

"""
COMPOSANT BOUTON RÉUTILISABLE
"""

# src/components/Button.jsx
"""
// ─── SIMPLE ─────────────────────────────────────────────────────────────────

export function Button({ children, variant = 'primary', size = 'md', disabled, onClick }) {

  const base = "inline-flex items-center justify-center font-semibold rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2";

  const variants = {
    primary:   "bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500",
    secondary: "border border-gray-300 hover:bg-gray-50 text-gray-700 focus:ring-gray-400",
    danger:    "bg-red-600 hover:bg-red-700 text-white focus:ring-red-500",
    ghost:     "hover:bg-gray-100 text-gray-600 focus:ring-gray-400",
  };

  const sizes = {
    sm: "px-3 py-1.5 text-sm",
    md: "px-4 py-2",
    lg: "px-6 py-3 text-lg",
  };

  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`${base} ${variants[variant]} ${sizes[size]} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
    >
      {children}
    </button>
  );
}

// Utilisation :
<Button>Primaire</Button>
<Button variant="secondary">Secondaire</Button>
<Button variant="danger" size="sm">Supprimer</Button>
<Button disabled>Désactivé</Button>
"""


"""
AVEC CLSX (GESTION PROPRE DES CLASSES)
"""

"""
# Installation :
npm install clsx tailwind-merge

# src/lib/utils.js
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

// Fusionner classes Tailwind sans conflits
export function cn(...inputs) {
  return twMerge(clsx(inputs));
}
"""

# src/components/Button.jsx avec cn()
"""
import { cn } from '@/lib/utils';

export function Button({
  children,
  variant = 'primary',
  size = 'md',
  className,
  disabled,
  loading,
  leftIcon,
  rightIcon,
  ...props
}) {

  return (
    <button
      disabled={disabled || loading}
      className={cn(
        // Base
        "inline-flex items-center justify-center gap-2",
        "font-semibold rounded-lg",
        "transition-all duration-200",
        "focus:outline-none focus:ring-2 focus:ring-offset-2",

        // Variantes
        variant === 'primary'   && "bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500",
        variant === 'secondary' && "border border-gray-300 hover:bg-gray-50 text-gray-700 focus:ring-gray-400",
        variant === 'danger'    && "bg-red-600 hover:bg-red-700 text-white focus:ring-red-500",
        variant === 'ghost'     && "hover:bg-gray-100 text-gray-700 focus:ring-gray-400",

        // Tailles
        size === 'sm' && "px-3 py-1.5 text-sm",
        size === 'md' && "px-4 py-2 text-sm",
        size === 'lg' && "px-6 py-3 text-base",

        // États
        (disabled || loading) && "opacity-50 cursor-not-allowed",
        loading && "cursor-wait",

        // Classes custom
        className
      )}
      {...props}
    >
      {loading && (
        <span className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
      )}
      {leftIcon && !loading && <span>{leftIcon}</span>}
      {children}
      {rightIcon && <span>{rightIcon}</span>}
    </button>
  );
}

// Utilisation :
<Button>Envoyer</Button>
<Button variant="danger" size="sm">Supprimer</Button>
<Button loading={isSubmitting}>Chargement...</Button>
<Button className="w-full">Pleine largeur</Button>
"""


"""
COMPOSANT CARD REACT
"""

# src/components/Card.jsx
"""
import { cn } from '@/lib/utils';

export function Card({ children, className, hover, ...props }) {
  return (
    <div
      className={cn(
        "bg-white rounded-xl border border-gray-200 overflow-hidden",
        hover && "hover:shadow-md transition-shadow duration-200 cursor-pointer",
        className
      )}
      {...props}
    >
      {children}
    </div>
  );
}

Card.Header = function CardHeader({ children, className }) {
  return (
    <div className={cn("px-6 py-4 border-b border-gray-200", className)}>
      {children}
    </div>
  );
};

Card.Body = function CardBody({ children, className }) {
  return (
    <div className={cn("p-6", className)}>
      {children}
    </div>
  );
};

Card.Footer = function CardFooter({ children, className }) {
  return (
    <div className={cn("px-6 py-4 bg-gray-50 border-t border-gray-200", className)}>
      {children}
    </div>
  );
};

// Utilisation :
<Card>
  <Card.Header>
    <h2 className="font-bold text-gray-900">Titre</h2>
  </Card.Header>
  <Card.Body>
    <p>Contenu</p>
  </Card.Body>
  <Card.Footer>
    <Button>Action</Button>
  </Card.Footer>
</Card>
"""


"""
COMPOSANT MODAL REACT
"""

# src/components/Modal.jsx
"""
import { useEffect } from 'react';

export function Modal({ isOpen, onClose, title, children, size = 'md' }) {

  // Fermer avec Escape
  useEffect(() => {
    const handleKey = (e) => {
      if (e.key === 'Escape') onClose();
    };
    if (isOpen) document.addEventListener('keydown', handleKey);
    return () => document.removeEventListener('keydown', handleKey);
  }, [isOpen, onClose]);

  // Bloquer scroll
  useEffect(() => {
    if (isOpen) document.body.style.overflow = 'hidden';
    else document.body.style.overflow = '';
    return () => { document.body.style.overflow = ''; };
  }, [isOpen]);

  if (!isOpen) return null;

  const sizes = {
    sm: 'max-w-md',
    md: 'max-w-lg',
    lg: 'max-w-2xl',
    xl: 'max-w-4xl',
    full: 'max-w-full mx-4',
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">

      {/* Backdrop */}
      <div
        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
        onClick={onClose}
      />

      {/* Modal */}
      <div className={`relative w-full ${sizes[size]} bg-white rounded-2xl shadow-2xl
                       animate-scale-in`}>

        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
          <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
          <button
            onClick={onClose}
            className="p-1 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors"
          >
            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12"/>
            </svg>
          </button>
        </div>

        {/* Body */}
        <div className="p-6">
          {children}
        </div>

      </div>
    </div>
  );
}
"""


# ============================================================================
# [GUIDE] CHAPITRE 19 : OPTIMISATION ET PRODUCTION
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Purge CSS (enlever classes inutilisées)
[OK] Minification
[OK] Bundle CSS de production
[OK] Performances
[OK] Safelist (garder des classes dynamiques)
"""


# ----------------------------------------------------------------------------
# [OUTIL] BUILD DE PRODUCTION
# ----------------------------------------------------------------------------

"""
COMMANDES DE BUILD
"""

# CSS pur (CLI)
"""
# Développement (avec watch)
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

# Production (minifié + purge)
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify
"""

# Via npm scripts
"""
# package.json
{
  "scripts": {
    "build:css": "tailwindcss -i ./src/input.css -o ./dist/output.css --minify",
    "watch:css": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch",
    "build": "vite build",
    "dev": "vite"
  }
}
"""


# ----------------------------------------------------------------------------
# [SECURITE] SAFELIST (GARDER DES CLASSES DYNAMIQUES)
# ----------------------------------------------------------------------------

"""
PROBLÈME : Classes générées dynamiquement

Tailwind ne peut pas scanner les classes créées en JavaScript !
"""

# [X] MAUVAIS (Tailwind ne voit pas la classe complète)
"""
// React
const color = 'blue';
<div className={`bg-${color}-500`}>  // bg-blue-500 pas dans le scan !
"""

# [OK] SOLUTION 1 : Classes complètes
"""
const colorMap = {
  blue: 'bg-blue-500',
  red: 'bg-red-500',
  green: 'bg-green-500',
};
<div className={colorMap[color]}>
"""

# [OK] SOLUTION 2 : Safelist dans tailwind.config.js
"""
// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,jsx}'],

  safelist: [
    // Classes exactes
    'bg-blue-500',
    'bg-red-500',
    'bg-green-500',

    // Pattern regex
    {
      pattern: /bg-(red|green|blue|yellow|purple)-(100|500|700)/,
    },
    {
      pattern: /text-(red|green|blue|yellow|purple)-(100|500|700)/,
      variants: ['hover', 'focus'],
    },
  ],
}
"""


# ----------------------------------------------------------------------------
# [GRAPHIQUE] TAILLE DU CSS
# ----------------------------------------------------------------------------

"""
TAILWIND V3 AVEC JIT (JUST-IN-TIME)

JIT = Génère SEULEMENT les classes utilisées en temps réel

Taille typique en production :
  Bootstrap    -> ~30-70 KB (même si on utilise 20%)
  Tailwind dev -> ~3-5 MB (toutes les classes)
  Tailwind prod-> ~5-20 KB (seulement ce qu'on utilise !)

C'est l'avantage principal de Tailwind !

VÉRIFIER LA TAILLE :
"""

# Analyser le CSS
"""
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

# Puis :
ls -la dist/output.css
# Ex: 8KB pour une app moyenne
"""


# ============================================================================
# [GUIDE] CHAPITRE 20 : BEST PRACTICES ET PATTERNS COMPLETS
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Patterns de layout courants
[OK] Composants UI complets
[OK] Design system avec Tailwind
[OK] Conventions d'organisation
[OK] Checklist de qualité
"""


# ----------------------------------------------------------------------------
# [CONSTRUCTION] PATTERNS DE LAYOUT
# ----------------------------------------------------------------------------

"""
PATTERN 1 : HOLY GRAIL LAYOUT
(Header + Sidebar + Main + Footer)
"""

"""
<div class="min-h-screen flex flex-col">

  <!-- Header -->
  <header class="h-16 bg-white border-b border-gray-200 flex items-center px-4 lg:px-8 shrink-0">
    <div class="flex items-center justify-between w-full max-w-7xl mx-auto">
      <span class="font-bold text-xl">Logo</span>
      <nav class="hidden md:flex space-x-6"><!-- liens --></nav>
      <button class="md:hidden">[TRIGRAM_FOR_HEAVEN]</button>
    </div>
  </header>

  <!-- Corps -->
  <div class="flex flex-1 overflow-hidden">

    <!-- Sidebar -->
    <aside class="hidden md:flex flex-col w-64 border-r border-gray-200 bg-gray-50 overflow-y-auto">
      <nav class="flex-1 p-4 space-y-1"><!-- navigation --></nav>
    </aside>

    <!-- Contenu principal -->
    <main class="flex-1 overflow-y-auto">
      <div class="max-w-4xl mx-auto p-4 lg:p-8">
        <!-- Contenu -->
      </div>
    </main>

  </div>

  <!-- Footer -->
  <footer class="h-12 bg-gray-900 text-gray-400 flex items-center justify-center text-sm shrink-0">
    © 2024 MyApp
  </footer>

</div>
"""

"""
PATTERN 2 : CENTRAGE PARFAIT
"""

"""
<!-- Méthode 1 : Flex (la meilleure) -->
<div class="min-h-screen flex items-center justify-center bg-gray-50">
  <div class="w-full max-w-md p-8 bg-white rounded-2xl shadow-lg">
    Contenu centré
  </div>
</div>

<!-- Méthode 2 : Absolute + transform -->
<div class="relative min-h-screen bg-gray-50">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
              w-full max-w-md p-8 bg-white rounded-2xl shadow-lg">
    Contenu centré
  </div>
</div>

<!-- Méthode 3 : Grid -->
<div class="min-h-screen grid place-items-center bg-gray-50">
  <div class="w-full max-w-md p-8 bg-white rounded-2xl shadow-lg">
    Contenu centré
  </div>
</div>
"""

"""
PATTERN 3 : CARD GRID RESPONSIVE
"""

"""
<!-- Auto-responsive sans media query -->
<div class="grid gap-6" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))">
  {posts.map(post => (
    <article class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
      <!-- Image -->
      <div class="aspect-[16/9] overflow-hidden">
        <img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
             src={post.image} alt={post.title}>
      </div>
      <!-- Contenu -->
      <div class="p-5">
        <div class="flex items-center gap-2 mb-3">
          <span class="text-xs font-medium text-blue-600 bg-blue-50 px-2 py-1 rounded-full">
            {post.category}
          </span>
          <span class="text-xs text-gray-400">{post.date}</span>
        </div>
        <h2 class="font-bold text-gray-900 mb-2 line-clamp-2 group-hover:text-blue-600 transition-colors">
          {post.title}
        </h2>
        <p class="text-gray-600 text-sm line-clamp-3">{post.excerpt}</p>
        <div class="flex items-center justify-between mt-4">
          <div class="flex items-center gap-2">
            <img class="w-6 h-6 rounded-full object-cover" src={post.author.avatar}>
            <span class="text-xs text-gray-500">{post.author.name}</span>
          </div>
          <span class="text-xs text-gray-400">{post.readTime} min</span>
        </div>
      </div>
    </article>
  ))}
</div>
"""


# ----------------------------------------------------------------------------
# [DESIGN] DESIGN SYSTEM COMPLET
# ----------------------------------------------------------------------------

"""
COMPOSANT COMPLET : PAGE DE PROFIL UTILISATEUR
"""

"""
<!-- Utilise flex, grid, spacing, couleurs, dark mode, responsive -->

<div class="min-h-screen bg-gray-50 dark:bg-gray-900">

  <!-- Cover photo -->
  <div class="h-48 md:h-64 bg-gradient-to-r from-blue-600 to-purple-600 relative">
    <button class="absolute bottom-4 right-4 bg-black/30 hover:bg-black/50 text-white text-sm px-3 py-1.5 rounded-lg transition-colors backdrop-blur-sm">
      Modifier la couverture
    </button>
  </div>

  <!-- Profile header -->
  <div class="max-w-5xl mx-auto px-4 sm:px-6">

    <!-- Avatar + actions -->
    <div class="flex items-end justify-between -mt-16 md:-mt-20 mb-4">
      <div class="relative">
        <img class="w-28 h-28 md:w-36 md:h-36 rounded-full border-4 border-white dark:border-gray-900 object-cover shadow-lg"
             src="avatar.jpg" alt="Profil">
        <button class="absolute bottom-1 right-1 w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white shadow-lg hover:bg-blue-700 transition-colors">
          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
          </svg>
        </button>
      </div>
      <div class="flex gap-2 pb-4">
        <button class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl font-medium text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
          Modifier le profil
        </button>
        <button class="px-4 py-2 bg-blue-600 rounded-xl font-medium text-sm text-white hover:bg-blue-700 transition-colors">
          + Suivre
        </button>
      </div>
    </div>

    <!-- Infos -->
    <div class="mb-6">
      <div class="flex items-center gap-3 flex-wrap">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Alice Martin</h1>
        <span class="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs font-medium px-2.5 py-0.5 rounded-full">
          Pro
        </span>
      </div>
      <p class="text-gray-500 dark:text-gray-400 mt-1">@alicemartin</p>
      <p class="text-gray-700 dark:text-gray-300 mt-3 max-w-xl">
        Développeuse full stack passionnée. [RAPIDE] Je partage mes apprentissages et créations.
        Toujours en train d'apprendre quelque chose de nouveau.
      </p>

      <!-- Tags/liens -->
      <div class="flex flex-wrap items-center gap-4 mt-3 text-sm text-gray-500 dark:text-gray-400">
        <span class="flex items-center gap-1">[IMPORTANT] Paris, France</span>
        <a href="#" class="flex items-center gap-1 text-blue-600 hover:underline">[LIEN] alicemartin.dev</a>
        <span class="flex items-center gap-1">[CALENDRIER] Rejoint en Janvier 2022</span>
      </div>
    </div>

    <!-- Stats -->
    <div class="flex gap-6 py-4 border-t border-b border-gray-200 dark:border-gray-700 mb-6">
      <div class="text-center">
        <span class="text-xl font-bold text-gray-900 dark:text-white">247</span>
        <p class="text-sm text-gray-500">Posts</p>
      </div>
      <div class="text-center">
        <span class="text-xl font-bold text-gray-900 dark:text-white">12.4K</span>
        <p class="text-sm text-gray-500">Abonnés</p>
      </div>
      <div class="text-center">
        <span class="text-xl font-bold text-gray-900 dark:text-white">892</span>
        <p class="text-sm text-gray-500">Abonnements</p>
      </div>
    </div>

    <!-- Onglets -->
    <div class="flex border-b border-gray-200 dark:border-gray-700 mb-6">
      <button class="px-4 py-3 text-sm font-medium text-blue-600 border-b-2 border-blue-600">
        Posts
      </button>
      <button class="px-4 py-3 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 border-b-2 border-transparent hover:border-gray-300">
        Médias
      </button>
      <button class="px-4 py-3 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 border-b-2 border-transparent hover:border-gray-300">
        Likes
      </button>
    </div>

    <!-- Grille de contenu -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 pb-8">

      <!-- Contenu principal -->
      <div class="lg:col-span-2 space-y-4">
        <!-- Posts ici -->
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <p class="text-gray-700 dark:text-gray-300">Premier post...</p>
        </div>
      </div>

      <!-- Sidebar droite -->
      <div class="space-y-4">
        <!-- Suggestions -->
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
          <h3 class="font-semibold text-gray-900 dark:text-white mb-4">À suivre</h3>
          <!-- liste d'utilisateurs suggérés -->
        </div>
      </div>

    </div>

  </div>
</div>
"""


# ----------------------------------------------------------------------------
# [OK] CHECKLIST DE QUALITÉ TAILWIND
# ----------------------------------------------------------------------------

"""
AVANT CHAQUE COMPOSANT :
[ ] Mobile-first: commencer par le mobile
[ ] Couleurs sémantiques (gray-900 pour texte principal, gray-600 pour secondaire)
[ ] Espacement cohérent (utiliser l'échelle Tailwind)
[ ] Transitions sur les éléments interactifs (transition-colors/all duration-200)
[ ] États hover, focus, active sur éléments cliquables
[ ] dark: sur chaque couleur importante (si dark mode)
[ ] Breakpoints sur les layouts (sm: md: lg:)
[ ] cursor-pointer sur les éléments cliquables
[ ] focus:outline-none + focus:ring sur les inputs
[ ] disabled:opacity-50 disabled:cursor-not-allowed sur boutons
[ ] overflow-hidden sur les images avec coins arrondis

ACCESSIBILITÉ :
[ ] sr-only pour les textes screen-reader seulement
[ ] focus-visible: pour le focus clavier
[ ] role et aria-* si nécessaire (mais Tailwind ne remplace pas ça)
[ ] Contraste suffisant (text-gray-900 sur bg-white)

PERFORMANCE :
[ ] Pas de classes générées dynamiquement (utiliser safelist)
[ ] content: correct dans tailwind.config.js
[ ] Build de production minifié

ORGANISATION :
[ ] Classes dans un ordre logique : layout -> box model -> typography -> colors -> autres
[ ] Commentaires HTML sur les sections complexes
[ ] Composants extraits si utilisés 3+ fois
"""


# ----------------------------------------------------------------------------
# [DOCS] RÉCAPITULATIF PARTIE 5 + GUIDE COMPLET
# ----------------------------------------------------------------------------

"""
[OK] CE QUE VOUS AVEZ APPRIS EN PARTIE 5

Chapitre 17 : @apply
[OK] Quand utiliser @apply (HTML statique, classes très répétées)
[OK] @layer base, components, utilities
[OK] Composants CSS : btn, card, input, badge
[OK] Utilisation des composants dans HTML

Chapitre 18 : React/Vue/HTML
[OK] Installation avec Vite + React
[OK] Composant Button avec variantes
[OK] clsx + tailwind-merge (cn())
[OK] Composant Card composable
[OK] Composant Modal complet

Chapitre 19 : Production
[OK] Build minifié
[OK] Safelist pour classes dynamiques
[OK] Taille CSS finale (5-20KB !)

Chapitre 20 : Best Practices
[OK] Holy Grail Layout
[OK] Centrage parfait (3 méthodes)
[OK] Card grid auto-responsive
[OK] Page profil complète (dark mode, responsive, tous les concepts)
[OK] Checklist qualité


═══════════════════════════════════════════════════════════════════════════
[BRAVO] FÉLICITATIONS ! GUIDE TAILWIND CSS COMPLET TERMINÉ !
═══════════════════════════════════════════════════════════════════════════

VOUS MAÎTRISEZ MAINTENANT :

[OK] Fondamentaux (spacing, sizing, typography, colors)
[OK] Layout (Flexbox, Grid, Position)
[OK] Visuels (backgrounds, borders, shadows, filters)
[OK] Interactivité (transitions, animations)
[OK] Formulaires (inputs, états, validation)
[OK] Responsive Design (mobile-first, breakpoints)
[OK] Dark Mode
[OK] Pseudo-classes (hover, focus, group, peer)
[OK] Customisation (tailwind.config.js)
[OK] @apply et design system
[OK] React avec Tailwind
[OK] Production et optimisation
[OK] Patterns et composants complets

CE QUE VOUS POUVEZ MAINTENANT CONSTRUIRE :
[OK] Landing pages professionnelles
[OK] Dashboards complets
[OK] Applications React/Vue avec Tailwind
[OK] Design systems personnalisés
[OK] Apps mobile-first responsive
[OK] Apps avec dark mode

RESSOURCES POUR ALLER PLUS LOIN :
  [DOCS] Documentation : https://tailwindcss.com/docs
  [DESIGN] Palette : https://tailwindcss.com/docs/customizing-colors
  [MODULE] UI Components: https://tailwindui.com (payant)
  🆓 Open source : https://daisyui.com, https://flowbite.com
  [SCIENCE] shadcn/ui : https://ui.shadcn.com (React)
  [MOVIE_CAMERA] Screencasts : https://laracasts.com, YouTube "Tailwind CSS"

═══════════════════════════════════════════════════════════════════════════
"""