# ============================================================================
# [LIVRE] GUIDE CSS ULTRA-DÉTAILLÉ - INDEX COMPLET
# ============================================================================
#
# [OBJECTIF] GUIDE COMPLET POUR MAÎTRISER CSS
# Du débutant à l'expert - 314 Ko de contenu pédagogique
#
# [PERSONNE][COURS] POUR QUI ?
# - Étudiants en génie logiciel
# - Développeurs débutants/intermédiaires
# - Quiconque veut VRAIMENT maîtriser CSS
#
# [TEMPS] TEMPS TOTAL ESTIMÉ : 50-70 heures
#
# [DOCS] MÉTHODOLOGIE :
# - COMMENT : Syntaxe et utilisation
# - POURQUOI : Raisons et contexte
# - QUAND : Cas d'usage appropriés
# - Exemples visuels ASCII
# - Exercices pratiques
# - Projets guidés
#
# ============================================================================


# ============================================================================
# [DOSSIER] STRUCTURE DU GUIDE (12 FICHIERS)
# ============================================================================

"""
PARTIE 1 : FONDAMENTAUX CSS (5 fichiers - ~133 Ko)
├── css_ultra_detaille.txt (29 Ko)
│   ├── Chapitre 0 : Introduction CSS
│   │   ├── Qu'est-ce que CSS ?
│   │   ├── Syntaxe de base
│   │   ├── 3 méthodes d'application (inline, interne, externe)
│   │   ├── Cascade et spécificité (calcul des points)
│   │   └── Héritage CSS
│   │
│   └── Chapitre 1 : Sélecteurs de base
│       ├── Sélecteur universel (*)
│       ├── Sélecteur type (tag)
│       ├── Sélecteur classe (.)
│       └── Sélecteur ID (#)
│
├── css_partie1_suite.txt (24 Ko)
│   └── Chapitre 1 (suite)
│       ├── Combinateurs (descendant, enfant, adjacent, frère)
│       ├── Sélecteurs d'attribut
│       ├── Pseudo-classes (:hover, :focus, :nth-child)
│       └── Pseudo-éléments (::before, ::after, ::first-letter)
│
├── css_partie1_suite2.txt (27 Ko)
│   ├── Chapitre 2 : Couleurs et Texte
│   │   ├── Formats couleurs (HEX, RGB, RGBA, HSL, HSLA)
│   │   ├── Propriétés de police (font-family, size, weight)
│   │   ├── Propriétés de texte (line-height, text-align)
│   │   ├── text-decoration, text-transform
│   │   └── text-shadow
│   │
│   └── Chapitre 3 : Box Model (début)
│       ├── Concept du Box Model
│       └── width et height
│
├── css_partie1_suite3.txt (25 Ko)
│   ├── Chapitre 3 (suite) : Box Model
│   │   ├── Padding (rembourrage interne)
│   │   ├── Border (bordures)
│   │   ├── Margin (marges externes)
│   │   ├── box-sizing: border-box *
│   │   ├── Overflow
│   │   └── Outline
│   │
│   └── Chapitre 4 : Positionnement
│       ├── position: static, relative, absolute
│       ├── position: fixed, sticky
│       ├── top, right, bottom, left
│       └── z-index
│
└── css_partie1_suite4_exercices.txt (28 Ko)
    ├── Exercices pratiques par chapitre
    ├── Projet guidé : Page de profil complète
    ├── Récapitulatif Partie 1
    └── Checklist de maîtrise


PARTIE 2 : LAYOUTS RESPONSIVE (4 fichiers - ~102 Ko)
├── css_partie2_layouts.txt (27 Ko)
│   ├── Chapitre 5 : Display
│   │   ├── display: block, inline, inline-block
│   │   ├── display: none vs visibility: hidden
│   │   └── Tableau comparatif
│   │
│   └── Chapitre 6 : Flexbox (introduction)
│       ├── Container vs Items
│       ├── Axes principal et secondaire
│       ├── justify-content, align-items
│       ├── flex-direction, flex-wrap
│       └── gap
│
├── css_partie2_flexbox_avance.txt (21 Ko)
│   └── Chapitre 6 (suite) : Flexbox avancé
│       ├── flex-grow, flex-shrink, flex-basis
│       ├── Propriété raccourcie flex
│       ├── align-self, order
│       ├── 8 patterns Flexbox courants
│       └── Exercices pratiques
│
├── css_partie2_grid.txt (25 Ko)
│   └── Chapitre 7 : CSS Grid
│       ├── Introduction Grid 2D
│       ├── grid-template-columns, rows
│       ├── Unité fr (fraction)
│       ├── repeat(), minmax()
│       ├── auto-fit, auto-fill
│       ├── grid-column, grid-row
│       ├── grid-template-areas (layout nommé)
│       ├── 6 patterns Grid courants
│       └── Grid vs Flexbox
│
└── css_partie2_responsive.txt (29 Ko)
    ├── Chapitre 8 : Responsive Design
    │   ├── Meta viewport [ATTENTION] OBLIGATOIRE
    │   ├── Unités responsive (%, rem, vw, vh)
    │   ├── clamp() pour tailles fluides
    │   ├── Mobile-first vs Desktop-first
    │   └── Images responsive
    │
    ├── Chapitre 9 : Media Queries
    │   ├── Syntaxe @media
    │   ├── Breakpoints standards
    │   ├── min-width vs max-width
    │   ├── Orientation, type de média
    │   └── 6 patterns responsive courants
    │
    ├── Exercices pratiques
    └── Projet final : Site portfolio responsive complet


PARTIE 3 : DESIGN AVANCÉ (3 fichiers - ~79 Ko)
├── css_partie3_transitions_transforms.txt (27 Ko)
│   ├── Chapitre 10 : Transitions CSS
│   │   ├── transition-property, duration
│   │   ├── transition-timing-function (courbes)
│   │   ├── transition-delay
│   │   ├── Propriété raccourcie transition
│   │   ├── Performance (transform + opacity)
│   │   └── 8 patterns de transition
│   │
│   └── Chapitre 11 : Transformations 2D
│       ├── translate() - Déplacer
│       ├── rotate() - Pivoter
│       ├── scale() - Agrandir/rétrécir
│       ├── skew() - Incliner
│       ├── transform-origin
│       └── Combiner transformations
│
├── css_partie3_animations.txt (25 Ko)
│   ├── Chapitre 12 : Transformations 3D
│   │   ├── rotateX(), rotateY(), rotateZ()
│   │   ├── translateZ(), translate3d()
│   │   ├── perspective *
│   │   ├── transform-style: preserve-3d
│   │   ├── backface-visibility
│   │   └── Carte flip 3D complète
│   │
│   └── Chapitre 13 : Animations CSS
│       ├── @keyframes (définir animations)
│       ├── animation-name, duration
│       ├── animation-iteration-count, direction
│       ├── animation-fill-mode, play-state
│       ├── Propriété raccourcie animation
│       ├── 10 patterns d'animation courants
│       └── Performance des animations
│
└── css_partie3_backgrounds_gradients.txt (27 Ko)
    ├── Chapitre 14 : Backgrounds avancés
    │   ├── background-image, size, position
    │   ├── cover vs contain
    │   ├── background-repeat, attachment
    │   ├── background-clip, origin
    │   ├── Multiples backgrounds
    │   └── Parallax effect
    │
    ├── Chapitre 15 : Gradients
    │   ├── linear-gradient() (dégradés linéaires)
    │   ├── radial-gradient() (dégradés radiaux)
    │   ├── conic-gradient() (dégradés coniques)
    │   ├── Gradient text effect
    │   ├── repeating-gradients
    │   └── Patterns avec gradients
    │
    ├── Chapitre 16 : Filters
    │   ├── filter (blur, grayscale, brightness)
    │   ├── backdrop-filter (glassmorphism)
    │   ├── mix-blend-mode
    │   └── Combiner effets
    │
    ├── Exercices pratiques
    └── Récapitulatif Partie 3


TOTAL : 12 fichiers, ~314 Ko de contenu pédagogique
"""


# ============================================================================
# [OBJECTIF] PARCOURS D'APPRENTISSAGE RECOMMANDÉ
# ============================================================================

"""
NIVEAU 1 : DÉBUTANT (Semaines 1-2)
└── PARTIE 1 : FONDAMENTAUX
    ├── [OK] Jour 1-2 : Chapitres 0-1 (Introduction + Sélecteurs)
    ├── [OK] Jour 3-4 : Chapitre 2 (Couleurs + Texte)
    ├── [OK] Jour 5-7 : Chapitre 3 (Box Model) * CRUCIAL
    ├── [OK] Jour 8-10 : Chapitre 4 (Positionnement)
    └── [OK] Jour 11-14 : Exercices + Projet page profil

    [COURS] VALIDATION :
    [WHITE_SQUARE] Calculer largeur totale d'un élément (Box Model)
    [WHITE_SQUARE] Comprendre box-sizing: border-box
    [WHITE_SQUARE] Positionner un badge avec relative + absolute
    [WHITE_SQUARE] Créer un header fixe
    [WHITE_SQUARE] Créer des cartes (cards) avec bon espacement


NIVEAU 2 : INTERMÉDIAIRE (Semaines 3-4)
└── PARTIE 2 : LAYOUTS RESPONSIVE
    ├── [OK] Jour 15-17 : Chapitre 5-6 (Display + Flexbox)
    ├── [OK] Jour 18-21 : Chapitre 7 (CSS Grid) * ESSENTIEL
    ├── [OK] Jour 22-25 : Chapitres 8-9 (Responsive + Media Queries)
    └── [OK] Jour 26-28 : Projet portfolio responsive

    [COURS] VALIDATION :
    [WHITE_SQUARE] Créer layout avec Flexbox (navigation, cards)
    [WHITE_SQUARE] Créer grille avec Grid (produits)
    [WHITE_SQUARE] Utiliser repeat(auto-fit, minmax()) sans media queries
    [WHITE_SQUARE] Centrer éléments (horizontal + vertical)
    [WHITE_SQUARE] Rendre site responsive sur tous écrans
    [WHITE_SQUARE] Choisir entre Flexbox et Grid selon besoin


NIVEAU 3 : AVANCÉ (Semaines 5-6)
└── PARTIE 3 : DESIGN AVANCÉ
    ├── [OK] Jour 29-31 : Chapitres 10-11 (Transitions + Transforms 2D)
    ├── [OK] Jour 32-35 : Chapitres 12-13 (3D + Animations)
    ├── [OK] Jour 36-39 : Chapitres 14-16 (Backgrounds + Gradients + Filters)
    └── [OK] Jour 40-42 : Projet final avec tous les effets

    [COURS] VALIDATION :
    [WHITE_SQUARE] Créer transitions hover fluides
    [WHITE_SQUARE] Animer avec @keyframes
    [WHITE_SQUARE] Créer carte flip 3D
    [WHITE_SQUARE] Appliquer gradients complexes
    [WHITE_SQUARE] Créer effet glassmorphism
    [WHITE_SQUARE] Optimiser animations (transform + opacity)
    [WHITE_SQUARE] Créer loading spinner animé


NIVEAU 4 : EXPERT (Semaines 7-8)
└── PARTIE 4 : PROFESSIONNEL (à venir)
    ├── Variables CSS (custom properties)
    ├── Préprocesseurs (Sass)
    ├── Méthodologies (BEM)
    ├── Performance et optimisation
    ├── Frameworks CSS
    └── Best practices production
"""


# ============================================================================
# [GRAPHIQUE] CONCEPTS CLÉS PAR PARTIE
# ============================================================================

"""
PARTIE 1 : FONDAMENTAUX
┌─────────────────────────────────────────────┐
│ * CONCEPTS ESSENTIELS                      │
├─────────────────────────────────────────────┤
│ • Cascade et spécificité                    │
│ • Box Model (margin, padding, border)       │
│ • box-sizing: border-box (CRUCIAL !)        │
│ • Position (relative + absolute)            │
│ • z-index et empilement                     │
└─────────────────────────────────────────────┘


PARTIE 2 : LAYOUTS
┌─────────────────────────────────────────────┐
│ * CONCEPTS ESSENTIELS                      │
├─────────────────────────────────────────────┤
│ • Flexbox pour layouts 1D                   │
│ • CSS Grid pour layouts 2D                  │
│ • repeat(auto-fit, minmax())                │
│ • Mobile-first approach                     │
│ • Media queries                             │
└─────────────────────────────────────────────┘


PARTIE 3 : DESIGN AVANCÉ
┌─────────────────────────────────────────────┐
│ * CONCEPTS ESSENTIELS                      │
├─────────────────────────────────────────────┤
│ • Transitions (hover effects)               │
│ • Transformations (translate, rotate)       │
│ • Animations (@keyframes)                   │
│ • Gradients (linear, radial)                │
│ • Filters (glassmorphism)                   │
│ • Performance (transform + opacity)         │
└─────────────────────────────────────────────┘
"""


# ============================================================================
# [OBJECTIF] SNIPPETS ESSENTIELS À RETENIR
# ============================================================================

"""
1. RESET & BOX-SIZING UNIVERSEL
"""
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;  /* * TOUJOURS faire ça ! */
}

"""
2. CENTRAGE PARFAIT (FLEXBOX)
"""
.center {
    display: flex;
    justify-content: center;  /* Horizontal */
    align-items: center;      /* Vertical */
    min-height: 100vh;
}

"""
3. GRILLE RESPONSIVE AUTOMATIQUE
"""
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

"""
4. TRANSITION HOVER STANDARD
"""
.element {
    transition: all 0.3s ease-out;  /* * Pattern universel */
}

"""
5. GLASSMORPHISM
"""
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
}

"""
6. CARTE FLIP 3D
"""
.card-container {
    perspective: 1000px;
}

.card {
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.card:hover {
    transform: rotateY(180deg);
}

.card-face {
    backface-visibility: hidden;
}

"""
7. LOADING SPINNER
"""
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0066cc;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

"""
8. GRADIENT TEXT
"""
.gradient-text {
    background: linear-gradient(45deg, #f093fb, #f5576c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

"""
9. STICKY HEADER
"""
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

"""
10. MEDIA QUERY MOBILE-FIRST
"""
/* Base : Mobile */
.element {
    width: 100%;
}

/* Desktop */
@media (min-width: 768px) {
    .element {
        width: 50%;
    }
}


# ============================================================================
# [IDEE] ASTUCES & BEST PRACTICES
# ============================================================================

"""
PERFORMANCE
[OK] Utilisez transform et opacity pour animations
[OK] Évitez width, height, margin pour animations
[OK] will-change pour animations fréquentes
[OK] GPU-acceleration avec transform: translateZ(0)

ORGANISATION
[OK] Mobile-first approach
[OK] Variables CSS pour couleurs et espacements
[OK] BEM pour nommage de classes
[OK] Un fichier CSS par component/page

RESPONSIVE
[OK] Meta viewport OBLIGATOIRE
[OK] Unités relatives (rem, %, vw, vh)
[OK] clamp() pour tailles fluides
[OK] Breakpoints standards (768px, 992px, 1200px)

ACCESSIBILITÉ
[OK] :focus states visibles
[OK] Contraste suffisant (WCAG AA)
[OK] Pas de animations trop rapides
[OK] prefers-reduced-motion pour animations

COMPATIBILITÉ
[OK] Préfixes vendor (-webkit-, -moz-)
[OK] Fallbacks pour anciennes propriétés
[OK] Feature queries (@supports)
[OK] Tester sur navigateurs cibles
"""


# ============================================================================
# [OUTIL] OUTILS RECOMMANDÉS
# ============================================================================

"""
DÉVELOPPEMENT
[WHITE_SQUARE] VS Code + extensions (IntelliSense CSS)
[WHITE_SQUARE] DevTools navigateur (Inspector, Computed styles)
[WHITE_SQUARE] Can I Use (compatibilité navigateurs)

DESIGN
[WHITE_SQUARE] Figma / Adobe XD (maquettes)
[WHITE_SQUARE] Coolors (palettes de couleurs)
[WHITE_SQUARE] cubic-bezier.com (courbes d'animation)
[WHITE_SQUARE] CSS Gradient Generator

OPTIMISATION
[WHITE_SQUARE] PurgeCSS (supprimer CSS inutilisé)
[WHITE_SQUARE] CSSNano (minification)
[WHITE_SQUARE] Lighthouse (audit performance)

APPRENTISSAGE
[WHITE_SQUARE] MDN Web Docs (référence)
[WHITE_SQUARE] CSS-Tricks (articles et guides)
[WHITE_SQUARE] CodePen (exemples et inspiration)
"""


# ============================================================================
# [DOCS] RESSOURCES COMPLÉMENTAIRES
# ============================================================================

"""
DOCUMENTATION OFFICIELLE
• MDN CSS Reference : https://developer.mozilla.org/en-US/docs/Web/CSS
• W3C CSS Specs : https://www.w3.org/Style/CSS/

SITES PRATIQUES
• CSS-Tricks : https://css-tricks.com/
• Smashing Magazine : https://www.smashingmagazine.com/
• A List Apart : https://alistapart.com/

OUTILS EN LIGNE
• CodePen : https://codepen.io/
• JSFiddle : https://jsfiddle.net/
• CSS Grid Generator : https://cssgrid-generator.netlify.app/
• Flexbox Froggy : https://flexboxfroggy.com/ (jeu)
• Grid Garden : https://cssgridgarden.com/ (jeu)
"""


# ============================================================================
# [OK] CHECKLIST COMPLÈTE DE MAÎTRISE CSS
# ============================================================================

"""
FONDAMENTAUX (Partie 1)
[WHITE_SQUARE] Comprendre cascade et spécificité
[WHITE_SQUARE] Calculer largeur totale (Box Model)
[WHITE_SQUARE] Maîtriser box-sizing: border-box
[WHITE_SQUARE] Utiliser position correctement
[WHITE_SQUARE] Sélectionner n'importe quel élément
[WHITE_SQUARE] Créer pseudo-classes et pseudo-éléments

LAYOUTS (Partie 2)
[WHITE_SQUARE] Créer layouts avec Flexbox
[WHITE_SQUARE] Créer grilles avec CSS Grid
[WHITE_SQUARE] Choisir entre Flexbox et Grid
[WHITE_SQUARE] Rendre sites responsive
[WHITE_SQUARE] Écrire media queries mobile-first
[WHITE_SQUARE] Utiliser repeat(auto-fit, minmax())

DESIGN AVANCÉ (Partie 3)
[WHITE_SQUARE] Créer transitions fluides
[WHITE_SQUARE] Animer avec @keyframes
[WHITE_SQUARE] Utiliser transformations 2D et 3D
[WHITE_SQUARE] Créer effets glassmorphism
[WHITE_SQUARE] Appliquer gradients
[WHITE_SQUARE] Optimiser performance animations

PROFESSIONNEL (Partie 4 - à venir)
[WHITE_SQUARE] Utiliser variables CSS
[WHITE_SQUARE] Organiser code avec méthodologies
[WHITE_SQUARE] Optimiser pour production
[WHITE_SQUARE] Utiliser préprocesseurs
[WHITE_SQUARE] Connaître frameworks CSS
[WHITE_SQUARE] Respecter best practices
"""


# ============================================================================
# [COURS] CERTIFICAT DE COMPLÉTION
# ============================================================================

"""
Une fois toutes les parties complétées et tous les exercices réalisés,
vous aurez atteint un niveau EXPERT en CSS !

Compétences acquises :
[OK] Maîtrise complète de CSS (fondamentaux à avancé)
[OK] Création de layouts modernes (Flexbox + Grid)
[OK] Design responsive sur tous appareils
[OK] Animations et effets visuels professionnels
[OK] Optimisation et performance
[OK] Best practices industrie

Vous serez capable de :
• Intégrer n'importe quelle maquette
• Créer interfaces modernes et responsive
• Optimiser code CSS pour production
• Résoudre problèmes CSS complexes
• Collaborer efficacement en équipe
• Continuer apprentissage autonome


Prochaines étapes :
1. Pratiquer avec projets personnels
2. Contribuer à projets open-source
3. Apprendre frameworks (React, Vue)
4. Explorer WebGL et animations avancées
5. Suivre tendances design web


[BRAVO] FÉLICITATIONS POUR VOTRE PARCOURS CSS ! [BRAVO]
"""


# ============================================================================
# [EMAIL] CONTACT & FEEDBACK
# ============================================================================

"""
Ce guide a été créé avec attention pour vous aider à VRAIMENT
maîtriser CSS, du débutant à l'expert.

Si vous avez des questions, suggestions ou retours :
• Relisez les chapitres concernés
• Pratiquez avec les exercices
• Créez vos propres projets
• Consultez la documentation MDN
• Rejoignez communautés CSS (Discord, Reddit)

Bon apprentissage ! [RAPIDE]
"""
# ============================================================================
# [LIVRE] CSS - GUIDE ULTRA-DÉTAILLÉ POUR DÉBUTANTS
# ============================================================================
#
# [OBJECTIF] GUIDE COMPLET POUR MAÎTRISER CSS DE ZÉRO À EXPERT
#
# Ce guide est organisé en 4 parties progressives :
#
# PARTIE 1 : FONDAMENTAUX CSS (css_partie1.txt)
# - Chapitre 0 : Introduction à CSS
# - Chapitre 1 : Sélecteurs CSS
# - Chapitre 2 : Propriétés de Texte et Couleurs
# - Chapitre 3 : Box Model (Boîtes)
# - Chapitre 4 : Positionnement
#
# PARTIE 2 : LAYOUT ET RESPONSIVE (css_partie2.txt)
# - Chapitre 5 : Display et Visibilité
# - Chapitre 6 : Flexbox
# - Chapitre 7 : Grid Layout
# - Chapitre 8 : Responsive Design
# - Chapitre 9 : Media Queries
#
# PARTIE 3 : DESIGN AVANCÉ (css_partie3.txt)
# - Chapitre 10 : Transitions et Animations
# - Chapitre 11 : Transformations
# - Chapitre 12 : Pseudo-classes et Pseudo-éléments
# - Chapitre 13 : Backgrounds Avancés
# - Chapitre 14 : Gradients et Shadows
#
# PARTIE 4 : TECHNIQUES PROFESSIONNELLES (css_partie4.txt)
# - Chapitre 15 : Variables CSS (Custom Properties)
# - Chapitre 16 : Préprocesseurs (SASS/SCSS)
# - Chapitre 17 : Méthodologies (BEM, OOCSS)
# - Chapitre 18 : Performance et Optimisation
# - Chapitre 19 : Frameworks CSS (Bootstrap, Tailwind)
# - Chapitre 20 : Best Practices et Outils
#
# [TEMPS] TEMPS DE LECTURE TOTAL : ~25-30 heures
# [DOCS] PRÉREQUIS : HTML de base
#
# [IDEE] COMMENT UTILISER CE GUIDE :
# 1. Lisez les parties dans l'ordre
# 2. Testez TOUS les exemples dans CodePen ou votre éditeur
# 3. Faites les exercices pratiques
# 4. Créez vos propres designs
#
# ============================================================================

"""
[OBJECTIF] PHILOSOPHIE DE CE GUIDE

COMMENT ? -> Explications détaillées et syntaxe
POURQUOI ? -> Raisons et contexte d'utilisation
QUAND ? -> Cas d'usage concrets et situations
PRATIQUE -> Exemples réels et exercices

Ce guide vise à être VOTRE SEULE RÉFÉRENCE CSS !
"""

# ============================================================================
# [NOTE] CONVENTIONS UTILISÉES DANS CE GUIDE
# ============================================================================

"""
[IDEE] Information importante
[REFLEXION] Question / Réflexion
[OK] Bonne pratique
[X] Mauvaise pratique
[ATTENTION] Attention / Avertissement
[CLE] Point clé à retenir
[COURS] Exercice pratique
[DOCS] Résumé
[OBJECTIF] Objectif
[TEMPS] Temps estimé
[RAPIDE] Prêt pour la suite
[DESIGN] Exemple de design
"""

# ============================================================================
# [OUTILS] CONFIGURATION DE L'ENVIRONNEMENT
# ============================================================================

"""
AVANT DE COMMENCER

1. ÉDITEUR DE CODE
   Recommandés :
   - VS Code (gratuit, populaire)
   - Sublime Text
   - WebStorm (payant, puissant)
   
   Extensions VS Code utiles :
   - Live Server (prévisualisation en temps réel)
   - CSS Peek (navigation rapide)
   - IntelliSense for CSS
   - Prettier (formatage automatique)

2. NAVIGATEUR
   - Chrome ou Firefox (outils développeur)
   - Activer les DevTools (F12)

3. OUTILS EN LIGNE (OPTIONNELS)
   - CodePen.io (tests rapides)
   - JSFiddle.net
   - CSS Grid Generator
   - Flexbox Playground

4. STRUCTURE DE FICHIERS
   Créer :
   - index.html (structure)
   - style.css (styles)
   - (optionnel) reset.css (normalisation)
"""

# Structure recommandée
"""
mon_projet/
├── index.html
├── css/
│   ├── reset.css       # Réinitialisation styles navigateur
│   ├── style.css       # Styles principaux
│   └── responsive.css  # Styles responsive (optionnel)
├── images/
│   └── logo.png
└── README.md
"""

"""
[IDEE] FICHIER HTML DE BASE POUR TESTER

Créez toujours ce fichier de base pour tester vos CSS :
"""

# index.html
"""
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apprendre CSS</title>
    
    <!-- Lien vers CSS -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>Bienvenue dans CSS</h1>
    <p>Commencez à styliser ici !</p>
</body>
</html>
"""


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

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Ce qu'est CSS et à quoi il sert
[OK] Comment CSS fonctionne avec HTML
[OK] Les trois méthodes pour appliquer du CSS
[OK] La syntaxe de base CSS
[OK] Les commentaires en CSS
[OK] L'ordre de cascade et la spécificité
"""


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

"""
DÉFINITION SIMPLE

CSS = Cascading Style Sheets (Feuilles de Style en Cascade)

CSS est un langage qui permet de STYLISER les pages web :
- Couleurs
- Polices
- Espacements
- Positionnement
- Animations
- Et bien plus !


ANALOGIE SIMPLE [ACCUEIL]

HTML = Structure de la maison (murs, toit, portes)
CSS = Décoration (peinture, meubles, rideaux)
JavaScript = Électricité et plomberie (interactivité)

Sans CSS, une page web = Document noir et blanc sans mise en forme
Avec CSS = Design moderne, coloré, organisé


[IDEE] HTML vs CSS

HTML :
<h1>Mon Titre</h1>           -> Structure : "Ceci est un titre"
<p>Mon paragraphe</p>         -> Structure : "Ceci est un paragraphe"

CSS :
h1 { color: blue; }           -> Style : "Le titre est bleu"
p { font-size: 16px; }        -> Style : "Le paragraphe a 16px de taille"


[REFLEXION] POURQUOI SÉPARER HTML ET CSS ?

[X] SANS SÉPARATION (ancien temps) :
<h1 style="color: blue; font-size: 32px; font-weight: bold;">Titre</h1>

Problèmes :
- Code répétitif
- Difficile à maintenir
- Changement de design = modifier chaque page

[OK] AVEC SÉPARATION :
HTML : <h1>Titre</h1>
CSS : h1 { color: blue; font-size: 32px; font-weight: bold; }

Avantages :
- Un seul endroit pour le style
- Réutilisable
- Facile à maintenir
- Une modification = tout le site change
"""


# ----------------------------------------------------------------------------
# [NOTE] SYNTAXE DE BASE CSS
# ----------------------------------------------------------------------------

"""
ANATOMIE D'UNE RÈGLE CSS

sélecteur {
    propriété: valeur;
    propriété: valeur;
}

Exemple :
"""

h1 {
    color: blue;
    font-size: 32px;
}

"""
[IDEE] DÉCORTIQUONS

h1                    <- SÉLECTEUR (cible les éléments)
{                     <- Accolade ouvrante
    color: blue;      <- DÉCLARATION (propriété: valeur;)
    font-size: 32px;  <- Autre déclaration
}                     <- Accolade fermante


RÈGLES IMPORTANTES :

1. Point-virgule (;) après chaque déclaration
   [OK] color: blue;
   [X] color: blue (oubli du ;)

2. Deux-points (:) entre propriété et valeur
   [OK] color: blue;
   [X] color blue; (oubli du :)

3. Accolades { } pour entourer les déclarations
   [OK] h1 { color: blue; }
   [X] h1 color: blue;

4. Casse (majuscules/minuscules)
   CSS n'est PAS sensible à la casse pour les propriétés
   [OK] color: blue;
   [OK] COLOR: blue; (fonctionne mais non recommandé)
   
   Mais SENSIBLE pour les valeurs :
   [OK] color: Blue;
   [ATTENTION] color: blue; (recommandé minuscules)


EXEMPLES COMPLETS :
"""

/* Un seul sélecteur, une propriété */
p {
    color: red;
}

/* Un sélecteur, plusieurs propriétés */
h1 {
    color: blue;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
}

/* Plusieurs sélecteurs (même style) */
h1, h2, h3 {
    color: navy;
    font-family: Arial, sans-serif;
}

"""
[IDEE] FORMATAGE ET LISIBILITÉ

[X] MAUVAIS (difficile à lire) :
h1{color:blue;font-size:32px;font-weight:bold;}

[OK] BON (lisible) :
h1 {
    color: blue;
    font-size: 32px;
    font-weight: bold;
}

[OK] ACCEPTABLE (compact pour petites règles) :
h1 { color: blue; }
"""


# ----------------------------------------------------------------------------
# [SPEECH_BALLOON] COMMENTAIRES EN CSS
# ----------------------------------------------------------------------------

"""
SYNTAXE DES COMMENTAIRES

CSS utilise /* ... */ pour les commentaires
"""

/* Ceci est un commentaire sur une ligne */

/*
   Ceci est un commentaire
   sur plusieurs lignes
*/

/* =========================
   SECTION : TYPOGRAPHY
   ========================= */
h1 {
    color: blue;
}

/* TODO: Ajouter plus de couleurs */
p {
    color: black; /* Couleur par défaut */
}

"""
[IDEE] BONNES PRATIQUES COMMENTAIRES

[OK] Documenter sections importantes
[OK] Expliquer code complexe
[OK] Laisser des TODO
[OK] Séparer visuellement les sections

[X] Ne pas sur-commenter l'évident
[X] Exemple mauvais commentaire :
/* Met la couleur en bleu */
h1 { color: blue; } /* Évident ! */

[OK] Bon commentaire :
/* Couleur corporate du client */
h1 { color: #003366; }
"""


# ----------------------------------------------------------------------------
# [LIEN] TROIS MÉTHODES POUR APPLIQUER DU CSS
# ----------------------------------------------------------------------------

"""
MÉTHODE 1 : CSS INLINE (dans l'attribut style)
"""

# HTML
<h1 style="color: blue; font-size: 32px;">Mon Titre</h1>
<p style="color: red;">Mon paragraphe</p>

"""
[IDEE] COMMENT ?
Attribut style="" directement sur l'élément HTML

[REFLEXION] POURQUOI ?
Style spécifique à UN SEUL élément

[ATTENTION] QUAND UTILISER ?
RAREMENT ! Seulement pour :
- Tests rapides
- Emails HTML
- Styles générés dynamiquement (JavaScript)

[X] INCONVÉNIENTS :
- Non réutilisable
- Code répétitif
- Difficile à maintenir
- Priorité maximale (écrase autres styles)
- Mélange structure et présentation


MÉTHODE 2 : CSS INTERNE (dans <style>)
"""

# HTML
<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: blue;
            font-size: 32px;
        }
        
        p {
            color: red;
        }
    </style>
</head>
<body>
    <h1>Mon Titre</h1>
    <p>Mon paragraphe</p>
</body>
</html>

"""
[IDEE] COMMENT ?
Balise <style> dans le <head> du document HTML

[REFLEXION] POURQUOI ?
Styles spécifiques à UNE SEULE page

[ATTENTION] QUAND UTILISER ?
- Page unique qui ne partage pas de styles
- Prototypes rapides
- Emails HTML
- Page d'atterrissage simple

[OK] AVANTAGES :
- Tout dans un fichier
- Pas de requête HTTP supplémentaire

[X] INCONVÉNIENTS :
- Non réutilisable entre pages
- HTML devient gros
- Pas de cache navigateur


MÉTHODE 3 : CSS EXTERNE (fichier .css séparé) [OK] RECOMMANDÉE
"""

# HTML (index.html)
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Mon Titre</h1>
    <p>Mon paragraphe</p>
</body>
</html>

# CSS (style.css)
h1 {
    color: blue;
    font-size: 32px;
}

p {
    color: red;
}

"""
[IDEE] COMMENT ?
Fichier .css séparé lié avec <link rel="stylesheet">

[REFLEXION] POURQUOI ?
C'est LA méthode professionnelle !

[OK] QUAND UTILISER ?
TOUJOURS pour projets réels !

[OK] AVANTAGES :
[OK] Réutilisable sur toutes les pages
[OK] Séparation HTML/CSS propre
[OK] Cache navigateur (performance)
[OK] Facile à maintenir
[OK] Collaboration facilitée (designers/développeurs)
[OK] Outils CSS fonctionnent mieux

ORGANISATION FICHIERS CSS :
"""

# Petit projet
<link rel="stylesheet" href="style.css">

# Projet moyen
<link rel="stylesheet" href="css/reset.css">      <!-- Réinitialisation -->
<link rel="stylesheet" href="css/typography.css"> <!-- Typographie -->
<link rel="stylesheet" href="css/layout.css">     <!-- Mise en page -->
<link rel="stylesheet" href="css/components.css"> <!-- Composants -->

# Grand projet
<link rel="stylesheet" href="css/main.css">       <!-- Tout en un (compilé) -->

"""
[IDEE] ORDRE DES FICHIERS CSS

L'ordre des <link> est IMPORTANT !
Le dernier écrase les précédents

<link rel="stylesheet" href="reset.css">    <!-- 1. Reset -->
<link rel="stylesheet" href="base.css">     <!-- 2. Base -->
<link rel="stylesheet" href="layout.css">   <!-- 3. Layout -->
<link rel="stylesheet" href="custom.css">   <!-- 4. Personnalisations -->
"""


# ----------------------------------------------------------------------------
# [SCALES] CASCADE ET SPÉCIFICITÉ
# ----------------------------------------------------------------------------

"""
[REFLEXION] QU'EST-CE QUE LA CASCADE ?

"Cascading" dans CSS = Système de priorité
Quand plusieurs règles s'appliquent au même élément,
laquelle gagne ?


ORDRE DE CASCADE (du plus faible au plus fort) :

1. Styles navigateur (user-agent)
2. CSS Externe (<link>)
3. CSS Interne (<style>)
4. CSS Inline (style="")
5. !important (éviter !)


EXEMPLE DE CASCADE :
"""

# CSS externe (style.css)
h1 {
    color: blue;
}

# CSS interne (dans <head>)
<style>
h1 {
    color: red;  /* <- Gagne car plus tard */
}
</style>

# CSS inline
<h1 style="color: green;">Titre</h1>  <!-- <- Gagne (inline) -->

"""
Résultat : Le h1 sera VERT (inline gagne)


[IDEE] SPÉCIFICITÉ (CALCUL DE PRIORITÉ)

Quand MÊME niveau de cascade, spécificité décide.

Spécificité = Score calculé :
- Inline style       = 1000 points
- ID (#)             = 100 points
- Classe (.)         = 10 points
- Tag (p, h1)        = 1 point


EXEMPLES DE CALCUL :
"""

/* Spécificité = 1 (1 tag) */
p {
    color: blue;
}

/* Spécificité = 10 (1 classe) */
.intro {
    color: red;     /* <- Gagne sur p */
}

/* Spécificité = 11 (1 classe + 1 tag) */
p.intro {
    color: green;   /* <- Gagne sur .intro */
}

/* Spécificité = 100 (1 ID) */
#main {
    color: purple;  /* <- Gagne sur tout */
}

/* Spécificité = 111 (1 ID + 1 classe + 1 tag) */
#main p.intro {
    color: orange;  /* <- Score le plus élevé ! */
}

"""
TABLEAU DE SPÉCIFICITÉ :

┌──────────────────┬────────────┬─────────┐
│    Sélecteur     │ Spécificité│ Gagnant │
├──────────────────┼────────────┼─────────┤
│ p                │     1      │         │
│ .intro           │    10      │         │
│ p.intro          │    11      │         │
│ #main            │   100      │         │
│ #main .intro     │   110      │         │
│ #main p.intro    │   111      │    [OK]   │
│ style=""         │  1000      │    [OK][OK]  │
└──────────────────┴────────────┴─────────┘


[IDEE] !important (À ÉVITER !)

!important = Priorité ABSOLUE
"""

p {
    color: blue !important; /* <- Gagne TOUJOURS */
}

#main p {
    color: red; /* <- Ne s'applique PAS */
}

"""
[ATTENTION] POURQUOI ÉVITER !important ?

[X] Difficile à surcharger (seulement avec autre !important)
[X] Casse la cascade naturelle
[X] Problèmes de maintenance
[X] Code smell (mauvaise pratique)

[OK] QUAND UTILISER (rare) :
- Frameworks CSS tiers que vous devez surcharger
- Styles utilitaires (.hidden { display: none !important; })
- Dernière solution après avoir tout essayé


[IDEE] ORDRE SI SPÉCIFICITÉ ÉGALE

Si deux règles ont MÊME spécificité :
-> La DERNIÈRE gagne
"""

p {
    color: blue;
}

p {
    color: red;  /* <- Gagne (dernière) */
}

/* Résultat : paragraphes rouges */


"""
[COURS] EXERCICE PRATIQUE 1 : Cascade

HTML :
<p class="intro" id="first">Texte</p>

CSS :
p { color: blue; }              /* Spécificité : 1 */
.intro { color: red; }          /* Spécificité : 10 */
#first { color: green; }        /* Spécificité : 100 */
p.intro { color: purple; }      /* Spécificité : 11 */

Question : Quelle couleur pour le texte ?
Réponse : GREEN (spécificité 100 de #first gagne)
"""


# ----------------------------------------------------------------------------
# [DESIGN] HÉRITAGE EN CSS
# ----------------------------------------------------------------------------

"""
[IDEE] QU'EST-CE QUE L'HÉRITAGE ?

Certaines propriétés CSS sont HÉRITÉES des parents.
"""

# HTML
<div style="color: blue;">
    <p>Ce texte est bleu</p>           <!-- Hérite color -->
    <span>Ce texte aussi</span>        <!-- Hérite color -->
</div>

"""
PROPRIÉTÉS QUI HÉRITENT (Typographie principalement) :

[OK] Héritées automatiquement :
- color
- font-family
- font-size
- font-weight
- line-height
- text-align
- visibility

[X] NON héritées (Layout, Box Model) :
- margin
- padding
- border
- background
- width, height
- display
- position


FORCER L'HÉRITAGE AVEC inherit :
"""

div {
    color: blue;
}

p {
    color: inherit;  /* Force hériter de div */
}

"""
VALEURS SPÉCIALES :

inherit    -> Hérite du parent
initial    -> Valeur initiale de la propriété
unset      -> inherit si héritable, sinon initial
revert     -> Revient au style navigateur
"""


# ----------------------------------------------------------------------------
# [DOCS] RÉCAPITULATIF CHAPITRE 0
# ----------------------------------------------------------------------------

"""
CE QUE VOUS AVEZ APPRIS

[OK] CSS = Langage de style pour le web
[OK] Syntaxe : sélecteur { propriété: valeur; }
[OK] Commentaires : /* ... */
[OK] Trois méthodes :
   - Inline (style="") -> Éviter
   - Interne (<style>) -> Page unique
   - Externe (.css) -> Toujours préférer [OK]
[OK] Cascade : Inline > Interne > Externe
[OK] Spécificité : Inline(1000) > ID(100) > Classe(10) > Tag(1)
[OK] Héritage : Certaines propriétés héritent
[OK] !important : Éviter !


[CLE] POINTS CLÉS À RETENIR

1. Toujours séparer HTML et CSS (fichier externe)
2. La spécificité se calcule (ID > Classe > Tag)
3. Dernière règle gagne si spécificité égale
4. !important casse tout, éviter
5. Certaines propriétés héritent, d'autres non


[OBJECTIF] AVANT DE CONTINUER

Assurez-vous de pouvoir :
[OK] Écrire une règle CSS correcte
[OK] Lier un fichier CSS externe
[OK] Comprendre ordre de cascade
[OK] Calculer spécificité simple
[OK] Savoir quand une propriété hérite


-> PROCHAINE ÉTAPE : Chapitre 1 - Sélecteurs CSS !

Vous allez apprendre :
- Tous les types de sélecteurs
- Combinateurs (>, +, ~)
- Sélecteurs d'attribut
- Pseudo-classes et pseudo-éléments
- Comment cibler PRÉCISÉMENT n'importe quel élément

Prêt ? C'est parti ! [RAPIDE]
"""


# ============================================================================
# [GUIDE] CHAPITRE 1 : SÉLECTEURS CSS
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Tous les types de sélecteurs CSS
[OK] Sélecteurs simples (tag, classe, ID)
[OK] Combinateurs (descendant, enfant, adjacent, sibling)
[OK] Sélecteurs d'attribut
[OK] Pseudo-classes (:hover, :nth-child, etc.)
[OK] Pseudo-éléments (::before, ::after)
[OK] Grouper et combiner sélecteurs
[OK] Choisir le bon sélecteur pour chaque situation
"""


# ----------------------------------------------------------------------------
# [OBJECTIF] SÉLECTEURS DE BASE
# ----------------------------------------------------------------------------

"""
1. SÉLECTEUR UNIVERSEL (*)
"""

/* Sélectionne TOUS les éléments */
* {
    margin: 0;
    padding: 0;
}

"""
[IDEE] COMMENT ?
Astérisque (*) cible tous les éléments sans exception

[REFLEXION] POURQUOI ?
Réinitialiser styles par défaut du navigateur

[ATTENTION] QUAND UTILISER ?
- Reset CSS (margin, padding à 0)
- Appliquer box-sizing à tous
- Rarement pour autre chose (lent)

[OK] Cas d'usage typique :
"""

* {
    box-sizing: border-box;  /* Facilite calculs largeur/hauteur */
}

"""
[X] À ÉVITER :
"""
* {
    color: blue;  /* [X] Trop général, tous les textes bleus ! */
}


"""
2. SÉLECTEUR DE TYPE (tag)
"""

/* Sélectionne tous les <p> */
p {
    color: black;
    font-size: 16px;
}

/* Tous les <h1> */
h1 {
    font-size: 32px;
    font-weight: bold;
}

/* Tous les <a> */
a {
    color: blue;
    text-decoration: none;
}

"""
[IDEE] COMMENT ?
Nom de la balise HTML (p, h1, div, span, etc.)

[REFLEXION] POURQUOI ?
Styliser un type d'élément dans tout le site

[OK] QUAND UTILISER ?
- Styles globaux pour un type d'élément
- Typographie de base
- Reset de margins/paddings

[OK] Exemples courants :
"""

/* Tous les paragraphes */
p {
    line-height: 1.6;
    margin-bottom: 1em;
}

/* Toutes les listes */
ul, ol {
    padding-left: 20px;
}

/* Toutes les images */
img {
    max-width: 100%;
    height: auto;
}


"""
3. SÉLECTEUR DE CLASSE (.)
"""

/* Sélectionne éléments avec class="intro" */
.intro {
    font-size: 18px;
    font-weight: bold;
}

/* class="button" */
.button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
}

"""
[IDEE] COMMENT ?
Point (.) suivi du nom de la classe

[REFLEXION] POURQUOI ?
Réutiliser un style sur plusieurs éléments différents

[OK] QUAND UTILISER ?
TOUT LE TEMPS ! C'est le sélecteur le plus utilisé

Avantages :
[OK] Réutilisable
[OK] Spécificité modérée
[OK] Sémantique claire
[OK] Facilite maintenance


EXEMPLES PRATIQUES :
"""

# HTML
<p class="intro">Premier paragraphe</p>
<p class="intro">Deuxième paragraphe</p>
<div class="intro">Une div aussi</div>

# CSS
.intro {
    font-size: 20px;
    color: navy;
}

/* Tous les éléments avec class="intro" auront ce style */

"""
[IDEE] PLUSIEURS CLASSES SUR UN ÉLÉMENT
"""

# HTML
<button class="button primary large">Acheter</button>

# CSS
.button {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

.primary {
    background-color: blue;
    color: white;
}

.large {
    font-size: 18px;
    padding: 15px 30px;
}

/* Le bouton aura TOUTES ces propriétés combinées */

"""
[OK] CONVENTIONS DE NOMMAGE :

kebab-case (recommandé) :
.my-button { }
.nav-item { }
.card-title { }

camelCase (acceptable) :
.myButton { }
.navItem { }

snake_case (rare en CSS) :
.my_button { }

BEM (méthodologie, chapitre 17) :
.block__element--modifier { }
"""


"""
4. SÉLECTEUR D'ID (#)
"""

/* Sélectionne élément avec id="header" */
#header {
    background-color: #333;
    color: white;
}

/* id="main-content" */
#main-content {
    width: 80%;
    margin: 0 auto;
}

"""
[IDEE] COMMENT ?
Dièse (#) suivi du nom de l'ID

[REFLEXION] POURQUOI ?
Cibler UN élément unique dans la page

[ATTENTION] QUAND UTILISER ?
RAREMENT en CSS ! Préférez les classes.

Raisons :
[X] Spécificité trop élevée (difficile à surcharger)
[X] Non réutilisable (un seul élément)
[X] Difficile à maintenir

[OK] QUAND c'est OK :
- Ancres de navigation (#section1)
- JavaScript (getElementById)
- Éléments vraiment uniques (header principal, footer)


EXEMPLE ACCEPTABLE :
"""

# HTML
<header id="main-header">
    <!-- Contenu header -->
</header>

# CSS
#main-header {
    position: fixed;
    top: 0;
    width: 100%;
}

"""
[X] MAUVAISE UTILISATION :
"""

# HTML (plusieurs cartes)
<div id="card-1">...</div>
<div id="card-2">...</div>
<div id="card-3">...</div>

# CSS
#card-1 { background: blue; }   /* [X] Répétitif */
#card-2 { background: blue; }
#card-3 { background: blue; }

"""
[OK] MIEUX AVEC CLASSES :
"""

# HTML
<div class="card">...</div>
<div class="card">...</div>
<div class="card">...</div>

# CSS
.card { background: blue; }     /* [OK] Réutilisable */


# ----------------------------------------------------------------------------
# [LIEN] COMBINATEURS
# ----------------------------------------------------------------------------

"""
Les combinateurs permettent de cibler des éléments
basés sur leur RELATION avec d'autres éléments.


1. COMBINATEUR DESCENDANT (espace)
"""

/* Tous les <p> à l'intérieur de <div> (peu importe le niveau) */
div p {
    color: blue;
}

"""
[IDEE] SYNTAXE : A B
A et B séparés par un ESPACE

Sélectionne : Tous les B descendants de A (enfants, petits-enfants, etc.)


EXEMPLE HTML :
"""

<div>
    <p>Texte 1 (sélectionné)</p>
    <section>
        <p>Texte 2 (sélectionné aussi)</p>
        <article>
            <p>Texte 3 (sélectionné aussi)</p>
        </article>
    </section>
</div>

<p>Texte 4 (NON sélectionné, pas dans div)</p>

"""
CSS :
"""
div p {
    color: blue;  /* Textes 1, 2, 3 seront bleus */
}

"""
[OK] QUAND UTILISER ?
- Cibler éléments dans un contexte spécifique
- Styles conditionnels selon parent


EXEMPLES PRATIQUES :
"""

/* Liens dans la navigation */
nav a {
    color: white;
    text-decoration: none;
}

/* Paragraphes dans articles */
article p {
    line-height: 1.8;
    margin-bottom: 1em;
}

/* Images dans une galerie */
.gallery img {
    width: 200px;
    height: 200px;
    object-fit: cover;
}


"""
2. COMBINATEUR ENFANT DIRECT (>)
"""

/* Seulement les <p> enfants DIRECTS de <div> */
div > p {
    color: red;
}

"""
[IDEE] SYNTAXE : A > B
A et B séparés par >

Sélectionne : Seulement les B enfants DIRECTS (1er niveau) de A


EXEMPLE HTML :
"""

<div>
    <p>Texte 1 (sélectionné - enfant direct)</p>
    <section>
        <p>Texte 2 (NON sélectionné - petit-fils)</p>
    </section>
</div>

"""
CSS :
"""
div > p {
    color: red;  /* Seulement Texte 1 sera rouge */
}

"""
[REFLEXION] DIFFÉRENCE AVEC DESCENDANT (espace) ?

Descendant (espace) : TOUS les niveaux
div p { }   -> Enfants, petits-enfants, arrière-petits-enfants...

Enfant direct (>) : SEULEMENT 1er niveau
div > p { }  -> Uniquement enfants directs


[OK] QUAND UTILISER ?
- Contrôle précis du niveau
- Éviter de cibler éléments imbriqués
- Listes et navigations


EXEMPLES PRATIQUES :
"""

/* Seulement les <li> directs de <ul> (pas les <li> de sous-listes) */
ul > li {
    list-style-type: disc;
}

/* HTML exemple */
<ul>
    <li>Item 1 (sélectionné)</li>
    <li>Item 2 (sélectionné)
        <ul>
            <li>Sous-item (NON sélectionné)</li>
        </ul>
    </li>
</ul>

/* Enfants directs d'une div container */
.container > div {
    flex: 1;
}


"""
3. COMBINATEUR ADJACENT (frère adjacent +)
"""

/* <p> immédiatement APRÈS <h1> */
h1 + p {
    font-weight: bold;
}

"""
[IDEE] SYNTAXE : A + B
A et B séparés par +

Sélectionne : Le premier B immédiatement APRÈS A (même niveau, frère)


EXEMPLE HTML :
"""

<h1>Titre</h1>
<p>Paragraphe 1 (sélectionné - juste après h1)</p>
<p>Paragraphe 2 (NON sélectionné)</p>

"""
CSS :
"""
h1 + p {
    font-size: 18px;
    color: gray;
}

/* Seulement Paragraphe 1 sera stylisé */

"""
[OK] QUAND UTILISER ?
- Styliser le premier élément après un autre
- Créer relations visuelles
- Typographie (premier paragraphe après titre)


EXEMPLES PRATIQUES :
"""

/* Premier paragraphe après chaque titre */
h2 + p {
    margin-top: 0;
    font-size: 18px;
}

/* Label directement après checkbox */
input[type="checkbox"] + label {
    margin-left: 5px;
}

/* Espacement entre éléments consécutifs */
.button + .button {
    margin-left: 10px;
}


"""
4. COMBINATEUR FRÈRES GÉNÉRAUX (~)
"""

/* Tous les <p> APRÈS <h1> (même niveau) */
h1 ~ p {
    color: gray;
}

"""
[IDEE] SYNTAXE : A ~ B
A et B séparés par ~

Sélectionne : TOUS les B après A (même niveau, pas nécessairement adjacents)


EXEMPLE HTML :
"""

<h1>Titre</h1>
<p>Paragraphe 1 (sélectionné)</p>
<div>Une div</div>
<p>Paragraphe 2 (sélectionné aussi)</p>
<p>Paragraphe 3 (sélectionné aussi)</p>

"""
CSS :
"""
h1 ~ p {
    color: gray;
}

/* Tous les <p> après <h1> seront gris */

"""
[REFLEXION] DIFFÉRENCE AVEC ADJACENT (+) ?

Adjacent (+) : Seulement le PREMIER frère immédiat
h1 + p { }   -> Uniquement le <p> juste après <h1>

Frères généraux (~) : TOUS les frères après
h1 ~ p { }   -> Tous les <p> après <h1>


[OK] QUAND UTILISER ?
- Styliser tous les éléments suivants
- États actifs/sélectionnés


EXEMPLES PRATIQUES :
"""

/* Tous les champs après un champ invalide */
input:invalid ~ input {
    border-color: red;
}

/* Paragraphes suivant un élément avec classe */
.intro ~ p {
    text-indent: 2em;
}


# ----------------------------------------------------------------------------
# [COURS] EXERCICE PRATIQUE 2 : Combinateurs
# ----------------------------------------------------------------------------

"""
HTML :
<div class="container">
    <h1>Titre principal</h1>
    <p>Premier paragraphe</p>
    <p>Deuxième paragraphe</p>
    <div class="inner">
        <p>Paragraphe dans div interne</p>
    </div>
</div>

CSS :

1. .container p { color: blue; }
   -> Combien de <p> seront bleus ? (3 - tous)

2. .container > p { color: red; }
   -> Combien de <p> seront rouges ? (2 - enfants directs)

3. h1 + p { font-weight: bold; }
   -> Quel <p> sera en gras ? (Premier paragraphe)

4. h1 ~ p { font-style: italic; }
   -> Combien de <p> seront en italique ? (2 - frères après h1)
"""


# Ce fichier continue avec les sélecteurs d'attribut, pseudo-classes, etc.
# La suite sera créée dans les prochains artifacts...

# ============================================================================
# FIN DE CE FICHIER - CONTINUEZ AVEC css_partie1_suite.txt
# ============================================================================
# ============================================================================
# [LIVRE] CSS - PARTIE 1 (SUITE) : SÉLECTEURS AVANCÉS ET TEXTE
# ============================================================================
#
# [OBJECTIF] CETTE PARTIE COUVRE :
# - Suite Chapitre 1 : Sélecteurs d'Attribut, Pseudo-classes, Pseudo-éléments
# - Chapitre 2 : Propriétés de Texte et Couleurs
#
# [TEMPS] TEMPS : ~4-6 heures
# [DOCS] PRÉREQUIS : Début du Chapitre 1 complété
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 1 (SUITE) : SÉLECTEURS AVANCÉS
# ============================================================================

# ----------------------------------------------------------------------------
# [RECHERCHE] SÉLECTEURS D'ATTRIBUT
# ----------------------------------------------------------------------------

"""
Les sélecteurs d'attribut ciblent les éléments basés sur leurs attributs HTML.


1. ATTRIBUT EXISTE [attr]
"""

/* Tous les <a> qui ont un attribut title */
a[title] {
    color: green;
    border-bottom: 1px dotted;
}

/* Tous les éléments avec attribut data-tooltip */
[data-tooltip] {
    cursor: help;
}

"""
[IDEE] SYNTAXE : [attribut]

Sélectionne : Éléments qui ONT cet attribut (peu importe la valeur)

[OK] QUAND UTILISER ?
- Styliser éléments avec attributs spécifiques
- data-* attributes
- Accessibilité (aria-*)


EXEMPLES PRATIQUES :
"""

/* Liens externes (avec rel="external") */
a[rel="external"] {
    background: url(external-icon.svg) no-repeat right;
    padding-right: 20px;
}

/* Champs requis */
input[required] {
    border-left: 3px solid red;
}

/* Éléments avec tooltip */
[data-tooltip] {
    position: relative;
}


"""
2. ATTRIBUT ÉGAL À [attr="value"]
"""

/* <input type="text"> exactement */
input[type="text"] {
    border: 1px solid #ccc;
    padding: 5px;
}

/* Liens vers PDF */
a[href="document.pdf"] {
    background: url(pdf-icon.svg) no-repeat left;
}

"""
[IDEE] SYNTAXE : [attribut="valeur"]

Sélectionne : Éléments dont l'attribut = exactement cette valeur

[ATTENTION] SENSIBLE À LA CASSE (par défaut)

[OK] QUAND UTILISER ?
- Cibler types d'input spécifiques
- Liens vers fichiers spécifiques


EXEMPLES PRATIQUES :
"""

/* Types d'input différents */
input[type="email"] {
    background-image: url(email-icon.svg);
}

input[type="password"] {
    font-family: monospace;
}

input[type="submit"] {
    background-color: blue;
    color: white;
    cursor: pointer;
}

/* Langue spécifique */
[lang="fr"] {
    quotes: "« " " »";
}


"""
3. ATTRIBUT CONTIENT MOT [attr~="value"]
"""

/* class contient le mot "warning" (séparé par espaces) */
[class~="warning"] {
    color: orange;
}

"""
[IDEE] SYNTAXE : [attribut~="mot"]

Sélectionne : Attribut contient ce MOT (séparé par espaces)

<div class="alert warning big">  [OK] Sélectionné (contient "warning")
<div class="warning-text">       [X] Pas sélectionné (pas un mot séparé)


[OK] QUAND UTILISER ?
- Classes multiples
- Valeurs séparées par espaces


"""
4. ATTRIBUT COMMENCE PAR [attr^="value"]
"""

/* Attributs href qui commencent par "https" */
a[href^="https"] {
    color: green;
}

/* Classes qui commencent par "icon-" */
[class^="icon-"] {
    font-family: "Icons";
}

"""
[IDEE] SYNTAXE : [attribut^="début"]

Sélectionne : Attribut COMMENCE PAR cette valeur

[OK] QUAND UTILISER ?
- Liens externes (https)
- Préfixes de classes
- Protocoles


EXEMPLES PRATIQUES :
"""

/* Liens https (sécurisés) */
a[href^="https://"] {
    background: url(lock-icon.svg) no-repeat right;
}

/* Liens téléphone */
a[href^="tel:"] {
    color: blue;
}

/* Liens email */
a[href^="mailto:"] {
    color: purple;
}

/* Classes icon- */
[class^="icon-"] {
    display: inline-block;
    width: 16px;
    height: 16px;
}


"""
5. ATTRIBUT SE TERMINE PAR [attr$="value"]
"""

/* Attributs href qui finissent par ".pdf" */
a[href$=".pdf"] {
    background: url(pdf.svg) no-repeat right;
}

/* Images .jpg */
img[src$=".jpg"] {
    border: 1px solid #ccc;
}

"""
[IDEE] SYNTAXE : [attribut$="fin"]

Sélectionne : Attribut SE TERMINE PAR cette valeur

[OK] QUAND UTILISER ?
- Extensions de fichiers
- Suffixes


EXEMPLES PRATIQUES :
"""

/* Différents types de fichiers */
a[href$=".pdf"]::after { content: " (PDF)"; }
a[href$=".doc"]::after { content: " (Word)"; }
a[href$=".zip"]::after { content: " (ZIP)"; }

/* Types d'images */
img[src$=".svg"] {
    /* SVG spécifique */
}


"""
6. ATTRIBUT CONTIENT [attr*="value"]
"""

/* href contient "google" n'importe où */
a[href*="google"] {
    color: #4285f4;
}

/* class contient "button" */
[class*="button"] {
    cursor: pointer;
}

"""
[IDEE] SYNTAXE : [attribut*="substring"]

Sélectionne : Attribut CONTIENT cette valeur (n'importe où)

[OK] QUAND UTILISER ?
- Recherche flexible
- Patterns dans URLs


EXEMPLES PRATIQUES :
"""

/* Liens vers réseaux sociaux */
a[href*="facebook.com"] { color: #3b5998; }
a[href*="twitter.com"] { color: #1da1f2; }
a[href*="linkedin.com"] { color: #0077b5; }

/* Liens externes (contient "http") */
a[href*="http"] {
    /* Styles liens externes */
}


"""
7. INSENSIBLE À LA CASSE [attr="value" i]
"""

/* href = "PDF" ou "pdf" ou "Pdf" */
a[href$=".pdf" i] {
    background: url(pdf.svg);
}

"""
[IDEE] SYNTAXE : [attribut="valeur" i]

i = insensitive (insensible à la casse)

[OK] QUAND UTILISER ?
- Valeurs avec casse variable


TABLEAU RÉCAPITULATIF ATTRIBUTS :

┌────────────┬─────────────────────┬─────────────────────┐
│ Sélecteur  │  Description        │  Exemple            │
├────────────┼─────────────────────┼─────────────────────┤
│ [attr]     │ Attribut existe     │ [title]             │
│ [attr="x"] │ Égal à              │ [type="text"]       │
│ [attr~="x"]│ Contient mot        │ [class~="big"]      │
│ [attr^="x"]│ Commence par        │ [href^="https"]     │
│ [attr$="x"]│ Se termine par      │ [href$=".pdf"]      │
│ [attr*="x"]│ Contient            │ [href*="google"]    │
│ [attr|="x"]│ Égal ou commence-   │ [lang|="en"]        │
│ [attr="x"i]│ Insensible casse    │ [type="TEXT" i]     │
└────────────┴─────────────────────┴─────────────────────┘


# ----------------------------------------------------------------------------
# [SCENARIO] PSEUDO-CLASSES
# ----------------------------------------------------------------------------

"""
Les pseudo-classes ciblent un ÉTAT spécial d'un élément.

[IDEE] SYNTAXE : :pseudo-classe


CATÉGORIES DE PSEUDO-CLASSES :

1. États d'interaction (liens, inputs)
2. États structurels (position dans DOM)
3. États de formulaire
4. États logiques


1. PSEUDO-CLASSES D'INTERACTION
"""

/* :hover - Souris au-dessus */
a:hover {
    color: red;
    text-decoration: underline;
}

button:hover {
    background-color: darkblue;
}

/* :active - Cliqué/pressé */
button:active {
    transform: scale(0.95);
}

/* :focus - Élément a le focus (input, lien avec Tab) */
input:focus {
    border-color: blue;
    outline: 2px solid blue;
}

/* :visited - Lien visité */
a:visited {
    color: purple;
}

"""
[IDEE] ORDRE IMPORTANT POUR LES LIENS (LVHA) :

Mnémotechnique : LoVe HAte

L :link      -> Lien non visité
V :visited   -> Lien visité
H :hover     -> Souris au-dessus
A :active    -> Cliqué
"""

/* [OK] BON ORDRE */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }

/* [X] MAUVAIS ORDRE (hover ne marchera pas) */
a:hover { color: red; }
a:link { color: blue; }  /* Écrase hover ! */

"""
[OK] QUAND UTILISER ?
- Feedback visuel interactions
- États boutons
- Focus accessibilité


EXEMPLES PRATIQUES :
"""

/* Bouton avec états */
.button {
    background: blue;
    color: white;
    transition: all 0.3s;
}

.button:hover {
    background: darkblue;
    transform: translateY(-2px);
}

.button:active {
    transform: translateY(0);
}

.button:focus {
    outline: 3px solid lightblue;
}

/* Input avec focus */
input {
    border: 1px solid #ccc;
    transition: border 0.3s;
}

input:focus {
    border-color: #0066ff;
    box-shadow: 0 0 5px rgba(0,102,255,0.3);
}


"""
2. PSEUDO-CLASSES STRUCTURELLES
"""

/* :first-child - Premier enfant de son parent */
p:first-child {
    font-weight: bold;
}

/* :last-child - Dernier enfant */
li:last-child {
    border-bottom: none;
}

/* :nth-child(n) - Nième enfant */
li:nth-child(2) {
    color: red;  /* 2ème <li> */
}

/* :nth-child(odd) - Enfants impairs (1, 3, 5...) */
tr:nth-child(odd) {
    background-color: #f0f0f0;
}

/* :nth-child(even) - Enfants pairs (2, 4, 6...) */
tr:nth-child(even) {
    background-color: white;
}

/* :nth-child(3n) - Tous les 3 (3, 6, 9...) */
li:nth-child(3n) {
    font-weight: bold;
}

/* :nth-child(3n+1) - 1, 4, 7, 10... */
li:nth-child(3n+1) {
    color: blue;
}

"""
[IDEE] FORMULE :nth-child(an+b)

a = multiple (tous les a éléments)
n = compteur (0, 1, 2, 3...)
b = décalage

Exemples :
- 2n = pairs (0*2, 1*2=2, 2*2=4, 3*2=6...)
- 2n+1 = impairs (0*2+1=1, 1*2+1=3, 2*2+1=5...)
- 3n = tous les 3 (0, 3, 6, 9...)
- 3n+2 = 2, 5, 8, 11...


EXEMPLES PRATIQUES :
"""

/* Tableau lignes alternées (zebra striping) */
tr:nth-child(odd) {
    background-color: #f9f9f9;
}

/* Tous les 3 éléments */
.gallery-item:nth-child(3n) {
    margin-right: 0; /* Supprimer marge droite tous les 3 */
}

/* Premier et dernier */
.nav-item:first-child {
    border-left: none;
}

.nav-item:last-child {
    border-right: none;
}


"""
:nth-of-type() vs :nth-child()
"""

/* :nth-child() - Compte TOUS les enfants */
<div>
    <h1>Titre</h1>       <!-- Enfant 1 -->
    <p>Paragraphe 1</p>  <!-- Enfant 2 -->
    <p>Paragraphe 2</p>  <!-- Enfant 3 -->
</div>

p:nth-child(2) { color: red; }  /* Seulement "Paragraphe 1" */

/* :nth-of-type() - Compte seulement le TYPE */
p:nth-of-type(2) { color: blue; }  /* "Paragraphe 2" (2ème <p>) */

"""
[IDEE] DIFFÉRENCE CLÉE :

:nth-child(n)    -> Nième ENFANT (tous types confondus)
:nth-of-type(n)  -> Nième élément de ce TYPE


[OK] QUAND UTILISER QUOI ?

:nth-child()     -> Structure HTML homogène
:nth-of-type()   -> Structure HTML mixte


"""
3. PSEUDO-CLASSES DE FORMULAIRE
"""

/* :checked - Case cochée ou radio sélectionné */
input:checked {
    background-color: blue;
}

/* :disabled - Élément désactivé */
input:disabled {
    background-color: #e0e0e0;
    cursor: not-allowed;
}

/* :enabled - Élément activé */
input:enabled {
    background-color: white;
}

/* :required - Champ requis */
input:required {
    border-left: 3px solid red;
}

/* :optional - Champ optionnel */
input:optional {
    border-left: 3px solid green;
}

/* :valid - Validation OK */
input:valid {
    border-color: green;
}

/* :invalid - Validation échouée */
input:invalid {
    border-color: red;
}

/* :in-range - Valeur dans range */
input[type="number"]:in-range {
    border-color: green;
}

/* :out-of-range - Valeur hors range */
input[type="number"]:out-of-range {
    border-color: red;
}

"""
EXEMPLE FORMULAIRE COMPLET :
"""

/* Input basique */
input {
    border: 1px solid #ccc;
    padding: 8px;
    transition: all 0.3s;
}

/* Focus */
input:focus {
    border-color: #0066ff;
    box-shadow: 0 0 5px rgba(0,102,255,0.5);
}

/* Requis */
input:required {
    border-left: 3px solid orange;
}

/* Valide */
input:valid {
    border-color: green;
}

/* Invalide */
input:invalid {
    border-color: red;
}

/* Désactivé */
input:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Checkbox cochée */
input[type="checkbox"]:checked + label {
    font-weight: bold;
    color: green;
}


"""
4. PSEUDO-CLASSES LOGIQUES
"""

/* :not() - Négation */
p:not(.intro) {
    font-size: 14px;  /* Tous les <p> SAUF class="intro" */
}

/* :is() - Liste (OU logique) */
:is(h1, h2, h3) {
    color: navy;  /* h1 OU h2 OU h3 */
}

/* :where() - Comme :is() mais spécificité 0 */
:where(h1, h2, h3) {
    margin-top: 0;
}

"""
[IDEE] :not() PRATIQUE
"""

/* Tous les liens SAUF externes */
a:not([href^="http"]) {
    color: blue;
}

/* Tous les inputs SAUF submit */
input:not([type="submit"]) {
    width: 100%;
}

/* Liste items SAUF le dernier */
li:not(:last-child) {
    margin-bottom: 10px;
}


"""
5. AUTRES PSEUDO-CLASSES UTILES
"""

/* :empty - Élément vide (pas d'enfants ni texte) */
div:empty {
    display: none;
}

/* :only-child - Seul enfant */
p:only-child {
    margin: 0;
}

/* :root - Élément racine (html) */
:root {
    --main-color: blue;  /* Variables CSS */
}

/* :target - Élément ciblé par #anchor */
:target {
    background-color: yellow;
}


# ----------------------------------------------------------------------------
# [DESIGN] PSEUDO-ÉLÉMENTS
# ----------------------------------------------------------------------------

"""
Les pseudo-éléments créent et stylisent des PARTIES d'un élément.

[IDEE] SYNTAXE : ::pseudo-element (double ::)

[ATTENTION] Ancienne syntaxe : :pseudo-element (simple :)
   Fonctionne encore mais :: recommandé


PSEUDO-ÉLÉMENTS PRINCIPAUX :

1. ::before - Insère contenu AVANT
2. ::after - Insère contenu APRÈS  
3. ::first-letter - Première lettre
4. ::first-line - Première ligne
5. ::selection - Texte sélectionné
"""

"""
1. ::before et ::after
"""

/* Ajoute contenu AVANT l'élément */
.quote::before {
    content: "« ";
    color: gray;
}

/* Ajoute contenu APRÈS l'élément */
.quote::after {
    content: " »";
    color: gray;
}

"""
[IDEE] PROPRIÉTÉ content OBLIGATOIRE !

Sans content, ::before et ::after n'apparaissent PAS
"""

/* [X] N'apparaîtra PAS */
.element::before {
    color: red;  /* Oubli de content ! */
}

/* [OK] Apparaîtra */
.element::before {
    content: "";  /* Même vide, content est requis */
    display: block;
    width: 100px;
}

"""
[OK] QUAND UTILISER ::before et ::after ?

- Décoration visuelle
- Icônes
- Éléments cosmétiques
- Clear fix
- Compteurs


EXEMPLES PRATIQUES :
"""

/* Icône avant lien externe */
a[href^="http"]::before {
    content: "[LIEN] ";
}

/* Icône après liens PDF */
a[href$=".pdf"]::after {
    content: " (PDF)";
    font-size: 0.8em;
    color: red;
}

/* Guillemets français */
blockquote::before {
    content: "« ";
    font-size: 2em;
    color: #ccc;
}

blockquote::after {
    content: " »";
    font-size: 2em;
    color: #ccc;
}

/* Numérotation automatique */
.steps {
    counter-reset: step;
}

.step::before {
    counter-increment: step;
    content: counter(step) ". ";
    font-weight: bold;
    color: blue;
}

/* Triangle CSS (flèche) */
.tooltip::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    border: 5px solid transparent;
    border-top-color: black;
}

/* Clear fix (ancien hack pour floats) */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}


"""
2. ::first-letter - Première lettre
"""

/* Lettre capitale décorative */
p::first-letter {
    font-size: 3em;
    font-weight: bold;
    float: left;
    margin-right: 5px;
    line-height: 1;
}

"""
[OK] QUAND UTILISER ?
- Lettrines (drop caps)
- Style magazine
- Premiers paragraphes


"""
3. ::first-line - Première ligne
"""

/* Première ligne en gras */
p::first-line {
    font-weight: bold;
    color: #333;
}

"""
[ATTENTION] LIMITATIONS ::first-letter et ::first-line

Seulement certaines propriétés fonctionnent :
- Polices (font-*)
- Couleur (color)
- Background
- Marges, padding
- Bordures

[X] Ne fonctionnent PAS :
- display
- position
- width, height


"""
4. ::selection - Texte sélectionné
"""

/* Personnaliser sélection */
::selection {
    background-color: yellow;
    color: black;
}

p::selection {
    background-color: lightblue;
}

"""
[OK] QUAND UTILISER ?
- Branding (couleurs de marque)
- Améliorer lisibilité
- Design personnalisé


"""
5. ::placeholder - Texte placeholder des inputs
"""

input::placeholder {
    color: #999;
    font-style: italic;
}

input:focus::placeholder {
    color: transparent;
}


"""
DIFFÉRENCE PSEUDO-CLASSE vs PSEUDO-ÉLÉMENT :

PSEUDO-CLASSE (:)
-> Cible un ÉTAT
-> :hover, :focus, :nth-child()
-> Élément existe déjà

PSEUDO-ÉLÉMENT (::)
-> Crée un ÉLÉMENT
-> ::before, ::after, ::first-letter
-> Élément créé par CSS


[DOCS] RÉCAPITULATIF SÉLECTEURS
"""

┌──────────────────┬──────────────────────────────────┐
│   CATÉGORIE      │          EXEMPLES                │
├──────────────────┼──────────────────────────────────┤
│ Basiques         │ *, p, .class, #id                │
│ Combinateurs     │ A B, A>B, A+B, A~B               │
│ Attributs        │ [attr], [attr="x"], [attr^="x"]  │
│ Pseudo-classes   │ :hover, :nth-child(), :checked   │
│ Pseudo-éléments  │ ::before, ::after, ::first-line  │
└──────────────────┴──────────────────────────────────┘


# ============================================================================
# [GUIDE] CHAPITRE 2 : PROPRIÉTÉS DE TEXTE ET COULEURS
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Toutes les propriétés de texte (police, taille, style)
[OK] Gérer les couleurs (formats, transparence)
[OK] Aligner et espacer le texte
[OK] Décorer le texte (soulignement, ombres)
[OK] Créer une typographie professionnelle
"""


# ----------------------------------------------------------------------------
# [TEXTE] PROPRIÉTÉS DE POLICE (font-*)
# ----------------------------------------------------------------------------

"""
1. font-family - Famille de police
"""

/* Police spécifique */
body {
    font-family: Arial;
}

/* Plusieurs polices (fallback) */
body {
    font-family: Arial, Helvetica, sans-serif;
}

"""
[IDEE] COMMENT FONCTIONNE LE FALLBACK ?

Le navigateur essaie :
1. Arial -> Si disponible, utiliser
2. Sinon, essayer Helvetica
3. Sinon, utiliser la police sans-serif par défaut du système


FAMILLES GÉNÉRIQUES (toujours en dernier) :

serif      -> Avec empattements (Times)
sans-serif -> Sans empattements (Arial)
monospace  -> Largeur fixe (Courier)
cursive    -> Écriture cursive
fantasy    -> Décorative


[OK] BONNES PRATIQUES :
"""

/* [OK] BON : Police + fallback + famille générique */
body {
    font-family: "Roboto", Arial, sans-serif;
}

/* [X] MAUVAIS : Une seule police */
body {
    font-family: "MaSuperPolice";  /* Si pas installée -> police par défaut */
}

/* [OK] Guillemets si nom avec espaces */
h1 {
    font-family: "Times New Roman", Times, serif;
}

"""
POLICES SYSTÈME SÛRES (Web Safe Fonts) :

Serif :
- Georgia
- Times New Roman
- Times

Sans-serif :
- Arial
- Helvetica
- Verdana
- Tahoma
- Trebuchet MS

Monospace :
- Courier New
- Courier
- Monaco


POLICES WEB (Google Fonts, etc.) :
"""

<!-- Dans HTML <head> -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

/* Dans CSS */
body {
    font-family: 'Roboto', sans-serif;
}


"""
2. font-size - Taille de police
"""

/* Unités absolues */
p {
    font-size: 16px;    /* Pixels (fixe) */
}

/* Unités relatives */
p {
    font-size: 1em;     /* 1em = taille parent */
    font-size: 1rem;    /* 1rem = taille racine (html) */
    font-size: 100%;    /* 100% = taille parent */
}

/* Mots-clés */
p {
    font-size: small;   /* xx-small, x-small, small, medium, large, x-large, xx-large */
}

"""
[IDEE] PX vs EM vs REM

PIXELS (px) :
[OK] Précis, prévisible
[X] Pas accessible (zoom texte)
[OK] Quand utiliser : Bordures, ombres

EM :
[OK] Relatif au parent
[X] Effet cascade (1.5em dans 1.5em = 2.25em)
[OK] Quand utiliser : Composants isolés

REM (Root EM) :
[OK] Relatif à <html> (16px par défaut)
[OK] Pas d'effet cascade
[OK] Accessible (respecte préférences utilisateur)
[OK] Quand utiliser : Tailles de texte (recommandé !)


EXEMPLES :
"""

/* [OK] RECOMMANDÉ : REM pour texte */
html {
    font-size: 16px;  /* Base */
}

h1 { font-size: 2rem; }    /* 32px */
h2 { font-size: 1.5rem; }  /* 24px */
p { font-size: 1rem; }     /* 16px */
small { font-size: 0.875rem; }  /* 14px */

/* EM pour composants */
.button {
    font-size: 1em;
    padding: 0.5em 1em;  /* Padding relatif à font-size */
}


"""
3. font-weight - Épaisseur de police
"""

/* Mots-clés */
p {
    font-weight: normal;   /* 400 */
    font-weight: bold;     /* 700 */
    font-weight: bolder;   /* Plus épais que parent */
    font-weight: lighter;  /* Plus fin que parent */
}

/* Valeurs numériques (100-900) */
p {
    font-weight: 100;  /* Thin */
    font-weight: 200;  /* Extra Light */
    font-weight: 300;  /* Light */
    font-weight: 400;  /* Normal */
    font-weight: 500;  /* Medium */
    font-weight: 600;  /* Semi Bold */
    font-weight: 700;  /* Bold */
    font-weight: 800;  /* Extra Bold */
    font-weight: 900;  /* Black */
}

"""
[IDEE] VALEURS NUMÉRIQUES vs MOTS-CLÉS

normal = 400
bold = 700

[OK] QUAND UTILISER NOMBRES ?
- Polices variables (Google Fonts avec poids multiples)
- Contrôle précis

[OK] EXEMPLES :
"""

h1 {
    font-weight: 700;  /* Bold */
}

.subtitle {
    font-weight: 300;  /* Light */
}

strong {
    font-weight: 600;  /* Semi-bold */
}


"""
4. font-style - Style de police
"""

p {
    font-style: normal;   /* Normal */
    font-style: italic;   /* Italique */
    font-style: oblique;  /* Oblique (rare) */
}

"""
[IDEE] ITALIC vs OBLIQUE

italic  -> Police italique dessinée spécialement
oblique -> Version penchée de la police normale

Généralement, utiliser italic


"""
5. font-variant - Variantes
"""

p {
    font-variant: normal;
    font-variant: small-caps;  /* PETITES CAPITALES */
}

"""
EXEMPLE small-caps :
"""
.title {
    font-variant: small-caps;
}

/* "Hello World" -> "HELLO WORLD" (mais plus petit) */


"""
6. Propriété raccourcie : font
"""

/* font: [font-style] [font-variant] [font-weight] font-size[/line-height] font-family */

/* Syntaxe complète */
p {
    font: italic small-caps bold 16px/1.5 Arial, sans-serif;
}

/* Minimal (taille + famille requis) */
p {
    font: 16px Arial;
}

/* Avec line-height */
p {
    font: 16px/1.6 Georgia, serif;
}

"""
[IDEE] ORDRE IMPORTANT !

Obligatoires (dans cet ordre) :
1. font-size
2. font-family

Optionnels (avant font-size) :
- font-style
- font-variant
- font-weight

Optionnel (après font-size) :
- line-height (avec /)


[OK] EXEMPLES :
"""

/* Gras, 20px, Georgia */
h1 {
    font: bold 20px Georgia, serif;
}

/* Italique, 14px, line-height 1.8 */
p {
    font: italic 14px/1.8 Arial, sans-serif;
}


# Ce fichier continue...
# ============================================================================
# FIN DE CE FICHIER - SUITE DANS css_partie1_suite2.txt
# ============================================================================
# ============================================================================
# [LIVRE] CSS - PARTIE 1 (SUITE 2) : TEXTE, COULEURS ET BOX MODEL
# ============================================================================
#
# [OBJECTIF] CETTE PARTIE COUVRE :
# - Suite Chapitre 2 : Couleurs, Alignement, Décoration de texte
# - Chapitre 3 : Box Model (Margin, Padding, Border, Box-sizing)
#
# [TEMPS] TEMPS : ~4-6 heures
# [DOCS] PRÉREQUIS : Chapitres précédents complétés
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 2 (SUITE) : COULEURS ET PROPRIÉTÉS DE TEXTE
# ============================================================================

# ----------------------------------------------------------------------------
# [DESIGN] COULEURS EN CSS
# ----------------------------------------------------------------------------

"""
CSS offre plusieurs façons de définir les couleurs.


1. NOMS DE COULEURS (140 couleurs)
"""

p {
    color: red;
    color: blue;
    color: green;
    color: white;
    color: black;
    color: gray;
    color: purple;
    color: orange;
    /* ... 140 noms au total */
}

"""
[IDEE] QUAND UTILISER ?
- Tests rapides
- Couleurs basiques
- Prototypes

[X] INCONVÉNIENTS :
- Limité à 140 couleurs
- Pas de contrôle précis
- Moins professionnel


2. HEXADÉCIMAL (#RRGGBB)
"""

p {
    color: #FF0000;  /* Rouge pur */
    color: #00FF00;  /* Vert pur */
    color: #0000FF;  /* Bleu pur */
    color: #000000;  /* Noir */
    color: #FFFFFF;  /* Blanc */
    color: #808080;  /* Gris */
}

/* Format court (si chiffres doublés) */
p {
    color: #F00;     /* = #FF0000 */
    color: #0F0;     /* = #00FF00 */
    color: #00F;     /* = #0000FF */
    color: #FFF;     /* = #FFFFFF */
}

"""
[IDEE] COMMENT FONCTIONNE HEXADÉCIMAL ?

#RRGGBB
 ││││││
 ││││└└─ Bleu (00-FF)
 ││└└─── Vert (00-FF)
 └└───── Rouge (00-FF)

Valeurs : 00 (minimum) à FF (maximum)
00 = 0 en décimal
FF = 255 en décimal

Exemples :
#FF0000 = Rouge max, Vert 0, Bleu 0 = Rouge pur
#00FF00 = Rouge 0, Vert max, Bleu 0 = Vert pur
#0000FF = Rouge 0, Vert 0, Bleu max = Bleu pur
#FFFFFF = Tout au max = Blanc
#000000 = Tout à 0 = Noir
#808080 = Moitié partout = Gris


NUANCES :
"""

/* Rouges */
#FF0000  /* Rouge vif */
#CC0000  /* Rouge foncé */
#FF6666  /* Rouge clair */

/* Bleus */
#0000FF  /* Bleu vif */
#000099  /* Bleu foncé */
#6666FF  /* Bleu clair */

/* Gris (R=G=B) */
#000000  /* Noir */
#333333  /* Gris très foncé */
#666666  /* Gris foncé */
#999999  /* Gris moyen */
#CCCCCC  /* Gris clair */
#FFFFFF  /* Blanc */

"""
[OK] QUAND UTILISER HEXADÉCIMAL ?
- Design professionnel
- Couleurs précises
- Maquettes graphiques
- Le plus courant en production


3. RGB (Red, Green, Blue)
"""

p {
    color: rgb(255, 0, 0);      /* Rouge */
    color: rgb(0, 255, 0);      /* Vert */
    color: rgb(0, 0, 255);      /* Bleu */
    color: rgb(0, 0, 0);        /* Noir */
    color: rgb(255, 255, 255);  /* Blanc */
    color: rgb(128, 128, 128);  /* Gris */
}

"""
[IDEE] SYNTAXE : rgb(rouge, vert, bleu)

Valeurs : 0 à 255 pour chaque canal

rgb(255, 0, 0)   = #FF0000
rgb(0, 255, 0)   = #00FF00
rgb(0, 0, 255)   = #0000FF


[OK] QUAND UTILISER ?
- Manipulation dynamique (JavaScript)
- Lisibilité (plus clair que hex pour certains)
- Génération de couleurs


4. RGBA (avec transparence)
"""

p {
    color: rgba(255, 0, 0, 1);    /* Rouge opaque (alpha = 1) */
    color: rgba(255, 0, 0, 0.5);  /* Rouge 50% transparent */
    color: rgba(255, 0, 0, 0);    /* Rouge totalement transparent */
}

"""
[IDEE] SYNTAXE : rgba(rouge, vert, bleu, alpha)

alpha = transparence (0 à 1)
- 0 = totalement transparent (invisible)
- 0.5 = semi-transparent
- 1 = totalement opaque (visible)


[OK] QUAND UTILISER ?
- Overlays (superpositions)
- Backgrounds semi-transparents
- Effets de verre (glassmorphism)
- Ombres subtiles


EXEMPLES PRATIQUES :
"""

/* Background semi-transparent */
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);  /* Noir 50% transparent */
}

/* Bordure transparente */
.card {
    border: 1px solid rgba(0, 0, 0, 0.1);  /* Bordure très légère */
}

/* Texte semi-transparent */
.subtitle {
    color: rgba(0, 0, 0, 0.6);  /* Texte grisé */
}


"""
5. HSL (Hue, Saturation, Lightness)
"""

p {
    color: hsl(0, 100%, 50%);    /* Rouge */
    color: hsl(120, 100%, 50%);  /* Vert */
    color: hsl(240, 100%, 50%);  /* Bleu */
}

"""
[IDEE] SYNTAXE : hsl(teinte, saturation%, luminosité%)

TEINTE (Hue) : 0-360 degrés (roue des couleurs)
- 0° ou 360° = Rouge
- 120° = Vert
- 240° = Bleu

SATURATION : 0-100%
- 0% = Gris (désaturé)
- 100% = Couleur pure (saturé)

LUMINOSITÉ (Lightness) : 0-100%
- 0% = Noir
- 50% = Couleur normale
- 100% = Blanc


ROUE DES COULEURS :
0° = Rouge
30° = Orange
60° = Jaune
120° = Vert
180° = Cyan
240° = Bleu
300° = Magenta
360° = Rouge (retour)


EXEMPLES :
"""

/* Rouges avec différentes saturations */
hsl(0, 100%, 50%)  /* Rouge vif */
hsl(0, 50%, 50%)   /* Rouge désaturé */
hsl(0, 0%, 50%)    /* Gris (pas de couleur) */

/* Rouges avec différentes luminosités */
hsl(0, 100%, 10%)  /* Rouge très foncé */
hsl(0, 100%, 50%)  /* Rouge normal */
hsl(0, 100%, 90%)  /* Rouge très clair */

"""
[OK] AVANTAGES HSL :

1. INTUITIF
   Plus facile de créer variations d'une couleur

2. CRÉATION DE PALETTES
   Facile de générer nuances

3. ACCESSIBILITÉ
   Contrôler luminosité pour contraste


EXEMPLES PRATIQUES :
"""

/* Palette de bleus */
:root {
    --blue-dark: hsl(240, 100%, 30%);
    --blue: hsl(240, 100%, 50%);
    --blue-light: hsl(240, 100%, 70%);
    --blue-lighter: hsl(240, 100%, 90%);
}

/* Éclaircir au hover (augmenter lightness) */
.button {
    background-color: hsl(200, 100%, 50%);
}

.button:hover {
    background-color: hsl(200, 100%, 60%);  /* Plus clair */
}


"""
6. HSLA (HSL avec transparence)
"""

p {
    color: hsla(0, 100%, 50%, 0.5);  /* Rouge 50% transparent */
}


"""
TABLEAU COMPARATIF FORMATS COULEURS :

┌────────────┬──────────────┬────────────┬────────────┐
│  Format    │   Exemple    │ Transparent│ Lisibilité │
├────────────┼──────────────┼────────────┼────────────┤
│ Nom        │ red          │     Non    │    ***     │
│ Hexadécimal│ #FF0000      │     Non    │    **      │
│ RGB        │ rgb(255,0,0) │     Non    │    ***     │
│ RGBA       │ rgba(...,0.5)│     Oui    │    ***     │
│ HSL        │ hsl(0,100%,.)│     Non    │    ****    │
│ HSLA       │ hsla(...,0.5)│     Oui    │    ****    │
└────────────┴──────────────┴────────────┴────────────┘


[IDEE] QUEL FORMAT CHOISIR ?

[OK] Hexadécimal (#) :
- Le plus courant
- Maquettes graphiques
- Design systems

[OK] RGBA :
- Transparence nécessaire
- Overlays, shadows

[OK] HSL/HSLA :
- Créer variations
- Palettes de couleurs
- Plus intuitif pour designers


[DESIGN] PROPRIÉTÉS UTILISANT DES COULEURS :

color           -> Couleur du texte
background-color -> Couleur de fond
border-color    -> Couleur de bordure
outline-color   -> Couleur du contour
box-shadow      -> Couleur de l'ombre
text-shadow     -> Couleur de l'ombre du texte
"""


# ----------------------------------------------------------------------------
# [MESURE] PROPRIÉTÉS DE TEXTE (suite)
# ----------------------------------------------------------------------------

"""
7. line-height - Hauteur de ligne
"""

p {
    line-height: 1.5;      /* Sans unité (recommandé) */
    line-height: 24px;     /* Pixels */
    line-height: 1.5em;    /* Em */
    line-height: 150%;     /* Pourcentage */
}

"""
[IDEE] COMMENT line-height FONCTIONNE ?

line-height = Espace entre les lignes de texte

Sans unité (recommandé) :
line-height: 1.5 -> 1.5 × font-size

Si font-size: 16px
-> line-height: 1.5 = 24px (16 × 1.5)


[OK] POURQUOI SANS UNITÉ ?

Avec unité (problème) :
"""
.parent {
    font-size: 20px;
    line-height: 30px;  /* 30px fixe */
}

.enfant {
    font-size: 12px;
    /* Hérite 30px -> Trop grand pour 12px ! */
}

"""
Sans unité (mieux) :
"""
.parent {
    font-size: 20px;
    line-height: 1.5;  /* Ratio */
}

.enfant {
    font-size: 12px;
    /* Hérite 1.5 -> 18px (12 × 1.5) [OK] */
}

"""
[OBJECTIF] VALEURS TYPIQUES :

1.0 = Serré (lettres se touchent)
1.2 = Compact (titres)
1.5 = Normal (corps de texte)
1.6 = Confortable (lecture longue)
2.0 = Aéré (citations)


EXEMPLES PRATIQUES :
"""

/* Titres - serré */
h1, h2, h3 {
    line-height: 1.2;
}

/* Paragraphes - confortable */
p {
    line-height: 1.6;
}

/* Code - très serré */
code {
    line-height: 1.1;
}


"""
8. text-align - Alignement horizontal
"""

p {
    text-align: left;     /* Gauche (défaut) */
    text-align: right;    /* Droite */
    text-align: center;   /* Centré */
    text-align: justify;  /* Justifié */
}

"""
[IDEE] COMPORTEMENTS :

left    -> Texte aligné à gauche (défaut pour LTR)
right   -> Texte aligné à droite
center  -> Texte centré
justify -> Texte justifié (aligné des deux côtés)


[OK] QUAND UTILISER ?

left :
- Texte normal (défaut)
- Lecture facile

center :
- Titres
- Citations courtes
- Éléments décoratifs

right :
- Dates, signatures
- Design spécifique

justify :
- Textes longs (journaux)
[ATTENTION] Attention aux espaces irréguliers


EXEMPLES PRATIQUES :
"""

/* Titre centré */
h1 {
    text-align: center;
}

/* Paragraphes justifiés */
.article p {
    text-align: justify;
}

/* Signature à droite */
.signature {
    text-align: right;
}


"""
9. text-decoration - Décoration du texte
"""

p {
    text-decoration: none;              /* Aucune */
    text-decoration: underline;         /* Souligné */
    text-decoration: overline;          /* Ligne au-dessus */
    text-decoration: line-through;      /* Barré */
}

/* Syntaxe complète */
p {
    text-decoration: underline solid red 2px;
    /*               │         │     │   │
                     │         │     │   └─ Épaisseur
                     │         │     └───── Couleur
                     │         └─────────── Style (solid, dashed, dotted, wavy)
                     └───────────────────── Type
    */
}

"""
[OK] QUAND UTILISER ?

none :
- Supprimer soulignement des liens
"""
a {
    text-decoration: none;  /* Très courant */
}

"""
underline :
- Emphase
- Liens (au hover)
"""
a:hover {
    text-decoration: underline;
}

"""
line-through :
- Prix barrés
- Tâches complétées
"""
.old-price {
    text-decoration: line-through;
}

"""
EXEMPLES AVANCÉS :
"""

/* Lien avec soulignement personnalisé */
a {
    text-decoration: underline solid blue 2px;
}

/* Soulignement ondulé */
.error {
    text-decoration: underline wavy red;
}

/* Plusieurs décorations */
.special {
    text-decoration: underline overline;
}


"""
10. text-transform - Transformation du texte
"""

p {
    text-transform: none;         /* Normal */
    text-transform: uppercase;    /* MAJUSCULES */
    text-transform: lowercase;    /* minuscules */
    text-transform: capitalize;   /* Première Lettre De Chaque Mot */
}

"""
[OK] QUAND UTILISER ?

uppercase :
- Titres
- Boutons
- Menus
"""
.button {
    text-transform: uppercase;
}

"""
capitalize :
- Noms propres
- Titres d'articles
"""
.article-title {
    text-transform: capitalize;
}

"""
lowercase :
- Emails
- URLs
"""
.email {
    text-transform: lowercase;
}


"""
11. letter-spacing - Espacement entre lettres
"""

p {
    letter-spacing: normal;    /* Défaut */
    letter-spacing: 1px;       /* +1px entre lettres */
    letter-spacing: -1px;      /* -1px (serré) */
    letter-spacing: 0.1em;     /* Relatif */
}

"""
[OK] QUAND UTILISER ?

Positif (espacer) :
- Titres en majuscules
- Design aéré
"""
h1 {
    text-transform: uppercase;
    letter-spacing: 2px;  /* Plus lisible en majuscules */
}

"""
Négatif (serrer) :
- Grands titres
- Économiser espace
"""
.hero-title {
    font-size: 72px;
    letter-spacing: -2px;  /* Plus compact */
}


"""
12. word-spacing - Espacement entre mots
"""

p {
    word-spacing: normal;  /* Défaut */
    word-spacing: 5px;     /* +5px entre mots */
    word-spacing: -2px;    /* -2px (serré) */
}

"""
[ATTENTION] MOINS UTILISÉ QUE letter-spacing

[OK] Cas d'usage rares :
- Design très spécifique
- Ajustements fins


"""
13. text-indent - Indentation première ligne
"""

p {
    text-indent: 0;        /* Pas d'indentation */
    text-indent: 2em;      /* 2em d'indentation */
    text-indent: 50px;     /* 50px */
}

"""
[OK] QUAND UTILISER ?
- Paragraphes de livre
- Style éditorial
"""
.article p {
    text-indent: 2em;
}

.article p:first-child {
    text-indent: 0;  /* Pas le premier */
}


"""
14. text-shadow - Ombre du texte
"""

p {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    /*           │   │   │   │
                 │   │   │   └─ Couleur
                 │   │   └───── Blur (flou)
                 │   └───────── Décalage vertical
                 └───────────── Décalage horizontal
    */
}

"""
[IDEE] SYNTAXE : text-shadow: x y blur color;

x = Décalage horizontal (px)
y = Décalage vertical (px)
blur = Flou (px, optionnel)
color = Couleur


EXEMPLES :
"""

/* Ombre simple */
h1 {
    text-shadow: 2px 2px 0 black;
}

/* Ombre floue */
h1 {
    text-shadow: 3px 3px 5px rgba(0,0,0,0.3);
}

/* Ombre colorée */
h1 {
    color: white;
    text-shadow: 2px 2px 10px blue;
}

/* Plusieurs ombres */
h1 {
    text-shadow: 
        1px 1px 0 red,
        2px 2px 0 orange,
        3px 3px 0 yellow;
}

/* Effet néon */
.neon {
    color: white;
    text-shadow: 
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #0ff,
        0 0 40px #0ff;
}

/* Effet 3D */
.title-3d {
    color: #fff;
    text-shadow:
        0 1px 0 #ccc,
        0 2px 0 #bbb,
        0 3px 0 #aaa,
        0 4px 0 #999,
        0 5px 5px rgba(0,0,0,.3);
}


"""
15. white-space - Gestion des espaces blancs
"""

p {
    white-space: normal;   /* Défaut : collapse espaces */
    white-space: nowrap;   /* Pas de retour à la ligne */
    white-space: pre;      /* Préserve espaces et retours */
    white-space: pre-wrap; /* Préserve + wrap */
    white-space: pre-line; /* Préserve retours, collapse espaces */
}

"""
[IDEE] COMPORTEMENTS :

normal :
- Espaces multiples -> 1 espace
- Retours ligne -> ignorés
- Wrap automatique

nowrap :
- Pas de wrap (ligne infinie)
- Utile pour empêcher coupure
"""
.no-break {
    white-space: nowrap;
}

"""
pre :
- Comme <pre> HTML
- Préserve tout
- Pas de wrap
"""
code {
    white-space: pre;
}

"""
pre-wrap :
- Préserve espaces
- Wrap automatique (évite débordement)


[OK] QUAND UTILISER ?

nowrap : Empêcher coupure
"""
.button {
    white-space: nowrap;  /* "Buy Now" sur une ligne */
}

"""
pre : Code, ASCII art
"""
.code-block {
    white-space: pre;
}


"""
16. text-overflow - Gestion du débordement
"""

p {
    text-overflow: clip;      /* Couper */
    text-overflow: ellipsis;  /* ... */
}

"""
[ATTENTION] NÉCESSITE :
"""
p {
    white-space: nowrap;      /* Pas de wrap */
    overflow: hidden;         /* Cacher débordement */
    text-overflow: ellipsis;  /* Ajouter ... */
}

"""
[OK] PATTERN COMMUN : Texte tronqué avec ...
"""
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;  /* Largeur limite */
}

/* "Ceci est un très long texte" -> "Ceci est un très..." */


# ============================================================================
# [GUIDE] CHAPITRE 3 : BOX MODEL (MODÈLE DE BOÎTE)
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Comprendre le Box Model (margin, padding, border)
[OK] Différence entre margin et padding
[OK] Propriétés de bordure
[OK] box-sizing et pourquoi c'est crucial
[OK] Collapse de marges
[OK] outline vs border
[OK] Calculer dimensions d'éléments
"""


# ----------------------------------------------------------------------------
# [PACKAGE] LE BOX MODEL : CONCEPT FONDAMENTAL
# ----------------------------------------------------------------------------

"""
[IDEE] QU'EST-CE QUE LE BOX MODEL ?

Chaque élément HTML est une BOÎTE rectangulaire.
Cette boîte est composée de 4 couches :

┌─────────────────────────────────┐
│         MARGIN (marge)          │  <- Espace EXTERNE (transparent)
│  ┌───────────────────────────┐  │
│  │    BORDER (bordure)       │  │  <- Bordure visible
│  │  ┌─────────────────────┐  │  │
│  │  │  PADDING (rembourr.)│  │  │  <- Espace INTERNE (coloré avec bg)
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │   CONTENT     │  │  │  │  <- Contenu (texte, image)
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘


ANALOGIE [FRAME_WITH_PICTURE] :

Imaginez un tableau accroché au mur :

CONTENT  = Le tableau lui-même
PADDING  = Passe-partout (espace autour du tableau dans le cadre)
BORDER   = Le cadre
MARGIN   = Espace entre le cadre et le mur (ou autres tableaux)


[REFLEXION] POURQUOI C'EST IMPORTANT ?

Comprendre le Box Model est ESSENTIEL pour :
- Calculer dimensions d'éléments
- Créer layouts
- Éviter débordements
- Comprendre espacement
"""


# ----------------------------------------------------------------------------
# [MESURE] WIDTH ET HEIGHT (Dimensions)
# ----------------------------------------------------------------------------

"""
1. width - Largeur
"""

div {
    width: 300px;      /* Pixels */
    width: 50%;        /* Pourcentage du parent */
    width: 20em;       /* Em */
    width: auto;       /* Automatique (défaut) */
}

/* Limites */
div {
    min-width: 200px;  /* Largeur minimale */
    max-width: 800px;  /* Largeur maximale */
}

"""
[IDEE] COMPORTEMENT PAR DÉFAUT :

Éléments BLOCK (div, p, h1) :
- width: auto -> Prend toute la largeur du parent
- height: auto -> S'adapte au contenu

Éléments INLINE (span, a) :
- width et height -> Ignorés !
- Largeur = contenu


[OK] EXEMPLES width :
"""

/* Largeur fixe */
.box {
    width: 500px;
}

/* Largeur responsive */
.container {
    width: 90%;        /* 90% du parent */
    max-width: 1200px; /* Mais pas plus de 1200px */
}

/* Largeur minimale */
.sidebar {
    width: 25%;
    min-width: 250px;  /* Minimum 250px même si 25% < 250px */
}


"""
2. height - Hauteur
"""

div {
    height: 200px;     /* Pixels */
    height: 50vh;      /* 50% de la hauteur viewport */
    height: auto;      /* Automatique (défaut) */
}

/* Limites */
div {
    min-height: 100px; /* Hauteur minimale */
    max-height: 500px; /* Hauteur maximale */
}

"""
[ATTENTION] ATTENTION AVEC height !

height: 100% -> Fonctionne SEULEMENT si parent a une hauteur définie
"""

/* [X] Ne fonctionne pas */
body { height: 100%; }  /* Parent (html) n'a pas de hauteur */

/* [OK] Fonctionne */
html, body { height: 100%; }
.full-height { height: 100%; }  /* Maintenant body a une hauteur */


"""
[OK] EXEMPLES height :
"""

/* Hauteur fixe */
.box {
    height: 300px;
}

/* Hauteur viewport */
.hero {
    height: 100vh;  /* Toute la hauteur de l'écran */
}

/* Hauteur minimale */
.content {
    min-height: 400px;  /* Au moins 400px, s'étend si plus de contenu */
}


# ----------------------------------------------------------------------------
# [PACKAGE] PADDING (Rembourrage interne)
# ----------------------------------------------------------------------------

"""
padding = Espace ENTRE le contenu et la bordure

┌─────────────────────┐
│ BORDER              │
│ ┌─────────────────┐ │
│ │ PADDING    ^v    │ │  <- Espace interne
│ │  <-> CONTENT <->    │ │
│ │       ^v         │ │
│ └─────────────────┘ │
└─────────────────────┘
"""

div {
    padding: 20px;  /* Tous les côtés */
}

/* Par côté */
div {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

/* Raccourcis */
div {
    padding: 20px;               /* Tous côtés */
    padding: 10px 20px;          /* Vertical | Horizontal */
    padding: 10px 20px 30px;     /* Haut | H/G | Bas */
    padding: 10px 20px 30px 40px; /* Haut Droite Bas Gauche (sens horaire) */
}

"""
[IDEE] MNÉMOTECHNIQUE ORDRE : TRouBLe (Top Right Bottom Left)

padding: 10px 20px 30px 40px;
         │    │    │    │
         │    │    │    └─ Left (Gauche)
         │    │    └────── Bottom (Bas)
         │    └─────────── Right (Droite)
         └──────────────── Top (Haut)


Sens horaire (comme une horloge) :
    12h -> Top
     3h -> Right
     6h -> Bottom
     9h -> Left


[REFLEXION] COMPORTEMENT PADDING :

[OK] Padding ajoute à la taille totale (par défaut)
"""

div {
    width: 200px;
    padding: 20px;
}

/* Largeur totale = 200px + 20px + 20px = 240px */
/*                  width   left   right      */

"""
[ATTENTION] Padding a la couleur du background !
"""

div {
    background-color: lightblue;
    padding: 20px;
}

/* Le padding sera aussi lightblue */


"""
[OK] QUAND UTILISER padding ?

1. ESPACE ENTRE CONTENU ET BORDURE
"""
.box {
    border: 1px solid black;
    padding: 20px;  /* Texte ne touche pas la bordure */
}

"""
2. AGRANDIR ZONE CLIQUABLE
"""
.button {
    padding: 10px 20px;  /* Bouton plus grand et facile à cliquer */
}

"""
3. CRÉER ESPACEMENT INTERNE
"""
.card {
    background-color: white;
    padding: 30px;  /* Contenu aéré */
}


"""
EXEMPLES PRATIQUES :
"""

/* Bouton */
.button {
    padding: 12px 24px;  /* Vertical: 12px, Horizontal: 24px */
}

/* Card */
.card {
    padding: 20px;
    padding-bottom: 30px;  /* Plus d'espace en bas */
}

/* Section */
.section {
    padding: 60px 20px;  /* Vertical: 60px, Horizontal: 20px */
}


# ----------------------------------------------------------------------------
# [BLACK_SQUARE_BUTTON] BORDER (Bordure)
# ----------------------------------------------------------------------------

"""
border = Ligne autour de l'élément (entre padding et margin)
"""

div {
    border: 1px solid black;
    /*      │   │     │
            │   │     └─ Couleur
            │   └─────── Style
            └─────────── Épaisseur
    */
}

"""
[IDEE] PROPRIÉTÉS border :

1. border-width (épaisseur)
2. border-style (style)
3. border-color (couleur)


1. border-width
"""

div {
    border-width: 1px;             /* Tous côtés */
    border-width: 1px 2px;         /* V | H */
    border-width: 1px 2px 3px 4px; /* T R B L */
}

/* Par côté */
div {
    border-top-width: 1px;
    border-right-width: 2px;
    border-bottom-width: 3px;
    border-left-width: 4px;
}

/* Mots-clés */
div {
    border-width: thin;    /* Fin */
    border-width: medium;  /* Moyen (défaut) */
    border-width: thick;   /* Épais */
}

"""
2. border-style (OBLIGATOIRE pour voir la bordure !)
"""

div {
    border-style: solid;   /* Ligne continue */
    border-style: dashed;  /* Tirets - - - */
    border-style: dotted;  /* Points · · · */
    border-style: double;  /* Double ligne */
    border-style: groove;  /* Effet 3D enfoncé */
    border-style: ridge;   /* Effet 3D relief */
    border-style: inset;   /* Encadré enfoncé */
    border-style: outset;  /* Encadré surélevé */
    border-style: none;    /* Pas de bordure */
    border-style: hidden;  /* Comme none */
}

"""
[ATTENTION] IMPORTANT :

Sans border-style, la bordure n'apparaît PAS !
"""

/* [X] Invisible (pas de style) */
div {
    border-width: 10px;
    border-color: red;
}

/* [OK] Visible */
div {
    border-width: 10px;
    border-style: solid;  /* <- OBLIGATOIRE */
    border-color: red;
}


"""
3. border-color
"""

div {
    border-color: red;
    border-color: #FF0000;
    border-color: rgb(255, 0, 0);
}

/* Par côté (couleurs différentes) */
div {
    border-top-color: red;
    border-right-color: blue;
    border-bottom-color: green;
    border-left-color: yellow;
}


"""
RACCOURCI border (le plus utilisé !)
"""

div {
    border: 2px solid blue;
    /*      │   │     │
            │   │     └─ Couleur
            │   └─────── Style
            └─────────── Épaisseur
    */
}

/* Ordre flexible (mais convention : width style color) */
div {
    border: solid 2px blue;     /* [OK] Fonctionne */
    border: blue solid 2px;     /* [OK] Fonctionne */
    border: 2px solid blue;     /* [OK] Recommandé */
}

"""
Par côté :
"""

div {
    border-top: 1px solid black;
    border-right: 2px dashed blue;
    border-bottom: 3px dotted red;
    border-left: none;
}


"""
EXEMPLES PRATIQUES :
"""

/* Bordure simple */
.box {
    border: 1px solid #ccc;
}

/* Bordure épaisse colorée */
.alert {
    border: 3px solid red;
    border-left-width: 5px;  /* Accentuer gauche */
}

/* Bordures partielles */
.underline {
    border-bottom: 2px solid blue;
}

.sidebar {
    border-right: 1px solid #e0e0e0;
}

/* Effet carte */
.card {
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;  /* Coins arrondis (chapitre suivant) */
}


# Ce fichier continue...
# ============================================================================
# FIN DE CE FICHIER - SUITE DANS css_partie1_suite3.txt
# ============================================================================
# ============================================================================
# [LIVRE] CSS - PARTIE 1 (SUITE 3) : BOX MODEL ET POSITIONNEMENT
# ============================================================================
#
# [OBJECTIF] CETTE PARTIE COUVRE :
# - Fin Chapitre 3 : Padding, Border, Box-sizing, Overflow
# - Chapitre 4 : Positionnement (static, relative, absolute, fixed, sticky)
#
# [TEMPS] TEMPS : ~4-6 heures
# [DOCS] PRÉREQUIS : Chapitres précédents complétés
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 3 (SUITE) : BOX MODEL - PADDING, BORDER, BOX-SIZING
# ============================================================================

# ----------------------------------------------------------------------------
# [DESIGN] PADDING (REMBOURRAGE INTERNE)
# ----------------------------------------------------------------------------

"""
padding = Espace ENTRE le contenu et la bordure

┌─────────────────────┐
│ BORDER              │
│ ┌─────────────────┐ │
│ │ PADDING    ^v    │ │
│ │  <-> CONTENT <->    │ │
│ │       ^v         │ │
│ └─────────────────┘ │
└─────────────────────┘


[IDEE] SYNTAXES (identiques à margin) :
"""

/* Tous les côtés */
div {
    padding: 20px;
}

/* Vertical | Horizontal */
div {
    padding: 20px 40px;
}

/* Haut | Horizontal | Bas */
div {
    padding: 10px 20px 30px;
}

/* Haut | Droite | Bas | Gauche */
div {
    padding: 10px 20px 30px 40px;
}

/* Propriétés individuelles */
div {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

"""
[REFLEXION] DIFFÉRENCE margin vs padding :

MARGIN :
- Espace EXTÉRIEUR (entre éléments)
- Transparent
- Peut être négatif
- Collapse verticalement

PADDING :
- Espace INTÉRIEUR (dans l'élément)
- Prend la couleur du background
- Toujours positif
- Ne collapse jamais


EXEMPLES PRATIQUES :
"""

/* Bouton avec padding */
.button {
    padding: 12px 24px;        /* Vertical: 12px, Horizontal: 24px */
    background-color: blue;    /* Padding sera aussi bleu */
    border: none;
}

/* Card avec espacement interne */
.card {
    padding: 30px;             /* Contenu ne touche pas bords */
    background-color: white;
    border: 1px solid #ddd;
}

/* Section avec padding asymétrique */
.section {
    padding: 60px 20px;        /* Plus d'espace vertical */
}

/* Liste avec padding gauche */
ul {
    padding-left: 40px;        /* Espace pour bullets */
}


"""
[OK] QUAND UTILISER padding ?

1. AGRANDIR ZONE CLIQUABLE
"""
.button {
    padding: 15px 30px;  /* Bouton plus facile à cliquer */
}

"""
2. ESPACER CONTENU DE LA BORDURE
"""
.box {
    border: 2px solid black;
    padding: 20px;       /* Texte ne touche pas bordure */
}

"""
3. CRÉER ESPACEMENT INTERNE COLORÉ
"""
.highlighted {
    background-color: yellow;
    padding: 10px;       /* Fond jaune autour du texte */
}


"""
[ATTENTION] ATTENTION : Padding ajoute à la largeur !

Par défaut (box-sizing: content-box) :
"""

.box {
    width: 200px;
    padding: 20px;
    border: 5px solid;
}

/* Largeur totale = 200 + 20 + 20 + 5 + 5 = 250px
                     width  left right Bl  Br    */

"""
Solution -> box-sizing: border-box (voir plus bas)


# ----------------------------------------------------------------------------
# [BLACK_SQUARE_BUTTON] BORDER (BORDURE)
# ----------------------------------------------------------------------------

"""
border = Ligne autour de l'élément (entre padding et margin)


[IDEE] PROPRIÉTÉS BORDER :

1. border-width  -> Épaisseur
2. border-style  -> Style (solid, dashed, etc.) - OBLIGATOIRE !
3. border-color  -> Couleur


1. border-width (épaisseur)
"""

div {
    border-width: thin;         /* Fin */
    border-width: medium;       /* Moyen (défaut) */
    border-width: thick;        /* Épais */
    border-width: 1px;          /* Valeur précise */
}

/* Différent par côté */
div {
    border-width: 1px;                 /* Tous */
    border-width: 1px 2px;             /* V | H */
    border-width: 1px 2px 3px 4px;     /* T R B L */
}

/* Propriétés individuelles */
div {
    border-top-width: 1px;
    border-right-width: 2px;
    border-bottom-width: 3px;
    border-left-width: 4px;
}

"""
2. border-style (OBLIGATOIRE pour voir bordure !)
"""

div {
    border-style: solid;       /* ────── Ligne continue */
    border-style: dashed;      /* ─ ─ ─ ─ Tirets */
    border-style: dotted;      /* · · · · · Points */
    border-style: double;      /* ══════ Double ligne */
    border-style: groove;      /* ▓▒░ Effet 3D gravé */
    border-style: ridge;       /* ░▒▓ Effet 3D relief */
    border-style: inset;       /* Encadré enfoncé */
    border-style: outset;      /* Encadré surélevé */
    border-style: none;        /* Pas de bordure */
    border-style: hidden;      /* Cachée (tableaux) */
}

/* Différent par côté */
div {
    border-top-style: solid;
    border-right-style: dashed;
    border-bottom-style: dotted;
    border-left-style: none;
}

"""
[ATTENTION] IMPORTANT : Sans border-style, bordure invisible !

[X] Ne fonctionne pas :
"""
div {
    border-width: 10px;
    border-color: red;
    /* Pas de border-style -> Invisible ! */
}

"""
[OK] Fonctionne :
"""
div {
    border-width: 10px;
    border-style: solid;   /* <- OBLIGATOIRE */
    border-color: red;
}


"""
3. border-color (couleur)
"""

div {
    border-color: red;
    border-color: #FF0000;
    border-color: rgb(255, 0, 0);
    border-color: rgba(255, 0, 0, 0.5);
}

/* Différent par côté */
div {
    border-top-color: red;
    border-right-color: blue;
    border-bottom-color: green;
    border-left-color: yellow;
}


"""
PROPRIÉTÉ RACCOURCIE border (LA PLUS UTILISÉE !)
"""

div {
    border: 2px solid blue;
    /*      │   │     │
            │   │     └─ Couleur
            │   └─────── Style
            └─────────── Épaisseur
    */
}

/* Ordre flexible mais convention : width style color */
div {
    border: solid 2px blue;     /* [OK] Fonctionne */
    border: blue solid 2px;     /* [OK] Fonctionne */
    border: 2px solid blue;     /* [OK] Convention (recommandé) */
}

"""
BORDURES PAR CÔTÉ :
"""

div {
    border-top: 1px solid black;
    border-right: 2px dashed blue;
    border-bottom: 3px dotted red;
    border-left: none;
}

"""
EXEMPLES PRATIQUES :
"""

/* Bordure simple */
.box {
    border: 1px solid #ccc;
}

/* Bordure accentuée à gauche */
.alert {
    border: 1px solid #ddd;
    border-left: 4px solid red;
}

/* Bordure uniquement en bas (underline) */
.title {
    border-bottom: 2px solid blue;
    padding-bottom: 10px;
}

/* Bordure séparateur */
.divider {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin: 20px 0;
}

/* Bordure en pointillés */
.coupon {
    border: 2px dashed orange;
    padding: 20px;
}


"""
BORDER-RADIUS (Coins arrondis)
"""

div {
    border-radius: 5px;          /* Tous coins */
    border-radius: 10px 20px;    /* TL/BR | TR/BL */
    border-radius: 5px 10px 15px 20px;  /* TL TR BR BL */
}

/* Propriétés individuelles */
div {
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 40px;
}

"""
[OK] EXEMPLES border-radius :
"""

/* Bouton arrondi */
.button {
    border-radius: 5px;
}

/* Cercle parfait */
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;      /* 50% = cercle si carré */
}

/* Pilule */
.pill {
    border-radius: 999px;    /* Très grand = arrondi complet */
    padding: 10px 20px;
}

/* Arrondis asymétriques */
.card {
    border-radius: 10px 10px 0 0;  /* Arrondi seulement en haut */
}


# ----------------------------------------------------------------------------
# [PACKAGE] BOX-SIZING : LE PLUS IMPORTANT !
# ----------------------------------------------------------------------------

"""
box-sizing = Contrôle COMMENT width et height sont calculés


[IDEE] DEUX VALEURS :

1. content-box (DÉFAUT) - width = contenu seulement
2. border-box (RECOMMANDÉ !) - width = contenu + padding + border


COMPARAISON :
"""

/* content-box (défaut) */
.box1 {
    box-sizing: content-box;
    width: 200px;
    padding: 20px;
    border: 5px solid;
}
/* Largeur totale = 200 + 20 + 20 + 5 + 5 = 250px */


/* border-box (recommandé) */
.box2 {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 5px solid;
}
/* Largeur totale = 200px (inclut padding et border !) */

"""
[REFLEXION] POURQUOI border-box EST MEILLEUR ?

Problème avec content-box :
"""

/* Je veux 3 colonnes de 33.33% */
.col {
    width: 33.33%;
    padding: 20px;     /* [X] Déborde ! 33.33% + padding > 100% */
    border: 1px solid;
}

"""
Solution avec border-box :
"""

.col {
    box-sizing: border-box;
    width: 33.33%;     /* [OK] Reste à 33.33% même avec padding */
    padding: 20px;
    border: 1px solid;
}

"""
[OK] BEST PRACTICE UNIVERSELLE :

Appliquer border-box à TOUT le site :
"""

/* * TOUJOURS FAIRE ÇA AU DÉBUT ! */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Ou seulement sur html et héritage */
html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

"""
[IDEE] AVANTAGES border-box :

[OK] Calculs plus simples
[OK] Layouts plus prévisibles
[OK] Pas de débordements surprenants
[OK] Width = vraie largeur visible


EXEMPLES :
"""

/* Grid layout simple */
* {
    box-sizing: border-box;
}

.col-4 {
    width: 25%;
    padding: 15px;
    float: left;
}
/* 4 colonnes parfaites même avec padding */

/* Input qui prend toute la largeur */
input {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
}
/* Input ne déborde pas du parent */


# ----------------------------------------------------------------------------
# [WATER_WAVE] OVERFLOW (GESTION DU DÉBORDEMENT)
# ----------------------------------------------------------------------------

"""
overflow = Que faire quand le contenu dépasse la taille de l'élément ?


[IDEE] VALEURS :
"""

div {
    overflow: visible;     /* Défaut : contenu déborde */
    overflow: hidden;      /* Cacher le débordement */
    overflow: scroll;      /* Toujours afficher scrollbar */
    overflow: auto;        /* Scrollbar seulement si nécessaire */
}

/* Par direction */
div {
    overflow-x: hidden;    /* Horizontal */
    overflow-y: auto;      /* Vertical */
}

"""
COMPORTEMENTS :

visible (défaut) :
- Contenu déborde
- Peut chevaucher autres éléments

hidden :
- Contenu caché (coupé)
- Pas de scrollbar

scroll :
- Toujours scrollbar (même si pas nécessaire)

auto :
- Scrollbar seulement si débordement
- Recommandé !


[OK] EXEMPLES PRATIQUES :
"""

/* Cacher texte qui déborde */
.truncate {
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;  /* Ajoute ... */
}

/* Scrollable container */
.chat-messages {
    height: 400px;
    overflow-y: auto;         /* Scroll vertical si besoin */
}

/* Image qui déborde cachée */
.image-container {
    width: 300px;
    height: 300px;
    overflow: hidden;
}

.image-container img {
    width: 100%;
    height: auto;
}

/* Modal scrollable */
.modal-body {
    max-height: 70vh;
    overflow-y: auto;
}


"""
SCROLL PERSONNALISÉ (Webkit/Chrome)
"""

/* Personnaliser scrollbar */
.scrollable::-webkit-scrollbar {
    width: 10px;
}

.scrollable::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.scrollable::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

.scrollable::-webkit-scrollbar-thumb:hover {
    background: #555;
}


# ----------------------------------------------------------------------------
# [MESURE] OUTLINE (CONTOUR)
# ----------------------------------------------------------------------------

"""
outline = Ligne AUTOUR de l'élément (à l'extérieur du border)

[IDEE] DIFFÉRENCE border vs outline :

BORDER :
- Fait partie du Box Model
- Compte dans dimensions
- Peut être arrondi

OUTLINE :
- Ne compte PAS dans dimensions
- Ne peut PAS être arrondi
- Toujours rectangulaire
- Utilisé pour accessibilité (focus)
"""

div {
    outline: 2px solid blue;
    /*       │   │     │
             │   │     └─ Couleur
             │   └─────── Style
             └─────────── Épaisseur
    */
}

/* Propriétés détaillées */
div {
    outline-width: 2px;
    outline-style: solid;     /* solid, dashed, dotted, double */
    outline-color: blue;
    outline-offset: 5px;      /* Distance de l'élément */
}

"""
[OK] UTILISATION PRINCIPALE : Focus accessibility
"""

/* Focus sur inputs */
input:focus {
    outline: 2px solid blue;
    outline-offset: 2px;
}

/* Retirer outline ([ATTENTION] ATTENTION à l'accessibilité !) */
button:focus {
    outline: none;           /* [X] Mauvais pour accessibilité */
}

/* [OK] MIEUX : Remplacer par style visible */
button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.3);
}


# ============================================================================
# [GUIDE] CHAPITRE 4 : POSITIONNEMENT (POSITION)
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Les 5 types de positionnement CSS
[OK] Différence entre relative, absolute, fixed
[OK] Utiliser top, right, bottom, left
[OK] z-index et ordre d'empilement
[OK] Position sticky (le plus récent)
[OK] Créer layouts complexes
"""


# ----------------------------------------------------------------------------
# [IMPORTANT] PROPRIÉTÉ position
# ----------------------------------------------------------------------------

"""
position = Contrôle COMMENT un élément est positionné dans la page


[IDEE] 5 VALEURS :

1. static   (défaut)
2. relative
3. absolute
4. fixed
5. sticky


PROPRIÉTÉS DE POSITIONNEMENT :

top      -> Distance du haut
right    -> Distance de la droite
bottom   -> Distance du bas
left     -> Distance de la gauche

[ATTENTION] Ces propriétés ne fonctionnent QUE si position ≠ static
"""


# ----------------------------------------------------------------------------
# 1⃣ POSITION: STATIC (DÉFAUT)
# ----------------------------------------------------------------------------

"""
position: static;

[IDEE] COMPORTEMENT :
- Positionnement NORMAL (flux du document)
- top, right, bottom, left -> IGNORÉS
- C'est le défaut de tous les éléments
"""

div {
    position: static;  /* Défaut, rarement explicité */
}

"""
[REFLEXION] QUAND UTILISER ?

Rarement besoin de le spécifier.
Utile seulement pour ANNULER un autre positionnement.


# ----------------------------------------------------------------------------
# 2⃣ POSITION: RELATIVE
# ----------------------------------------------------------------------------

"""
position: relative;

[IDEE] COMPORTEMENT :
- Élément reste dans le flux normal
- MAIS peut être déplacé avec top/right/bottom/left
- L'espace d'origine est CONSERVÉ
- Autres éléments ne bougent PAS
"""

.box {
    position: relative;
    top: 20px;          /* Descend de 20px */
    left: 30px;         /* Va à droite de 30px */
}

"""
EXEMPLE VISUEL :

AVANT :
┌────┐┌────┐┌────┐
│ A  ││ B  ││ C  │
└────┘└────┘└────┘

APRÈS (B en position relative) :
┌────┐       ┌────┐
│ A  │  ┌────┐ C  │
└────┘  │ B  │────┘
        └────┘
        ^
L'espace de B est conservé,
mais B est visuellement déplacé


[REFLEXION] POURQUOI UTILISER relative ?

1. DÉCALER LÉGÈREMENT UN ÉLÉMENT
"""
.badge {
    position: relative;
    top: -5px;          /* Remonter de 5px */
}

"""
2. CONTEXTE POUR absolute (TRÈS IMPORTANT !)
"""
.parent {
    position: relative;  /* <- Devient le référent */
}

.child {
    position: absolute;  /* Se positionne par rapport à .parent */
    top: 10px;
    right: 10px;
}

"""
[OK] EXEMPLES PRATIQUES :
"""

/* Décalage léger */
.raised-text {
    position: relative;
    top: -2px;
}

/* Badge sur coin */
.icon-container {
    position: relative;
}

.badge {
    position: absolute;
    top: -5px;
    right: -5px;
}


# ----------------------------------------------------------------------------
# 3⃣ POSITION: ABSOLUTE
# ----------------------------------------------------------------------------

"""
position: absolute;

[IDEE] COMPORTEMENT :
- SORT du flux normal (autres éléments l'ignorent)
- Se positionne par rapport au PREMIER PARENT POSITIONNÉ
  (position: relative, absolute, fixed, sticky)
- Si aucun parent positionné -> par rapport à <html>


[CLE] RÈGLE IMPORTANTE :

Absolute cherche son référent en remontant les parents :
1. Parent direct positionné ? -> Oui, c'est lui !
2. Non ? Grand-parent positionné ? -> Oui, c'est lui !
3. Non ? Continue jusqu'à trouver...
4. Aucun ? -> <html> (la page entière)
"""

<div class="container">          <!-- position: static -> ignoré -->
  <div class="parent">           <!-- position: relative -> RÉFÉRENT ! -->
    <div class="child"></div>    <!-- position: absolute -->
  </div>
</div>

.parent {
    position: relative;  /* <- Devient le référent */
    width: 300px;
    height: 300px;
}

.child {
    position: absolute;
    top: 20px;           /* 20px du haut du .parent */
    right: 20px;         /* 20px de la droite du .parent */
}

"""
[OK] CAS D'USAGE COURANTS :
"""

/* 1. OVERLAY (superposition) */
.modal-overlay {
    position: fixed;         /* Ou absolute */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

/* 2. BADGE SUR ICÔNE */
.icon-wrapper {
    position: relative;
    display: inline-block;
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
}

/* 3. DROPDOWN MENU */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;           /* Juste en dessous */
    left: 0;
    display: none;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

/* 4. CENTRAGE ABSOLU */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* Déplace de -50% de sa propre taille */
}


"""
[ATTENTION] PIÈGES COURANTS :
"""

/* [X] ERREUR : Oublier position: relative sur parent */
<div class="parent">           <!-- position: static (défaut) -->
  <div class="child"></div>    <!-- Absolute par rapport à <html> ! -->
</div>

.child {
    position: absolute;
    top: 20px;            /* 20px de <html>, pas du parent ! */
}

/* [OK] CORRECT : Parent positionné */
.parent {
    position: relative;   /* <- OBLIGATOIRE */
}

.child {
    position: absolute;
    top: 20px;            /* 20px du parent */
}


# ----------------------------------------------------------------------------
# 4⃣ POSITION: FIXED
# ----------------------------------------------------------------------------

"""
position: fixed;

[IDEE] COMPORTEMENT :
- SORT du flux normal
- Se positionne par rapport au VIEWPORT (fenêtre)
- RESTE FIXÉ même au scroll
- Toujours visible
"""

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: white;
    z-index: 1000;
}

"""
[OK] CAS D'USAGE :
"""

/* 1. HEADER FIXE */
header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 100;
}

/* [ATTENTION] Ajouter padding au body pour compenser */
body {
    padding-top: 60px;    /* Hauteur du header */
}

/* 2. BOUTON FLOTTANT (FAB) */
.fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: blue;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* 3. SIDEBAR FIXE */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 250px;
    overflow-y: auto;
}

/* 4. MODAL PLEIN ÉCRAN */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}


# ----------------------------------------------------------------------------
# 5⃣ POSITION: STICKY
# ----------------------------------------------------------------------------

"""
position: sticky;

[IDEE] COMPORTEMENT :
- HYBRIDE entre relative et fixed
- Reste relative JUSQU'À un seuil de scroll
- Devient fixed à ce seuil
- Revient relative après
"""

.sticky-header {
    position: sticky;
    top: 0;              /* Devient sticky à 0px du haut */
    background-color: white;
}

"""
[REFLEXION] COMMENT ÇA MARCHE ?

1. Élément scroll normalement (comme relative)
2. Atteint le seuil (ex: top: 0)
3. Se "colle" à cette position (comme fixed)
4. Reste collé dans son conteneur parent
5. Quitte le sticky quand parent disparaît


[OK] CAS D'USAGE :
"""

/* 1. EN-TÊTES DE TABLE COLLANTS */
thead th {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10;
}

/* 2. NAVIGATION STICKY */
nav {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* 3. SIDEBAR QUI SUIT LE SCROLL */
aside {
    position: sticky;
    top: 20px;           /* 20px du haut du viewport */
}

/* 4. CALL-TO-ACTION STICKY */
.cta-banner {
    position: sticky;
    bottom: 0;
    background-color: blue;
    padding: 20px;
}


"""
[ATTENTION] ATTENTION STICKY :

1. Nécessite un seuil (top, bottom, left, right)
"""
/* [X] Ne fonctionne pas */
.sticky {
    position: sticky;    /* Pas de seuil ! */
}

/* [OK] Fonctionne */
.sticky {
    position: sticky;
    top: 0;              /* <- Seuil obligatoire */
}

"""
2. Parent doit avoir de la hauteur
3. Ne traverse PAS les overflow: hidden


# ----------------------------------------------------------------------------
# [OBJECTIF] PROPRIÉTÉS top, right, bottom, left
# ----------------------------------------------------------------------------

"""
Ces propriétés POSITIONNENT l'élément

[IDEE] FONCTIONNEMENT :

top: 20px     -> Distance du HAUT du référent
right: 30px   -> Distance de la DROITE du référent
bottom: 40px  -> Distance du BAS du référent
left: 50px    -> Distance de la GAUCHE du référent


EXEMPLES :
"""

/* Coller en haut à droite */
.top-right {
    position: absolute;
    top: 0;
    right: 0;
}

/* Coller en bas à gauche */
.bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
}

/* Centrer verticalement */
.center-vertical {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* Centrer horizontalement ET verticalement */
.center-both {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Étendre sur toute la zone */
.full-cover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Équivalent */
.full-cover-alt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


# ----------------------------------------------------------------------------
# [DOCS] z-index (ORDRE D'EMPILEMENT)
# ----------------------------------------------------------------------------

"""
z-index = Contrôle l'ordre d'empilement (quel élément est devant)

[IDEE] FONCTIONNEMENT :

- Plus grand z-index = plus devant
- Par défaut = auto (0)
- Nécessite position ≠ static
"""

.behind {
    position: relative;
    z-index: 1;
}

.middle {
    position: relative;
    z-index: 10;
}

.front {
    position: relative;
    z-index: 100;
}

"""
[OK] CONVENTIONS z-index :

0-9      : Éléments normaux
10-99    : Dropdowns, tooltips
100-999  : Modals, overlays
1000+    : Notifications, toasts


EXEMPLES :
"""

/* Structure typique */
.page-content {
    z-index: 1;
}

.dropdown-menu {
    position: absolute;
    z-index: 50;
}

.modal-overlay {
    position: fixed;
    z-index: 100;
}

.modal-content {
    position: fixed;
    z-index: 101;
}

.notification {
    position: fixed;
    z-index: 1000;
}


"""
[ATTENTION] CONTEXTE D'EMPILEMENT (Stacking Context)

z-index fonctionne DANS un contexte d'empilement.


# Ce fichier continue avec exercices...
# ============================================================================
# FIN DE CE FICHIER - SUITE DANS css_partie1_suite4.txt (exercices)
# ============================================================================
# ============================================================================
# [LIVRE] CSS - PARTIE 1 (SUITE 4) : EXERCICES & RÉCAPITULATIF
# ============================================================================
#
# [OBJECTIF] CONTENU :
# - Exercices pratiques par chapitre
# - Projets guidés
# - Quiz de validation
# - Récapitulatif complet Partie 1
# - Checklist de maîtrise
#
# [TEMPS] TEMPS : ~6-8 heures
# [DOCS] OBJECTIF : Consolider toutes les connaissances
# ============================================================================


# ============================================================================
# [COURS] EXERCICES CHAPITRE 1 : SÉLECTEURS
# ============================================================================

"""
EXERCICE 1.1 : Sélecteurs de base

Créez un fichier HTML avec :
- 3 paragraphes avec différentes classes
- Une liste avec 5 éléments
- 2 divs avec des IDs différents

Ensuite, en CSS :
1. Colorez tous les paragraphes en bleu
2. Donnez un background jaune à la classe .highlight
3. Mettez en gras le #header
4. Changez la taille de police de tous les li
"""

/* HTML à créer */
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exercice Sélecteurs</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="header">
        <h1>Titre Principal</h1>
    </div>
    
    <p>Premier paragraphe normal.</p>
    <p class="highlight">Paragraphe important à mettre en évidence.</p>
    <p>Troisième paragraphe.</p>
    
    <ul>
        <li>Élément 1</li>
        <li>Élément 2</li>
        <li>Élément 3</li>
        <li>Élément 4</li>
        <li>Élément 5</li>
    </ul>
    
    <div id="footer">
        <p>Pied de page</p>
    </div>
</body>
</html>

/* [OK] SOLUTION */
/* style.css */

/* 1. Tous les paragraphes en bleu */
p {
    color: blue;
}

/* 2. Background jaune pour .highlight */
.highlight {
    background-color: yellow;
}

/* 3. #header en gras */
#header {
    font-weight: bold;
}

/* 4. Taille de police des li */
li {
    font-size: 18px;
}


"""
EXERCICE 1.2 : Combinateurs

Reprenez le HTML précédent et :
1. Colorez seulement les <p> dans #header (descendant)
2. Colorez seulement les <li> enfants directs de <ul> (enfant direct)
3. Colorez le <p> immédiatement après .highlight (adjacent)
4. Donnez une bordure à tous les <p> après .highlight (frères généraux)
"""

/* [OK] SOLUTION */

/* 1. p dans #header (descendant) */
#header p {
    color: red;
}

/* 2. li enfants directs de ul */
ul > li {
    color: green;
}

/* 3. p immédiatement après .highlight */
.highlight + p {
    color: orange;
}

/* 4. Tous p après .highlight */
.highlight ~ p {
    border: 1px solid gray;
}


"""
EXERCICE 1.3 : Pseudo-classes

Créez une liste de navigation et :
1. Changez la couleur des liens au :hover
2. Soulignez les liens au :focus
3. Mettez un background différent sur le :first-child et :last-child
4. Colorez différemment les éléments pairs et impairs (:nth-child)
"""

/* HTML */
<nav>
    <ul class="menu">
        <li><a href="#home">Accueil</a></li>
        <li><a href="#about">À propos</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

/* [OK] SOLUTION */

/* 1. Hover sur liens */
.menu a:hover {
    color: blue;
    background-color: #f0f0f0;
}

/* 2. Focus */
.menu a:focus {
    outline: 2px solid blue;
    text-decoration: underline;
}

/* 3. Premier et dernier */
.menu li:first-child {
    background-color: lightblue;
}

.menu li:last-child {
    background-color: lightgreen;
}

/* 4. Pairs et impairs */
.menu li:nth-child(even) {
    background-color: #f9f9f9;
}

.menu li:nth-child(odd) {
    background-color: white;
}


"""
EXERCICE 1.4 : Pseudo-éléments

Créez une citation et :
1. Ajoutez « avant et » après avec ::before et ::after
2. Stylisez la première lettre (::first-letter)
3. Changez la couleur de sélection (::selection)
"""

/* HTML */
<blockquote class="quote">
    La vie est comme une bicyclette. Pour garder l'équilibre, il faut avancer.
</blockquote>

/* [OK] SOLUTION */

.quote::before {
    content: "« ";
    font-size: 2em;
    color: blue;
}

.quote::after {
    content: " »";
    font-size: 2em;
    color: blue;
}

.quote::first-letter {
    font-size: 3em;
    font-weight: bold;
    float: left;
    margin-right: 5px;
    color: red;
}

.quote::selection {
    background-color: yellow;
    color: black;
}


# ============================================================================
# [COURS] EXERCICES CHAPITRE 2 : TEXTE ET COULEURS
# ============================================================================

"""
EXERCICE 2.1 : Polices et styles de texte

Créez une page avec différents styles de titres et paragraphes :
1. Utilisez Google Fonts (Roboto ou autre)
2. Différentes tailles de police (rem)
3. Différents font-weight
4. Texte en italique, majuscules, etc.
"""

/* HTML */
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exercice Typographie</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Titre Principal</h1>
    <h2>Sous-titre Important</h2>
    <p class="intro">Ceci est un paragraphe d'introduction mis en valeur.</p>
    <p>Paragraphe normal avec du texte courant.</p>
    <p class="small-print">Petit texte légal ou informations secondaires.</p>
</body>
</html>

/* [OK] SOLUTION */

/* Configuration de base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    padding: 40px;
}

/* Titres */
h1 {
    font-size: 3rem;           /* 48px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    color: #333;
}

h2 {
    font-size: 2rem;           /* 32px */
    font-weight: 400;
    margin-bottom: 0.75rem;
    color: #555;
}

/* Paragraphes */
p {
    font-size: 1rem;           /* 16px */
    margin-bottom: 1rem;
}

.intro {
    font-size: 1.25rem;        /* 20px */
    font-weight: 300;
    font-style: italic;
    color: #666;
}

.small-print {
    font-size: 0.875rem;       /* 14px */
    color: #999;
}


"""
EXERCICE 2.2 : Couleurs et palettes

Créez une palette de couleurs cohérente avec :
1. Couleur primaire (HSL)
2. Variations claires et foncées
3. Couleur d'accent
4. Couleurs de feedback (succès, erreur, info)
"""

/* [OK] SOLUTION */

/* Palette de couleurs */
:root {
    /* Couleur primaire (bleu) */
    --primary: hsl(220, 90%, 50%);
    --primary-light: hsl(220, 90%, 70%);
    --primary-dark: hsl(220, 90%, 30%);
    
    /* Couleur secondaire (violet) */
    --secondary: hsl(280, 60%, 50%);
    
    /* Couleurs de feedback */
    --success: hsl(140, 70%, 45%);
    --error: hsl(0, 70%, 50%);
    --warning: hsl(40, 90%, 55%);
    --info: hsl(200, 80%, 50%);
    
    /* Neutres */
    --gray-100: hsl(0, 0%, 95%);
    --gray-300: hsl(0, 0%, 80%);
    --gray-500: hsl(0, 0%, 50%);
    --gray-700: hsl(0, 0%, 30%);
    --gray-900: hsl(0, 0%, 10%);
}

/* Utilisation */
.button-primary {
    background-color: var(--primary);
    color: white;
}

.button-primary:hover {
    background-color: var(--primary-dark);
}

.alert-success {
    background-color: var(--success);
    color: white;
}

.alert-error {
    background-color: var(--error);
    color: white;
}


"""
EXERCICE 2.3 : Ombres de texte

Créez différents effets d'ombre :
1. Ombre douce
2. Ombre nette
3. Effet néon
4. Effet 3D
"""

/* [OK] SOLUTION */

/* 1. Ombre douce */
.soft-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* 2. Ombre nette */
.sharp-shadow {
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.8);
}

/* 3. Effet néon */
.neon {
    color: #fff;
    text-shadow: 
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #0ff,
        0 0 40px #0ff,
        0 0 80px #0ff;
}

/* 4. Effet 3D */
.text-3d {
    color: #fff;
    text-shadow:
        0 1px 0 #ccc,
        0 2px 0 #bbb,
        0 3px 0 #aaa,
        0 4px 0 #999,
        0 5px 0 #888,
        0 6px 5px rgba(0, 0, 0, 0.3);
}


# ============================================================================
# [COURS] EXERCICES CHAPITRE 3 : BOX MODEL
# ============================================================================

"""
EXERCICE 3.1 : Comprendre le Box Model

Créez 3 boîtes avec les mêmes dimensions visuelles mais :
1. Une avec box-sizing: content-box
2. Une avec box-sizing: border-box
3. Observez la différence
"""

/* HTML */
<div class="box content-box">Content Box</div>
<div class="box border-box">Border Box</div>

/* [OK] SOLUTION */

.box {
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 20px;
    background-color: lightblue;
}

/* Content-box : width = contenu uniquement */
.content-box {
    box-sizing: content-box;
    /* Largeur totale = 200 + 40 (padding) + 10 (border) = 250px */
}

/* Border-box : width = contenu + padding + border */
.border-box {
    box-sizing: border-box;
    /* Largeur totale = 200px (inclut padding et border) */
}


"""
EXERCICE 3.2 : Créer des cartes (Cards)

Créez des cartes de produits avec :
- Image en haut
- Titre
- Description
- Prix
- Bouton
Utilisez margin, padding, border correctement
"""

/* HTML */
<div class="card">
    <img src="product.jpg" alt="Produit">
    <div class="card-body">
        <h3 class="card-title">Nom du Produit</h3>
        <p class="card-description">Description courte du produit</p>
        <p class="card-price">29.99 €</p>
        <button class="card-button">Acheter</button>
    </div>
</div>

/* [OK] SOLUTION */

* {
    box-sizing: border-box;
}

.card {
    width: 300px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-body {
    padding: 20px;
}

.card-title {
    margin: 0 0 10px 0;
    font-size: 1.5rem;
    color: #333;
}

.card-description {
    margin: 0 0 15px 0;
    color: #666;
    line-height: 1.5;
}

.card-price {
    margin: 0 0 15px 0;
    font-size: 1.5rem;
    font-weight: bold;
    color: #0066cc;
}

.card-button {
    width: 100%;
    padding: 12px;
    background-color: #0066cc;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.card-button:hover {
    background-color: #0052a3;
}


"""
EXERCICE 3.3 : Spacing système

Créez un système d'espacement cohérent :
"""

/* [OK] SOLUTION */

/* Système d'espacement (multiples de 8px) */
:root {
    --space-1: 0.5rem;   /* 8px */
    --space-2: 1rem;     /* 16px */
    --space-3: 1.5rem;   /* 24px */
    --space-4: 2rem;     /* 32px */
    --space-5: 3rem;     /* 48px */
    --space-6: 4rem;     /* 64px */
}

/* Classes utilitaires */
.m-0 { margin: 0; }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }

.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }

/* Directionnelles */
.mt-2 { margin-top: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }


# ============================================================================
# [COURS] EXERCICES CHAPITRE 4 : POSITIONNEMENT
# ============================================================================

"""
EXERCICE 4.1 : Badge sur icône

Créez une icône avec un badge de notification :
"""

/* HTML */
<div class="icon-wrapper">
    <span class="icon">[NOTIF]</span>
    <span class="badge">3</span>
</div>

/* [OK] SOLUTION */

.icon-wrapper {
    position: relative;
    display: inline-block;
    font-size: 2rem;
}

.icon {
    display: block;
}

.badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: red;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}


"""
EXERCICE 4.2 : Header fixe

Créez un header qui reste en haut lors du scroll :
"""

/* HTML */
<header class="header">
    <div class="container">
        <h1 class="logo">MonSite</h1>
        <nav class="nav">
            <a href="#">Accueil</a>
            <a href="#">Services</a>
            <a href="#">Contact</a>
        </nav>
    </div>
</header>

<main class="content">
    <!-- Contenu de la page -->
</main>

/* [OK] SOLUTION */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.header .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    color: #333;
}

.nav a {
    margin-left: 2rem;
    text-decoration: none;
    color: #666;
    transition: color 0.3s;
}

.nav a:hover {
    color: #0066cc;
}

/* Compensation pour le header fixe */
.content {
    padding-top: 80px;  /* Hauteur du header */
}


"""
EXERCICE 4.3 : Modal centré

Créez une modal centrée sur la page :
"""

/* HTML */
<div class="modal-overlay">
    <div class="modal">
        <button class="modal-close">&times;</button>
        <h2>Titre de la Modal</h2>
        <p>Contenu de la modal...</p>
        <button class="button">Confirmer</button>
    </div>
</div>

/* [OK] SOLUTION */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.modal {
    position: relative;
    background-color: white;
    border-radius: 8px;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #666;
    transition: color 0.3s;
}

.modal-close:hover {
    color: #000;
}


"""
EXERCICE 4.4 : Sticky sidebar

Créez une sidebar qui devient sticky au scroll :
"""

/* HTML */
<div class="layout">
    <aside class="sidebar">
        <h3>Navigation</h3>
        <ul>
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <li><a href="#section3">Section 3</a></li>
        </ul>
    </aside>
    
    <main class="main-content">
        <!-- Beaucoup de contenu -->
    </main>
</div>

/* [OK] SOLUTION */

.layout {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    gap: 2rem;
}

.sidebar {
    width: 250px;
    flex-shrink: 0;
}

.sidebar > * {
    position: sticky;
    top: 20px;
}

.main-content {
    flex: 1;
}


# ============================================================================
# [OBJECTIF] PROJET GUIDÉ : PAGE DE PROFIL COMPLÈTE
# ============================================================================

"""
PROJET : Créez une page de profil utilisateur avec :

- Header fixe avec navigation
- Section hero avec photo de profil (positionnement)
- Cards de statistiques (Box Model)
- Liste de posts avec images
- Footer
- Modal de contact (position fixed/absolute)
- Design responsive (bonus)


HTML STRUCTURE :
"""

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profil - Jean Dupont</title>
    <link rel="stylesheet" href="profile.css">
</head>
<body>
    <!-- Header fixe -->
    <header class="header">
        <div class="container">
            <h1 class="logo">MonSite</h1>
            <nav class="nav">
                <a href="#about">À propos</a>
                <a href="#posts">Posts</a>
                <a href="#contact">Contact</a>
            </nav>
        </div>
    </header>

    <!-- Hero section -->
    <section class="hero">
        <div class="hero-content">
            <div class="profile-image-wrapper">
                <img src="profile.jpg" alt="Jean Dupont" class="profile-image">
                <span class="online-indicator"></span>
            </div>
            <h1 class="profile-name">Jean Dupont</h1>
            <p class="profile-title">Développeur Full Stack</p>
            <button class="button-primary">Me contacter</button>
        </div>
    </section>

    <!-- Stats section -->
    <section class="stats-section">
        <div class="container">
            <div class="stats-grid">
                <div class="stat-card">
                    <h3 class="stat-number">1,234</h3>
                    <p class="stat-label">Followers</p>
                </div>
                <div class="stat-card">
                    <h3 class="stat-number">567</h3>
                    <p class="stat-label">Following</p>
                </div>
                <div class="stat-card">
                    <h3 class="stat-number">89</h3>
                    <p class="stat-label">Posts</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Posts section -->
    <section class="posts-section" id="posts">
        <div class="container">
            <h2 class="section-title">Publications récentes</h2>
            <div class="posts-grid">
                <article class="post-card">
                    <img src="post1.jpg" alt="Post 1" class="post-image">
                    <div class="post-body">
                        <h3 class="post-title">Premier article</h3>
                        <p class="post-excerpt">Lorem ipsum dolor sit amet...</p>
                        <div class="post-meta">
                            <span class="post-date">Il y a 2 jours</span>
                            <span class="post-likes">[HEAVY_BLACK_HEART] 45</span>
                        </div>
                    </div>
                </article>
                <!-- Répéter pour autres posts -->
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2024 Jean Dupont. Tous droits réservés.</p>
        </div>
    </footer>
</body>
</html>

"""
CSS COMPLET :
"""

/* ============================================================================
   RESET & BASE
   ============================================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Couleurs */
    --primary: hsl(220, 90%, 50%);
    --primary-dark: hsl(220, 90%, 40%);
    --text: hsl(0, 0%, 20%);
    --text-light: hsl(0, 0%, 50%);
    --bg: hsl(0, 0%, 98%);
    --card-bg: white;
    --border: hsl(0, 0%, 90%);
    
    /* Espacement */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --space-6: 4rem;
    
    /* Ombres */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--bg);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-3);
}

/* ============================================================================
   HEADER
   ============================================================================ */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: white;
    box-shadow: var(--shadow-sm);
    z-index: 1000;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary);
}

.nav {
    display: flex;
    gap: var(--space-4);
}

.nav a {
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
    transition: color 0.3s;
}

.nav a:hover {
    color: var(--primary);
}

/* ============================================================================
   HERO SECTION
   ============================================================================ */

.hero {
    padding-top: 120px;  /* Compensation header fixe */
    padding-bottom: var(--space-6);
    background: linear-gradient(135deg, var(--primary) 0%, hsl(240, 90%, 50%) 100%);
    text-align: center;
    color: white;
}

.hero-content {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-3);
}

.profile-image-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: var(--space-3);
}

.profile-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 5px solid white;
    object-fit: cover;
    box-shadow: var(--shadow-lg);
}

.online-indicator {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background-color: #00ff00;
    border: 3px solid white;
    border-radius: 50%;
}

.profile-name {
    font-size: 2.5rem;
    margin-bottom: var(--space-1);
}

.profile-title {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: var(--space-4);
}

.button-primary {
    padding: var(--space-2) var(--space-4);
    background-color: white;
    color: var(--primary);
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}

.button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* ============================================================================
   STATS SECTION
   ============================================================================ */

.stats-section {
    padding: var(--space-5) 0;
    background-color: white;
    box-shadow: var(--shadow-sm);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.stat-card {
    text-align: center;
    padding: var(--space-3);
    border-radius: 8px;
    transition: transform 0.3s;
}

.stat-card:hover {
    transform: translateY(-5px);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary);
    margin-bottom: var(--space-1);
}

.stat-label {
    color: var(--text-light);
    font-size: 1rem;
}

/* ============================================================================
   POSTS SECTION
   ============================================================================ */

.posts-section {
    padding: var(--space-6) 0;
}

.section-title {
    font-size: 2rem;
    margin-bottom: var(--space-4);
    text-align: center;
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
}

.post-card {
    background-color: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s, box-shadow 0.3s;
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.post-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.post-body {
    padding: var(--space-3);
}

.post-title {
    font-size: 1.25rem;
    margin-bottom: var(--space-2);
    color: var(--text);
}

.post-excerpt {
    color: var(--text-light);
    margin-bottom: var(--space-2);
    line-height: 1.6;
}

.post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--text-light);
}

/* ============================================================================
   FOOTER
   ============================================================================ */

.footer {
    background-color: var(--text);
    color: white;
    padding: var(--space-4) 0;
    text-align: center;
    margin-top: var(--space-6);
}


# ============================================================================
# [LISTE] RÉCAPITULATIF PARTIE 1
# ============================================================================

"""
[OK] CE QUE VOUS AVEZ APPRIS :

CHAPITRE 1 - SÉLECTEURS :
[WHITE_SQUARE] Sélecteurs de base (type, classe, ID)
[WHITE_SQUARE] Combinateurs (descendant, enfant, adjacent, frère)
[WHITE_SQUARE] Sélecteurs d'attribut
[WHITE_SQUARE] Pseudo-classes (:hover, :focus, :nth-child...)
[WHITE_SQUARE] Pseudo-éléments (::before, ::after, ::first-letter...)

CHAPITRE 2 - TEXTE ET COULEURS :
[WHITE_SQUARE] Propriétés de police (font-family, font-size, font-weight)
[WHITE_SQUARE] Formats de couleurs (HEX, RGB, RGBA, HSL, HSLA)
[WHITE_SQUARE] Propriétés de texte (text-align, line-height, letter-spacing)
[WHITE_SQUARE] Text-decoration et text-transform
[WHITE_SQUARE] Text-shadow pour effets

CHAPITRE 3 - BOX MODEL :
[WHITE_SQUARE] Les 4 parties (content, padding, border, margin)
[WHITE_SQUARE] Width et height (+ min/max)
[WHITE_SQUARE] Padding et margin (syntaxe complète)
[WHITE_SQUARE] Border (width, style, color, radius)
[WHITE_SQUARE] box-sizing: border-box (ESSENTIEL !)
[WHITE_SQUARE] Overflow et gestion débordement
[WHITE_SQUARE] Outline

CHAPITRE 4 - POSITIONNEMENT :
[WHITE_SQUARE] Les 5 types : static, relative, absolute, fixed, sticky
[WHITE_SQUARE] Propriétés top, right, bottom, left
[WHITE_SQUARE] z-index et ordre d'empilement
[WHITE_SQUARE] Patterns courants (modal, header fixe, badges...)


# ============================================================================
# [OK] CHECKLIST DE MAÎTRISE
# ============================================================================

Je maîtrise la Partie 1 si je peux :

[WHITE_SQUARE] Sélectionner n'importe quel élément avec précision
[WHITE_SQUARE] Créer des styles au :hover et :focus
[WHITE_SQUARE] Utiliser ::before et ::after pour ajouter du contenu
[WHITE_SQUARE] Choisir le bon format de couleur selon le contexte
[WHITE_SQUARE] Créer une palette de couleurs cohérente
[WHITE_SQUARE] Calculer la largeur totale d'un élément (Box Model)
[WHITE_SQUARE] Comprendre pourquoi border-box est meilleur que content-box
[WHITE_SQUARE] Créer des cartes (cards) avec bon espacement
[WHITE_SQUARE] Positionner un badge sur une icône (relative + absolute)
[WHITE_SQUARE] Créer un header fixe qui reste en haut
[WHITE_SQUARE] Centrer une modal avec position
[WHITE_SQUARE] Utiliser sticky pour navigation qui suit
[WHITE_SQUARE] Gérer z-index pour superposition
[WHITE_SQUARE] Déboguer problèmes de positionnement

# ============================================================================
# [OBJECTIF] PROCHAINES ÉTAPES
# ============================================================================

[OK] PARTIE 1 TERMINÉE !

Vous êtes maintenant prêt pour :

PARTIE 2 - LAYOUTS RESPONSIVE :
- Display (block, inline, inline-block)
- Flexbox (layouts flexibles)
- CSS Grid (grilles 2D)
- Responsive design
- Media queries

PARTIE 3 - DESIGN AVANCÉ :
- Animations CSS
- Transformations (rotate, scale, translate)
- Transitions
- Backgrounds avancés
- Gradients

PARTIE 4 - NIVEAU PROFESSIONNEL :
- Variables CSS (custom properties)
- Préprocesseurs (Sass, Less)
- Méthodologies (BEM, OOCSS)
- Performance CSS
- Frameworks (Bootstrap, Tailwind)


[IDEE] CONSEIL :

Avant de continuer vers la Partie 2, assurez-vous de :
1. Avoir fait TOUS les exercices
2. Avoir créé le projet de page de profil
3. Comprendre VRAIMENT le Box Model
4. Maîtriser position relative/absolute

Ces fondamentaux sont ESSENTIELS pour la suite !


# ============================================================================
# FIN DE LA PARTIE 1
# ============================================================================

[BRAVO] FÉLICITATIONS !

Vous avez complété la Partie 1 du guide CSS.
Vous maîtrisez maintenant les fondamentaux essentiels.

Prêt pour la Partie 2 ? [RAPIDE]
# ============================================================================
# [LIVRE] CSS - PARTIE 2 : LAYOUTS RESPONSIVE
# ============================================================================
#
# [OBJECTIF] CETTE PARTIE COUVRE :
# - Chapitre 5 : Display (block, inline, inline-block, none)
# - Chapitre 6 : Flexbox (layouts flexibles 1D)
# - Chapitre 7 : CSS Grid (grilles 2D)
# - Chapitre 8 : Responsive Design
# - Chapitre 9 : Media Queries
#
# [TEMPS] TEMPS TOTAL : ~15-20 heures
# [DOCS] PRÉREQUIS : Partie 1 complétée
# [COURS] NIVEAU : Intermédiaire
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 5 : DISPLAY (TYPES D'AFFICHAGE)
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Différence entre block, inline, inline-block
[OK] Quand utiliser chaque type d'affichage
[OK] display: none vs visibility: hidden
[OK] display: flex et display: grid (introduction)
[OK] Créer des layouts de base
"""


# ----------------------------------------------------------------------------
# [PACKAGE] PROPRIÉTÉ display
# ----------------------------------------------------------------------------

"""
display = Contrôle COMMENT un élément se comporte dans le flux du document


[IDEE] VALEURS PRINCIPALES :

block         -> Élément bloc (prend toute la largeur)
inline        -> Élément en ligne (dans le flux du texte)
inline-block  -> Hybride (en ligne mais avec dimensions)
none          -> Élément caché (retiré du flux)
flex          -> Container Flexbox
grid          -> Container Grid
"""


# ----------------------------------------------------------------------------
# 1⃣ DISPLAY: BLOCK
# ----------------------------------------------------------------------------

"""
display: block;

[IDEE] COMPORTEMENT :
- Prend TOUTE la largeur disponible du parent
- Commence sur une NOUVELLE ligne
- Peut avoir width, height, margin, padding
- Empile verticalement


ÉLÉMENTS BLOCK PAR DÉFAUT :
<div>, <p>, <h1>-<h6>, <section>, <article>, <header>, <footer>,
<nav>, <ul>, <ol>, <li>, <form>, <table>
"""

div {
    display: block;  /* Défaut pour <div> */
}

"""
EXEMPLE VISUEL :

┌────────────────────────┐
│  Block 1 (100% largeur)│
└────────────────────────┘
┌────────────────────────┐
│  Block 2 (100% largeur)│
└────────────────────────┘
┌────────────────────────┐
│  Block 3 (100% largeur)│
└────────────────────────┘


[REFLEXION] POURQUOI UTILISER block ?

[OK] Sections principales de page
[OK] Containers
[OK] Éléments qui doivent s'empiler verticalement


EXEMPLES PRATIQUES :
"""

/* Transformer <span> en block */
span.block-span {
    display: block;
    width: 200px;
    padding: 20px;
    margin-bottom: 10px;
    background-color: lightblue;
}

/* Section pleine largeur */
.section {
    display: block;
    width: 100%;
    padding: 40px 0;
}

/* Bouton pleine largeur */
.button-full {
    display: block;
    width: 100%;
    padding: 15px;
}


# ----------------------------------------------------------------------------
# 2⃣ DISPLAY: INLINE
# ----------------------------------------------------------------------------

"""
display: inline;

[IDEE] COMPORTEMENT :
- Reste dans le FLUX du texte (ne crée pas de nouvelle ligne)
- width et height -> IGNORÉS !
- margin-top et margin-bottom -> IGNORÉS !
- margin-left et margin-right -> FONCTIONNENT
- padding -> FONCTIONNE mais peut chevaucher


ÉLÉMENTS INLINE PAR DÉFAUT :
<span>, <a>, <strong>, <em>, <img>, <input>, <label>, <code>
"""

span {
    display: inline;  /* Défaut pour <span> */
}

"""
EXEMPLE VISUEL :

Ceci est du texte avec <span>élément inline</span> et <a>un lien</a> dedans.
Tout reste sur la même ligne.


[ATTENTION] LIMITATIONS INLINE :
"""

/* [X] Ces propriétés ne fonctionnent PAS sur inline */
span {
    display: inline;
    width: 200px;        /* [X] Ignoré */
    height: 50px;        /* [X] Ignoré */
    margin-top: 20px;    /* [X] Ignoré */
    margin-bottom: 20px; /* [X] Ignoré */
}

/* [OK] Ces propriétés FONCTIONNENT */
span {
    display: inline;
    margin-left: 10px;   /* [OK] Fonctionne */
    margin-right: 10px;  /* [OK] Fonctionne */
    padding: 5px 10px;   /* [OK] Fonctionne */
    background-color: yellow;  /* [OK] Fonctionne */
}

"""
[REFLEXION] POURQUOI UTILISER inline ?

[OK] Styling de texte (gras, couleur, etc.)
[OK] Liens dans des paragraphes
[OK] Icônes dans du texte
[OK] Badges


EXEMPLES PRATIQUES :
"""

/* Badge dans du texte */
.badge {
    display: inline;
    padding: 2px 8px;
    background-color: red;
    color: white;
    border-radius: 12px;
    font-size: 0.75rem;
}

/* Surlignage */
.highlight {
    display: inline;
    background-color: yellow;
    padding: 2px 4px;
}

/* Lien stylé */
a {
    display: inline;
    color: blue;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


# ----------------------------------------------------------------------------
# 3⃣ DISPLAY: INLINE-BLOCK
# ----------------------------------------------------------------------------

"""
display: inline-block;

[IDEE] COMPORTEMENT :
- Reste dans le flux (comme inline)
- MAIS accepte width, height, margin, padding (comme block)
- Meilleur des deux mondes !


ÉLÉMENT inline-block PAR DÉFAUT :
<img>, <button>, <input>
"""

div {
    display: inline-block;
}

"""
EXEMPLE VISUEL :

┌──────┐ ┌──────┐ ┌──────┐
│Block1│ │Block2│ │Block3│
└──────┘ └──────┘ └──────┘
Sur la même ligne, mais avec dimensions !


[REFLEXION] POURQUOI UTILISER inline-block ?

[OK] Créer des grilles simples
[OK] Boutons côte à côte
[OK] Cards en ligne
[OK] Navigation horizontale


EXEMPLES PRATIQUES :
"""

/* Grille simple de cartes */
.card {
    display: inline-block;
    width: 300px;
    margin: 10px;
    padding: 20px;
    background-color: white;
    border: 1px solid #ddd;
    vertical-align: top;  /* Aligner en haut */
}

/* Navigation horizontale */
.nav-item {
    display: inline-block;
    margin-right: 20px;
}

/* Boutons alignés */
.button-group .button {
    display: inline-block;
    padding: 10px 20px;
    margin-right: 10px;
}

/* Colonnes simples */
.col {
    display: inline-block;
    width: 30%;
    margin: 1.5%;
    vertical-align: top;
}


"""
[ATTENTION] ATTENTION inline-block :

1. ESPACE ENTRE ÉLÉMENTS (dû aux espaces HTML)
"""

/* HTML */
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>

/* Il y a un espace de ~4px entre chaque box ! */

"""
SOLUTIONS :
"""

/* Solution 1 : Supprimer espaces HTML */
<div class="box">1</div><div class="box">2</div><div class="box">3</div>

/* Solution 2 : font-size: 0 sur parent */
.parent {
    font-size: 0;
}

.box {
    display: inline-block;
    font-size: 16px;  /* Rétablir taille */
}

/* Solution 3 : Utiliser Flexbox (mieux !) */
.parent {
    display: flex;
}

"""
2. vertical-align PAR DÉFAUT = baseline
"""

.box {
    display: inline-block;
    vertical-align: top;  /* Ou middle, bottom */
}


# ----------------------------------------------------------------------------
# 4⃣ DISPLAY: NONE
# ----------------------------------------------------------------------------

"""
display: none;

[IDEE] COMPORTEMENT :
- Élément complètement RETIRÉ du flux
- Espace qu'il occupait = libéré
- Élément invisible ET ne prend pas d'espace


[REFLEXION] DIFFÉRENCE display: none vs visibility: hidden :
"""

/* display: none - Élément retiré du flux */
.hidden-display {
    display: none;  /* Invisible + pas d'espace */
}

/* visibility: hidden - Élément invisible mais garde son espace */
.hidden-visibility {
    visibility: hidden;  /* Invisible mais espace conservé */
}

"""
EXEMPLE VISUEL :

ORIGINAL :
┌─────┐┌─────┐┌─────┐
│  A  ││  B  ││  C  │
└─────┘└─────┘└─────┘

display: none sur B :
┌─────┐┌─────┐
│  A  ││  C  │  <- C se rapproche de A
└─────┘└─────┘

visibility: hidden sur B :
┌─────┐       ┌─────┐
│  A  │  [ ]  │  C  │  <- Espace de B conservé
└─────┘       └─────┘


[OK] QUAND UTILISER display: none ?

1. MASQUER/AFFICHER DYNAMIQUEMENT
"""

/* Menu mobile caché par défaut */
.mobile-menu {
    display: none;
}

.mobile-menu.active {
    display: block;
}

/* Avec JavaScript */
// element.style.display = 'none';
// element.style.display = 'block';

"""
2. RESPONSIVE DESIGN
"""

/* Cacher sur mobile */
@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }
}

/* Cacher sur desktop */
@media (min-width: 769px) {
    .mobile-only {
        display: none;
    }
}

"""
3. TABS / ACCORDION
"""

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}


# ----------------------------------------------------------------------------
# [GRAPHIQUE] TABLEAU COMPARATIF display
# ----------------------------------------------------------------------------

"""
┌──────────────┬─────────┬─────────┬──────────┬─────────┐
│   Propriété  │  block  │ inline  │ in-block │  none   │
├──────────────┼─────────┼─────────┼──────────┼─────────┤
│ Nouvelle     │   Oui   │   Non   │   Non    │   N/A   │
│ ligne        │         │         │          │         │
├──────────────┼─────────┼─────────┼──────────┼─────────┤
│ width/height │   Oui   │   Non   │   Oui    │   N/A   │
├──────────────┼─────────┼─────────┼──────────┼─────────┤
│ margin-top/  │   Oui   │   Non   │   Oui    │   N/A   │
│ bottom       │         │         │          │         │
├──────────────┼─────────┼─────────┼──────────┼─────────┤
│ padding      │   Oui   │  Oui*   │   Oui    │   N/A   │
├──────────────┼─────────┼─────────┼──────────┼─────────┤
│ Prend espace │   Oui   │   Oui   │   Oui    │   Non   │
└──────────────┴─────────┴─────────┴──────────┴─────────┘

* padding vertical peut chevaucher sur inline


[OBJECTIF] QUEL display CHOISIR ?

block         -> Sections, containers, éléments empilés
inline        -> Texte, liens, petits éléments dans phrases
inline-block  -> Cards, grilles simples, boutons alignés
flex          -> Layouts modernes (voir chapitre suivant)
grid          -> Grilles complexes 2D (voir plus loin)
none          -> Masquer éléments
"""


# ============================================================================
# [GUIDE] CHAPITRE 6 : FLEXBOX (LAYOUTS FLEXIBLES 1D)
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Comprendre le modèle Flexbox (container et items)
[OK] Axe principal vs axe secondaire
[OK] justify-content et align-items
[OK] flex-direction, flex-wrap
[OK] Propriétés flex-grow, flex-shrink, flex-basis
[OK] Créer layouts responsive sans media queries
[OK] Centrer n'importe quoi facilement
"""


# ----------------------------------------------------------------------------
# [DESIGN] INTRODUCTION À FLEXBOX
# ----------------------------------------------------------------------------

"""
[IDEE] QU'EST-CE QUE FLEXBOX ?

Flexbox = Flexible Box Layout
Layout 1D (une dimension : rangée OU colonne)
Parfait pour : alignement, distribution d'espace, responsive


[REFLEXION] POURQUOI FLEXBOX ?

AVANT Flexbox (difficile) :
- Centrer verticalement = cauchemar
- Espacer éléments uniformément = compliqué
- Responsive = beaucoup de media queries
- float + clear = confus

AVEC Flexbox (facile) :
- Centrer = 2 lignes de code
- Espacer uniformément = 1 propriété
- Responsive = automatique
- Logique et prévisible


[OBJECTIF] CONCEPT CLÉ : CONTAINER ET ITEMS

┌─────────────────────────────────────┐
│  FLEX CONTAINER                     │
│  ┌────────┐ ┌────────┐ ┌────────┐  │
│  │ ITEM 1 │ │ ITEM 2 │ │ ITEM 3 │  │
│  └────────┘ └────────┘ └────────┘  │
└─────────────────────────────────────┘

CONTAINER = Parent avec display: flex
ITEMS = Enfants directs du container


[IDEE] DEUX ENSEMBLES DE PROPRIÉTÉS :

CONTAINER (parent) :
- display: flex
- flex-direction
- justify-content
- align-items
- flex-wrap
- align-content
- gap

ITEMS (enfants) :
- flex-grow
- flex-shrink
- flex-basis
- flex (raccourci)
- align-self
- order
"""


# ----------------------------------------------------------------------------
# [OBJECTIF] ACTIVER FLEXBOX : display: flex
# ----------------------------------------------------------------------------

"""
Pour utiliser Flexbox, appliquer display: flex au CONTAINER
"""

.container {
    display: flex;  /* Active Flexbox */
}

"""
EFFET IMMÉDIAT :
- Enfants directs deviennent flex items
- Alignés en RANGÉE par défaut
- Hauteurs égalisées automatiquement


EXEMPLE HTML :
"""

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

/* CSS */
.container {
    display: flex;
}

/* Résultat : Items côte à côte automatiquement ! */

"""
AVANT (display: block) :
┌───────────────────┐
│ Item 1            │
├───────────────────┤
│ Item 2            │
├───────────────────┤
│ Item 3            │
└───────────────────┘

APRÈS (display: flex) :
┌─────────┬─────────┬─────────┐
│ Item 1  │ Item 2  │ Item 3  │
└─────────┴─────────┴─────────┘


# ----------------------------------------------------------------------------
# [MESURE] AXES FLEXBOX : CONCEPT FONDAMENTAL
# ----------------------------------------------------------------------------

"""
[IDEE] FLEXBOX A DEUX AXES :

1. AXE PRINCIPAL (Main Axis)
2. AXE SECONDAIRE (Cross Axis)


PAR DÉFAUT (flex-direction: row) :

        AXE PRINCIPAL ->
    ┌──────────────────────┐
    │ ┌────┐ ┌────┐ ┌────┐ │  ^
    │ │ 1  │ │ 2  │ │ 3  │ │  │ AXE
    │ └────┘ └────┘ └────┘ │  │ SECONDAIRE
    └──────────────────────┘  v


flex-direction: column :

    ^
    │ AXE SECONDAIRE
    │
┌───┴──────┐
│ ┌──────┐ │  v
│ │  1   │ │  │
│ └──────┘ │  │
│ ┌──────┐ │  │ AXE PRINCIPAL
│ │  2   │ │  │
│ └──────┘ │  │
│ ┌──────┐ │  │
│ │  3   │ │  │
│ └──────┘ │  v
└──────────┘


[CLE] RÈGLE IMPORTANTE :

justify-content -> Contrôle AXE PRINCIPAL
align-items     -> Contrôle AXE SECONDAIRE


# ----------------------------------------------------------------------------
# [COMPASS] flex-direction (DIRECTION DES ITEMS)
# ----------------------------------------------------------------------------

"""
flex-direction = Définit la direction de l'axe principal
"""

.container {
    display: flex;
    flex-direction: row;            /* Défaut : gauche -> droite */
    flex-direction: row-reverse;    /* Inverse : droite -> gauche */
    flex-direction: column;         /* Haut -> bas */
    flex-direction: column-reverse; /* Bas -> haut */
}

"""
EXEMPLES VISUELS :

row (défaut) :
┌────┬────┬────┐
│ 1  │ 2  │ 3  │
└────┴────┴────┘

row-reverse :
┌────┬────┬────┐
│ 3  │ 2  │ 1  │
└────┴────┴────┘

column :
┌────┐
│ 1  │
├────┤
│ 2  │
├────┤
│ 3  │
└────┘

column-reverse :
┌────┐
│ 3  │
├────┤
│ 2  │
├────┤
│ 1  │
└────┘


[OK] QUAND UTILISER ?
"""

/* Navigation horizontale (défaut) */
.nav {
    display: flex;
    flex-direction: row;
}

/* Menu vertical (sidebar) */
.sidebar-menu {
    display: flex;
    flex-direction: column;
}

/* Layout mobile (empiler verticalement) */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}


# ----------------------------------------------------------------------------
# [SCALES] justify-content (ALIGNEMENT AXE PRINCIPAL)
# ----------------------------------------------------------------------------

"""
justify-content = Distribue items le long de l'AXE PRINCIPAL

[ATTENTION] Si flex-direction: row -> Horizontal
[ATTENTION] Si flex-direction: column -> Vertical
"""

.container {
    display: flex;
    justify-content: flex-start;    /* Défaut : début */
    justify-content: flex-end;      /* Fin */
    justify-content: center;        /* Centre */
    justify-content: space-between; /* Espace entre */
    justify-content: space-around;  /* Espace autour */
    justify-content: space-evenly;  /* Espace égal */
}

"""
EXEMPLES VISUELS (flex-direction: row) :

flex-start (défaut) :
┌────┬────┬────┐
│ 1  │ 2  │ 3  │                    │
└────┴────┴────┘

flex-end :
                    ┌────┬────┬────┐│
                    │ 1  │ 2  │ 3  ││
                    └────┴────┴────┘│

center :
        ┌────┬────┬────┐
        │ 1  │ 2  │ 3  │
        └────┴────┴────┘

space-between :
┌────┐          ┌────┐          ┌────┐│
│ 1  │          │ 2  │          │ 3  ││
└────┘          └────┘          └────┘│

space-around :
  ┌────┐      ┌────┐      ┌────┐
  │ 1  │      │ 2  │      │ 3  │
  └────┘      └────┘      └────┘

space-evenly :
   ┌────┐     ┌────┐     ┌────┐
   │ 1  │     │ 2  │     │ 3  │
   └────┘     └────┘     └────┘


[IDEE] DIFFÉRENCES space-* :

space-between :
- Espace ENTRE items
- Pas d'espace aux bords

space-around :
- Espace autour de chaque item
- Espace bords = moitié de l'espace entre items

space-evenly :
- Espace ÉGAL partout
- Espace bords = espace entre items


[OK] EXEMPLES PRATIQUES :
"""

/* Header avec logo à gauche, nav à droite */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Boutons centrés */
.button-group {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* Cards espacées uniformément */
.cards {
    display: flex;
    justify-content: space-evenly;
}


# ----------------------------------------------------------------------------
# [MESURE] align-items (ALIGNEMENT AXE SECONDAIRE)
# ----------------------------------------------------------------------------

"""
align-items = Aligne items le long de l'AXE SECONDAIRE

[ATTENTION] Si flex-direction: row -> Vertical
[ATTENTION] Si flex-direction: column -> Horizontal
"""

.container {
    display: flex;
    align-items: stretch;     /* Défaut : étirer */
    align-items: flex-start;  /* Début */
    align-items: flex-end;    /* Fin */
    align-items: center;      /* Centre */
    align-items: baseline;    /* Ligne de base du texte */
}

"""
EXEMPLES VISUELS (flex-direction: row) :

stretch (défaut) :
┌─────────────────┐
│ ┌──┐ ┌──┐ ┌──┐ │
│ │1 │ │2 │ │3 │ │
│ │  │ │  │ │  │ │
│ └──┘ └──┘ └──┘ │
└─────────────────┘
Items s'étirent pour remplir hauteur

flex-start :
┌─────────────────┐
│ ┌──┐ ┌──┐ ┌──┐ │
│ │1 │ │2 │ │3 │ │
│ └──┘ └──┘ └──┘ │
│                 │
└─────────────────┘

flex-end :
┌─────────────────┐
│                 │
│ ┌──┐ ┌──┐ ┌──┐ │
│ │1 │ │2 │ │3 │ │
│ └──┘ └──┘ └──┘ │
└─────────────────┘

center :
┌─────────────────┐
│                 │
│ ┌──┐ ┌──┐ ┌──┐ │
│ │1 │ │2 │ │3 │ │
│ └──┘ └──┘ └──┘ │
│                 │
└─────────────────┘


[OK] EXEMPLES PRATIQUES :
"""

/* Centrage vertical parfait */
.center-vertical {
    display: flex;
    align-items: center;
    min-height: 100vh;
}

/* Card avec image et texte alignés */
.card {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Navigation avec items centrés verticalement */
.nav {
    display: flex;
    align-items: center;
    height: 60px;
}


# ----------------------------------------------------------------------------
# [OBJECTIF] CENTRAGE PARFAIT AVEC FLEXBOX
# ----------------------------------------------------------------------------

"""
[IDEE] CENTRER HORIZONTAL + VERTICAL = 2 lignes !

C'était très difficile avant Flexbox
"""

.center-everything {
    display: flex;
    justify-content: center;  /* Centre horizontal */
    align-items: center;      /* Centre vertical */
    min-height: 100vh;        /* Pleine hauteur */
}

"""
EXEMPLE COMPLET :
"""

/* HTML */
<div class="center-container">
    <div class="centered-content">
        <h1>Parfaitement centré !</h1>
        <p>Horizontal et vertical</p>
    </div>
</div>

/* CSS */
.center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
}

.centered-content {
    text-align: center;
    padding: 40px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}


# ----------------------------------------------------------------------------
# [SYNC] flex-wrap (RETOUR À LA LIGNE)
# ----------------------------------------------------------------------------

"""
flex-wrap = Permet aux items de passer à la ligne si pas assez d'espace
"""

.container {
    display: flex;
    flex-wrap: nowrap;      /* Défaut : tout sur 1 ligne */
    flex-wrap: wrap;        /* Passe à la ligne si nécessaire */
    flex-wrap: wrap-reverse;/* Passe à la ligne (ordre inversé) */
}

"""
EXEMPLES VISUELS :

nowrap (défaut) :
┌────┬────┬────┬────┬────┐│ <- Items se compriment
│ 1  │ 2  │ 3  │ 4  │ 5  ││
└────┴────┴────┴────┴────┘│

wrap :
┌────┬────┬────┬────┐
│ 1  │ 2  │ 3  │ 4  │
├────┴────┴────┴────┘
│ 5  │
└────┘

wrap-reverse :
┌────┐
│ 5  │
├────┬────┬────┬────┐
│ 1  │ 2  │ 3  │ 4  │
└────┴────┴────┴────┘


[OK] EXEMPLES PRATIQUES :
"""

/* Grille responsive de cards */
.cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    flex: 1 1 300px;  /* Min 300px, wrap si moins */
}

/* Tags qui passent à la ligne */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag {
    padding: 5px 15px;
    background-color: #e0e0e0;
    border-radius: 20px;
}


# ----------------------------------------------------------------------------
# [PACKAGE] gap (ESPACEMENT ENTRE ITEMS)
# ----------------------------------------------------------------------------

"""
gap = Espacement entre items Flexbox

[IDEE] Remplace les margin sur chaque item !
"""

.container {
    display: flex;
    gap: 20px;              /* Même espace partout */
    gap: 20px 40px;         /* Vertical | Horizontal */
    row-gap: 20px;          /* Espacement vertical seulement */
    column-gap: 40px;       /* Espacement horizontal seulement */
}

"""
AVANT gap (méthode ancienne) :
"""
.item {
    margin-right: 20px;
}

.item:last-child {
    margin-right: 0;  /* Supprimer sur dernier */
}

"""
AVEC gap (méthode moderne) :
"""
.container {
    display: flex;
    gap: 20px;  /* [OK] Plus simple ! */
}

"""
[OK] AVANTAGES gap :

1. Plus simple (1 ligne au lieu de 2)
2. Pas besoin de :last-child
3. Fonctionne avec wrap
4. Plus maintenable


# Ce fichier continue...
# ============================================================================
# FIN DE CE FICHIER - SUITE DANS css_partie2_flexbox_avance.txt
# ============================================================================
# ============================================================================
# [LIVRE] CSS - PARTIE 2 (SUITE) : FLEXBOX AVANCÉ & PROPRIÉTÉS DES ITEMS
# ============================================================================
#
# [OBJECTIF] CONTENU :
# - Propriétés Flexbox des items (flex-grow, flex-shrink, flex-basis)
# - Propriété raccourcie flex
# - align-self
# - order
# - Patterns Flexbox courants
# - Exercices pratiques
#
# [TEMPS] TEMPS : ~4-6 heures
# [DOCS] PRÉREQUIS : Propriétés du container Flexbox
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 6 (SUITE) : PROPRIÉTÉS FLEXBOX DES ITEMS
# ============================================================================

"""
Jusqu'ici, nous avons vu les propriétés du CONTAINER.
Maintenant, les propriétés des ITEMS (enfants).


[IDEE] PROPRIÉTÉS DES ITEMS :

flex-grow    -> Comment l'item grandit
flex-shrink  -> Comment l'item rétrécit
flex-basis   -> Taille de base de l'item
flex         -> Raccourci des 3 propriétés ci-dessus
align-self   -> Alignement individuel
order        -> Ordre d'affichage
"""


# ----------------------------------------------------------------------------
# [MESURE] flex-basis (TAILLE DE BASE)
# ----------------------------------------------------------------------------

"""
flex-basis = Taille de BASE d'un item avant distribution d'espace

[IDEE] Remplace width (pour flex-direction: row)
[IDEE] Remplace height (pour flex-direction: column)
"""

.item {
    flex-basis: auto;       /* Défaut : taille du contenu */
    flex-basis: 200px;      /* Taille fixe de base */
    flex-basis: 50%;        /* Pourcentage du container */
    flex-basis: 0;          /* Pas de taille de base */
}

"""
[REFLEXION] DIFFÉRENCE flex-basis vs width ?

flex-basis :
- Respecte flex-direction (horizontal ou vertical)
- Interagit avec flex-grow et flex-shrink
- Plus flexible

width :
- Toujours horizontal
- Plus rigide


EXEMPLES :
"""

/* flex-direction: row */
.item {
    flex-basis: 200px;  /* Largeur de base = 200px */
}

/* flex-direction: column */
.item {
    flex-basis: 200px;  /* Hauteur de base = 200px */
}

"""
EXEMPLE PRATIQUE :
"""

/* 3 colonnes égales */
.container {
    display: flex;
}

.col {
    flex-basis: 33.333%;  /* Chaque colonne = 33.333% */
}

/* Sidebar + Main content */
.container {
    display: flex;
}

.sidebar {
    flex-basis: 250px;  /* Sidebar fixe 250px */
}

.main {
    flex-basis: 0;      /* Main prend le reste */
    flex-grow: 1;
}


# ----------------------------------------------------------------------------
# [HAUSSE] flex-grow (CAPACITÉ À GRANDIR)
# ----------------------------------------------------------------------------

"""
flex-grow = Comment l'item GRANDIT si espace disponible

[IDEE] Valeur = PROPORTION de l'espace libre à prendre

Défaut = 0 (ne grandit pas)
"""

.item {
    flex-grow: 0;  /* Défaut : ne grandit pas */
    flex-grow: 1;  /* Grandit pour remplir espace */
    flex-grow: 2;  /* Grandit 2× plus qu'item avec flex-grow: 1 */
}

"""
EXEMPLE VISUEL :

3 items avec flex-grow différents :

flex-grow: 0, 0, 0 (défaut) :
┌──┐┌──┐┌──┐          (espace libre)
│1 ││2 ││3 │
└──┘└──┘└──┘

flex-grow: 1, 1, 1 :
┌────────┬────────┬────────┐
│   1    │   2    │   3    │
└────────┴────────┴────────┘
Tous partagent l'espace également

flex-grow: 1, 2, 1 :
┌─────┬──────────┬─────┐
│  1  │    2     │  3  │
└─────┴──────────┴─────┘
Item 2 prend 2× plus d'espace libre


[IDEE] CALCUL flex-grow :

Total flex-grow = 1 + 2 + 1 = 4
Item 1 = 1/4 de l'espace libre (25%)
Item 2 = 2/4 de l'espace libre (50%)
Item 3 = 1/4 de l'espace libre (25%)


[OK] EXEMPLES PRATIQUES :
"""

/* Sidebar fixe + Main qui grandit */
.container {
    display: flex;
}

.sidebar {
    flex-basis: 250px;
    flex-grow: 0;  /* Ne grandit pas */
}

.main {
    flex-grow: 1;  /* Prend tout l'espace restant */
}

/* Header avec logo + nav + actions */
.header {
    display: flex;
    align-items: center;
}

.logo {
    flex-grow: 0;  /* Taille fixe */
}

.nav {
    flex-grow: 1;  /* Prend l'espace au milieu */
}

.actions {
    flex-grow: 0;  /* Taille fixe */
}

/* Colonnes fluides */
.container {
    display: flex;
    gap: 20px;
}

.col {
    flex-grow: 1;       /* Toutes grandissent également */
    flex-basis: 0;      /* Partent de 0 */
}

.col-double {
    flex-grow: 2;       /* Cette colonne est 2× plus large */
}


# ----------------------------------------------------------------------------
# [BAISSE] flex-shrink (CAPACITÉ À RÉTRÉCIR)
# ----------------------------------------------------------------------------

"""
flex-shrink = Comment l'item RÉTRÉCIT si espace insuffisant

[IDEE] Valeur = PROPORTION du rétrécissement

Défaut = 1 (peut rétrécir)
"""

.item {
    flex-shrink: 1;  /* Défaut : peut rétrécir */
    flex-shrink: 0;  /* Ne rétrécit jamais */
    flex-shrink: 2;  /* Rétrécit 2× plus vite */
}

"""
EXEMPLE VISUEL :

Container trop petit pour 3 items de 200px :

flex-shrink: 1, 1, 1 (défaut) :
┌─────┬─────┬─────┐
│  1  │  2  │  3  │
└─────┴─────┴─────┘
Tous rétrécissent également

flex-shrink: 0, 1, 1 :
┌──────┬───┬───┐
│  1   │ 2 │ 3 │
└──────┴───┴───┘
Item 1 garde sa taille, 2 et 3 rétrécissent

flex-shrink: 2, 1, 1 :
┌───┬─────┬─────┐
│ 1 │  2  │  3  │
└───┴─────┴─────┘
Item 1 rétrécit 2× plus vite


[OK] EXEMPLES PRATIQUES :
"""

/* Sidebar qui ne rétrécit jamais */
.sidebar {
    flex-basis: 250px;
    flex-shrink: 0;  /* Garde toujours 250px */
}

.main {
    flex-grow: 1;
    flex-shrink: 1;  /* Rétrécit si nécessaire */
}

/* Boutons dans header : logo ne rétrécit jamais */
.logo {
    flex-shrink: 0;  /* Taille fixe toujours */
}

.nav-item {
    flex-shrink: 1;  /* Peut rétrécir */
}


# ----------------------------------------------------------------------------
# [OBJECTIF] PROPRIÉTÉ RACCOURCIE flex
# ----------------------------------------------------------------------------

"""
flex = Raccourci pour flex-grow, flex-shrink, flex-basis

[IDEE] SYNTAXE : flex: <grow> <shrink> <basis>;
"""

.item {
    /* Forme longue */
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    
    /* [OK] Forme raccourcie (identique) */
    flex: 1 1 0;
}

"""
VALEURS COURANTES :

flex: 0 1 auto (défaut)
-> Ne grandit pas, peut rétrécir, taille = contenu

flex: 1
-> Raccourci pour flex: 1 1 0
-> Grandit, peut rétrécir, part de 0
-> LE PLUS UTILISÉ !

flex: 0 0 auto
-> Ne grandit pas, ne rétrécit pas, taille = contenu
-> Taille fixe

flex: 0 0 200px
-> Ne grandit pas, ne rétrécit pas, 200px fixe
-> Équivalent à width: 200px mais en Flexbox


[IDEE] PATTERNS COURANTS :
"""

/* 1. Item flexible (le plus courant) */
.item {
    flex: 1;  /* Raccourci pour flex: 1 1 0 */
}
/* Tous les items avec flex: 1 sont de taille égale */

/* 2. Item qui garde sa taille */
.item {
    flex: 0 0 auto;  /* ou flex: none; */
}

/* 3. Item avec taille fixe */
.item {
    flex: 0 0 200px;
}

/* 4. Item qui grandit mais ne rétrécit pas */
.item {
    flex: 1 0 auto;
}

"""
[OK] EXEMPLES PRATIQUES COMPLETS :
"""

/* Layout classique : Sidebar + Main */
.container {
    display: flex;
    gap: 20px;
}

.sidebar {
    flex: 0 0 250px;  /* 250px fixe, ne change jamais */
}

.main {
    flex: 1;          /* Prend tout l'espace restant */
}


/* 3 colonnes égales */
.container {
    display: flex;
    gap: 20px;
}

.col {
    flex: 1;  /* Toutes égales */
}


/* Colonnes avec proportions */
.container {
    display: flex;
    gap: 20px;
}

.col-small {
    flex: 1;  /* 1 part */
}

.col-medium {
    flex: 2;  /* 2 parts (2× plus large) */
}

.col-large {
    flex: 3;  /* 3 parts (3× plus large) */
}


/* Header : Logo + Nav + Boutons */
.header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.logo {
    flex: 0 0 auto;  /* Taille du logo */
}

.nav {
    flex: 1;         /* Nav prend l'espace au milieu */
}

.header-actions {
    flex: 0 0 auto;  /* Taille des boutons */
}


# ----------------------------------------------------------------------------
# [DESIGN] align-self (ALIGNEMENT INDIVIDUEL)
# ----------------------------------------------------------------------------

"""
align-self = Aligne UN item individuellement (override align-items)

[IDEE] Même valeurs que align-items mais pour 1 seul item
"""

.item {
    align-self: auto;        /* Défaut : hérite de align-items */
    align-self: flex-start;  /* Début */
    align-self: flex-end;    /* Fin */
    align-self: center;      /* Centre */
    align-self: stretch;     /* Étire */
    align-self: baseline;    /* Ligne de base */
}

"""
EXEMPLE VISUEL :

Container avec align-items: flex-start
┌─────────────────────────┐
│ ┌──┐ ┌──┐ ┌──┐          │
│ │1 │ │2 │ │3 │          │
│ └──┘ └──┘ └──┘          │
│                         │
└─────────────────────────┘

Item 2 avec align-self: flex-end
┌─────────────────────────┐
│ ┌──┐      ┌──┐          │
│ │1 │      │3 │          │
│ └──┘      └──┘          │
│      ┌──┐               │
│      │2 │               │
│      └──┘               │
└─────────────────────────┘


[OK] EXEMPLES PRATIQUES :
"""

/* Card avec image et contenu */
.card {
    display: flex;
    align-items: flex-start;  /* Tout en haut par défaut */
}

.card-image {
    flex: 0 0 100px;
}

.card-content {
    flex: 1;
}

.card-price {
    align-self: flex-end;  /* Prix en bas */
}


/* Header avec logo centré mais menu en haut */
.header {
    display: flex;
    align-items: center;
}

.logo {
    /* Centré (défaut) */
}

.notification {
    align-self: flex-start;  /* Notification en haut */
}


# ----------------------------------------------------------------------------
# [NOMBRE] order (ORDRE D'AFFICHAGE)
# ----------------------------------------------------------------------------

"""
order = Change l'ordre VISUEL des items (sans changer HTML)

[IDEE] Défaut = 0
Plus petit order = plus à gauche (ou en haut)
"""

.item {
    order: 0;   /* Défaut */
    order: 1;   /* Après les items avec order: 0 */
    order: -1;  /* Avant les items avec order: 0 */
}

"""
EXEMPLE VISUEL :

HTML :
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>

Sans order :
┌───┬───┬───┐
│ 1 │ 2 │ 3 │
└───┴───┴───┘

Item 3 avec order: -1 :
┌───┬───┬───┐
│ 3 │ 1 │ 2 │
└───┴───┴───┘


[OK] EXEMPLES PRATIQUES :
"""

/* Réorganiser sur mobile */
@media (max-width: 768px) {
    .header {
        display: flex;
        flex-direction: column;
    }
    
    .logo {
        order: 1;  /* Logo en premier */
    }
    
    .nav {
        order: 3;  /* Nav en dernier */
    }
    
    .search {
        order: 2;  /* Search au milieu */
    }
}

/* Mettre un élément en premier */
.featured-item {
    order: -1;  /* Toujours en premier */
}


# ----------------------------------------------------------------------------
# [OBJECTIF] PATTERNS FLEXBOX COURANTS
# ----------------------------------------------------------------------------

"""
PATTERN 1 : HEADER AVEC LOGO + NAV + ACTIONS
"""

/* HTML */
<header class="header">
    <div class="logo">Logo</div>
    <nav class="nav">
        <a href="#">Accueil</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
    </nav>
    <div class="actions">
        <button>Connexion</button>
    </div>
</header>

/* CSS */
.header {
    display: flex;
    align-items: center;
    padding: 1rem 2rem;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.logo {
    flex: 0 0 auto;
    font-size: 1.5rem;
    font-weight: bold;
}

.nav {
    flex: 1;  /* Prend l'espace du milieu */
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.nav a {
    text-decoration: none;
    color: #333;
}

.actions {
    flex: 0 0 auto;
}


"""
PATTERN 2 : SIDEBAR + MAIN CONTENT
"""

/* HTML */
<div class="layout">
    <aside class="sidebar">Sidebar</aside>
    <main class="main">Main Content</main>
</div>

/* CSS */
.layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    flex: 0 0 250px;  /* Largeur fixe 250px */
    background-color: #f5f5f5;
    padding: 2rem;
}

.main {
    flex: 1;  /* Prend tout le reste */
    padding: 2rem;
}

/* Responsive : stacker sur mobile */
@media (max-width: 768px) {
    .layout {
        flex-direction: column;
    }
    
    .sidebar {
        flex: 0 0 auto;  /* Hauteur automatique */
    }
}


"""
PATTERN 3 : CARDS GRID RESPONSIVE
"""

/* HTML */
<div class="cards-grid">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
    <div class="card">Card 4</div>
</div>

/* CSS */
.cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    flex: 1 1 300px;  /* Min 300px, wrap si moins */
    /* Équivalent à :
       - flex-grow: 1 (grandit)
       - flex-shrink: 1 (peut rétrécir)
       - flex-basis: 300px (min 300px)
    */
    padding: 20px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
}


"""
PATTERN 4 : FOOTER AVEC COLONNES
"""

/* HTML */
<footer class="footer">
    <div class="footer-col">
        <h3>Entreprise</h3>
        <ul>...</ul>
    </div>
    <div class="footer-col">
        <h3>Produits</h3>
        <ul>...</ul>
    </div>
    <div class="footer-col">
        <h3>Contact</h3>
        <ul>...</ul>
    </div>
</footer>

/* CSS */
.footer {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 40px;
    background-color: #333;
    color: white;
}

.footer-col {
    flex: 1 1 200px;  /* Min 200px, wrap si moins */
}


"""
PATTERN 5 : CENTRAGE PARFAIT
"""

/* Centrer une modal */
.modal-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal {
    background-color: white;
    padding: 2rem;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
}


"""
PATTERN 6 : FORMULAIRE AVEC LABELS
"""

/* HTML */
<form class="form">
    <div class="form-row">
        <label>Nom :</label>
        <input type="text">
    </div>
    <div class="form-row">
        <label>Email :</label>
        <input type="email">
    </div>
</form>

/* CSS */
.form-row {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.form-row label {
    flex: 0 0 120px;  /* Label largeur fixe */
    font-weight: bold;
}

.form-row input {
    flex: 1;  /* Input prend le reste */
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}


"""
PATTERN 7 : MEDIA OBJECT (Image + Texte)
"""

/* HTML */
<div class="media">
    <img src="avatar.jpg" alt="Avatar" class="media-image">
    <div class="media-body">
        <h3>Titre</h3>
        <p>Description...</p>
    </div>
</div>

/* CSS */
.media {
    display: flex;
    gap: 20px;
}

.media-image {
    flex: 0 0 80px;  /* Image fixe 80px */
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.media-body {
    flex: 1;  /* Texte prend le reste */
}


"""
PATTERN 8 : STICKY FOOTER (Footer toujours en bas)
"""

/* HTML */
<div class="page">
    <header class="header">Header</header>
    <main class="main">Main Content</main>
    <footer class="footer">Footer</footer>
</div>

/* CSS */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header {
    flex: 0 0 auto;  /* Hauteur du contenu */
}

.main {
    flex: 1;  /* Prend tout l'espace disponible */
}

.footer {
    flex: 0 0 auto;  /* Hauteur du contenu */
}


# ----------------------------------------------------------------------------
# [COURS] EXERCICES FLEXBOX
# ----------------------------------------------------------------------------

"""
EXERCICE 1 : Navigation responsive

Créez une navigation horizontale qui devient verticale sur mobile :
- Logo à gauche
- Liens au centre
- Bouton connexion à droite
- Sur mobile : stack vertical avec logo en haut
"""

/* [OK] SOLUTION */

.nav {
    display: flex;
    align-items: center;
    padding: 1rem;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nav-logo {
    flex: 0 0 auto;
    font-size: 1.5rem;
    font-weight: bold;
}

.nav-links {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.nav-button {
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    .nav {
        flex-direction: column;
        gap: 1rem;
    }
    
    .nav-links {
        flex-direction: column;
        width: 100%;
        text-align: center;
    }
}


"""
EXERCICE 2 : Grille de cartes responsive

Créez une grille de 4 cartes :
- Desktop : 4 colonnes
- Tablet : 2 colonnes
- Mobile : 1 colonne
Sans media queries ! (utilisez flex-wrap et flex-basis)
"""

/* [OK] SOLUTION */

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.card {
    flex: 1 1 calc(25% - 20px);  /* 4 colonnes */
    min-width: 250px;  /* Wrap si moins de 250px */
    padding: 20px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
}

/* Résultat :
   - > 1020px : 4 cartes par ligne (25% - gap)
   - 770-1020px : 3 cartes par ligne
   - 520-770px : 2 cartes par ligne
   - < 520px : 1 carte par ligne
   Tout automatique avec min-width !
*/


"""
EXERCICE 3 : Dashboard layout

Créez un dashboard avec :
- Header fixe en haut
- Sidebar à gauche (250px)
- Main content qui scroll
- Footer en bas
"""

/* [OK] SOLUTION */

.dashboard {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.dashboard-header {
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    padding: 0 2rem;
    background-color: #1a1a1a;
    color: white;
}

.dashboard-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.dashboard-sidebar {
    flex: 0 0 250px;
    background-color: #f5f5f5;
    overflow-y: auto;
}

.dashboard-main {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
}

.dashboard-footer {
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
}


# ============================================================================
# [LISTE] RÉCAPITULATIF FLEXBOX
# ============================================================================

"""
[OK] PROPRIÉTÉS DU CONTAINER :

display: flex              -> Active Flexbox
flex-direction            -> row | column | row-reverse | column-reverse
justify-content           -> Axe principal (flex-start | center | space-between...)
align-items               -> Axe secondaire (flex-start | center | stretch...)
flex-wrap                 -> nowrap | wrap | wrap-reverse
align-content             -> Multi-lignes (flex-start | center | space-between...)
gap                       -> Espacement entre items


[OK] PROPRIÉTÉS DES ITEMS :

flex-grow                 -> Capacité à grandir (0 = non, 1+ = oui)
flex-shrink               -> Capacité à rétrécir (0 = non, 1+ = oui)
flex-basis                -> Taille de base (px | % | auto)
flex                      -> Raccourci (grow shrink basis)
align-self                -> Override align-items
order                     -> Ordre d'affichage


[IDEE] PATTERNS ESSENTIELS :

flex: 1                   -> Item flexible (taille égale)
flex: 0 0 auto            -> Taille du contenu (fixe)
flex: 0 0 200px           -> Taille fixe (200px)

justify-content: center   -> Centrer horizontal
align-items: center       -> Centrer vertical

flex-wrap: wrap           -> Responsive automatique
flex: 1 1 300px           -> Min 300px, wrap si moins


[OBJECTIF] QUAND UTILISER FLEXBOX ?

[OK] Layouts 1D (rangée OU colonne)
[OK] Navigation horizontale/verticale
[OK] Centrage d'éléments
[OK] Cards en ligne
[OK] Media objects (image + texte)
[OK] Formulaires alignés
[OK] Distribution d'espace

[X] Grilles complexes 2D -> Utiliser CSS Grid


# Ce fichier continue...
# ============================================================================
# FIN DE CE FICHIER - SUITE AVEC CSS GRID
# ============================================================================
# ============================================================================
# [LIVRE] CSS - PARTIE 2 (SUITE) : CSS GRID (GRILLES 2D)
# ============================================================================
#
# [OBJECTIF] CONTENU :
# - Chapitre 7 : CSS Grid complet
# - Propriétés du container Grid
# - Propriétés des items Grid
# - Grid Template Areas
# - Patterns Grid courants
# - Grid vs Flexbox
#
# [TEMPS] TEMPS : ~6-8 heures
# [DOCS] PRÉREQUIS : Flexbox maîtrisé
# [COURS] NIVEAU : Intermédiaire-Avancé
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 7 : CSS GRID (SYSTÈME DE GRILLE 2D)
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Différence Grid vs Flexbox
[OK] Créer des grilles avec lignes et colonnes
[OK] grid-template-columns et grid-template-rows
[OK] Unités fr (fraction)
[OK] repeat() et auto-fit/auto-fill
[OK] Placer items avec grid-column et grid-row
[OK] Grid Template Areas (approche nommée)
[OK] Gap et espacements
[OK] Créer layouts complexes 2D
"""


# ----------------------------------------------------------------------------
# [DESIGN] INTRODUCTION À CSS GRID
# ----------------------------------------------------------------------------

"""
[IDEE] QU'EST-CE QUE CSS GRID ?

Grid = Système de layout 2D (lignes ET colonnes)
Le plus puissant pour créer layouts complexes


[REFLEXION] GRID VS FLEXBOX ?

FLEXBOX :
- 1 dimension (rangée OU colonne)
- Content-first (part du contenu)
- Flexible, fluide
- Alignement d'items

GRID :
- 2 dimensions (rangées ET colonnes)
- Layout-first (définit structure d'abord)
- Précis, contrôlé
- Layouts complexes


[IDEE] QUAND UTILISER QUOI ?

[OK] FLEXBOX :
- Navigation
- Cards en ligne
- Alignements simples
- Components

[OK] GRID :
- Page layouts
- Grilles de produits
- Dashboards
- Galleries


* BON À SAVOIR :
Grid et Flexbox sont COMPLÉMENTAIRES !
Souvent utilisés ensemble dans un même projet.


[OBJECTIF] CONCEPT CLÉ : CONTAINER ET ITEMS (comme Flexbox)

┌─────────────────────────────────────┐
│  GRID CONTAINER                     │
│  ┌────┐ ┌────┐ ┌────┐              │
│  │ 1  │ │ 2  │ │ 3  │              │
│  └────┘ └────┘ └────┘              │
│  ┌────┐ ┌────┐ ┌────┐              │
│  │ 4  │ │ 5  │ │ 6  │              │
│  └────┘ └────┘ └────┘              │
└─────────────────────────────────────┘

CONTAINER = Parent avec display: grid
ITEMS = Enfants directs du container
"""


# ----------------------------------------------------------------------------
# [OBJECTIF] ACTIVER GRID : display: grid
# ----------------------------------------------------------------------------

"""
Pour utiliser Grid, appliquer display: grid au CONTAINER
"""

.container {
    display: grid;  /* Active CSS Grid */
}

"""
[ATTENTION] JUSTE display: grid NE SUFFIT PAS !

Il faut aussi définir les colonnes et/ou lignes :
"""

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;  /* 3 colonnes de 200px */
}

"""
EXEMPLE HTML :
"""

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>

/* CSS */
.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;  /* 3 colonnes */
}

/* Résultat :
┌────┬────┬────┐
│ 1  │ 2  │ 3  │
├────┼────┼────┤
│ 4  │ 5  │ 6  │
└────┴────┴────┘
*/


# ----------------------------------------------------------------------------
# [MESURE] grid-template-columns (DÉFINIR COLONNES)
# ----------------------------------------------------------------------------

"""
grid-template-columns = Définit la LARGEUR et le NOMBRE de colonnes
"""

.container {
    display: grid;
    
    /* 3 colonnes de 200px chacune */
    grid-template-columns: 200px 200px 200px;
    
    /* 2 colonnes : 300px et 500px */
    grid-template-columns: 300px 500px;
    
    /* 4 colonnes : différentes tailles */
    grid-template-columns: 100px 200px 300px 400px;
}

"""
[IDEE] UNITÉS UTILISABLES :

px        -> Pixels fixes
%         -> Pourcentage du container
em/rem    -> Relatif
auto      -> Automatique (contenu)
fr        -> Fraction (espace restant) * LE PLUS IMPORTANT
"""


# ----------------------------------------------------------------------------
# * UNITÉ fr (FRACTION) - LA MAGIE DE GRID
# ----------------------------------------------------------------------------

"""
fr = Fraction de l'espace disponible

[IDEE] C'est l'équivalent de flex: 1 pour Grid
"""

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;  /* 3 colonnes égales */
}

"""
EXEMPLE VISUEL :

1fr 1fr 1fr :
┌─────────┬─────────┬─────────┐
│   1fr   │   1fr   │   1fr   │
└─────────┴─────────┴─────────┘
Largeur totale divisée en 3 parts égales

1fr 2fr 1fr :
┌─────┬─────────────┬─────┐
│ 1fr │     2fr     │ 1fr │
└─────┴─────────────┴─────┘
Colonne du milieu = 2× plus large

200px 1fr 1fr :
┌───┬───────────┬───────────┐
│200│    1fr    │    1fr    │
└───┴───────────┴───────────┘
Première colonne fixe, les 2 autres se partagent le reste


[IDEE] CALCUL DES fr :

Total fr = 1 + 2 + 1 = 4
Colonne 1 = 1/4 de l'espace = 25%
Colonne 2 = 2/4 de l'espace = 50%
Colonne 3 = 1/4 de l'espace = 25%


[OK] EXEMPLES PRATIQUES :
"""

/* 2 colonnes égales */
.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* Sidebar + Main (20% + 80%) */
.container {
    display: grid;
    grid-template-columns: 1fr 4fr;  /* Ratio 1:4 = 20:80 */
}

/* Sidebar fixe + Main flexible */
.container {
    display: grid;
    grid-template-columns: 250px 1fr;  /* 250px fixe, reste flexible */
}

/* 3 colonnes : narrow | wide | narrow */
.container {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
}


# ----------------------------------------------------------------------------
# [MESURE] grid-template-rows (DÉFINIR LIGNES)
# ----------------------------------------------------------------------------

"""
grid-template-rows = Définit la HAUTEUR et le NOMBRE de lignes
"""

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 200px 150px;  /* 3 lignes avec hauteurs */
}

"""
EXEMPLE VISUEL :

grid-template-rows: 100px 200px :
┌────┬────┬────┐
│    │    │    │ 100px
├────┼────┼────┤
│    │    │    │
│    │    │    │ 200px
└────┴────┴────┘


[OK] EXEMPLES PRATIQUES :
"""

/* Header + Main + Footer */
.container {
    display: grid;
    grid-template-rows: 80px 1fr 60px;  /* Header 80px, Footer 60px, Main flexible */
    min-height: 100vh;
}

/* Lignes égales */
.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;  /* 3 lignes égales */
}


# ----------------------------------------------------------------------------
# [SYNC] repeat() - SIMPLIFIER LES RÉPÉTITIONS
# ----------------------------------------------------------------------------

"""
repeat(nombre, taille) = Répéter une valeur plusieurs fois
"""

/* Sans repeat() */
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;  /* 5 colonnes */
}

/* [OK] Avec repeat() (mieux !) */
.container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);  /* 5 colonnes */
}

"""
SYNTAXE : repeat(nombre de répétitions, valeur)


EXEMPLES :
"""

/* 3 colonnes égales */
grid-template-columns: repeat(3, 1fr);
/* = 1fr 1fr 1fr */

/* 4 colonnes de 200px */
grid-template-columns: repeat(4, 200px);
/* = 200px 200px 200px 200px */

/* Pattern répété */
grid-template-columns: repeat(3, 100px 200px);
/* = 100px 200px 100px 200px 100px 200px */

/* 12 colonnes (système Bootstrap-like) */
grid-template-columns: repeat(12, 1fr);


# ----------------------------------------------------------------------------
# [OBJECTIF] auto-fit ET auto-fill (RESPONSIVE AUTOMATIQUE)
# ----------------------------------------------------------------------------

"""
auto-fit et auto-fill = Nombre de colonnes AUTOMATIQUE

[IDEE] LA MAGIE DU RESPONSIVE SANS MEDIA QUERIES !
"""

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

"""
DÉCORTIQUONS :

repeat(auto-fit, minmax(250px, 1fr))
       │         │      │      │
       │         │      │      └─ Max : 1fr (prend espace dispo)
       │         │      └──────── Min : 250px (ne va pas en dessous)
       │         └─────────────── minmax(min, max)
       └───────────────────────── auto-fit : calcule nombre de colonnes


COMPORTEMENT :

Écran large (1200px) :
┌────┬────┬────┬────┐
│250+│250+│250+│250+│  4 colonnes
└────┴────┴────┴────┘

Écran moyen (800px) :
┌────┬────┬────┐
│250+│250+│250+│  3 colonnes
└────┴────┴────┘

Écran petit (500px) :
┌─────┬─────┐
│ 250+│ 250+│  2 colonnes
└─────┴─────┘

Mobile (300px) :
┌───────────┐
│    300    │  1 colonne (étire à 300px)
└───────────┘


[REFLEXION] auto-fit VS auto-fill ?

auto-fit :
- Colonnes s'étirent pour remplir espace
- Pas de colonnes vides

auto-fill :
- Crée colonnes vides si espace
- Garde taille min/max


EXEMPLE VISUEL (3 items) :

auto-fit avec 1200px disponible :
┌────────┬────────┬────────┐
│  Item1 │  Item2 │  Item3 │  S'étirent pour remplir
└────────┴────────┴────────┘

auto-fill avec 1200px disponible :
┌────┬────┬────┬────┐
│ 1  │ 2  │ 3  │    │  Colonnes vides créées
└────┴────┴────┴────┘


[OK] RECOMMANDATION : Utilisez auto-fit la plupart du temps
"""

/* * PATTERN LE PLUS UTILISÉ : Grille responsive */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

/* Résultat : Grid automatiquement responsive !
   - Grandes écrans : plusieurs colonnes
   - Petits écrans : moins de colonnes
   - Très petits : 1 colonne
   SANS MEDIA QUERIES ! [BRAVO]
*/


# ----------------------------------------------------------------------------
# [PACKAGE] gap (ESPACEMENT ENTRE CELLULES)
# ----------------------------------------------------------------------------

"""
gap = Espacement entre cellules Grid

[IDEE] Remplace les margin sur items !
"""

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    
    gap: 20px;              /* Même espace partout */
    gap: 20px 40px;         /* Ligne | Colonne */
    row-gap: 20px;          /* Entre lignes */
    column-gap: 40px;       /* Entre colonnes */
}

"""
EXEMPLE VISUEL :

Sans gap :
┌───┬───┬───┐
│ 1 │ 2 │ 3 │
├───┼───┼───┤
│ 4 │ 5 │ 6 │
└───┴───┴───┘

Avec gap: 20px :
┌───┐ ┌───┐ ┌───┐
│ 1 │ │ 2 │ │ 3 │
└───┘ └───┘ └───┘
  
┌───┐ ┌───┐ ┌───┐
│ 4 │ │ 5 │ │ 6 │
└───┘ └───┘ └───┘


[OK] AVANTAGES gap :

1. Plus simple que margin
2. Pas besoin de :last-child
3. Espacement uniforme
4. Plus maintenable


# ----------------------------------------------------------------------------
# [DESIGN] PLACER DES ITEMS : grid-column et grid-row
# ----------------------------------------------------------------------------

"""
Par défaut, items se placent automatiquement.
Mais on peut les PLACER PRÉCISÉMENT !


[IDEE] CONCEPT DES LIGNES DE GRILLE :

Une grille 3×3 a 4 LIGNES verticales et 4 LIGNES horizontales :

Lignes colonnes :    Lignes lignes :
    1   2   3   4        1
    │   │   │   │       ───
┌───┼───┼───┼───┐       2
│   │   │   │   │      ───
└───┴───┴───┴───┘       3
                       ───
                        4


grid-column = Placement horizontal (colonnes)
grid-row = Placement vertical (lignes)
"""

.item {
    /* Forme longue */
    grid-column-start: 1;
    grid-column-end: 3;    /* De ligne 1 à ligne 3 (2 colonnes) */
    
    /* [OK] Forme raccourcie (recommandé) */
    grid-column: 1 / 3;    /* start / end */
    grid-row: 1 / 2;
}

"""
SYNTAXE : grid-column: start / end;

start = Ligne de début
end = Ligne de fin
span = Nombre de cellules


EXEMPLES :
"""

/* Item occupe colonnes 1 à 3 (2 colonnes) */
.item {
    grid-column: 1 / 3;
}

/* Item occupe 2 colonnes (peu importe où il commence) */
.item {
    grid-column: span 2;
}

/* Item va jusqu'à la fin */
.item {
    grid-column: 1 / -1;  /* -1 = dernière ligne */
}

"""
EXEMPLE VISUEL :

Grid 3×3 normale :
┌───┬───┬───┐
│ 1 │ 2 │ 3 │
├───┼───┼───┤
│ 4 │ 5 │ 6 │
├───┼───┼───┤
│ 7 │ 8 │ 9 │
└───┴───┴───┘

Item 1 avec grid-column: 1 / 3; grid-row: 1 / 3; :
┌───────┬───┐
│       │ 2 │
│   1   ├───┤
│       │ 3 │
├───┬───┼───┤
│ 4 │ 5 │ 6 │
└───┴───┴───┘


[OK] EXEMPLES PRATIQUES :
"""

/* Layout Header + Sidebar + Main + Footer */
.container {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 80px 1fr 60px;
    min-height: 100vh;
}

.header {
    grid-column: 1 / -1;  /* Toute la largeur */
    grid-row: 1 / 2;
}

.sidebar {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.main {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.footer {
    grid-column: 1 / -1;  /* Toute la largeur */
    grid-row: 3 / 4;
}

"""
Résultat :
┌─────────────────────┐
│      HEADER         │  80px
├────────┬────────────┤
│        │            │
│ SIDE-  │   MAIN     │  1fr
│ BAR    │            │
├────────┴────────────┤
│      FOOTER         │  60px
└─────────────────────┘


# ----------------------------------------------------------------------------
# [LABEL] GRID TEMPLATE AREAS (APPROCHE NOMMÉE)
# ----------------------------------------------------------------------------

"""
grid-template-areas = Définir layout avec NOMS

[IDEE] Approche VISUELLE et INTUITIVE !
Comme dessiner le layout en texte ASCII
"""

.container {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 80px 1fr 60px;
    grid-template-areas:
        "header  header"
        "sidebar main"
        "footer  footer";
}

/* Puis assigner items aux areas */
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

"""
[IDEE] RÈGLES grid-template-areas :

1. Chaque ligne = string entre guillemets
2. Mots séparés par espaces = colonnes
3. Même nom = zone s'étend
4. Point (.) = cellule vide


EXEMPLE VISUEL :

grid-template-areas:
    "header  header  header"
    "sidebar main    main"
    "sidebar main    main"
    "footer  footer  footer";

Résultat :
┌────────────────────────┐
│       HEADER           │
├──────┬─────────────────┤
│      │                 │
│ SIDE │      MAIN       │
│ BAR  │                 │
├──────┴─────────────────┤
│       FOOTER           │
└────────────────────────┘


[OK] EXEMPLE COMPLET :
"""

/* HTML */
<div class="layout">
    <header class="header">Header</header>
    <aside class="sidebar">Sidebar</aside>
    <main class="main">Main</main>
    <footer class="footer">Footer</footer>
</div>

/* CSS */
.layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    grid-template-areas:
        "header  header"
        "sidebar main"
        "footer  footer";
}

.header  { grid-area: header;  background: #333; color: white; padding: 20px; }
.sidebar { grid-area: sidebar; background: #f5f5f5; padding: 20px; }
.main    { grid-area: main;    background: white; padding: 20px; }
.footer  { grid-area: footer;  background: #333; color: white; padding: 20px; text-align: center; }

"""
RESPONSIVE avec grid-template-areas :
"""

/* Desktop */
.layout {
    grid-template-areas:
        "header  header"
        "sidebar main"
        "footer  footer";
}

/* Mobile : stack vertical */
@media (max-width: 768px) {
    .layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main"
            "sidebar"
            "footer";
    }
}


"""
EXEMPLE AVANCÉ : Dashboard
"""

.dashboard {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: 60px 100px 1fr 80px;
    gap: 20px;
    min-height: 100vh;
    grid-template-areas:
        "sidebar header  header"
        "sidebar stats   stats"
        "sidebar main    aside"
        "sidebar footer  footer";
}

.sidebar { grid-area: sidebar; }
.header  { grid-area: header; }
.stats   { grid-area: stats; }
.main    { grid-area: main; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

"""
Résultat :
┌───────┬──────────────────┐
│       │     HEADER       │ 60px
│       ├──────────────────┤
│       │     STATS        │ 100px
│ SIDE  ├──────────┬───────┤
│ BAR   │   MAIN   │ ASIDE │ 1fr
│       │          │       │
│       ├──────────┴───────┤
│       │     FOOTER       │ 80px
└───────┴──────────────────┘


# ----------------------------------------------------------------------------
# [OBJECTIF] PATTERNS GRID COURANTS
# ----------------------------------------------------------------------------

"""
PATTERN 1 : GRILLE DE PRODUITS RESPONSIVE
"""

.products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    padding: 30px;
}

.product-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    transition: transform 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
}


"""
PATTERN 2 : LAYOUT BLOG (SIDEBAR + MAIN)
"""

.blog-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

@media (max-width: 768px) {
    .blog-layout {
        grid-template-columns: 1fr;
    }
}


"""
PATTERN 3 : HOLY GRAIL LAYOUT (Header + 3 cols + Footer)
"""

.holy-grail {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    grid-template-areas:
        "header header  header"
        "nav    main    aside"
        "footer footer  footer";
}

.header { grid-area: header; }
.nav    { grid-area: nav; }
.main   { grid-area: main; }
.aside  { grid-area: aside; }
.footer { grid-area: footer; }

@media (max-width: 768px) {
    .holy-grail {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "nav"
            "main"
            "aside"
            "footer";
    }
}


"""
PATTERN 4 : GALLERY ASYMÉTRIQUE (Pinterest-style)
"""

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 200px;
    gap: 15px;
}

.gallery-item:nth-child(3n) {
    grid-row: span 2;  /* Certains items 2× plus hauts */
}

.gallery-item:nth-child(5n) {
    grid-column: span 2;  /* Certains items 2× plus larges */
}


"""
PATTERN 5 : FORM LAYOUT
"""

.form {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 20px;
    align-items: center;
}

.form label {
    text-align: right;
    font-weight: bold;
}

.form input,
.form textarea {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.form .full-width {
    grid-column: 1 / -1;  /* Bouton pleine largeur */
}


"""
PATTERN 6 : PRICING TABLE
"""

.pricing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.pricing-card {
    border: 2px solid #ddd;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
}

.pricing-card.featured {
    border-color: #0066cc;
    transform: scale(1.05);
}


# ============================================================================
# [LISTE] RÉCAPITULATIF CSS GRID
# ============================================================================

"""
[OK] PROPRIÉTÉS DU CONTAINER :

display: grid                   -> Active Grid
grid-template-columns           -> Définit colonnes (px, fr, %)
grid-template-rows              -> Définit lignes
grid-template-areas             -> Layout nommé (visuel)
gap                             -> Espacement (row-gap, column-gap)
justify-items                   -> Align horizontal items
align-items                     -> Align vertical items
justify-content                 -> Align horizontal grid
align-content                   -> Align vertical grid


[OK] PROPRIÉTÉS DES ITEMS :

grid-column                     -> Placement horizontal (start / end)
grid-row                        -> Placement vertical (start / end)
grid-area                       -> Nom pour template-areas
justify-self                    -> Override justify-items
align-self                      -> Override align-items


[IDEE] CONCEPTS ESSENTIELS :

fr                              -> Fraction d'espace (1fr, 2fr...)
repeat()                        -> Répétition (repeat(3, 1fr))
minmax()                        -> Min/max (minmax(200px, 1fr))
auto-fit / auto-fill            -> Responsive automatique
span                            -> Étendre sur N cellules
-1                              -> Dernière ligne


[OBJECTIF] PATTERNS MAGIQUES :

repeat(auto-fit, minmax(250px, 1fr))  -> Grid responsive parfaite
grid-template-areas               -> Layout visuel
grid-column: 1 / -1               -> Toute la largeur
grid-row: span 2                  -> Hauteur double


[GRAPHIQUE] GRID VS FLEXBOX - RÉCAP :

┌──────────────┬──────────┬──────────┐
│              │  FLEXBOX │   GRID   │
├──────────────┼──────────┼──────────┤
│ Dimensions   │    1D    │    2D    │
│ Approche     │  Content │  Layout  │
│ Complexité   │  Simple  │  Avancé  │
│ Best for     │Components│  Pages   │
└──────────────┴──────────┴──────────┘

[OK] Utilisez les DEUX ensemble !


# Ce fichier continue avec Media Queries...
# ============================================================================
# FIN DE CE FICHIER - SUITE AVEC RESPONSIVE & MEDIA QUERIES
# ============================================================================
# ============================================================================
# [LIVRE] CSS - PARTIE 2 (FIN) : RESPONSIVE DESIGN & MEDIA QUERIES
# ============================================================================
#
# [OBJECTIF] CONTENU :
# - Chapitre 8 : Responsive Design (concepts et principes)
# - Chapitre 9 : Media Queries (syntaxe et patterns)
# - Breakpoints standards
# - Mobile-first vs Desktop-first
# - Exercices pratiques Partie 2
# - Projet final : Site responsive complet
#
# [TEMPS] TEMPS : ~6-8 heures
# [DOCS] PRÉREQUIS : Flexbox et Grid maîtrisés
# [COURS] NIVEAU : Intermédiaire
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 8 : RESPONSIVE DESIGN (DESIGN ADAPTATIF)
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Qu'est-ce que le Responsive Design
[OK] Viewport et meta tag viewport
[OK] Unités responsive (%, vw, vh, rem)
[OK] Approche Mobile-first vs Desktop-first
[OK] Stratégie de breakpoints
[OK] Images et médias responsive
[OK] Tester sur différents appareils
"""


# ----------------------------------------------------------------------------
# [WEB] QU'EST-CE QUE LE RESPONSIVE DESIGN ?
# ----------------------------------------------------------------------------

"""
[IDEE] RESPONSIVE DESIGN = Site qui s'ADAPTE à tous les écrans

Desktop (1920px)  ->  ┌──────────────────┐
                     │ ████ ████ ████   │
                     │ ████ ████ ████   │
                     └──────────────────┘

Tablet (768px)    ->  ┌────────────┐
                     │ ████ ████  │
                     │ ████ ████  │
                     └────────────┘

Mobile (375px)    ->  ┌──────┐
                     │ ████ │
                     │ ████ │
                     │ ████ │
                     └──────┘


[REFLEXION] POURQUOI RESPONSIVE ?

[OK] 60%+ du trafic web = mobile
[OK] Google favorise sites mobile-friendly
[OK] Meilleure expérience utilisateur
[OK] 1 seul code pour tous appareils
[OK] Maintenance plus facile


[IDEE] 3 APPROCHES RESPONSIVE :

1. SEPARATE MOBILE SITE (m.site.com)
   [X] Ancien, pas recommandé
   [X] Double maintenance
   [X] Contenu dupliqué

2. ADAPTIVE DESIGN (layouts fixes multiples)
   [ATTENTION] Plusieurs layouts prédéfinis
   [ATTENTION] Moins flexible

3. RESPONSIVE DESIGN (layout fluide)
   [OK] Recommandé !
   [OK] Layout s'adapte à TOUTE taille
   [OK] Une seule codebase
"""


# ----------------------------------------------------------------------------
# [MOBILE] VIEWPORT ET META TAG
# ----------------------------------------------------------------------------

"""
[CLE] LE PLUS IMPORTANT : META VIEWPORT

Sans cette balise, le responsive NE FONCTIONNE PAS sur mobile !
"""

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--                            ^ OBLIGATOIRE pour responsive ! -->
    <title>Mon Site Responsive</title>
</head>

"""
[IDEE] EXPLICATION :

width=device-width
-> Largeur de la page = largeur de l'appareil

initial-scale=1.0
-> Zoom initial à 100% (pas de zoom)


[X] SANS META VIEWPORT (mobile) :
Site affiché en 980px puis zoomé out
-> Texte minuscule, illisible

[OK] AVEC META VIEWPORT (mobile) :
Site s'adapte à la vraie largeur (375px)
-> Lisible, utilisable


[ATTENTION] TOUJOURS INCLURE CETTE BALISE !
C'est la BASE du responsive design.


# ----------------------------------------------------------------------------
# [MESURE] UNITÉS RESPONSIVE
# ----------------------------------------------------------------------------

"""
[IDEE] UNITÉS POUR RESPONSIVE DESIGN

[X] À ÉVITER :
px    -> Fixe, ne s'adapte pas

[OK] À PRIVILÉGIER :
%     -> Relatif au parent
rem   -> Relatif à la racine (html)
em    -> Relatif au parent
vw    -> % de la largeur viewport
vh    -> % de la hauteur viewport
vmin  -> Plus petit de vw ou vh
vmax  -> Plus grand de vw ou vh


EXEMPLES :
"""

/* [X] FIXE (pas responsive) */
.container {
    width: 1200px;        /* Déborde sur petit écran */
    font-size: 16px;      /* Ne s'adapte pas */
}

/* [OK] RESPONSIVE */
.container {
    width: 90%;           /* 90% de la largeur parent */
    max-width: 1200px;    /* Mais max 1200px */
    font-size: 1rem;      /* 16px par défaut, scalable */
}

"""
UNITÉS VIEWPORT (vw, vh) :
"""

/* Hero plein écran */
.hero {
    height: 100vh;        /* Toute la hauteur viewport */
    width: 100vw;         /* Toute la largeur viewport */
}

/* Titres responsifs */
h1 {
    font-size: 5vw;       /* 5% de la largeur viewport */
}
/* Sur 320px : 16px (5% de 320)
   Sur 1920px : 96px (5% de 1920) */

/* Avec limites */
h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    /* Min: 2rem, Idéal: 5vw, Max: 4rem */
}


"""
[IDEE] FONCTION clamp() (MODERNE) :

clamp(min, idéal, max)

Permet des tailles fluides avec limites !
"""

/* Taille de police responsive avec limites */
h1 {
    font-size: clamp(24px, 4vw, 64px);
}

/* Padding responsive */
.section {
    padding: clamp(20px, 5vw, 80px);
}

/* Largeur responsive */
.container {
    width: clamp(300px, 90%, 1200px);
}


# ----------------------------------------------------------------------------
# [GRAPHIQUE] BREAKPOINTS STANDARDS
# ----------------------------------------------------------------------------

"""
[IDEE] BREAKPOINTS = Points où le layout change

STANDARDS COURANTS :

Mobile        : < 576px     (320px - 575px)
Mobile Large  : 576px+      (576px - 767px)
Tablet        : 768px+      (768px - 991px)
Desktop       : 992px+      (992px - 1199px)
Large Desktop : 1200px+     (1200px+)


[OBJECTIF] APPROCHES :

1. MOBILE-FIRST (recommandé !)
   - Commence par mobile
   - Ajoute complexité en montant
   - min-width dans media queries

2. DESKTOP-FIRST (ancien)
   - Commence par desktop
   - Simplifie en descendant
   - max-width dans media queries


[IDEE] MOBILE-FIRST VS DESKTOP-FIRST :
"""

/* ═══════════════════════════════════════
   MOBILE-FIRST ([OK] RECOMMANDÉ)
   ═══════════════════════════════════════ */

/* Base : Mobile (< 768px) */
.container {
    width: 100%;
    padding: 20px;
}

.nav {
    flex-direction: column;
}

/* Tablet et plus (768px+) */
@media (min-width: 768px) {
    .container {
        width: 90%;
        padding: 40px;
    }
    
    .nav {
        flex-direction: row;
    }
}

/* Desktop et plus (992px+) */
@media (min-width: 992px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
}


/* ═══════════════════════════════════════
   DESKTOP-FIRST ([ATTENTION] ANCIEN)
   ═══════════════════════════════════════ */

/* Base : Desktop */
.container {
    width: 1200px;
    margin: 0 auto;
}

.nav {
    flex-direction: row;
}

/* Tablet et moins (< 992px) */
@media (max-width: 991px) {
    .container {
        width: 90%;
    }
}

/* Mobile et moins (< 768px) */
@media (max-width: 767px) {
    .container {
        width: 100%;
        padding: 20px;
    }
    
    .nav {
        flex-direction: column;
    }
}


"""
[OK] POURQUOI MOBILE-FIRST ?

1. Progressive enhancement (amélioration progressive)
2. Plus performant sur mobile
3. Force à prioriser contenu essentiel
4. Moins de code à override
5. Tendance moderne


# ============================================================================
# [GUIDE] CHAPITRE 9 : MEDIA QUERIES
# ============================================================================

"""
[IDEE] MEDIA QUERIES = Appliquer CSS selon conditions

Conditions basées sur :
- Taille d'écran (width, height)
- Orientation (portrait, landscape)
- Résolution
- Type d'appareil (screen, print)
"""


# ----------------------------------------------------------------------------
# [NOTE] SYNTAXE MEDIA QUERIES
# ----------------------------------------------------------------------------

"""
SYNTAXE DE BASE :
"""

@media (condition) {
    /* CSS appliqué si condition vraie */
}

/* EXEMPLES : */

/* Largeur minimale */
@media (min-width: 768px) {
    /* S'applique si écran ≥ 768px */
}

/* Largeur maximale */
@media (max-width: 767px) {
    /* S'applique si écran ≤ 767px */
}

/* Entre deux tailles */
@media (min-width: 768px) and (max-width: 991px) {
    /* S'applique si 768px ≤ écran ≤ 991px */
}

/* Orientation */
@media (orientation: portrait) {
    /* S'applique si hauteur > largeur */
}

@media (orientation: landscape) {
    /* S'applique si largeur > hauteur */
}

/* Plusieurs conditions (ET) */
@media (min-width: 768px) and (orientation: landscape) {
    /* Les deux conditions doivent être vraies */
}

/* Plusieurs conditions (OU) */
@media (min-width: 768px), (orientation: landscape) {
    /* Au moins une condition doit être vraie */
}

/* Type de média */
@media screen {
    /* Seulement pour écrans */
}

@media print {
    /* Seulement pour impression */
}


# ----------------------------------------------------------------------------
# [OBJECTIF] PATTERNS MEDIA QUERIES COURANTS
# ----------------------------------------------------------------------------

"""
PATTERN 1 : SYSTÈME MOBILE-FIRST COMPLET
"""

/* Variables pour breakpoints (facultatif mais propre) */
:root {
    --mobile: 576px;
    --tablet: 768px;
    --desktop: 992px;
    --large: 1200px;
}

/* ═══════════════════════════════════════
   BASE : MOBILE (< 576px)
   ═══════════════════════════════════════ */

body {
    font-size: 14px;
    padding: 10px;
}

.container {
    width: 100%;
}

.grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.nav {
    flex-direction: column;
}

.card {
    width: 100%;
}


/* ═══════════════════════════════════════
   MOBILE LARGE (≥ 576px)
   ═══════════════════════════════════════ */

@media (min-width: 576px) {
    body {
        font-size: 15px;
    }
    
    .container {
        padding: 20px;
    }
}


/* ═══════════════════════════════════════
   TABLET (≥ 768px)
   ═══════════════════════════════════════ */

@media (min-width: 768px) {
    body {
        font-size: 16px;
        padding: 20px;
    }
    
    .container {
        width: 90%;
        max-width: 720px;
        margin: 0 auto;
    }
    
    .grid {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .card {
        flex: 1 1 calc(50% - 20px);
    }
    
    .nav {
        flex-direction: row;
        justify-content: space-between;
    }
}


/* ═══════════════════════════════════════
   DESKTOP (≥ 992px)
   ═══════════════════════════════════════ */

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
    
    .card {
        flex: 1 1 calc(33.333% - 20px);
    }
    
    .sidebar {
        display: block;  /* Afficher sidebar */
    }
}


/* ═══════════════════════════════════════
   LARGE DESKTOP (≥ 1200px)
   ═══════════════════════════════════════ */

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    .card {
        flex: 1 1 calc(25% - 20px);
    }
}


/* ═══════════════════════════════════════
   XL DESKTOP (≥ 1400px)
   ═══════════════════════════════════════ */

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}


"""
PATTERN 2 : NAVIGATION RESPONSIVE
"""

/* Mobile : Menu hamburger */
.nav {
    position: relative;
}

.nav-toggle {
    display: block;  /* Bouton hamburger visible */
    position: absolute;
    top: 10px;
    right: 10px;
}

.nav-menu {
    display: none;  /* Menu caché par défaut */
    flex-direction: column;
}

.nav-menu.active {
    display: flex;  /* Afficher quand actif */
}

/* Desktop : Menu horizontal */
@media (min-width: 768px) {
    .nav-toggle {
        display: none;  /* Cacher hamburger */
    }
    
    .nav-menu {
        display: flex;  /* Toujours visible */
        flex-direction: row;
        gap: 2rem;
    }
}


"""
PATTERN 3 : GRID RESPONSIVE
"""

/* Mobile : 1 colonne */
.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Tablet : 2 colonnes */
@media (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop : 3 colonnes */
@media (min-width: 992px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Large : 4 colonnes */
@media (min-width: 1200px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


"""
PATTERN 4 : SIDEBAR RESPONSIVE
"""

/* Mobile : Sidebar en bas */
.layout {
    display: flex;
    flex-direction: column;
}

.sidebar {
    order: 2;  /* Après main */
}

.main {
    order: 1;  /* Avant sidebar */
}

/* Desktop : Sidebar à gauche */
@media (min-width: 992px) {
    .layout {
        flex-direction: row;
    }
    
    .sidebar {
        flex: 0 0 250px;
        order: 1;  /* Avant main */
    }
    
    .main {
        flex: 1;
        order: 2;  /* Après sidebar */
    }
}


"""
PATTERN 5 : TYPOGRAPHIE RESPONSIVE
"""

/* Mobile */
body {
    font-size: 14px;
    line-height: 1.5;
}

h1 {
    font-size: 1.75rem;  /* 24.5px */
}

h2 {
    font-size: 1.5rem;   /* 21px */
}

/* Tablet */
@media (min-width: 768px) {
    body {
        font-size: 16px;
    }
    
    h1 {
        font-size: 2.5rem;  /* 40px */
    }
    
    h2 {
        font-size: 2rem;    /* 32px */
    }
}

/* Desktop */
@media (min-width: 992px) {
    h1 {
        font-size: 3rem;    /* 48px */
    }
    
    h2 {
        font-size: 2.25rem; /* 36px */
    }
}


"""
PATTERN 6 : IMAGES RESPONSIVE
"""

/* Base : Images fluides */
img {
    max-width: 100%;  /* Jamais plus large que parent */
    height: auto;     /* Garde proportions */
    display: block;
}

/* Picture element pour différentes tailles */
<picture>
    <source media="(min-width: 1200px)" srcset="large.jpg">
    <source media="(min-width: 768px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Description">
</picture>


/* Background images responsive */
.hero {
    background-image: url('hero-mobile.jpg');
    height: 300px;
}

@media (min-width: 768px) {
    .hero {
        background-image: url('hero-tablet.jpg');
        height: 500px;
    }
}

@media (min-width: 1200px) {
    .hero {
        background-image: url('hero-desktop.jpg');
        height: 700px;
    }
}


# ----------------------------------------------------------------------------
# [COURS] EXERCICES MEDIA QUERIES
# ----------------------------------------------------------------------------

"""
EXERCICE 1 : Créer une navigation responsive

HTML :
<nav class="main-nav">
    <div class="logo">MonSite</div>
    <button class="nav-toggle">[TRIGRAM_FOR_HEAVEN]</button>
    <ul class="nav-links">
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">À propos</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Objectifs :
- Mobile : Menu vertical, bouton hamburger
- Desktop (≥768px) : Menu horizontal, pas de hamburger
"""

/* [OK] SOLUTION */

/* Base : Mobile */
.main-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 1rem;
    background-color: #333;
    color: white;
}

.logo {
    flex: 1;
    font-size: 1.5rem;
    font-weight: bold;
}

.nav-toggle {
    display: block;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

.nav-links {
    display: none;  /* Caché par défaut */
    flex-basis: 100%;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin-top: 1rem;
}

.nav-links.active {
    display: flex;  /* Visible quand actif */
}

.nav-links li {
    padding: 0.5rem 0;
}

.nav-links a {
    color: white;
    text-decoration: none;
}

/* Desktop */
@media (min-width: 768px) {
    .nav-toggle {
        display: none;  /* Cacher hamburger */
    }
    
    .nav-links {
        display: flex !important;  /* Toujours visible */
        flex-basis: auto;
        flex-direction: row;
        margin-top: 0;
        gap: 2rem;
    }
    
    .nav-links li {
        padding: 0;
    }
}


"""
EXERCICE 2 : Grille de produits responsive

Créez une grille qui affiche :
- Mobile : 1 colonne
- Tablet (≥576px) : 2 colonnes
- Desktop (≥992px) : 4 colonnes
"""

/* [OK] SOLUTION */

.products {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
}

@media (min-width: 576px) {
    .products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .products {
        grid-template-columns: repeat(4, 1fr);
    }
}


"""
EXERCICE 3 : Layout adaptatif

Créez un layout :
- Mobile : Header, Main, Sidebar, Footer (vertical)
- Desktop (≥768px) : Header | Main + Sidebar | Footer
"""

/* [OK] SOLUTION */

.page {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "main"
        "sidebar"
        "footer";
    min-height: 100vh;
}

.header  { grid-area: header; }
.main    { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer  { grid-area: footer; }

@media (min-width: 768px) {
    .page {
        grid-template-columns: 2fr 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "header  header"
            "main    sidebar"
            "footer  footer";
    }
}


# ============================================================================
# [OBJECTIF] PROJET FINAL : SITE RESPONSIVE COMPLET
# ============================================================================

"""
PROJET : Créez un site portfolio responsive

SECTIONS :
1. Header fixe avec navigation
2. Hero section plein écran
3. Grille de projets (3 colonnes -> 2 -> 1)
4. Section À propos (sidebar + texte)
5. Formulaire de contact
6. Footer

CONTRAINTES :
- Mobile-first
- Flexbox + Grid
- Media queries appropriées
- Images responsive
"""

/* ═══════════════════════════════════════
   HTML STRUCTURE
   ═══════════════════════════════════════ */

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio - Jean Dupont</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Header -->
    <header class="header">
        <div class="container">
            <div class="logo">JD</div>
            <nav class="nav">
                <a href="#hero">Accueil</a>
                <a href="#projects">Projets</a>
                <a href="#about">À propos</a>
                <a href="#contact">Contact</a>
            </nav>
        </div>
    </header>

    <!-- Hero -->
    <section id="hero" class="hero">
        <div class="hero-content">
            <h1>Jean Dupont</h1>
            <p class="hero-subtitle">Développeur Full Stack</p>
            <a href="#projects" class="button">Voir mes projets</a>
        </div>
    </section>

    <!-- Projects -->
    <section id="projects" class="projects-section">
        <div class="container">
            <h2 class="section-title">Mes Projets</h2>
            <div class="projects-grid">
                <article class="project-card">
                    <img src="project1.jpg" alt="Projet 1">
                    <h3>Nom du projet</h3>
                    <p>Description...</p>
                    <a href="#" class="project-link">Voir plus -></a>
                </article>
                <!-- Répéter pour autres projets -->
            </div>
        </div>
    </section>

    <!-- About -->
    <section id="about" class="about-section">
        <div class="container">
            <div class="about-layout">
                <aside class="about-sidebar">
                    <img src="profile.jpg" alt="Photo profil">
                </aside>
                <div class="about-content">
                    <h2>À propos de moi</h2>
                    <p>Texte...</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact -->
    <section id="contact" class="contact-section">
        <div class="container">
            <h2 class="section-title">Contact</h2>
            <form class="contact-form">
                <input type="text" placeholder="Nom" required>
                <input type="email" placeholder="Email" required>
                <textarea placeholder="Message" required></textarea>
                <button type="submit" class="button">Envoyer</button>
            </form>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2024 Jean Dupont. Tous droits réservés.</p>
        </div>
    </footer>
</body>
</html>


/* ═══════════════════════════════════════
   CSS COMPLET RESPONSIVE
   ═══════════════════════════════════════ */

/* Reset & Variables */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #0066cc;
    --text: #333;
    --text-light: #666;
    --bg: #f5f5f5;
    --white: #ffffff;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.button {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--primary);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: transform 0.3s;
}

.button:hover {
    transform: translateY(-2px);
}

.section-title {
    font-size: 2rem;
    margin-bottom: 2rem;
    text-align: center;
}

/* ═══ HEADER ═══ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--white);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 20px;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary);
}

.nav {
    display: flex;
    gap: 2rem;
}

.nav a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.3s;
}

.nav a:hover {
    color: var(--primary);
}

/* ═══ HERO ═══ */
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--primary) 0%, #004080 100%);
    color: white;
    text-align: center;
    padding-top: 60px; /* Compensation header */
}

.hero-content h1 {
    font-size: clamp(2rem, 6vw, 4rem);
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: clamp(1rem, 3vw, 1.5rem);
    margin-bottom: 2rem;
    opacity: 0.9;
}

/* ═══ PROJECTS ═══ */
.projects-section {
    padding: 4rem 0;
    background-color: var(--bg);
}

.projects-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.project-card {
    background-color: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.project-card:hover {
    transform: translateY(-5px);
}

.project-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.project-card h3,
.project-card p,
.project-link {
    padding: 0 1.5rem;
}

.project-card h3 {
    margin-top: 1rem;
}

.project-link {
    display: inline-block;
    color: var(--primary);
    margin: 1rem 0;
    text-decoration: none;
}

/* ═══ ABOUT ═══ */
.about-section {
    padding: 4rem 0;
}

.about-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.about-sidebar img {
    width: 100%;
    max-width: 300px;
    border-radius: 8px;
    margin: 0 auto;
}

/* ═══ CONTACT ═══ */
.contact-section {
    padding: 4rem 0;
    background-color: var(--bg);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

.contact-form input,
.contact-form textarea {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: inherit;
}

.contact-form textarea {
    min-height: 150px;
    resize: vertical;
}

/* ═══ FOOTER ═══ */
.footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 2rem 0;
}


/* ═══════════════════════════════════════
   MEDIA QUERIES (MOBILE-FIRST)
   ═══════════════════════════════════════ */

/* Tablet (≥ 576px) */
@media (min-width: 576px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet Large (≥ 768px) */
@media (min-width: 768px) {
    .section-title {
        font-size: 2.5rem;
    }
    
    .about-layout {
        flex-direction: row;
        align-items: center;
    }
    
    .about-sidebar {
        flex: 0 0 300px;
    }
    
    .about-content {
        flex: 1;
    }
}

/* Desktop (≥ 992px) */
@media (min-width: 992px) {
    .projects-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


# ============================================================================
# [LISTE] RÉCAPITULATIF PARTIE 2
# ============================================================================

"""
[OK] CE QUE VOUS AVEZ APPRIS :

CHAPITRE 5 - DISPLAY :
[WHITE_SQUARE] display: block, inline, inline-block
[WHITE_SQUARE] display: none vs visibility: hidden
[WHITE_SQUARE] Quand utiliser chaque type

CHAPITRE 6 - FLEXBOX :
[WHITE_SQUARE] Container vs Items
[WHITE_SQUARE] Axes principal et secondaire
[WHITE_SQUARE] justify-content, align-items
[WHITE_SQUARE] flex-direction, flex-wrap
[WHITE_SQUARE] flex-grow, flex-shrink, flex-basis
[WHITE_SQUARE] Propriété raccourcie flex
[WHITE_SQUARE] gap pour espacement
[WHITE_SQUARE] Patterns courants

CHAPITRE 7 - CSS GRID :
[WHITE_SQUARE] Grid 2D vs Flexbox 1D
[WHITE_SQUARE] grid-template-columns, grid-template-rows
[WHITE_SQUARE] Unité fr (fraction)
[WHITE_SQUARE] repeat(), minmax()
[WHITE_SQUARE] auto-fit, auto-fill
[WHITE_SQUARE] grid-column, grid-row
[WHITE_SQUARE] grid-template-areas
[WHITE_SQUARE] Layouts complexes

CHAPITRE 8 - RESPONSIVE DESIGN :
[WHITE_SQUARE] Meta viewport (OBLIGATOIRE !)
[WHITE_SQUARE] Unités responsive (%, rem, vw, vh)
[WHITE_SQUARE] clamp() pour tailles fluides
[WHITE_SQUARE] Mobile-first vs Desktop-first
[WHITE_SQUARE] Images responsive

CHAPITRE 9 - MEDIA QUERIES :
[WHITE_SQUARE] Syntaxe @media
[WHITE_SQUARE] Breakpoints standards
[WHITE_SQUARE] min-width vs max-width
[WHITE_SQUARE] Orientation, type de média
[WHITE_SQUARE] Patterns responsive courants


[OBJECTIF] CHECKLIST DE MAÎTRISE PARTIE 2 :

Je maîtrise la Partie 2 si je peux :

[WHITE_SQUARE] Créer layout avec Flexbox (navigation, cards)
[WHITE_SQUARE] Créer grille responsive avec Grid
[WHITE_SQUARE] Utiliser repeat(auto-fit, minmax()) sans media queries
[WHITE_SQUARE] Centrer parfaitement éléments (H+V)
[WHITE_SQUARE] Écrire media queries mobile-first
[WHITE_SQUARE] Rendre site responsive sur tous écrans
[WHITE_SQUARE] Choisir entre Flexbox et Grid selon besoin
[WHITE_SQUARE] Utiliser gap pour espacements
[WHITE_SQUARE] Créer navigation responsive
[WHITE_SQUARE] Optimiser typographie responsive


# ============================================================================
# [BRAVO] FIN DE LA PARTIE 2
# ============================================================================

[OK] PARTIE 2 COMPLÉTÉE !

Vous maîtrisez maintenant les layouts modernes CSS :
- Display et types d'affichage
- Flexbox pour layouts 1D
- Grid pour layouts 2D
- Responsive design complet
- Media queries

PROCHAINE ÉTAPE : PARTIE 3 - DESIGN AVANCÉ
- Animations CSS
- Transitions
- Transformations
- Backgrounds avancés
- Gradients
- Filters
- Et plus !

Prêt pour la Partie 3 ? [DESIGN]
# ============================================================================
# [LIVRE] CSS - PARTIE 3 : DESIGN AVANCÉ
# ============================================================================
#
# [OBJECTIF] CETTE PARTIE COUVRE :
# - Chapitre 10 : Transitions CSS
# - Chapitre 11 : Transformations 2D
# - Chapitre 12 : Transformations 3D
# - Chapitre 13 : Animations CSS
# - Chapitre 14 : Backgrounds avancés
# - Chapitre 15 : Gradients
#
# [TEMPS] TEMPS TOTAL : ~15-20 heures
# [DOCS] PRÉREQUIS : Parties 1 et 2 complétées
# [COURS] NIVEAU : Intermédiaire-Avancé
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 10 : TRANSITIONS CSS
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Créer transitions fluides entre états
[OK] transition-property, duration, timing-function, delay
[OK] Courbes de timing (ease, linear, cubic-bezier)
[OK] Animer plusieurs propriétés
[OK] Créer effets au hover élégants
[OK] Performance et propriétés optimales
"""


# ----------------------------------------------------------------------------
# [DESIGN] INTRODUCTION AUX TRANSITIONS
# ----------------------------------------------------------------------------

"""
[IDEE] QU'EST-CE QU'UNE TRANSITION ?

Transition = Changement PROGRESSIF entre deux états CSS

Sans transition :
État A -> [INSTANT] -> État B

Avec transition :
État A -> [SMOOTH] -> État B


[REFLEXION] POURQUOI UTILISER TRANSITIONS ?

[OK] Améliore expérience utilisateur
[OK] Feedback visuel des interactions
[OK] Rend interface plus vivante
[OK] Guide l'attention de l'utilisateur
[OK] Plus professionnel


EXEMPLE SIMPLE :
"""

/* [X] SANS TRANSITION (brutal) */
.button {
    background-color: blue;
}

.button:hover {
    background-color: red;  /* Changement instantané */
}


/* [OK] AVEC TRANSITION (fluide) */
.button {
    background-color: blue;
    transition: background-color 0.3s;  /* Transition de 0.3s */
}

.button:hover {
    background-color: red;  /* Changement progressif sur 0.3s */
}


# ----------------------------------------------------------------------------
# [NOTE] PROPRIÉTÉ transition (RACCOURCI)
# ----------------------------------------------------------------------------

"""
transition = Raccourci pour définir une transition

[IDEE] SYNTAXE : transition: property duration timing-function delay;
"""

.element {
    transition: all 0.3s ease 0s;
    /*          │   │    │    │
                │   │    │    └─ Délai avant démarrage (optionnel)
                │   │    └────── Courbe de timing (optionnel)
                │   └─────────── Durée
                └─────────────── Propriété à animer
    */
}

"""
EXEMPLES :
"""

/* Transition simple */
.box {
    transition: background-color 0.3s;
}

/* Transition complète */
.box {
    transition: transform 0.5s ease-in-out 0.1s;
}

/* Plusieurs transitions */
.box {
    transition: 
        background-color 0.3s ease,
        transform 0.5s ease-in-out,
        opacity 0.2s linear;
}

/* Tout animer */
.box {
    transition: all 0.3s ease;
}


# ----------------------------------------------------------------------------
# [OBJECTIF] transition-property (QUOI ANIMER)
# ----------------------------------------------------------------------------

"""
transition-property = Quelle(s) propriété(s) CSS animer
"""

.element {
    transition-property: background-color;  /* Une propriété */
    transition-property: transform, opacity; /* Plusieurs */
    transition-property: all;                /* Toutes */
}

"""
[OK] PROPRIÉTÉS ANIMABLES :

COULEURS :
- color
- background-color
- border-color

DIMENSIONS :
- width, height
- padding, margin
- border-width

POSITIONNEMENT :
- top, right, bottom, left

TRANSFORMATIONS :
- transform (rotate, scale, translate)

OPACITÉ :
- opacity

AUTRES :
- box-shadow
- text-shadow
- filter
- etc.


[ATTENTION] PROPRIÉTÉS NON-ANIMABLES :

- display (none <-> block)
- font-family
- position (static <-> relative)
- background-image


[IDEE] ASTUCE : Utilisez all pour animer tout
"""

.card {
    transition-property: all;  /* Anime toutes les propriétés qui changent */
}


# ----------------------------------------------------------------------------
# [TEMPS] transition-duration (DURÉE)
# ----------------------------------------------------------------------------

"""
transition-duration = Durée de la transition
"""

.element {
    transition-duration: 0.3s;    /* 300 millisecondes */
    transition-duration: 1s;      /* 1 seconde */
    transition-duration: 0.5s;    /* 500ms */
    transition-duration: 200ms;   /* 200 millisecondes */
}

"""
[IDEE] RECOMMANDATIONS DURÉE :

0.1s - 0.2s  -> Très rapide (hover léger)
0.2s - 0.3s  -> Rapide (standard pour hovers)
0.3s - 0.5s  -> Moyen (changements visibles)
0.5s - 1s    -> Lent (animations élaborées)
1s+          -> Très lent (rarement utilisé)


[OK] DURÉES TYPIQUES :
"""

/* Hover de bouton : rapide */
.button {
    transition-duration: 0.2s;
}

/* Ouverture menu : moyen */
.menu {
    transition-duration: 0.4s;
}

/* Animation complexe : lent */
.modal {
    transition-duration: 0.6s;
}


# ----------------------------------------------------------------------------
# [GRAPHIQUE] transition-timing-function (COURBE D'ANIMATION)
# ----------------------------------------------------------------------------

"""
transition-timing-function = COMMENT l'animation progresse dans le temps

[IDEE] Contrôle l'accélération/décélération
"""

.element {
    transition-timing-function: ease;         /* Défaut */
    transition-timing-function: linear;       /* Vitesse constante */
    transition-timing-function: ease-in;      /* Accélère au début */
    transition-timing-function: ease-out;     /* Ralentit à la fin */
    transition-timing-function: ease-in-out;  /* Acc. début + ralent. fin */
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);  /* Personnalisé */
}

"""
VISUALISATION DES COURBES :

linear (vitesse constante) :
Progress
100% │         ╱
     │       ╱
 50% │     ╱
     │   ╱
  0% │ ╱
     └─────────-> Time
       0%  100%


ease (défaut) :
Progress
100% │       ╱──
     │     ╱
 50% │   ╱
     │ ╱
  0% │╱
     └─────────-> Time
       0%  100%
   Lent -> Rapide -> Lent


ease-in (accélère) :
Progress
100% │      ╱──
     │    ╱
 50% │  ╱
     │ ╱
  0% │╱
     └─────────-> Time
       0%  100%
   Lent -> Rapide


ease-out (ralentit) :
Progress
100% │  ──╲
     │      ╲
 50% │        ╲
     │          ╲
  0% │            ╲
     └─────────-> Time
       0%  100%
   Rapide -> Lent


ease-in-out (acc + ralentit) :
Progress
100% │    ╱──╲
     │  ╱      ╲
 50% │╱          ╲
     │
  0% │
     └─────────-> Time
       0%  100%
   Lent -> Rapide -> Lent


[IDEE] QUAND UTILISER QUELLE COURBE ?

linear :
- Rotations continues
- Fades simples
- Rarement pour hover

ease (défaut) :
- Usage général
- Hovers de boutons
- Changements de couleur

ease-in :
- Éléments qui disparaissent
- Slides qui sortent

ease-out :
- Éléments qui apparaissent
- Slides qui entrent
- LE PLUS NATUREL pour interactions

ease-in-out :
- Animations aller-retour
- Transformations complexes


[OK] RECOMMANDATION : ease-out pour la plupart des cas
"""

.button {
    transition: all 0.3s ease-out;  /* [OK] Le plus naturel */
}


"""
cubic-bezier() - COURBES PERSONNALISÉES :

cubic-bezier(x1, y1, x2, y2)

Équivalences :
linear       = cubic-bezier(0, 0, 1, 1)
ease         = cubic-bezier(0.25, 0.1, 0.25, 1)
ease-in      = cubic-bezier(0.42, 0, 1, 1)
ease-out     = cubic-bezier(0, 0, 0.58, 1)
ease-in-out  = cubic-bezier(0.42, 0, 0.58, 1)


COURBES POPULAIRES PERSONNALISÉES :
"""

/* Bounce (rebond) */
.bounce {
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Snap (cassant) */
.snap {
    transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

/* Smooth (très fluide) */
.smooth {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

"""
[OUTIL] OUTIL : cubic-bezier.com pour créer vos courbes


# ----------------------------------------------------------------------------
# [ALARM_CLOCK] transition-delay (DÉLAI)
# ----------------------------------------------------------------------------

"""
transition-delay = Attendre avant de démarrer
"""

.element {
    transition-delay: 0s;      /* Immédiat (défaut) */
    transition-delay: 0.2s;    /* Attend 200ms */
    transition-delay: 1s;      /* Attend 1 seconde */
}

"""
[OK] UTILISATION :

1. ANIMATIONS EN CASCADE
"""

.item:nth-child(1) { transition-delay: 0s; }
.item:nth-child(2) { transition-delay: 0.1s; }
.item:nth-child(3) { transition-delay: 0.2s; }
.item:nth-child(4) { transition-delay: 0.3s; }

/* Résultat : items apparaissent un par un */

"""
2. HOVER TOOLTIP (éviter ouverture accidentelle)
"""

.tooltip {
    opacity: 0;
    transition: opacity 0.3s;
    transition-delay: 0.5s;  /* Attend 500ms avant d'apparaître */
}

.element:hover .tooltip {
    opacity: 1;
}


# ----------------------------------------------------------------------------
# [DESIGN] EXEMPLES PRATIQUES TRANSITIONS
# ----------------------------------------------------------------------------

"""
EXEMPLE 1 : BOUTON HOVER ÉLÉGANT
"""

.button {
    background-color: #0066cc;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    
    /* Transitions */
    transition: 
        background-color 0.3s ease,
        transform 0.2s ease,
        box-shadow 0.3s ease;
}

.button:hover {
    background-color: #0052a3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.4);
}

.button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 102, 204, 0.2);
}


"""
EXEMPLE 2 : CARD HOVER (effet lift)
"""

.card {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: 
        transform 0.3s ease-out,
        box-shadow 0.3s ease-out;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}


"""
EXEMPLE 3 : IMAGE ZOOM
"""

.image-container {
    overflow: hidden;
    border-radius: 8px;
}

.image-container img {
    display: block;
    width: 100%;
    transition: transform 0.5s ease-out;
}

.image-container:hover img {
    transform: scale(1.1);  /* Zoom 110% */
}


"""
EXEMPLE 4 : LIEN UNDERLINE ANIMÉ
"""

.link {
    position: relative;
    color: #0066cc;
    text-decoration: none;
}

.link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #0066cc;
    transition: width 0.3s ease-out;
}

.link:hover::after {
    width: 100%;
}


"""
EXEMPLE 5 : MENU SLIDE
"""

.menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.menu.active {
    max-height: 500px;  /* Assez grand pour contenu */
}


"""
EXEMPLE 6 : FADE IN/OUT
"""

.modal {
    opacity: 0;
    visibility: hidden;
    transition: 
        opacity 0.3s ease,
        visibility 0.3s;
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

"""
[ATTENTION] POURQUOI visibility + opacity ?

opacity seul : Élément invisible mais cliquable
visibility seul : Pas de transition fluide

Les deux ensemble : Transition fluide + non-cliquable


"""
EXEMPLE 7 : LOADING SPINNER (rotation infinie)
"""

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0066cc;
    border-radius: 50%;
    
    /* Note : rotation infinie nécessite animation, pas transition */
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


"""
EXEMPLE 8 : BACKGROUND GRADIENT SHIFT
"""

.button {
    background: linear-gradient(90deg, #0066cc 0%, #00aaff 100%);
    background-size: 200% 100%;
    background-position: 0% 0%;
    transition: background-position 0.5s ease;
}

.button:hover {
    background-position: 100% 0%;
}


# ----------------------------------------------------------------------------
# [RAPIDE] PERFORMANCE DES TRANSITIONS
# ----------------------------------------------------------------------------

"""
[IDEE] PROPRIÉTÉS PERFORMANTES (GPU-accelerated) :

[OK] RAPIDES (60 FPS) :
- transform (translate, scale, rotate)
- opacity

[ATTENTION] MOYENNES :
- color
- background-color
- box-shadow

[X] LENTES (éviter si possible) :
- width, height
- padding, margin
- top, left (position)


[CLE] RÈGLE D'OR :

Préférez transform et opacity
pour les animations fluides !


EXEMPLE : Déplacer un élément
"""

/* [X] LENT (recalcule layout) */
.box {
    left: 0;
    transition: left 0.3s;
}

.box:hover {
    left: 100px;
}


/* [OK] RAPIDE (utilise GPU) */
.box {
    transform: translateX(0);
    transition: transform 0.3s;
}

.box:hover {
    transform: translateX(100px);
}


"""
EXEMPLE : Redimensionner
"""

/* [X] LENT */
.box {
    width: 100px;
    transition: width 0.3s;
}

.box:hover {
    width: 200px;
}


/* [OK] RAPIDE */
.box {
    transform: scale(1);
    transition: transform 0.3s;
}

.box:hover {
    transform: scale(2);  /* 2× plus grand */
}


"""
[IDEE] ASTUCE : will-change

Indique au navigateur qu'une propriété va changer
-> Optimise en avance
"""

.box {
    will-change: transform, opacity;
    transition: transform 0.3s, opacity 0.3s;
}

/* [ATTENTION] N'abusez pas ! Seulement pour animations fréquentes */


# ============================================================================
# [GUIDE] CHAPITRE 11 : TRANSFORMATIONS 2D
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] translate() - Déplacer éléments
[OK] rotate() - Faire pivoter
[OK] scale() - Agrandir/rétrécir
[OK] skew() - Incliner
[OK] transform-origin - Point de transformation
[OK] Combiner plusieurs transformations
[OK] Créer effets visuels avancés
"""


# ----------------------------------------------------------------------------
# [DESIGN] INTRODUCTION AUX TRANSFORMATIONS
# ----------------------------------------------------------------------------

"""
[IDEE] TRANSFORMATIONS = Modifier forme/position SANS affecter le layout

Avantages :
[OK] Performant (GPU-accelerated)
[OK] Ne casse pas le layout
[OK] Combinable
[OK] Animable avec transitions


4 TRANSFORMATIONS 2D PRINCIPALES :

1. translate() - Déplacer
2. rotate()    - Pivoter
3. scale()     - Agrandir/rétrécir
4. skew()      - Incliner


# ----------------------------------------------------------------------------
# [IMPORTANT] translate() - DÉPLACER
# ----------------------------------------------------------------------------

"""
translate() = Déplacer un élément sur X et/ou Y

[IDEE] N'affecte PAS le layout (autres éléments ne bougent pas)
"""

.element {
    transform: translate(50px, 100px);
    /*                   │     │
                         │     └─ Déplacement vertical (Y)
                         └─────── Déplacement horizontal (X)
    */
}

/* Variantes */
transform: translateX(50px);     /* Horizontal seulement */
transform: translateY(100px);    /* Vertical seulement */
transform: translate(50px);      /* X seulement (Y = 0) */

"""
VALEURS :

px, em, rem  -> Valeurs absolues
%            -> Relatif à la TAILLE de l'élément (pas du parent !)


EXEMPLE VISUEL :

Original :
┌────────────────┐
│  ┌──┐          │
│  │A │          │
│  └──┘          │
└────────────────┘

translate(100px, 50px) :
┌────────────────┐
│  ┌──┐          │
│  │  │    ┌──┐  │
│  └──┘    │A │  │  <- Déplacé mais espace d'origine conservé
│          └──┘  │
└────────────────┘


[OK] UTILISATIONS COURANTES :
"""

/* 1. CENTRAGE PARFAIT */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -50% = la moitié de SA PROPRE taille */
}


/* 2. HOVER EFFET (monter légèrement) */
.card {
    transition: transform 0.3s;
}

.card:hover {
    transform: translateY(-8px);  /* Monte de 8px */
}


/* 3. SLIDE IN (animation entrée) */
.slide-in {
    transform: translateX(-100%);  /* Hors écran à gauche */
    transition: transform 0.5s;
}

.slide-in.active {
    transform: translateX(0);  /* Position normale */
}


/* 4. PARALLAX (défilement décalé) */
.parallax-layer {
    transform: translateY(calc(var(--scroll) * 0.5));
    /* Bouge 50% de la vitesse du scroll */
}


# ----------------------------------------------------------------------------
# [SYNC] rotate() - PIVOTER
# ----------------------------------------------------------------------------

"""
rotate() = Faire pivoter un élément
"""

.element {
    transform: rotate(45deg);   /* Rotation de 45 degrés */
    transform: rotate(-90deg);  /* Rotation inverse */
    transform: rotate(0.5turn); /* Demi-tour (180deg) */
    transform: rotate(3.14rad); /* Radians */
}

"""
UNITÉS :

deg  -> Degrés (0-360)
turn -> Tours complets (1turn = 360deg)
rad  -> Radians (2π rad = 360deg)


EXEMPLES VISUELS :

Original :
┌────┐
│    │
└────┘

rotate(45deg) :
   ╱╲
  ╱  ╲
 ╱    ╲
 ╲    ╱
  ╲  ╱
   ╲╱

rotate(90deg) :
│  │
│  │
│  │
└──┘


[OK] UTILISATIONS :
"""

/* 1. ICÔNE HAMBURGER -> X */
.menu-icon {
    transition: transform 0.3s;
}

.menu-icon.active {
    transform: rotate(90deg);
}


/* 2. LOADING SPINNER */
.spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* 3. CARD FLIP (rotation sur hover) */
.card {
    transition: transform 0.6s;
}

.card:hover {
    transform: rotateY(180deg);  /* 3D - voir plus tard */
}


/* 4. CHEVRON (flèche) animation */
.chevron {
    transition: transform 0.3s;
}

.accordion.open .chevron {
    transform: rotate(180deg);  /* [BLACK_DOWN-POINTING_TRIANGLE] devient [BLACK_UP-POINTING_TRIANGLE] */
}


# ----------------------------------------------------------------------------
# [MESURE] scale() - AGRANDIR/RÉTRÉCIR
# ----------------------------------------------------------------------------

"""
scale() = Changer la taille de l'élément
"""

.element {
    transform: scale(1.5);       /* 150% de la taille */
    transform: scale(0.5);       /* 50% de la taille */
    transform: scale(2, 1);      /* 2× largeur, 1× hauteur */
    transform: scaleX(2);        /* 2× largeur seulement */
    transform: scaleY(0.5);      /* 50% hauteur seulement */
}

"""
VALEURS :

1   -> Taille normale (100%)
2   -> Double (200%)
0.5 -> Moitié (50%)
0   -> Invisible


EXEMPLES VISUELS :

Original :
┌────┐
│    │
└────┘

scale(1.5) :
┌────────┐
│        │
│        │
└────────┘

scale(0.5) :
┌──┐
│  │
└──┘


[OK] UTILISATIONS :
"""

/* 1. ZOOM IMAGE */
.image-zoom {
    overflow: hidden;
}

.image-zoom img {
    transition: transform 0.5s;
}

.image-zoom:hover img {
    transform: scale(1.2);  /* Zoom 120% */
}


/* 2. PULSE ANIMATION (battement) */
.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}


/* 3. BUTTON PRESS */
.button {
    transition: transform 0.1s;
}

.button:active {
    transform: scale(0.95);  /* Réduit au clic */
}


/* 4. BADGE NOTIFICATION */
.badge {
    animation: badge-bounce 0.5s ease-out;
}

@keyframes badge-bounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}


# ----------------------------------------------------------------------------
# [MESURE] skew() - INCLINER
# ----------------------------------------------------------------------------

"""
skew() = Incliner l'élément (créer perspective)
"""

.element {
    transform: skew(10deg, 5deg);   /* X, Y */
    transform: skewX(15deg);        /* Horizontal seulement */
    transform: skewY(10deg);        /* Vertical seulement */
}

"""
EXEMPLES VISUELS :

Original :
┌────┐
│    │
└────┘

skewX(20deg) :
   ╱──╲
  ╱    ╲
 ╱      ╲
╱────────╲

skewY(20deg) :
┌─────╲
│      │
│      │
└──────┘


[ATTENTION] Moins utilisé que translate/rotate/scale
Mais utile pour effets spéciaux


[OK] UTILISATIONS :
"""

/* 1. EFFET PARALLÉLOGRAMME */
.parallelogram {
    transform: skewX(-15deg);
}


/* 2. RIBBON/BADGE */
.ribbon {
    transform: skewX(-10deg);
    background: linear-gradient(to right, #ff0000, #cc0000);
}


/* 3. CARD TILT (effet 3D) */
.card {
    transition: transform 0.3s;
}

.card:hover {
    transform: skew(-2deg, 1deg) scale(1.05);
}


# ----------------------------------------------------------------------------
# [OBJECTIF] transform-origin - POINT DE TRANSFORMATION
# ----------------------------------------------------------------------------

"""
transform-origin = Point autour duquel la transformation se fait

Défaut = center center (50% 50%)
"""

.element {
    transform-origin: center;           /* Défaut */
    transform-origin: top left;         /* Coin supérieur gauche */
    transform-origin: 50% 50%;          /* Centre (défaut) */
    transform-origin: 0 0;              /* Coin supérieur gauche */
    transform-origin: 100% 100%;        /* Coin inférieur droit */
}

"""
EXEMPLES VISUELS :

rotate(45deg) avec transform-origin: center;
      *  <- Centre de rotation
    ╱   ╲
  ╱       ╲
 ╱    *    ╲
╱           ╲


rotate(45deg) avec transform-origin: top left;
*  <- Centre de rotation
 ╲
  ╲
   ╲
    ╲


[OK] UTILISATIONS :
"""

/* 1. DOOR SWING (porte qui s'ouvre) */
.door {
    transform-origin: left center;
    transition: transform 0.5s;
}

.door.open {
    transform: rotateY(90deg);
}


/* 2. DROPDOWN ARROW */
.arrow {
    transform-origin: center;
    transition: transform 0.3s;
}

.dropdown.open .arrow {
    transform: rotate(180deg);
}


/* 3. TOOLTIP POINTER */
.tooltip::before {
    transform-origin: bottom center;
    transform: scaleY(0);
    transition: transform 0.2s;
}

.tooltip.show::before {
    transform: scaleY(1);
}


# ----------------------------------------------------------------------------
# [LIEN] COMBINER TRANSFORMATIONS
# ----------------------------------------------------------------------------

"""
[IDEE] IMPORTANT : On peut combiner plusieurs transformations !

Ordre IMPORTANT : Les transformations s'appliquent de GAUCHE à DROITE
"""

/* Combine translate + rotate + scale */
.element {
    transform: translate(50px, 100px) rotate(45deg) scale(1.5);
    /*         1⃣ D'abord déplace  2⃣ Puis pivote  3⃣ Puis agrandit */
}

"""
[ATTENTION] L'ORDRE COMPTE !
"""

/* Exemple 1 : Translate puis Rotate */
transform: translate(100px, 0) rotate(45deg);
/* Déplace de 100px vers droite, PUIS pivote */

/* Exemple 2 : Rotate puis Translate */
transform: rotate(45deg) translate(100px, 0);
/* Pivote de 45deg, PUIS déplace (dans la direction pivotée !) */

/* Résultats DIFFÉRENTS ! */


"""
[OK] PATTERNS COURANTS :
"""

/* 1. CARD 3D HOVER */
.card {
    transition: transform 0.3s;
}

.card:hover {
    transform: 
        translateY(-10px)     /* Monte */
        rotate(-2deg)         /* Incline légèrement */
        scale(1.05);          /* Agrandit 5% */
}


/* 2. BUTTON BOUNCE */
.button:active {
    transform: 
        scale(0.95)           /* Réduit */
        translateY(2px);      /* Descend */
}


/* 3. SHAKE ANIMATION */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.shake {
    animation: shake 0.5s;
}


/* 4. FLIP CARD */
.card-inner {
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.card:hover .card-inner {
    transform: rotateY(180deg);
}


# Ce fichier continue...
# ============================================================================
# FIN DE CE FICHIER - SUITE AVEC ANIMATIONS & 3D
# ============================================================================
# ============================================================================
# [LIVRE] CSS - PARTIE 3 (SUITE) : ANIMATIONS & 3D
# ============================================================================
#
# [OBJECTIF] CONTENU :
# - Chapitre 12 : Transformations 3D
# - Chapitre 13 : Animations CSS (@keyframes)
# - Animation-properties complètes
# - Patterns d'animation courants
# - Performance et optimisation
#
# [TEMPS] TEMPS : ~4-6 heures
# [DOCS] PRÉREQUIS : Transitions et Transformations 2D
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 12 : TRANSFORMATIONS 3D
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Transformations 3D (rotateX, rotateY, rotateZ)
[OK] translate3d et translateZ
[OK] perspective - Créer profondeur
[OK] transform-style: preserve-3d
[OK] backface-visibility
[OK] Créer cartes flip, cubes 3D
"""


# ----------------------------------------------------------------------------
# [DESIGN] INTRODUCTION AUX TRANSFORMATIONS 3D
# ----------------------------------------------------------------------------

"""
[IDEE] TRANSFORMATIONS 3D = Ajouter profondeur (axe Z)

2D : X (horizontal) + Y (vertical)
3D : X + Y + Z (profondeur)

         Y (haut)
         │
         │
         │
    ─────┼─────  X (droite)
        ╱│
       ╱ │
      ╱  │
     Z (vers vous)


[ATTENTION] PRÉREQUIS POUR 3D :

1. perspective - Définir point de vue
2. transform-style: preserve-3d - Conserver 3D pour enfants
"""


# ----------------------------------------------------------------------------
# [EYE] perspective - POINT DE VUE
# ----------------------------------------------------------------------------

"""
perspective = Distance entre vous et l'élément

Plus petit = plus proche = effet 3D prononcé
Plus grand = plus loin = effet 3D subtil
"""

/* Sur parent (recommandé) */
.container {
    perspective: 1000px;  /* Point de vue à 1000px */
}

/* Sur élément lui-même */
.element {
    transform: perspective(1000px) rotateY(45deg);
}

"""
COMPARAISON VALEURS :

perspective: 200px (proche) :
    ╲
     ╲     <- Fort effet 3D
      ╲

perspective: 1000px (moyen) :
      ╲
       ╲   <- Effet modéré
        ╲

perspective: 5000px (loin) :
        │
        │  <- Effet subtil
        │


[IDEE] VALEURS RECOMMANDÉES :

500px - 800px   -> Fort effet 3D
1000px - 1500px -> Effet modéré (standard)
2000px+         -> Effet subtil


[OK] EXEMPLE :
"""

.scene {
    perspective: 1000px;
}

.card {
    transform: rotateY(45deg);
}


# ----------------------------------------------------------------------------
# [SYNC] rotateX, rotateY, rotateZ - ROTATIONS 3D
# ----------------------------------------------------------------------------

"""
Rotations sur les 3 axes :

rotateX() -> Rotation horizontale (comme ouvrir livre)
rotateY() -> Rotation verticale (comme ouvrir porte)
rotateZ() -> Rotation plate (identique à rotate())
"""

.element {
    transform: rotateX(45deg);  /* Bascule haut/bas */
    transform: rotateY(45deg);  /* Pivote gauche/droite */
    transform: rotateZ(45deg);  /* Tourne sur lui-même */
}

"""
VISUALISATIONS :

rotateX(45deg) - Axe horizontal :
Original -> Rotation
┌─────┐    ╱─────╲
│     │    │     │
└─────┘    ╲_____╱
           Comme un livre qui s'ouvre


rotateY(45deg) - Axe vertical :
Original -> Rotation
┌─────┐    ╱╲
│     │   │  │
└─────┘    ╲╱
           Comme une porte qui s'ouvre


rotateZ(45deg) - Axe profondeur (2D) :
┌─────┐       ╱╲
│     │   ->  ╱  ╲
└─────┘     ╱    ╲


[OK] EXEMPLES PRATIQUES :
"""

/* 1. CARTE FLIP (recto/verso) */
.card-container {
    perspective: 1000px;
}

.card {
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.card:hover {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    backface-visibility: hidden;
}

.card-back {
    transform: rotateY(180deg);
}


/* 2. CUBE 3D */
.cube {
    transform-style: preserve-3d;
    animation: rotate-cube 10s infinite linear;
}

@keyframes rotate-cube {
    from { transform: rotateX(0) rotateY(0); }
    to { transform: rotateX(360deg) rotateY(360deg); }
}


/* 3. CARD TILT (effet suivant souris) */
.card {
    transition: transform 0.1s;
}

/* Avec JavaScript pour calculer angle selon position souris */
.card.tilt {
    transform: rotateX(var(--mouse-y)) rotateY(var(--mouse-x));
}


# ----------------------------------------------------------------------------
# [IMPORTANT] translate3d et translateZ
# ----------------------------------------------------------------------------

"""
translate3d(x, y, z) = Déplacer dans l'espace 3D

translateZ(distance) = Rapprocher/éloigner (vers/depuis vous)
"""

.element {
    transform: translate3d(50px, 100px, 200px);
    /*                     X     Y      Z       */
    
    transform: translateZ(100px);  /* Vient vers vous */
    transform: translateZ(-100px); /* S'éloigne de vous */
}

"""
[IDEE] EFFET translateZ :

translateZ(100px) avec perspective :
┌─────┐  ->  ┌───────┐
│     │      │       │  Plus grand (plus proche)
└─────┘      └───────┘

translateZ(-100px) :
┌─────┐  ->  ┌───┐
│     │      │   │  Plus petit (plus loin)
└─────┘      └───┘


[OK] UTILISATION :

1. PARALLAX 3D
"""

.layer-1 { transform: translateZ(200px); }  /* Avant-plan */
.layer-2 { transform: translateZ(0); }      /* Plan moyen */
.layer-3 { transform: translateZ(-200px); } /* Arrière-plan */


"""
2. HOVER LIFT 3D
"""

.card {
    transition: transform 0.3s;
}

.card:hover {
    transform: translateZ(50px) scale(1.05);
}


# ----------------------------------------------------------------------------
# [SCENARIO] transform-style: preserve-3d
# ----------------------------------------------------------------------------

"""
transform-style = Comment traiter enfants en 3D

flat (défaut)    -> Enfants aplatis en 2D
preserve-3d      -> Enfants conservent transformations 3D
"""

.parent {
    transform-style: preserve-3d;  /* <- OBLIGATOIRE pour 3D enfants */
}

"""
[ATTENTION] IMPORTANT : Sans preserve-3d, les enfants sont aplatis !


EXEMPLE : Cube 3D
"""

.cube {
    transform-style: preserve-3d;  /* <- OBLIGATOIRE */
    transform: rotateX(30deg) rotateY(45deg);
}

.cube-face {
    position: absolute;
    /* Chaque face a sa propre transformation 3D */
}

.front  { transform: translateZ(100px); }
.back   { transform: rotateY(180deg) translateZ(100px); }
.right  { transform: rotateY(90deg) translateZ(100px); }
.left   { transform: rotateY(-90deg) translateZ(100px); }
.top    { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }


# ----------------------------------------------------------------------------
# [BACK_WITH_LEFTWARDS_ARROW_ABOVE] backface-visibility
# ----------------------------------------------------------------------------

"""
backface-visibility = Visibilité du dos de l'élément

visible (défaut) -> Dos visible (effet miroir)
hidden           -> Dos caché
"""

.card-back {
    backface-visibility: hidden;  /* Cache le dos */
}

"""
[IDEE] ESSENTIEL POUR CARTES FLIP !

Sans backface-visibility: hidden, vous voyez le dos à l'envers


EXEMPLE CARTE FLIP COMPLÈTE :
"""

/* HTML */
<div class="card-container">
    <div class="card">
        <div class="card-face card-front">
            <h3>Recto</h3>
        </div>
        <div class="card-face card-back">
            <h3>Verso</h3>
        </div>
    </div>
</div>

/* CSS */
.card-container {
    perspective: 1000px;
    width: 300px;
    height: 400px;
}

.card {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.card:hover {
    transform: rotateY(180deg);
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;  /* <- ESSENTIEL */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.card-front {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.card-back {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    transform: rotateY(180deg);  /* Pré-retourné */
}


# ============================================================================
# [GUIDE] CHAPITRE 13 : ANIMATIONS CSS (@keyframes)
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Créer animations avec @keyframes
[OK] animation-name, duration, timing-function
[OK] animation-iteration-count, direction
[OK] animation-fill-mode, play-state
[OK] Créer animations complexes
[OK] Animations en boucle infinie
"""


# ----------------------------------------------------------------------------
# [DESIGN] INTRODUCTION AUX ANIMATIONS
# ----------------------------------------------------------------------------

"""
[IDEE] ANIMATIONS VS TRANSITIONS :

TRANSITIONS :
- Déclenchées par changement d'état (:hover, .active)
- 2 états : début -> fin
- Automatiques

ANIMATIONS :
- Démarrent automatiquement (ou sur déclenchement)
- Multiples étapes (@keyframes)
- Plus de contrôle


[REFLEXION] QUAND UTILISER QUOI ?

[OK] TRANSITIONS :
- Hover effects
- Changements d'état simples
- 2 états seulement

[OK] ANIMATIONS :
- Loading spinners
- Animations complexes
- Boucles infinies
- Plusieurs étapes
- Démarrage automatique


# ----------------------------------------------------------------------------
# [NOTE] @keyframes - DÉFINIR ANIMATION
# ----------------------------------------------------------------------------

"""
@keyframes = Définit les ÉTAPES de l'animation

SYNTAXE :
"""

@keyframes nom-animation {
    from {
        /* État initial (0%) */
    }
    
    to {
        /* État final (100%) */
    }
}

/* OU avec pourcentages */

@keyframes nom-animation {
    0% {
        /* État initial */
    }
    
    50% {
        /* État à mi-parcours */
    }
    
    100% {
        /* État final */
    }
}

"""
EXEMPLES SIMPLES :
"""

/* 1. FADE IN (apparition) */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Équivalent avec % */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


/* 2. SLIDE IN (glissement) */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}


/* 3. PULSE (battement) */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}


/* 4. ROTATE (rotation infinie) */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


/* 5. BOUNCE (rebond) */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}


# ----------------------------------------------------------------------------
# [OBJECTIF] animation-name et animation-duration
# ----------------------------------------------------------------------------

"""
Appliquer l'animation à un élément :
"""

.element {
    animation-name: fadeIn;       /* Nom de l'animation */
    animation-duration: 1s;       /* Durée */
}

/* Raccourci */
.element {
    animation: fadeIn 1s;
}

"""
EXEMPLES :
"""

/* Fade in sur 2 secondes */
.fade-in {
    animation: fadeIn 2s;
}

/* Spinner qui tourne */
.spinner {
    animation: rotate 1s;
}

/* Pulse qui bat */
.pulse {
    animation: pulse 1.5s;
}


# ----------------------------------------------------------------------------
# [SYNC] animation-iteration-count - RÉPÉTITIONS
# ----------------------------------------------------------------------------

"""
animation-iteration-count = Nombre de répétitions

Valeurs :
1 (défaut)  -> 1 fois
2, 3, 4...  -> N fois
infinite    -> Infini
"""

.element {
    animation-iteration-count: 1;        /* Défaut (1 fois) */
    animation-iteration-count: 3;        /* 3 fois */
    animation-iteration-count: infinite; /* Infini */
}

"""
EXEMPLES :
"""

/* Loading spinner (infini) */
.spinner {
    animation: rotate 1s linear infinite;
}

/* Notification badge (3× puis stop) */
.notification {
    animation: pulse 0.5s ease-out 3;
}

/* Shake une fois */
.shake {
    animation: shake 0.5s;  /* 1 fois (défaut) */
}


# ----------------------------------------------------------------------------
# [TEMPS] animation-timing-function - COURBE
# ----------------------------------------------------------------------------

"""
Même valeurs que transition-timing-function :

ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier()
"""

.element {
    animation-timing-function: linear;      /* Vitesse constante */
    animation-timing-function: ease;        /* Défaut */
    animation-timing-function: ease-out;    /* Ralentit à la fin */
}

"""
EXEMPLES :
"""

/* Rotation constante (spinner) */
.spinner {
    animation: rotate 1s linear infinite;
}

/* Bounce avec ease-out (naturel) */
.bounce {
    animation: bounce 2s ease-out;
}

/* Pulse avec ease-in-out */
.pulse {
    animation: pulse 1.5s ease-in-out infinite;
}


# ----------------------------------------------------------------------------
# [ALARM_CLOCK] animation-delay - DÉLAI
# ----------------------------------------------------------------------------

"""
animation-delay = Attendre avant de démarrer
"""

.element {
    animation-delay: 0s;     /* Immédiat (défaut) */
    animation-delay: 0.5s;   /* Attend 500ms */
    animation-delay: 2s;     /* Attend 2 secondes */
}

"""
[OK] ANIMATIONS EN CASCADE :
"""

.item:nth-child(1) { animation-delay: 0s; }
.item:nth-child(2) { animation-delay: 0.1s; }
.item:nth-child(3) { animation-delay: 0.2s; }
.item:nth-child(4) { animation-delay: 0.3s; }

/* Items apparaissent un par un */


# ----------------------------------------------------------------------------
# [SYNC] animation-direction - DIRECTION
# ----------------------------------------------------------------------------

"""
animation-direction = Sens de l'animation

normal (défaut)  -> 0% -> 100%
reverse          -> 100% -> 0%
alternate        -> 0% -> 100% -> 0% -> 100%...
alternate-reverse-> 100% -> 0% -> 100% -> 0%...
"""

.element {
    animation-direction: normal;           /* Défaut */
    animation-direction: reverse;          /* Inverse */
    animation-direction: alternate;        /* Aller-retour */
    animation-direction: alternate-reverse;
}

"""
EXEMPLES :
"""

/* Pendule (va-et-vient) */
.pendulum {
    animation: swing 2s ease-in-out infinite alternate;
}

@keyframes swing {
    from { transform: rotate(-30deg); }
    to { transform: rotate(30deg); }
}


/* Pulse aller-retour */
.pulse {
    animation: pulse 1s ease-in-out infinite alternate;
}

@keyframes pulse {
    from { transform: scale(1); }
    to { transform: scale(1.2); }
}


# ----------------------------------------------------------------------------
# [DEMARRAGE] animation-fill-mode - ÉTAT AVANT/APRÈS
# ----------------------------------------------------------------------------

"""
animation-fill-mode = État de l'élément avant/après animation

none (défaut)    -> Styles normaux avant et après
forwards         -> Garde dernier état (100%)
backwards        -> Applique premier état (0%) avant démarrage
both             -> forwards + backwards
"""

.element {
    animation-fill-mode: none;      /* Défaut */
    animation-fill-mode: forwards;  /* Reste à 100% après */
    animation-fill-mode: backwards; /* Démarre à 0% avant */
    animation-fill-mode: both;      /* Les deux */
}

"""
EXEMPLE VISUEL :

Animation fadeIn avec delay de 1s :

fill-mode: none (défaut) :
0s      1s                2s
│       │                 │
Visible -> Fade In -> Visible
        ^ Attend 1s avant de commencer


fill-mode: forwards :
0s      1s                2s
│       │                 │
Visible -> Fade In -> Reste visible
                    ^ Garde opacity: 1


fill-mode: backwards :
0s      1s                2s
│       │                 │
Invisible -> Fade In -> Visible
^ Commence à opacity: 0


fill-mode: both :
0s      1s                2s
│       │                 │
Invisible -> Fade In -> Reste visible
^ opacity: 0   ^ Garde opacity: 1


[OK] UTILISATION COURANTE :
"""

/* Élément apparaît et reste visible */
.fade-in {
    opacity: 0;  /* État initial dans CSS */
    animation: fadeIn 1s forwards;  /* Garde opacity: 1 après */
}

@keyframes fadeIn {
    to { opacity: 1; }
}


# ----------------------------------------------------------------------------
# [BLACK_RIGHT-POINTING_TRIANGLE_WITH_DOUBLE_VERTICAL_BAR] animation-play-state - CONTRÔLE
# ----------------------------------------------------------------------------

"""
animation-play-state = Pause/lecture animation

running (défaut) -> En cours
paused           -> En pause
"""

.element {
    animation-play-state: running;  /* Défaut */
    animation-play-state: paused;   /* Pause */
}

"""
[OK] CONTRÔLE AVEC HOVER :
"""

.spinner {
    animation: rotate 2s linear infinite;
}

.spinner:hover {
    animation-play-state: paused;  /* Pause au hover */
}


/* Carousel contrôlé */
.carousel {
    animation: slide 20s linear infinite;
}

.carousel-container:hover .carousel {
    animation-play-state: paused;
}


# ----------------------------------------------------------------------------
# [OBJECTIF] PROPRIÉTÉ RACCOURCIE animation
# ----------------------------------------------------------------------------

"""
animation = Raccourci pour toutes les propriétés

SYNTAXE :
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
"""

/* Forme longue */
.element {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-delay: 0.5s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

/* [OK] Forme raccourcie (identique) */
.element {
    animation: fadeIn 1s ease-out 0.5s 1 normal forwards;
}

"""
EXEMPLES COURANTS :
"""

/* Spinner infini */
animation: rotate 1s linear infinite;

/* Fade in qui reste */
animation: fadeIn 0.5s ease-out forwards;

/* Pulse qui bat */
animation: pulse 1.5s ease-in-out infinite;

/* Bounce 3 fois */
animation: bounce 1s ease-out 3;

/* Slide avec délai */
animation: slideIn 0.8s ease-out 0.3s both;


# ----------------------------------------------------------------------------
# [DESIGN] PATTERNS D'ANIMATION COURANTS
# ----------------------------------------------------------------------------

"""
PATTERN 1 : LOADING SPINNER
"""

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0066cc;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


"""
PATTERN 2 : DOTS LOADING (...)
"""

.loading-dots span {
    animation: blink 1.4s infinite;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes blink {
    0%, 80%, 100% { opacity: 0; }
    40% { opacity: 1; }
}


"""
PATTERN 3 : SHAKE (erreur)
"""

.shake {
    animation: shake 0.5s;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}


"""
PATTERN 4 : FADE IN UP (apparition élégante)
"""

.fade-in-up {
    animation: fadeInUp 0.8s ease-out both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


"""
PATTERN 5 : SCALE IN (zoom apparition)
"""

.scale-in {
    animation: scaleIn 0.5s ease-out both;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


"""
PATTERN 6 : SLIDE IN (glissement)
"""

.slide-in-right {
    animation: slideInRight 0.6s ease-out both;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}


"""
PATTERN 7 : BOUNCE (rebond)
"""

.bounce {
    animation: bounce 1s ease-in-out;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}


"""
PATTERN 8 : FLIP (rotation 3D)
"""

.flip {
    animation: flip 1s ease-in-out;
}

@keyframes flip {
    from {
        transform: perspective(400px) rotateY(0);
    }
    to {
        transform: perspective(400px) rotateY(360deg);
    }
}


"""
PATTERN 9 : PROGRESS BAR
"""

.progress-bar {
    animation: progress 2s ease-out forwards;
}

@keyframes progress {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}


"""
PATTERN 10 : TYPING EFFECT
"""

.typing {
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid;
    animation: 
        typing 3.5s steps(40) 1s both,
        blink 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink {
    50% { border-color: transparent; }
}


# ----------------------------------------------------------------------------
# [RAPIDE] PERFORMANCE DES ANIMATIONS
# ----------------------------------------------------------------------------

"""
[IDEE] RÈGLES DE PERFORMANCE :

[OK] RAPIDES (GPU-accelerated) :
- transform
- opacity

[ATTENTION] MOYENNES :
- color
- background-color
- box-shadow

[X] LENTES (éviter) :
- width, height
- margin, padding
- top, left


[CLE] ASTUCE PERFORMANCE :

Préférez transform et opacity !
"""

/* [X] LENT (recalcule layout) */
@keyframes slideInSlow {
    from { left: -100px; }
    to { left: 0; }
}

/* [OK] RAPIDE (GPU) */
@keyframes slideInFast {
    from { transform: translateX(-100px); }
    to { transform: translateX(0); }
}


"""
will-change - OPTIMISATION :

Indique au navigateur ce qui va changer
-> Prépare en avance
"""

.animated {
    will-change: transform, opacity;
}

/* [ATTENTION] Ne pas abuser ! Seulement pour animations fréquentes */


# ============================================================================
# [LISTE] RÉCAPITULATIF ANIMATIONS
# ============================================================================

"""
[OK] PROPRIÉTÉS ANIMATIONS :

animation-name              -> Nom de @keyframes
animation-duration          -> Durée
animation-timing-function   -> Courbe (ease, linear...)
animation-delay             -> Délai avant démarrage
animation-iteration-count   -> Nombre de répétitions
animation-direction         -> Sens (normal, reverse, alternate)
animation-fill-mode         -> État avant/après
animation-play-state        -> Pause/lecture


[IDEE] @KEYFRAMES :

from/to                     -> 2 états
0%, 50%, 100%               -> Multiples états
Valeurs : toutes propriétés CSS animables


[OBJECTIF] PATTERNS ESSENTIELS :

infinite                    -> Boucle infinie
forwards                    -> Garde dernier état
alternate                   -> Aller-retour
cubic-bezier()              -> Courbes personnalisées
will-change                 -> Optimisation


# Ce fichier continue...
# ============================================================================
# FIN DE CE FICHIER - SUITE AVEC BACKGROUNDS & GRADIENTS
# ============================================================================
# ============================================================================
# [LIVRE] CSS - PARTIE 3 (FIN) : BACKGROUNDS, GRADIENTS & FILTERS
# ============================================================================
#
# [OBJECTIF] CONTENU :
# - Chapitre 14 : Backgrounds avancés
# - Chapitre 15 : Gradients (linear, radial, conic)
# - Chapitre 16 : Filters et blend modes
# - Exercices pratiques Partie 3
# - Récapitulatif complet
#
# [TEMPS] TEMPS : ~4-6 heures
# [DOCS] PRÉREQUIS : Chapitres précédents de la Partie 3
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 14 : BACKGROUNDS AVANCÉS
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] background-image et multiples backgrounds
[OK] background-size (cover, contain)
[OK] background-position et background-attachment
[OK] background-clip et background-origin
[OK] Créer patterns et textures
[OK] Optimiser images de fond
"""


# ----------------------------------------------------------------------------
# [FRAME_WITH_PICTURE] background-image - IMAGES DE FOND
# ----------------------------------------------------------------------------

"""
background-image = Définir image(s) de fond
"""

.element {
    background-image: url('image.jpg');
    background-image: url('https://example.com/image.png');
    
    /* Multiples backgrounds (première = dessus) */
    background-image: 
        url('overlay.png'),
        url('texture.jpg');
}

"""
[IDEE] FORMATS SUPPORTÉS :

- JPG/JPEG (photos, pas de transparence)
- PNG (transparence, logos)
- SVG (vectoriel, scalable)
- WebP (moderne, petit, performant) [OK]
- GIF (animations)


[OK] EXEMPLES :
"""

/* Image simple */
.hero {
    background-image: url('hero-bg.jpg');
}

/* Avec overlay sombre */
.hero {
    background-image: 
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url('hero-bg.jpg');
}

/* Pattern + couleur */
.pattern {
    background-image: url('pattern.png');
    background-color: #f5f5f5;
}


# ----------------------------------------------------------------------------
# [MESURE] background-size - TAILLE DE FOND
# ----------------------------------------------------------------------------

"""
background-size = Contrôler taille de l'image de fond
"""

.element {
    background-size: auto;          /* Défaut : taille originale */
    background-size: cover;         /* Couvre tout, peut rogner */
    background-size: contain;       /* Contient tout, peut laisser espace */
    background-size: 100% 100%;     /* Étire (déforme) */
    background-size: 500px 300px;   /* Taille fixe */
    background-size: 50%;           /* Pourcentage */
}

"""
COMPARAISON VISUELLE :

Image originale : 800×600

Container : 400×400

cover :
┌────────────────┐
│████████████████│  Image agrandie pour couvrir
│████████████████│  Peut rogner haut/bas
│████████████████│
└────────────────┘

contain :
┌────────────────┐
│                │  Espaces vides
│  ████████████  │  Image entière visible
│                │
└────────────────┘

100% 100% (étire) :
┌────────────────┐
│████████████████│  Image déformée
│████████████████│  pour remplir exactement
│████████████████│
└────────────────┘


[IDEE] QUAND UTILISER ?

cover :
- Hero sections
- Headers
- Backgrounds décoratifs
- Quand rognage OK

contain :
- Logos
- Icônes
- Quand image complète nécessaire

100% 100% :
- Rarement (déforme)
- Seulement si ratio garanti


[OK] EXEMPLES :
"""

/* Hero section (cover) */
.hero {
    background-image: url('hero.jpg');
    background-size: cover;      /* Couvre tout */
    background-position: center; /* Centre l'image */
    min-height: 100vh;
}

/* Logo (contain) */
.logo-bg {
    background-image: url('logo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 200px;
    height: 100px;
}

/* Pattern qui se répète */
.pattern {
    background-image: url('tile.png');
    background-size: 100px 100px;  /* Taille des tuiles */
    background-repeat: repeat;
}


# ----------------------------------------------------------------------------
# [IMPORTANT] background-position - POSITIONNEMENT
# ----------------------------------------------------------------------------

"""
background-position = Positionner l'image de fond
"""

.element {
    /* Mots-clés */
    background-position: center;
    background-position: top left;
    background-position: bottom right;
    
    /* Pourcentages */
    background-position: 50% 50%;      /* Centre */
    background-position: 0% 0%;        /* Haut gauche */
    background-position: 100% 100%;    /* Bas droite */
    
    /* Valeurs */
    background-position: 20px 30px;
    background-position: center 20px;  /* Centré horizontal, 20px du haut */
}

"""
[IDEE] SYNTAXE : background-position: X Y;

X = Horizontal (left, center, right, %, px)
Y = Vertical (top, center, bottom, %, px)


EXEMPLES VISUELS :

top left (0% 0%) :
┌────────────┐
│[UTILISATEUR]          │
│            │
└────────────┘

center (50% 50%) :
┌────────────┐
│            │
│     [UTILISATEUR]     │
└────────────┘

bottom right (100% 100%) :
┌────────────┐
│            │
│          [UTILISATEUR]│
└────────────┘


[OK] UTILISATION :
"""

/* Portrait centré */
.profile {
    background-image: url('portrait.jpg');
    background-size: cover;
    background-position: center top;  /* Centre, mais priorité au visage (haut) */
}

/* Produit à droite */
.product-banner {
    background-image: url('product.png');
    background-size: contain;
    background-position: right center;
    background-repeat: no-repeat;
}

/* Offset précis */
.custom {
    background-position: calc(50% + 20px) calc(50% - 10px);
}


# ----------------------------------------------------------------------------
# [SYNC] background-repeat - RÉPÉTITION
# ----------------------------------------------------------------------------

"""
background-repeat = Répétition de l'image
"""

.element {
    background-repeat: repeat;      /* Défaut : répète X et Y */
    background-repeat: no-repeat;   /* Pas de répétition */
    background-repeat: repeat-x;    /* Répète horizontal seulement */
    background-repeat: repeat-y;    /* Répète vertical seulement */
    background-repeat: space;       /* Répète avec espaces */
    background-repeat: round;       /* Répète en ajustant taille */
}

"""
EXEMPLES VISUELS :

repeat (défaut) :
┌────────────┐
│[DESIGN][DESIGN][DESIGN][DESIGN][DESIGN]│
│[DESIGN][DESIGN][DESIGN][DESIGN][DESIGN]│
│[DESIGN][DESIGN][DESIGN][DESIGN][DESIGN]│
└────────────┘

no-repeat :
┌────────────┐
│[DESIGN]          │
│            │
└────────────┘

repeat-x :
┌────────────┐
│[DESIGN][DESIGN][DESIGN][DESIGN][DESIGN]│
│            │
└────────────┘


[OK] UTILISATION :
"""

/* Pattern qui se répète */
.pattern {
    background-image: url('pattern.png');
    background-repeat: repeat;
}

/* Hero image (pas de répétition) */
.hero {
    background-image: url('hero.jpg');
    background-repeat: no-repeat;
}

/* Bordure décorative en haut */
.decorated {
    background-image: url('border.svg');
    background-repeat: repeat-x;
    background-position: top;
}


# ----------------------------------------------------------------------------
# [IMPORTANT] background-attachment - ATTACHEMENT
# ----------------------------------------------------------------------------

"""
background-attachment = Comportement au scroll
"""

.element {
    background-attachment: scroll;  /* Défaut : scroll avec page */
    background-attachment: fixed;   /* Fixe (parallax) */
    background-attachment: local;   /* Scroll avec contenu */
}

"""
[IDEE] COMPORTEMENT :

scroll (défaut) :
- Background scroll avec la page
- Comportement normal

fixed :
- Background reste fixe
- Crée effet parallax
- Performance : peut être lourd

local :
- Background scroll avec contenu de l'élément
- Pour overflow: scroll


[OK] EFFET PARALLAX :
"""

.parallax {
    background-image: url('mountains.jpg');
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    min-height: 100vh;
}

/* Sections alternées */
.section-1 {
    background: white;
    min-height: 100vh;
}

.parallax-section {
    background-image: url('bg.jpg');
    background-attachment: fixed;
    min-height: 100vh;
}

.section-2 {
    background: white;
    min-height: 100vh;
}


# ----------------------------------------------------------------------------
# [DESIGN] background-clip et background-origin
# ----------------------------------------------------------------------------

"""
background-clip = Où le background est VISIBLE

border-box (défaut) -> Sous bordure aussi
padding-box         -> Sous padding, pas bordure
content-box         -> Contenu seulement
text                -> Texte seulement (effet spécial) *
"""

.element {
    background-clip: border-box;   /* Défaut */
    background-clip: padding-box;
    background-clip: content-box;
    background-clip: text;         /* Gradient dans texte */
    -webkit-background-clip: text; /* Préfixe WebKit */
}

"""
[OK] EFFET TEXTE GRADIENT (très populaire) :
"""

.gradient-text {
    background: linear-gradient(45deg, #f093fb, #f5576c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 4rem;
    font-weight: bold;
}

/* Résultat : Texte avec gradient dedans * */


"""
background-origin = D'où commence le background

padding-box (défaut) -> Commence au padding
border-box          -> Commence à la bordure
content-box         -> Commence au contenu
"""

.element {
    background-origin: padding-box;  /* Défaut */
    background-origin: border-box;
    background-origin: content-box;
}


# ----------------------------------------------------------------------------
# [LIEN] PROPRIÉTÉ RACCOURCIE background
# ----------------------------------------------------------------------------

"""
background = Raccourci pour toutes propriétés

SYNTAXE :
background: color image position/size repeat attachment;
"""

/* Forme longue */
.element {
    background-color: #f5f5f5;
    background-image: url('bg.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* [OK] Forme raccourcie */
.element {
    background: #f5f5f5 url('bg.jpg') center/cover no-repeat;
    /*          │       │            │      │      │
                │       │            │      │      └─ repeat
                │       │            │      └──────── size (après /)
                │       │            └─────────────── position
                │       └──────────────────────────── image
                └──────────────────────────────────── color
    */
}

"""
[ATTENTION] ATTENTION : size doit avoir / avant !

background: url('bg.jpg') center/cover;  /* [OK] Correct */
background: url('bg.jpg') center cover;  /* [X] Incorrect */


EXEMPLES COURANTS :
"""

/* Hero section complète */
.hero {
    background: 
        linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
        url('hero.jpg') center/cover no-repeat fixed;
    min-height: 100vh;
}

/* Pattern avec couleur */
.pattern {
    background: #f5f5f5 url('pattern.png') 0 0/100px repeat;
}

/* Simple couleur */
.box {
    background: #0066cc;
}


# ----------------------------------------------------------------------------
# [DESIGN] MULTIPLES BACKGROUNDS
# ----------------------------------------------------------------------------

"""
Empiler plusieurs backgrounds (premier = dessus)
"""

.element {
    background:
        url('overlay.png') center/cover no-repeat,
        url('texture.jpg') 0 0/200px repeat,
        linear-gradient(to bottom, #667eea, #764ba2);
}

"""
[OK] PATTERNS COURANTS :
"""

/* 1. OVERLAY + IMAGE */
.hero {
    background:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url('hero.jpg') center/cover;
}

/* 2. PATTERN + GRADIENT */
.fancy {
    background:
        url('dots.png') 0 0/20px repeat,
        linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 3. MULTIPLES IMAGES */
.layered {
    background:
        url('foreground.png') bottom right/30% no-repeat,
        url('background.jpg') center/cover;
}


# ============================================================================
# [GUIDE] CHAPITRE 15 : GRADIENTS (DÉGRADÉS)
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Créer gradients linéaires
[OK] Créer gradients radiaux
[OK] Créer gradients coniques
[OK] Multiples couleurs et stops
[OK] Gradients répétés
[OK] Créer patterns avec gradients
"""


# ----------------------------------------------------------------------------
# [RAINBOW] linear-gradient - GRADIENT LINÉAIRE
# ----------------------------------------------------------------------------

"""
linear-gradient() = Dégradé en ligne droite

SYNTAXE :
linear-gradient(direction, couleur1, couleur2, ...)
"""

.element {
    /* Direction par défaut (haut vers bas) */
    background: linear-gradient(red, blue);
    
    /* Avec direction */
    background: linear-gradient(to right, red, blue);
    background: linear-gradient(to top right, red, blue);
    background: linear-gradient(45deg, red, blue);
    
    /* Multiples couleurs */
    background: linear-gradient(red, yellow, blue);
    
    /* Avec stops (positions) */
    background: linear-gradient(red 0%, yellow 50%, blue 100%);
}

"""
[IDEE] DIRECTIONS :

to top          -> ^
to bottom       -> v (défaut)
to left         -> <-
to right        -> ->
to top right    -> ->
to bottom left  -> <-
45deg           -> 45 degrés
180deg          -> v


EXEMPLES VISUELS :

to right (90deg) :
┌─────────────────┐
│████████████████ │  Rouge -> Bleu
└─────────────────┘

to bottom right (135deg) :
┌─────────────────┐
│█                │
│ ████            │  Rouge -> Bleu
│     ████        │
│         ████████│
└─────────────────┘


[OK] EXEMPLES PRATIQUES :
"""

/* 1. GRADIENT SIMPLE */
.gradient-bg {
    background: linear-gradient(to right, #667eea, #764ba2);
}

/* 2. GRADIENT MULTI-COULEURS */
.rainbow {
    background: linear-gradient(
        to right,
        red, orange, yellow, green, blue, indigo, violet
    );
}

/* 3. GRADIENT AVEC STOPS PRÉCIS */
.sunset {
    background: linear-gradient(
        to bottom,
        #ff6b6b 0%,
        #ffd93d 40%,
        #6bcfff 100%
    );
}

/* 4. GRADIENT BOUTON */
.button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
}

.button:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}


/* 5. GRADIENT TEXTE */
.gradient-text {
    background: linear-gradient(45deg, #f093fb, #f5576c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


"""
COLOR STOPS - CONTRÔLE PRÉCIS :

Sans stops (répartition égale) :
background: linear-gradient(red, yellow, blue);

Rouge ████████ Jaune ████████ Bleu


Avec stops (positions précises) :
background: linear-gradient(red 0%, yellow 10%, blue 100%);

Rouge ██ Jaune ████████████████████ Bleu
      10%                          100%


HARD STOPS (changement brutal) :
background: linear-gradient(red 50%, blue 50%);

Rouge █████████│█████████ Bleu
              50% (changement net)


# ----------------------------------------------------------------------------
# [HEAVY_LARGE_CIRCLE] radial-gradient - GRADIENT RADIAL
# ----------------------------------------------------------------------------

"""
radial-gradient() = Dégradé circulaire/elliptique

SYNTAXE :
radial-gradient(forme taille at position, couleur1, couleur2, ...)
"""

.element {
    /* Simple (centre par défaut) */
    background: radial-gradient(red, blue);
    
    /* Forme */
    background: radial-gradient(circle, red, blue);
    background: radial-gradient(ellipse, red, blue);
    
    /* Position */
    background: radial-gradient(circle at top left, red, blue);
    background: radial-gradient(at 30% 40%, red, blue);
    
    /* Taille */
    background: radial-gradient(circle closest-side, red, blue);
    background: radial-gradient(200px 100px, red, blue);
}

"""
[IDEE] FORMES :

circle  -> Cercle parfait
ellipse -> Ellipse (défaut)


TAILLES :

closest-side    -> Jusqu'au côté le plus proche
farthest-side   -> Jusqu'au côté le plus loin
closest-corner  -> Jusqu'au coin le plus proche
farthest-corner -> Jusqu'au coin le plus loin (défaut)


[OK] EXEMPLES :
"""

/* 1. SPOTLIGHT */
.spotlight {
    background: radial-gradient(
        circle at center,
        rgba(255,255,255,0.8) 0%,
        rgba(255,255,255,0) 70%
    );
}

/* 2. VIGNETTE (assombrir bords) */
.vignette {
    background: 
        radial-gradient(
            ellipse at center,
            transparent 0%,
            rgba(0,0,0,0.7) 100%
        ),
        url('photo.jpg');
}

/* 3. CERCLE COLORÉ */
.circle-bg {
    background: radial-gradient(
        circle,
        #667eea 0%,
        #764ba2 100%
    );
}

/* 4. ÉCLAIRAGE */
.glow {
    background: radial-gradient(
        circle at 30% 30%,
        rgba(255,255,255,0.5),
        transparent
    );
}


# ----------------------------------------------------------------------------
# [OBJECTIF] conic-gradient - GRADIENT CONIQUE
# ----------------------------------------------------------------------------

"""
conic-gradient() = Dégradé circulaire (comme une tarte)

SYNTAXE :
conic-gradient(from angle at position, couleur1, couleur2, ...)
"""

.element {
    /* Simple */
    background: conic-gradient(red, yellow, green, blue, red);
    
    /* Avec angle de départ */
    background: conic-gradient(from 90deg, red, blue);
    
    /* Avec position */
    background: conic-gradient(at 30% 40%, red, blue);
    
    /* Avec stops */
    background: conic-gradient(red 0deg, blue 180deg, red 360deg);
}

"""
[OK] EXEMPLES :
"""

/* 1. ROUE DE COULEURS */
.color-wheel {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(
        red, yellow, lime, aqua, blue, magenta, red
    );
}

/* 2. LOADING SPINNER */
.spinner {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: conic-gradient(
        transparent 0deg,
        transparent 270deg,
        #0066cc 270deg,
        #0066cc 360deg
    );
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 3. PIE CHART */
.pie-chart {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(
        #ff6b6b 0deg 120deg,
        #ffd93d 120deg 240deg,
        #6bcfff 240deg 360deg
    );
}


# ----------------------------------------------------------------------------
# [SYNC] repeating-linear-gradient
# ----------------------------------------------------------------------------

"""
repeating-linear-gradient() = Gradient qui se répète
"""

.element {
    background: repeating-linear-gradient(
        45deg,
        #f5f5f5 0px,
        #f5f5f5 10px,
        #e0e0e0 10px,
        #e0e0e0 20px
    );
}

"""
[OK] PATTERNS :
"""

/* 1. RAYURES DIAGONALES */
.stripes {
    background: repeating-linear-gradient(
        45deg,
        transparent 0,
        transparent 10px,
        rgba(0,0,0,0.1) 10px,
        rgba(0,0,0,0.1) 20px
    );
}

/* 2. LIGNES HORIZONTALES */
.lines {
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 8px,
        rgba(0,0,0,0.05) 8px,
        rgba(0,0,0,0.05) 9px
    );
}

/* 3. GRILLE */
.grid {
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 49px,
            #ddd 49px,
            #ddd 50px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 49px,
            #ddd 49px,
            #ddd 50px
        );
}


# ============================================================================
# [GUIDE] CHAPITRE 16 : FILTERS (FILTRES)
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Appliquer filtres visuels (blur, brightness, contrast)
[OK] Créer effets de glassmorphisme
[OK] backdrop-filter pour arrière-plans
[OK] mix-blend-mode pour fusion de couleurs
[OK] Combiner plusieurs filtres
"""


# ----------------------------------------------------------------------------
# [DESIGN] PROPRIÉTÉ filter
# ----------------------------------------------------------------------------

"""
filter = Appliquer effets visuels à un élément
"""

.element {
    filter: blur(5px);              /* Flou */
    filter: brightness(150%);       /* Luminosité */
    filter: contrast(200%);         /* Contraste */
    filter: grayscale(100%);        /* Noir & blanc */
    filter: hue-rotate(90deg);      /* Rotation teinte */
    filter: invert(100%);           /* Inverser couleurs */
    filter: opacity(50%);           /* Transparence */
    filter: saturate(200%);         /* Saturation */
    filter: sepia(100%);            /* Sépia */
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5)); /* Ombre */
}

"""
EXEMPLES VISUELS :

Original :
[DESIGN] Image normale

blur(10px) :
[DESIGN] Image floue

grayscale(100%) :
[BLANC] Image noir & blanc

sepia(100%) :
[LARGE_BROWN_SQUARE] Image sépia (vintage)


[OK] EXEMPLES PRATIQUES :
"""

/* 1. IMAGE HOVER (désaturer -> couleur) */
.image {
    filter: grayscale(100%);
    transition: filter 0.3s;
}

.image:hover {
    filter: grayscale(0%);
}


/* 2. GLASSMORPHISM (verre) */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 20px;
}


/* 3. DROP SHADOW (ombre élément) */
.card {
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

/* [ATTENTION] drop-shadow() vs box-shadow :
   drop-shadow suit la forme (transparence)
   box-shadow = rectangle */


/* 4. BOUTON DÉSACTIVÉ */
.button:disabled {
    filter: grayscale(100%) opacity(50%);
    cursor: not-allowed;
}


/* 5. THÈME SOMBRE (invert) */
.dark-mode {
    filter: invert(100%) hue-rotate(180deg);
}


"""
COMBINER FILTRES :
"""

.image {
    filter: 
        brightness(110%)
        contrast(120%)
        saturate(130%);
}

.fancy {
    filter: 
        drop-shadow(0 0 20px rgba(0,150,255,0.7))
        hue-rotate(45deg);
}


# ----------------------------------------------------------------------------
# [FOG] backdrop-filter
# ----------------------------------------------------------------------------

"""
backdrop-filter = Filtre sur l'ARRIÈRE-PLAN (derrière l'élément)

[IDEE] Parfait pour glassmorphism !
"""

.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px) saturate(180%);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 30px;
}

"""
[OK] GLASSMORPHISM COMPLET :
"""

.glassmorphism {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%); /* Safari */
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Fond pour effet (gradient ou image) */
body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}


# ----------------------------------------------------------------------------
# [DESIGN] mix-blend-mode
# ----------------------------------------------------------------------------

"""
mix-blend-mode = Fusion avec éléments en dessous

Comme modes de fusion Photoshop !
"""

.element {
    mix-blend-mode: normal;       /* Défaut */
    mix-blend-mode: multiply;     /* Multiplie */
    mix-blend-mode: screen;       /* Éclaircit */
    mix-blend-mode: overlay;      /* Superposition */
    mix-blend-mode: darken;       /* Assombrit */
    mix-blend-mode: lighten;      /* Éclaircit */
    mix-blend-mode: color-dodge;  /* Densité - */
    mix-blend-mode: difference;   /* Différence */
}

"""
[OK] EXEMPLES :
"""

/* 1. TEXTE SUR IMAGE (effet contraste) */
.hero-text {
    color: white;
    mix-blend-mode: difference;
    /* Texte s'adapte au fond (toujours visible) */
}


/* 2. OVERLAY COLORÉ */
.color-overlay {
    background-color: #ff6b6b;
    mix-blend-mode: multiply;
    /* Teinte l'image en dessous */
}


/* 3. EFFET DUOTONE */
.duotone {
    position: relative;
}

.duotone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #667eea, #764ba2);
    mix-blend-mode: color;
}


# ============================================================================
# [COURS] EXERCICES PARTIE 3
# ============================================================================

"""
EXERCICE 1 : Créer un bouton animé complet

- Background gradient
- Transition au hover (lift + shadow)
- Active state (press)
- Loading state (spinner)
"""

/* [OK] SOLUTION */

.button {
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: 
        transform 0.2s ease,
        box-shadow 0.2s ease;
    overflow: hidden;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.button:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
}

.button.loading {
    pointer-events: none;
    opacity: 0.7;
}

.button.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid white;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


"""
EXERCICE 2 : Card 3D flip avec glassmorphism

- Carte qui flip au hover
- Face avant et arrière
- Effet glassmorphism
"""

/* [OK] SOLUTION */

.card-scene {
    perspective: 1000px;
    width: 300px;
    height: 400px;
}

.card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.card:hover {
    transform: rotateY(180deg);
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.card-front {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.card-back {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transform: rotateY(180deg);
}


# ============================================================================
# [LISTE] RÉCAPITULATIF PARTIE 3
# ============================================================================

"""
[OK] CE QUE VOUS AVEZ APPRIS :

CHAPITRE 10 - TRANSITIONS :
[WHITE_SQUARE] transition-property, duration, timing-function, delay
[WHITE_SQUARE] Courbes d'animation (ease, cubic-bezier)
[WHITE_SQUARE] Performance (transform + opacity)
[WHITE_SQUARE] Effets hover élégants

CHAPITRE 11 - TRANSFORMATIONS 2D :
[WHITE_SQUARE] translate(), rotate(), scale(), skew()
[WHITE_SQUARE] transform-origin
[WHITE_SQUARE] Combiner transformations
[WHITE_SQUARE] Patterns courants

CHAPITRE 12 - TRANSFORMATIONS 3D :
[WHITE_SQUARE] rotateX(), rotateY(), translateZ()
[WHITE_SQUARE] perspective
[WHITE_SQUARE] transform-style: preserve-3d
[WHITE_SQUARE] backface-visibility
[WHITE_SQUARE] Cartes flip 3D

CHAPITRE 13 - ANIMATIONS :
[WHITE_SQUARE] @keyframes
[WHITE_SQUARE] animation-name, duration, iteration-count
[WHITE_SQUARE] animation-direction, fill-mode
[WHITE_SQUARE] Animations infinies
[WHITE_SQUARE] Patterns courants (spinner, bounce, fade)

CHAPITRE 14 - BACKGROUNDS :
[WHITE_SQUARE] background-image, size, position
[WHITE_SQUARE] cover vs contain
[WHITE_SQUARE] Multiples backgrounds
[WHITE_SQUARE] Parallax avec attachment

CHAPITRE 15 - GRADIENTS :
[WHITE_SQUARE] linear-gradient(), radial-gradient()
[WHITE_SQUARE] conic-gradient()
[WHITE_SQUARE] Gradient text
[WHITE_SQUARE] Patterns avec repeat

CHAPITRE 16 - FILTERS :
[WHITE_SQUARE] filter (blur, grayscale, brightness)
[WHITE_SQUARE] backdrop-filter (glassmorphism)
[WHITE_SQUARE] mix-blend-mode
[WHITE_SQUARE] Combiner effets


[OBJECTIF] CHECKLIST PARTIE 3 :

[WHITE_SQUARE] Créer transition hover fluide
[WHITE_SQUARE] Animer avec @keyframes
[WHITE_SQUARE] Faire pivoter éléments en 3D
[WHITE_SQUARE] Créer carte flip 3D
[WHITE_SQUARE] Appliquer gradients
[WHITE_SQUARE] Créer effet glassmorphism
[WHITE_SQUARE] Optimiser animations (transform + opacity)
[WHITE_SQUARE] Créer loading spinner
[WHITE_SQUARE] Utiliser backdrop-filter
[WHITE_SQUARE] Combiner transformations


# ============================================================================
# [BRAVO] FIN DE LA PARTIE 3
# ============================================================================

Vous maîtrisez maintenant le design avancé CSS !

Prêt pour la PARTIE 4 : NIVEAU PROFESSIONNEL ? [RAPIDE]
- Variables CSS (custom properties)
- Préprocesseurs (Sass, Less)
- Méthodologies (BEM, OOCSS)
- Performance et optimisation
- Frameworks CSS
- Best practices production
# ============================================================================
# [LIVRE] CSS - PARTIE 4 : NIVEAU PROFESSIONNEL
# ============================================================================
#
# [OBJECTIF] CETTE PARTIE COUVRE :
# - Chapitre 17 : Variables CSS (Custom Properties)
# - Chapitre 18 : Préprocesseurs (Sass/SCSS)
# - Chapitre 19 : Méthodologies CSS (BEM, OOCSS, SMACSS)
# - Chapitre 20 : Performance et Optimisation
# - Chapitre 21 : Frameworks CSS
# - Chapitre 22 : Best Practices Production
#
# [TEMPS] TEMPS TOTAL : ~15-20 heures
# [DOCS] PRÉREQUIS : Parties 1, 2 et 3 complétées
# [COURS] NIVEAU : Avancé-Expert
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 17 : VARIABLES CSS (CUSTOM PROPERTIES)
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Créer et utiliser variables CSS
[OK] Portée des variables (scope)
[OK] Valeurs par défaut (fallback)
[OK] Manipuler variables avec JavaScript
[OK] Créer système de design complet
[OK] Thèmes light/dark
[OK] Variables vs Préprocesseurs
"""


# ----------------------------------------------------------------------------
# [DESIGN] INTRODUCTION AUX VARIABLES CSS
# ----------------------------------------------------------------------------

"""
[IDEE] QU'EST-CE QUE LES VARIABLES CSS ?

Variables CSS (Custom Properties) = Valeurs réutilisables dans CSS

Avantages :
[OK] Éviter répétitions
[OK] Maintenance facile
[OK] Thèmes dynamiques
[OK] Manipulables avec JavaScript
[OK] Cascadent comme propriétés normales


[REFLEXION] VARIABLES CSS VS PRÉPROCESSEURS (Sass) ?

VARIABLES CSS :
- Natives (pas de compilation)
- Dynamiques (changent au runtime)
- Manipulables en JavaScript
- Cascadent et héritent
- Support navigateurs modernes

VARIABLES SASS :
- Nécessitent compilation
- Statiques (fixées à la compilation)
- Pas manipulables après
- Plus de features (calculs complexes)
- Support universel (compile en CSS)


[IDEE] CONCLUSION : Les deux sont complémentaires !
Variables CSS pour valeurs dynamiques
Sass pour logique complexe
"""


# ----------------------------------------------------------------------------
# [NOTE] SYNTAXE DES VARIABLES CSS
# ----------------------------------------------------------------------------

"""
DÉFINIR UNE VARIABLE :
"""

:root {
    --primary-color: #0066cc;
    --secondary-color: #764ba2;
    --spacing-unit: 8px;
    --font-main: 'Roboto', sans-serif;
}

/*
:root = pseudo-classe qui cible <html>
--nom-variable: valeur;
Le -- (double tiret) est OBLIGATOIRE !
*/

"""
UTILISER UNE VARIABLE :
"""

.button {
    background-color: var(--primary-color);
    padding: var(--spacing-unit);
    font-family: var(--font-main);
}

/*
var(--nom-variable)
*/

"""
[IDEE] RÈGLES DE NOMMAGE :

[OK] Commence par --
[OK] Case-sensitive (--Color ≠ --color)
[OK] Peut contenir lettres, chiffres, -, _
[OK] Pas d'espaces
[OK] Convention : kebab-case (--primary-color)


EXEMPLES VALIDES :
"""
--color-primary: blue;
--spacing-1: 8px;
--font-size-large: 2rem;
--animation-duration: 0.3s;
--z-index-modal: 1000;

"""
EXEMPLES INVALIDES :
"""
-color: blue;           /* [X] Un seul tiret */
--Color Primary: blue;  /* [X] Espaces */
color-primary: blue;    /* [X] Pas de -- */


# ----------------------------------------------------------------------------
# [ARBRE] PORTÉE DES VARIABLES (SCOPE)
# ----------------------------------------------------------------------------

"""
Les variables CSS CASCADENT et HÉRITENT comme propriétés CSS normales


1. VARIABLES GLOBALES (portée globale)
"""

:root {
    --global-color: blue;
}

/* Disponible partout */
.element {
    color: var(--global-color);
}

"""
2. VARIABLES LOCALES (portée limitée)
"""

.card {
    --card-padding: 20px;
    padding: var(--card-padding);
}

/* --card-padding disponible SEULEMENT dans .card et ses enfants */

.card .title {
    padding: var(--card-padding); /* [OK] Fonctionne (enfant de .card) */
}

.other {
    padding: var(--card-padding); /* [X] Ne fonctionne pas (hors .card) */
}

"""
3. HÉRITAGE DES VARIABLES
"""

:root {
    --color: blue;
}

.parent {
    --color: red;  /* Override pour .parent et enfants */
}

.child {
    color: var(--color);  /* Rouge (hérite de .parent) */
}

.other {
    color: var(--color);  /* Bleu (hérite de :root) */
}

"""
EXEMPLE VISUEL :

:root { --color: blue; }
└── .parent { --color: red; }
    ├── .child { color: var(--color); }  -> Rouge
    └── .grandchild { color: var(--color); }  -> Rouge

└── .other { color: var(--color); }  -> Bleu


[IDEE] STRATÉGIE RECOMMANDÉE :

Variables globales dans :root
Variables locales dans components
Override selon besoins


# ----------------------------------------------------------------------------
# [SYNC] VALEURS PAR DÉFAUT (FALLBACK)
# ----------------------------------------------------------------------------

"""
var() accepte une valeur par défaut si variable n'existe pas

SYNTAXE :
var(--variable, valeur-par-defaut)
"""

.element {
    /* Si --primary-color n'existe pas, utilise blue */
    color: var(--primary-color, blue);
    
    /* Fallback avec autre variable */
    color: var(--primary-color, var(--secondary-color, black));
    
    /* Fallback avec calcul */
    padding: var(--spacing, calc(1rem * 2));
}

"""
[OK] EXEMPLES PRATIQUES :
"""

/* 1. Couleur avec fallback */
.button {
    background: var(--button-bg, #0066cc);
    color: var(--button-color, white);
}

/* 2. Espacement avec fallback */
.card {
    padding: var(--card-padding, 1rem);
    margin-bottom: var(--card-margin, var(--spacing-unit, 16px));
}

/* 3. Police avec fallback */
body {
    font-family: var(--font-main, -apple-system, sans-serif);
}


# ----------------------------------------------------------------------------
# [DESIGN] SYSTÈME DE DESIGN AVEC VARIABLES
# ----------------------------------------------------------------------------

"""
Créer un système de design complet et cohérent
"""

:root {
    /* ═══════════════════════════════════════
       COULEURS
       ═══════════════════════════════════════ */
    
    /* Palette principale */
    --color-primary: #0066cc;
    --color-primary-light: #3385d6;
    --color-primary-dark: #0052a3;
    
    --color-secondary: #764ba2;
    --color-secondary-light: #9b6bc7;
    --color-secondary-dark: #5a3880;
    
    /* Couleurs sémantiques */
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-error: #dc3545;
    --color-info: #17a2b8;
    
    /* Neutres */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-100: #f8f9fa;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #6c757d;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;
    
    /* Texte */
    --color-text-primary: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-600);
    --color-text-disabled: var(--color-gray-400);
    
    /* Background */
    --color-bg-primary: var(--color-white);
    --color-bg-secondary: var(--color-gray-100);
    --color-bg-tertiary: var(--color-gray-200);
    
    
    /* ═══════════════════════════════════════
       TYPOGRAPHIE
       ═══════════════════════════════════════ */
    
    /* Familles de polices */
    --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-secondary: Georgia, serif;
    --font-family-mono: 'Fira Code', monospace;
    
    /* Tailles de police */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */
    --font-size-5xl: 3rem;      /* 48px */
    
    /* Poids de police */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;
    
    
    /* ═══════════════════════════════════════
       ESPACEMENT (système 8px)
       ═══════════════════════════════════════ */
    
    --spacing-0: 0;
    --spacing-1: 0.25rem;   /* 4px */
    --spacing-2: 0.5rem;    /* 8px */
    --spacing-3: 0.75rem;   /* 12px */
    --spacing-4: 1rem;      /* 16px */
    --spacing-5: 1.25rem;   /* 20px */
    --spacing-6: 1.5rem;    /* 24px */
    --spacing-8: 2rem;      /* 32px */
    --spacing-10: 2.5rem;   /* 40px */
    --spacing-12: 3rem;     /* 48px */
    --spacing-16: 4rem;     /* 64px */
    --spacing-20: 5rem;     /* 80px */
    --spacing-24: 6rem;     /* 96px */
    
    
    /* ═══════════════════════════════════════
       BORDURES
       ═══════════════════════════════════════ */
    
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 4px;
    
    --border-color: var(--color-gray-300);
    --border-color-dark: var(--color-gray-600);
    
    --border-radius-sm: 0.25rem;   /* 4px */
    --border-radius-md: 0.5rem;    /* 8px */
    --border-radius-lg: 0.75rem;   /* 12px */
    --border-radius-xl: 1rem;      /* 16px */
    --border-radius-full: 9999px;  /* Cercle/Pilule */
    
    
    /* ═══════════════════════════════════════
       OMBRES
       ═══════════════════════════════════════ */
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    
    /* ═══════════════════════════════════════
       Z-INDEX (ordre d'empilement)
       ═══════════════════════════════════════ */
    
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    
    
    /* ═══════════════════════════════════════
       TRANSITIONS
       ═══════════════════════════════════════ */
    
    --transition-speed-fast: 150ms;
    --transition-speed-base: 300ms;
    --transition-speed-slow: 500ms;
    
    --transition-timing: ease-out;
    
    --transition-base: var(--transition-speed-base) var(--transition-timing);
    
    
    /* ═══════════════════════════════════════
       LARGEURS DE CONTENEUR
       ═══════════════════════════════════════ */
    
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
}

"""
UTILISATION DU SYSTÈME :
"""

/* Bouton utilisant le système */
.button {
    /* Couleurs */
    background-color: var(--color-primary);
    color: var(--color-white);
    
    /* Typographie */
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    
    /* Espacement */
    padding: var(--spacing-3) var(--spacing-6);
    
    /* Bordures */
    border: none;
    border-radius: var(--border-radius-md);
    
    /* Ombre */
    box-shadow: var(--shadow-base);
    
    /* Transition */
    transition: all var(--transition-base);
}

.button:hover {
    background-color: var(--color-primary-dark);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}


/* Card utilisant le système */
.card {
    background-color: var(--color-bg-primary);
    border: var(--border-width-thin) solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-md);
}

.card-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-4);
}

.card-text {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}


# ----------------------------------------------------------------------------
# [FIRST_QUARTER_MOON_SYMBOL] THÈMES LIGHT/DARK
# ----------------------------------------------------------------------------

"""
Créer thème sombre avec variables CSS
"""

/* Thème par défaut (light) */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --border-color: #dee2e6;
}

/* Thème sombre */
[data-theme="dark"] {
    --bg-primary: #212529;
    --bg-secondary: #343a40;
    --text-primary: #f8f9fa;
    --text-secondary: #adb5bd;
    --border-color: #495057;
}

/* Utilisation */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.card {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

"""
ACTIVATION DU THÈME (HTML) :

<!-- Light theme (défaut) -->
<html>

<!-- Dark theme -->
<html data-theme="dark">


AVEC JAVASCRIPT :
"""

// Toggle theme
function toggleTheme() {
    const html = document.documentElement;
    const currentTheme = html.getAttribute('data-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    
    html.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
}

// Charger thème sauvegardé
const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme);

"""
MÉTHODE ALTERNATIVE : prefers-color-scheme
"""

:root {
    --bg: #ffffff;
    --text: #212529;
}

/* Détection automatique du thème système */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #212529;
        --text: #f8f9fa;
    }
}

body {
    background-color: var(--bg);
    color: var(--text);
}


"""
SYSTÈME COMPLET DE THÈME :
"""

:root {
    /* Couleurs de base */
    --primary-hue: 220;
    --primary-sat: 90%;
    
    /* Light theme */
    --bg-primary: hsl(0, 0%, 100%);
    --bg-secondary: hsl(0, 0%, 97%);
    --text-primary: hsl(0, 0%, 13%);
    --text-secondary: hsl(0, 0%, 42%);
    
    --primary: hsl(var(--primary-hue), var(--primary-sat), 50%);
    --primary-light: hsl(var(--primary-hue), var(--primary-sat), 70%);
    --primary-dark: hsl(var(--primary-hue), var(--primary-sat), 30%);
}

[data-theme="dark"] {
    --bg-primary: hsl(0, 0%, 13%);
    --bg-secondary: hsl(0, 0%, 20%);
    --text-primary: hsl(0, 0%, 97%);
    --text-secondary: hsl(0, 0%, 70%);
    
    /* Primary reste pareil mais peut être ajusté */
    --primary: hsl(var(--primary-hue), var(--primary-sat), 60%);
}

/* Transition douce entre thèmes */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}


# ----------------------------------------------------------------------------
# [OUTIL] MANIPULATION AVEC JAVASCRIPT
# ----------------------------------------------------------------------------

"""
Les variables CSS peuvent être modifiées dynamiquement avec JavaScript


1. LIRE UNE VARIABLE :
"""

// Lire variable de :root
const root = document.documentElement;
const primaryColor = getComputedStyle(root).getPropertyValue('--color-primary');
console.log(primaryColor); // "#0066cc"

// Lire variable d'un élément spécifique
const card = document.querySelector('.card');
const cardPadding = getComputedStyle(card).getPropertyValue('--card-padding');

"""
2. DÉFINIR UNE VARIABLE :
"""

// Définir sur :root (global)
document.documentElement.style.setProperty('--color-primary', '#ff0000');

// Définir sur élément spécifique
const card = document.querySelector('.card');
card.style.setProperty('--card-padding', '30px');

"""
3. SUPPRIMER UNE VARIABLE :
"""

document.documentElement.style.removeProperty('--color-primary');

"""
[OK] EXEMPLES PRATIQUES :
"""

/* 1. COLOR PICKER */
<input type="color" id="colorPicker" value="#0066cc">

<script>
const picker = document.getElementById('colorPicker');
picker.addEventListener('input', (e) => {
    document.documentElement.style.setProperty('--color-primary', e.target.value);
});
</script>

/* 2. AJUSTEUR DE TAILLE DE POLICE */
<button onclick="changeFontSize('increase')">A+</button>
<button onclick="changeFontSize('decrease')">A-</button>

<script>
function changeFontSize(action) {
    const root = document.documentElement;
    const currentSize = parseFloat(getComputedStyle(root).fontSize);
    
    const newSize = action === 'increase' 
        ? currentSize + 2 
        : currentSize - 2;
    
    root.style.fontSize = `${newSize}px`;
}
</script>

/* 3. SLIDER POUR ESPACEMENT */
<input type="range" min="4" max="32" value="16" id="spacingSlider">

<script>
const slider = document.getElementById('spacingSlider');
slider.addEventListener('input', (e) => {
    document.documentElement.style.setProperty('--spacing-unit', `${e.target.value}px`);
});
</script>

/* 4. THÈME PERSONNALISÉ */
<script>
function setCustomTheme(primary, secondary, background) {
    const root = document.documentElement;
    root.style.setProperty('--color-primary', primary);
    root.style.setProperty('--color-secondary', secondary);
    root.style.setProperty('--bg-primary', background);
}

// Utilisation
setCustomTheme('#ff6b6b', '#4ecdc4', '#f7f7f7');
</script>


# ----------------------------------------------------------------------------
# [NOMBRE] CALCULS AVEC VARIABLES
# ----------------------------------------------------------------------------

"""
Utiliser calc() avec variables
"""

:root {
    --spacing-unit: 8px;
    --header-height: 60px;
}

.element {
    /* Multiplication */
    padding: calc(var(--spacing-unit) * 2);  /* 16px */
    
    /* Addition */
    margin-top: calc(var(--spacing-unit) + 10px);  /* 18px */
    
    /* Combinaison */
    height: calc(100vh - var(--header-height));  /* Hauteur pleine moins header */
    
    /* Imbrication */
    width: calc(100% - (var(--spacing-unit) * 4));
}

"""
[OK] PATTERNS COURANTS :
"""

/* 1. Layout avec header fixe */
:root {
    --header-height: 80px;
}

main {
    min-height: calc(100vh - var(--header-height));
    margin-top: var(--header-height);
}

/* 2. Grid avec gaps calculés */
:root {
    --grid-columns: 3;
    --grid-gap: 20px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gap);
}

.grid-item {
    width: calc((100% - (var(--grid-gap) * (var(--grid-columns) - 1))) / var(--grid-columns));
}

/* 3. Espacement responsive */
:root {
    --spacing-base: 16px;
}

@media (min-width: 768px) {
    :root {
        --spacing-base: 24px;
    }
}

.section {
    padding: calc(var(--spacing-base) * 2);
}


# ----------------------------------------------------------------------------
# [LISTE] ORGANISATION DES VARIABLES
# ----------------------------------------------------------------------------

"""
STRUCTURE RECOMMANDÉE POUR FICHIER VARIABLES :
"""

/* variables.css */

:root {
    /* ═══════════════════════════════════════
       1. COULEURS PRIMITIVES (tokens de base)
       ═══════════════════════════════════════ */
    
    --blue-100: #e3f2fd;
    --blue-500: #2196f3;
    --blue-900: #0d47a1;
    
    --red-100: #ffebee;
    --red-500: #f44336;
    --red-900: #b71c1c;
    
    /* ... autres couleurs ... */
    
    
    /* ═══════════════════════════════════════
       2. COULEURS SÉMANTIQUES (basées sur primitives)
       ═══════════════════════════════════════ */
    
    --color-primary: var(--blue-500);
    --color-primary-light: var(--blue-100);
    --color-primary-dark: var(--blue-900);
    
    --color-danger: var(--red-500);
    --color-success: var(--green-500);
    
    
    /* ═══════════════════════════════════════
       3. TOKENS D'APPLICATION (usage spécifique)
       ═══════════════════════════════════════ */
    
    --button-bg: var(--color-primary);
    --button-text: white;
    --button-hover-bg: var(--color-primary-dark);
    
    --link-color: var(--color-primary);
    --link-hover-color: var(--color-primary-dark);
    
    --header-bg: white;
    --header-text: var(--gray-900);
}

"""
[IDEE] HIÉRARCHIE :

Primitives -> Sémantiques -> Application

Permet de changer thème facilement :
Modifier primitives -> Tout se met à jour


# ----------------------------------------------------------------------------
# [OBJECTIF] PATTERNS AVANCÉS
# ----------------------------------------------------------------------------

"""
PATTERN 1 : VARIABLES CONTEXTUELLES
"""

/* Button avec variantes utilisant même structure */
.button {
    background-color: var(--button-bg);
    color: var(--button-text);
    border: 2px solid var(--button-border, transparent);
}

.button-primary {
    --button-bg: var(--color-primary);
    --button-text: white;
}

.button-secondary {
    --button-bg: transparent;
    --button-text: var(--color-primary);
    --button-border: var(--color-primary);
}

.button-danger {
    --button-bg: var(--color-danger);
    --button-text: white;
}

"""
PATTERN 2 : VARIABLES RESPONSIVE
"""

:root {
    --container-padding: 1rem;
    --font-size-h1: 2rem;
}

@media (min-width: 768px) {
    :root {
        --container-padding: 2rem;
        --font-size-h1: 3rem;
    }
}

@media (min-width: 1200px) {
    :root {
        --container-padding: 3rem;
        --font-size-h1: 4rem;
    }
}

.container {
    padding: var(--container-padding);
}

h1 {
    font-size: var(--font-size-h1);
}


"""
PATTERN 3 : ÉTAT AVEC VARIABLES
"""

.card {
    --card-shadow: var(--shadow-sm);
    --card-scale: 1;
    
    box-shadow: var(--card-shadow);
    transform: scale(var(--card-scale));
    transition: all 0.3s;
}

.card:hover {
    --card-shadow: var(--shadow-lg);
    --card-scale: 1.02;
}


"""
PATTERN 4 : COMPOSANTS CONFIGURABLES
"""

.progress-bar {
    --progress: 0%;
    --progress-color: var(--color-primary);
    --progress-height: 8px;
    
    height: var(--progress-height);
    background: var(--color-gray-200);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar::before {
    content: '';
    display: block;
    width: var(--progress);
    height: 100%;
    background: var(--progress-color);
    transition: width 0.3s;
}

/* HTML: <div class="progress-bar" style="--progress: 75%;"></div> */


# Ce fichier continue...
# ============================================================================
# FIN DE CE FICHIER - SUITE AVEC SASS & MÉTHODOLOGIES
# ============================================================================
# ============================================================================
# [LIVRE] CSS - PARTIE 4 (SUITE) : SASS & MÉTHODOLOGIES CSS
# ============================================================================
#
# [OBJECTIF] CONTENU :
# - Chapitre 18 : Préprocesseurs (Sass/SCSS)
# - Chapitre 19 : Méthodologies CSS (BEM, OOCSS, SMACSS)
# - Architecture de projet
# - Conventions de nommage
#
# [TEMPS] TEMPS : ~6-8 heures
# [DOCS] PRÉREQUIS : Variables CSS maîtrisées
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 18 : SASS/SCSS (PRÉPROCESSEUR CSS)
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Différence Sass vs SCSS
[OK] Variables, nesting, mixins
[OK] @import et partials
[OK] @extend et héritage
[OK] Fonctions et opérations
[OK] Boucles et conditions
[OK] Compiler Sass en CSS
"""


# ----------------------------------------------------------------------------
# [DESIGN] INTRODUCTION À SASS
# ----------------------------------------------------------------------------

"""
[IDEE] QU'EST-CE QUE SASS ?

Sass = Syntactically Awesome StyleSheets
Préprocesseur CSS qui ajoute des fonctionnalités :
- Variables
- Nesting (imbrication)
- Mixins (fonctions réutilisables)
- Héritage
- Opérations mathématiques
- Boucles et conditions


[REFLEXION] SASS VS SCSS ?

SASS (syntaxe indentée, plus ancienne) :
"""
$primary: blue

.button
  background: $primary
  padding: 10px

"""
SCSS (syntaxe CSS, recommandée [OK]) :
"""
$primary: blue;

.button {
  background: $primary;
  padding: 10px;
}

"""
[IDEE] SCSS = CSS valide + fonctionnalités Sass
Tout CSS est du SCSS valide !
On utilisera SCSS dans ce guide.


[CONFIG] INSTALLATION & COMPILATION :

# Installer Sass
npm install -g sass

# Compiler
sass input.scss output.css

# Watch mode (recompile automatiquement)
sass --watch input.scss:output.css

# Watch dossier
sass --watch scss:css


# ----------------------------------------------------------------------------
# [NOTE] VARIABLES SASS
# ----------------------------------------------------------------------------

"""
Variables Sass avec $
"""

// Définition
$primary-color: #0066cc;
$secondary-color: #764ba2;
$spacing-unit: 8px;
$font-main: 'Roboto', sans-serif;

// Utilisation
.button {
  background-color: $primary-color;
  padding: $spacing-unit;
  font-family: $font-main;
}

"""
[IDEE] SASS VS CSS VARIABLES :

SASS ($variables) :
- Compilées (statiques)
- Pas de cascade/héritage
- Scoping avec blocs { }
- Opérations plus riches

CSS (--variables) :
- Dynamiques (runtime)
- Cascadent et héritent
- Manipulables en JavaScript
- Support navigateur requis


[OK] QUAND UTILISER ?

Variables Sass : Logique de build, calculs complexes
Variables CSS : Valeurs dynamiques, thèmes


COMBINAISON (recommandé !) :
"""

// Sass génère CSS variables
$primary: #0066cc;
$secondary: #764ba2;

:root {
  --color-primary: #{$primary};
  --color-secondary: #{$secondary};
}

// Utilisation en CSS
.button {
  background: var(--color-primary);
}


# ----------------------------------------------------------------------------
# [NESTING_DOLLS] NESTING (IMBRICATION)
# ----------------------------------------------------------------------------

"""
Imbriquer sélecteurs (comme structure HTML)
"""

// SCSS
.nav {
  background: white;
  padding: 1rem;
  
  ul {
    list-style: none;
    margin: 0;
  }
  
  li {
    display: inline-block;
    margin-right: 1rem;
  }
  
  a {
    color: blue;
    text-decoration: none;
    
    &:hover {
      color: darkblue;
    }
  }
}

"""
Compile en :
"""

.nav {
  background: white;
  padding: 1rem;
}

.nav ul {
  list-style: none;
  margin: 0;
}

.nav li {
  display: inline-block;
  margin-right: 1rem;
}

.nav a {
  color: blue;
  text-decoration: none;
}

.nav a:hover {
  color: darkblue;
}

"""
[IDEE] OPÉRATEUR & (parent selector) :

& = référence au sélecteur parent
"""

.button {
  background: blue;
  
  // .button:hover
  &:hover {
    background: darkblue;
  }
  
  // .button.active
  &.active {
    background: green;
  }
  
  // .button-large
  &-large {
    padding: 20px;
  }
  
  // .container .button
  .container & {
    margin: 10px;
  }
}

"""
[ATTENTION] ATTENTION AU NESTING EXCESSIF !

[X] MAUVAIS (trop profond) :
"""
.header {
  .nav {
    .menu {
      .item {
        .link {
          color: blue;  // Sélecteur : .header .nav .menu .item .link
        }
      }
    }
  }
}

"""
[OK] BON (max 3 niveaux) :
"""
.header {
  background: white;
}

.nav-menu {
  list-style: none;
}

.nav-link {
  color: blue;
  
  &:hover {
    color: darkblue;
  }
}


# ----------------------------------------------------------------------------
# [DESIGN] MIXINS (FONCTIONS RÉUTILISABLES)
# ----------------------------------------------------------------------------

"""
Mixin = Bloc de CSS réutilisable avec paramètres
"""

// Définir un mixin
@mixin button-base {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
}

// Utiliser le mixin
.button-primary {
  @include button-base;
  background: blue;
  color: white;
}

.button-secondary {
  @include button-base;
  background: gray;
  color: black;
}

"""
MIXINS AVEC PARAMÈTRES :
"""

@mixin button($bg-color, $text-color, $padding: 10px 20px) {
  background-color: $bg-color;
  color: $text-color;
  padding: $padding;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

// Utilisation
.btn-primary {
  @include button(blue, white);
}

.btn-large {
  @include button(green, white, 15px 30px);
}

.btn-custom {
  @include button($text-color: black, $bg-color: yellow);  // Arguments nommés
}

"""
[OK] MIXINS PRATIQUES :
"""

// 1. FLEXBOX CENTER
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  @include flex-center;
  min-height: 100vh;
}


// 2. MEDIA QUERIES
@mixin respond-to($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 767px) { @content; }
  }
  @else if $breakpoint == tablet {
    @media (min-width: 768px) and (max-width: 991px) { @content; }
  }
  @else if $breakpoint == desktop {
    @media (min-width: 992px) { @content; }
  }
}

.element {
  width: 100%;
  
  @include respond-to(tablet) {
    width: 50%;
  }
  
  @include respond-to(desktop) {
    width: 33.333%;
  }
}


// 3. TRUNCATE TEXT
@mixin truncate($max-width: 100%) {
  max-width: $max-width;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title {
  @include truncate(200px);
}


// 4. CARD SHADOW
@mixin card-shadow($level: 1) {
  @if $level == 1 {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  } @else if $level == 2 {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  } @else if $level == 3 {
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  }
}

.card {
  @include card-shadow(2);
}


// 5. RESPONSIVE FONT SIZE
@mixin responsive-font($min, $max) {
  font-size: clamp(#{$min}, 4vw, #{$max});
}

h1 {
  @include responsive-font(2rem, 4rem);
}


# ----------------------------------------------------------------------------
# [LIEN] @IMPORT ET PARTIALS
# ----------------------------------------------------------------------------

"""
Organiser code en fichiers séparés

FICHIERS PARTIALS :
- Commencent par _ (underscore)
- Ne sont pas compilés seuls
- Importés dans fichier principal


STRUCTURE PROJET :
"""
scss/
├── _variables.scss
├── _mixins.scss
├── _reset.scss
├── _typography.scss
├── _buttons.scss
├── _cards.scss
└── main.scss

"""
FICHIERS :

_variables.scss :
"""
// Variables globales
$primary: #0066cc;
$secondary: #764ba2;
$spacing: 8px;

"""
_mixins.scss :
"""
// Mixins réutilisables
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

"""
main.scss :
"""
// Imports (ordre important !)
@import 'variables';
@import 'mixins';
@import 'reset';
@import 'typography';
@import 'buttons';
@import 'cards';

// Styles généraux
body {
  font-family: sans-serif;
  color: $primary;
}

"""
[ATTENTION] ORDRE D'IMPORT IMPORTANT :

1. Variables
2. Mixins/Functions
3. Reset/Normalize
4. Base/Typography
5. Layout
6. Components
7. Pages
8. Utilities


[IDEE] @USE (moderne, recommandé) :

Remplace @import dans Sass moderne
"""
// _variables.scss
$primary: blue;

// main.scss
@use 'variables';  // Namespace automatique

.button {
  background: variables.$primary;  // Préfixe avec nom fichier
}

// Ou avec alias
@use 'variables' as v;

.button {
  background: v.$primary;
}


# ----------------------------------------------------------------------------
# [SCIENCE] @EXTEND (HÉRITAGE)
# ----------------------------------------------------------------------------

"""
@extend = Partager styles entre sélecteurs
"""

// Base
.message {
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 10px;
}

// Extend
.message-success {
  @extend .message;
  background: green;
  color: white;
}

.message-error {
  @extend .message;
  background: red;
  color: white;
}

"""
Compile en :
"""
.message, .message-success, .message-error {
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.message-success {
  background: green;
  color: white;
}

.message-error {
  background: red;
  color: white;
}

"""
[IDEE] PLACEHOLDER SELECTORS (%) :

Pour styles qui existent SEULEMENT pour être étendus
"""
// Ne sera pas compilé seul
%button-base {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn-primary {
  @extend %button-base;
  background: blue;
  color: white;
}

.btn-secondary {
  @extend %button-base;
  background: gray;
}

"""
Compile en :
"""
.btn-primary, .btn-secondary {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn-primary {
  background: blue;
  color: white;
}

.btn-secondary {
  background: gray;
}

"""
[ATTENTION] @EXTEND VS MIXIN :

@extend :
- Partage code compilé (CSS plus petit)
- Groupe sélecteurs
- Moins flexible

@mixin :
- Duplique code (CSS plus grand)
- Plus flexible (paramètres)
- Plus prévisible


[IDEE] RECOMMANDATION :
Privilégier mixins sauf si vraiment besoin de grouper


# ----------------------------------------------------------------------------
# [NOMBRE] OPÉRATIONS ET FONCTIONS
# ----------------------------------------------------------------------------

"""
OPÉRATIONS MATHÉMATIQUES :
"""
$base-spacing: 8px;

.element {
  padding: $base-spacing * 2;           // 16px
  margin: $base-spacing + 4px;          // 12px
  width: 100% / 3;                      // 33.333%
}

"""
FONCTIONS COULEURS :
"""
$primary: #0066cc;

.element {
  // Éclaircir
  background: lighten($primary, 20%);
  
  // Assombrir
  border-color: darken($primary, 10%);
  
  // Saturer
  color: saturate($primary, 20%);
  
  // Désaturer
  background: desaturate($primary, 30%);
  
  // Ajuster teinte
  border: 1px solid adjust-hue($primary, 45deg);
  
  // Transparence
  background: rgba($primary, 0.5);
  background: transparentize($primary, 0.3);
  background: opacify($primary, 0.2);
  
  // Mélanger couleurs
  color: mix($primary, white, 50%);
}

"""
FONCTIONS STRINGS :
"""
$font-family: 'Roboto';

.element {
  font-family: unquote($font-family);     // Enlever guillemets
  content: quote($font-family);           // Ajouter guillemets
  text-transform: to-upper-case('hello'); // HELLO
  text-transform: to-lower-case('WORLD'); // world
}

"""
FONCTIONS LISTES :
"""
$sizes: 10px, 20px, 30px, 40px;

.element {
  padding: nth($sizes, 2);        // 20px (index commence à 1)
  margin: length($sizes);         // 4
}

"""
FONCTIONS MAPS (objets) :
"""
$colors: (
  primary: #0066cc,
  secondary: #764ba2,
  success: #28a745,
  danger: #dc3545
);

.button-primary {
  background: map-get($colors, primary);  // #0066cc
}

// Boucle sur map
@each $name, $color in $colors {
  .text-#{$name} {
    color: $color;
  }
}

"""
FONCTIONS PERSONNALISÉES :
"""
@function strip-unit($number) {
  @return $number / ($number * 0 + 1);
}

@function px-to-rem($px, $base: 16px) {
  @return (strip-unit($px) / strip-unit($base)) * 1rem;
}

// Utilisation
.element {
  font-size: px-to-rem(24px);  // 1.5rem
}


# ----------------------------------------------------------------------------
# [SYNC] BOUCLES ET CONDITIONS
# ----------------------------------------------------------------------------

"""
@IF / @ELSE :
"""
$theme: dark;

.element {
  @if $theme == dark {
    background: black;
    color: white;
  } @else if $theme == light {
    background: white;
    color: black;
  } @else {
    background: gray;
    color: white;
  }
}

"""
@FOR :
"""
// Générer classes de grille
@for $i from 1 through 12 {
  .col-#{$i} {
    width: (100% / 12) * $i;
  }
}

// Génère : .col-1, .col-2, ... .col-12

"""
@EACH :
"""
$sizes: small, medium, large;

@each $size in $sizes {
  .button-#{$size} {
    @if $size == small {
      padding: 5px 10px;
    } @else if $size == medium {
      padding: 10px 20px;
    } @else {
      padding: 15px 30px;
    }
  }
}

"""
@WHILE :
"""
$i: 1;
@while $i <= 5 {
  .item-#{$i} {
    width: 100px * $i;
  }
  $i: $i + 1;
}


"""
[OK] EXEMPLES PRATIQUES :
"""

// 1. SYSTÈME D'ESPACEMENT
$spacing-base: 8px;

@for $i from 0 through 10 {
  .m-#{$i} {
    margin: $spacing-base * $i;
  }
  
  .p-#{$i} {
    padding: $spacing-base * $i;
  }
}

// Génère : .m-0, .m-1, ... .p-10


// 2. PALETTE DE COULEURS
$base-color: #0066cc;

@for $i from 1 through 9 {
  .color-#{$i}00 {
    $lightness: 100% - ($i * 10%);
    background: lighten($base-color, $lightness);
  }
}


// 3. UTILITAIRES FLEX
$alignments: (
  start: flex-start,
  center: center,
  end: flex-end,
  between: space-between,
  around: space-around
);

@each $name, $value in $alignments {
  .justify-#{$name} {
    justify-content: $value;
  }
  
  .items-#{$name} {
    align-items: $value;
  }
}


# ============================================================================
# [GUIDE] CHAPITRE 19 : MÉTHODOLOGIES CSS
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] BEM (Block Element Modifier)
[OK] OOCSS (Object-Oriented CSS)
[OK] SMACSS (Scalable and Modular CSS)
[OK] ITCSS (Inverted Triangle CSS)
[OK] Atomic CSS
[OK] Choisir méthodologie appropriée
"""


# ----------------------------------------------------------------------------
# [BRICK] BEM (BLOCK ELEMENT MODIFIER)
# ----------------------------------------------------------------------------

"""
[IDEE] BEM = Méthodologie de nommage pour CSS maintenable

STRUCTURE :
.block__element--modifier

BLOCK : Composant indépendant
ELEMENT : Partie du block
MODIFIER : Variante du block ou element


EXEMPLE :
"""

/* BLOCK */
.card { }

/* ELEMENTS */
.card__header { }
.card__body { }
.card__footer { }
.card__title { }
.card__text { }

/* MODIFIERS */
.card--large { }
.card--dark { }
.card__title--primary { }

"""
HTML CORRESPONDANT :
"""
<article class="card card--large">
  <header class="card__header">
    <h2 class="card__title card__title--primary">Titre</h2>
  </header>
  <div class="card__body">
    <p class="card__text">Contenu de la carte</p>
  </div>
  <footer class="card__footer">
    <button class="card__button">Action</button>
  </footer>
</article>

"""
[IDEE] RÈGLES BEM :

1. BLOCK :
   - Nom descriptif (card, button, menu)
   - Indépendant, réutilisable
   - Pas de margin externe

2. ELEMENT :
   - Séparé par __ (double underscore)
   - Ne peut exister sans block
   - Pas de nesting profond

3. MODIFIER :
   - Séparé par -- (double tiret)
   - Change apparence/comportement
   - Utilisé avec block ou element


[OK] EXEMPLES COMPLETS :
"""

/* Button component */
.button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button--primary {
  background: blue;
  color: white;
}

.button--secondary {
  background: gray;
  color: white;
}

.button--large {
  padding: 15px 30px;
  font-size: 18px;
}

.button__icon {
  margin-right: 8px;
}

/* HTML */
<button class="button button--primary button--large">
  <span class="button__icon">[RAPIDE]</span>
  Envoyer
</button>


/* Menu component */
.menu {
  list-style: none;
  padding: 0;
}

.menu__item {
  display: inline-block;
}

.menu__link {
  padding: 10px 15px;
  text-decoration: none;
  color: black;
}

.menu__link--active {
  color: blue;
  font-weight: bold;
}

/* HTML */
<ul class="menu">
  <li class="menu__item">
    <a href="#" class="menu__link menu__link--active">Accueil</a>
  </li>
  <li class="menu__item">
    <a href="#" class="menu__link">Services</a>
  </li>
</ul>

"""
[ATTENTION] ERREURS COURANTES :
"""

/* [X] MAUVAIS : Nesting d'elements */
.block__element__subelement { }  /* Éviter ! */

/* [OK] BON : Flat structure */
.block__element { }
.block__subelement { }


/* [X] MAUVAIS : Block dans nom d'element */
.card__card-title { }

/* [OK] BON */
.card__title { }


/* [X] MAUVAIS : Modifier sans base */
<div class="card--large">  /* Pas de .card */

/* [OK] BON */
<div class="card card--large">


"""
[IDEE] BEM AVEC SASS :
"""
.card {
  padding: 20px;
  
  &__header {
    margin-bottom: 15px;
  }
  
  &__title {
    font-size: 1.5rem;
    
    &--primary {
      color: blue;
    }
  }
  
  &__body {
    line-height: 1.6;
  }
  
  &--large {
    padding: 30px;
  }
}

"""
[OK] AVANTAGES BEM :

1. Clarté : Nom décrit structure
2. Modularité : Components indépendants
3. Réutilisabilité : Facile à réutiliser
4. Évite conflits : Nommage unique
5. Maintenabilité : Facile à modifier


# ----------------------------------------------------------------------------
# [OBJECTIF] OOCSS (OBJECT-ORIENTED CSS)
# ----------------------------------------------------------------------------

"""
[IDEE] OOCSS = Séparer structure et apparence

PRINCIPES :

1. SÉPARATION STRUCTURE/SKIN :
   Structure = layout, dimensions
   Skin = couleurs, polices, décorations

2. SÉPARATION CONTAINER/CONTENT :
   Content ne dépend pas de container
"""

/* [X] MAUVAIS : Couplé */
.sidebar h3 {
  font-size: 1.2rem;
  color: blue;
}

/* [OK] BON : Découplé */
.heading-small {
  font-size: 1.2rem;
}

.heading-primary {
  color: blue;
}

/* Utilisable partout */
<h3 class="heading-small heading-primary">Titre</h3>

"""
EXEMPLES OOCSS :
"""

/* STRUCTURE (layout) */
.box {
  width: 300px;
  padding: 20px;
  border: 1px solid;
}

/* SKIN (apparence) */
.box-primary {
  border-color: blue;
  background: lightblue;
}

.box-danger {
  border-color: red;
  background: lightpink;
}

/* UTILISATION */
<div class="box box-primary">...</div>
<div class="box box-danger">...</div>


/* MEDIA OBJECT (pattern OOCSS classique) */
.media {
  display: flex;
  align-items: flex-start;
}

.media__figure {
  margin-right: 1rem;
}

.media__body {
  flex: 1;
}

/* HTML */
<div class="media">
  <div class="media__figure">
    <img src="avatar.jpg" alt="Avatar">
  </div>
  <div class="media__body">
    <h3>Titre</h3>
    <p>Description...</p>
  </div>
</div>


# ----------------------------------------------------------------------------
# [MESURE] SMACSS (SCALABLE & MODULAR CSS)
# ----------------------------------------------------------------------------

"""
[IDEE] SMACSS = Organisation CSS en catégories

5 CATÉGORIES :

1. BASE : Styles par défaut (reset, éléments)
2. LAYOUT : Grilles, containers (prefixe l-)
3. MODULE : Components réutilisables
4. STATE : États (prefixe is- ou has-)
5. THEME : Couleurs, polices du thème


STRUCTURE :
"""
css/
├── base/
│   ├── _reset.scss
│   ├── _typography.scss
│   └── _base.scss
├── layout/
│   ├── _grid.scss
│   ├── _header.scss
│   └── _footer.scss
├── modules/
│   ├── _button.scss
│   ├── _card.scss
│   └── _menu.scss
├── state/
│   └── _state.scss
└── theme/
    └── _theme.scss

"""
EXEMPLES :

1. BASE
"""
html, body {
  margin: 0;
  padding: 0;
}

h1, h2, h3 {
  margin-top: 0;
}

"""
2. LAYOUT (prefixe l-)
"""
.l-container {
  max-width: 1200px;
  margin: 0 auto;
}

.l-header {
  position: fixed;
  top: 0;
  width: 100%;
}

.l-sidebar {
  width: 250px;
  float: left;
}

"""
3. MODULE
"""
.button {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.card {
  padding: 20px;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

"""
4. STATE (prefixe is- ou has-)
"""
.is-hidden {
  display: none;
}

.is-active {
  font-weight: bold;
  color: blue;
}

.has-error {
  border-color: red;
}

.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

"""
5. THEME
"""
.theme-dark {
  background: #222;
  color: #fff;
}

.theme-light {
  background: #fff;
  color: #222;
}


# ----------------------------------------------------------------------------
# [UP-POINTING_RED_TRIANGLE] ITCSS (INVERTED TRIANGLE CSS)
# ----------------------------------------------------------------------------

"""
[IDEE] ITCSS = Organisation en couches (du général au spécifique)

ORDRE (Triangle inversé) :

1. SETTINGS     -> Variables, config
2. TOOLS        -> Mixins, functions
3. GENERIC      -> Reset, normalize
4. ELEMENTS     -> Éléments HTML de base
5. OBJECTS      -> Patterns layout (OOCSS)
6. COMPONENTS   -> UI components
7. UTILITIES    -> Classes utilitaires (!important OK)


STRUCTURE :
"""
1-settings/
  _variables.scss
  _colors.scss

2-tools/
  _mixins.scss
  _functions.scss

3-generic/
  _reset.scss
  _normalize.scss

4-elements/
  _headings.scss
  _links.scss
  _lists.scss

5-objects/
  _container.scss
  _grid.scss
  _media.scss

6-components/
  _buttons.scss
  _cards.scss
  _forms.scss

7-utilities/
  _spacing.scss
  _text.scss
  _display.scss

"""
Spécificité croissante v
Réutilisabilité décroissante v


# ----------------------------------------------------------------------------
# [SCIENCE] ATOMIC CSS
# ----------------------------------------------------------------------------

"""
[IDEE] ATOMIC CSS = Classes utilitaires à usage unique

Une classe = Une propriété
"""

/* Classes atomiques */
.text-center { text-align: center; }
.text-right { text-align: right; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

.p-4 { padding: 1rem; }
.m-2 { margin: 0.5rem; }
.mt-8 { margin-top: 2rem; }

.bg-blue { background-color: blue; }
.text-white { color: white; }

/* HTML */
<div class="flex items-center justify-between p-4 bg-blue text-white">
  <h1 class="text-2xl font-bold">Titre</h1>
  <button class="px-4 py-2 bg-white text-blue rounded">Click</button>
</div>

"""
[OK] AVANTAGES :
- Pas de naming
- Très réutilisable
- CSS ne grandit plus
- Rapide à développer

[ATTENTION] INCONVÉNIENTS :
- HTML verbeux
- Difficile à maintenir
- Courbe d'apprentissage


[IDEE] FRAMEWORKS ATOMIC :
- Tailwind CSS (le plus populaire)
- Tachyons
- Basscss


# Ce fichier continue...
# ============================================================================
# FIN DE CE FICHIER - SUITE AVEC PERFORMANCE & FRAMEWORKS
# ============================================================================
# ============================================================================
# [LIVRE] CSS - PARTIE 4 (FIN) : PERFORMANCE & BEST PRACTICES
# ============================================================================
#
# [OBJECTIF] CONTENU :
# - Chapitre 20 : Performance et Optimisation CSS
# - Chapitre 21 : Frameworks CSS
# - Chapitre 22 : Best Practices Production
# - Récapitulatif final
# - Projets professionnels
#
# [TEMPS] TEMPS : ~6-8 heures
# [DOCS] PRÉREQUIS : Toutes parties précédentes
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 20 : PERFORMANCE ET OPTIMISATION CSS
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Optimiser sélecteurs CSS
[OK] Réduire taille fichiers CSS
[OK] Critical CSS et inline CSS
[OK] Lazy loading CSS
[OK] Outils d'optimisation
[OK] Mesurer performance
"""


# ----------------------------------------------------------------------------
# [RAPIDE] PERFORMANCE DES SÉLECTEURS
# ----------------------------------------------------------------------------

"""
[IDEE] RÈGLES DE PERFORMANCE :

1. Navigateurs lisent sélecteurs de DROITE à GAUCHE
"""

/* [X] LENT : Cherche tous div, puis filtre */
div .menu .item a {
  color: blue;
}

/* [OK] RAPIDE : Cible directement */
.menu-link {
  color: blue;
}

"""
2. ÉVITER SÉLECTEURS UNIVERSELS
"""

/* [X] TRÈS LENT */
* {
  margin: 0;
}

/* [OK] MIEUX : Reset ciblé */
html, body, h1, h2, h3, p, ul, li {
  margin: 0;
}

"""
3. ÉVITER SÉLECTEURS TROP PROFONDS
"""

/* [X] LENT : 5 niveaux */
.header .nav .menu .item .link {
  color: blue;
}

/* [OK] RAPIDE : 1-2 niveaux max */
.nav-link {
  color: blue;
}

"""
4. PRÉFÉRER CLASSES AUX TAGS
"""

/* [X] PLUS LENT */
header nav ul li a {
  color: blue;
}

/* [OK] PLUS RAPIDE */
.nav-link {
  color: blue;
}

"""
5. ÉVITER COMBINAISONS COÛTEUSES
"""

/* [X] LENT : Adjacent sibling universel */
.item + * {
  margin-top: 10px;
}

/* [OK] RAPIDE : Cible spécifique */
.item + .item {
  margin-top: 10px;
}


"""
[GRAPHIQUE] CLASSEMENT PERFORMANCE SÉLECTEURS (rapide -> lent) :

1. ID               #header
2. Classe           .button
3. Tag              div
4. Adjacent         .item + .item
5. Enfant           ul > li
6. Descendant       div p
7. Universel        *
8. Attribut         [type="text"]
9. Pseudo-classe    :hover


[IDEE] RECOMMANDATIONS :

[OK] Utilisez classes (BEM)
[OK] Gardez sélecteurs courts (max 3 niveaux)
[OK] Évitez !important (spécificité)
[OK] Profitez du cache navigateur


# ----------------------------------------------------------------------------
# [PACKAGE] OPTIMISATION DE LA TAILLE
# ----------------------------------------------------------------------------

"""
1. MINIFICATION

Enlever espaces, commentaires, newlines
"""

/* Avant (15 Ko) */
.button {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border-radius: 5px;
}

/* Après minification (8 Ko) */
.button{padding:10px 20px;background-color:blue;color:#fff;border-radius:5px}

"""
OUTILS :
- cssnano (Node.js)
- clean-css
- csso
- Build tools (Webpack, Vite)

# Installation
npm install cssnano

# Utilisation
cssnano input.css output.min.css


2. PURGE CSS INUTILISÉ

Supprimer CSS non utilisé
"""

# PurgeCSS
npm install purgecss

# Configuration (purgecss.config.js)
module.exports = {
  content: ['./src/**/*.html', './src/**/*.js'],
  css: ['./src/**/*.css']
}

"""
[ATTENTION] Attention avec classes dynamiques :
"""

/* [X] Sera supprimé si non dans HTML */
.text-red { color: red; }

/* [OK] Safelist dans config */
safelist: ['text-red', /^col-/]

"""
RÉSULTATS :
Bootstrap : 150 Ko -> 10 Ko (93% réduction !)
Tailwind : 3.5 Mo -> 8 Ko (99.7% réduction !)


3. GZIP/BROTLI COMPRESSION

Compresser fichiers CSS sur serveur
"""

# Nginx
gzip on;
gzip_types text/css;
gzip_comp_level 6;

# Apache (.htaccess)
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/css
</IfModule>

"""
GAINS :
CSS 100 Ko -> 20 Ko (80% réduction)


4. CSS SPRITES

Combiner images en une seule
"""

/* Avant : 10 requêtes HTTP */
.icon-home { background: url('home.png'); }
.icon-user { background: url('user.png'); }
/* ... 8 autres ... */

/* Après : 1 requête HTTP */
.icon {
  background: url('sprites.png') no-repeat;
}

.icon-home { background-position: 0 0; }
.icon-user { background-position: -20px 0; }

"""
[IDEE] MODERNE : Utiliser SVG sprites ou icon fonts


# ----------------------------------------------------------------------------
# [RAPIDE] CRITICAL CSS
# ----------------------------------------------------------------------------

"""
Critical CSS = CSS nécessaire pour afficher contenu au-dessus du pli

STRATÉGIE :

1. Identifier CSS critique (above-the-fold)
2. Inline CSS critique dans <head>
3. Charger reste en asynchrone
"""

<!DOCTYPE html>
<html>
<head>
    <!-- Critical CSS inline -->
    <style>
    /* Styles pour header, hero, au-dessus du pli */
    .header { ... }
    .hero { ... }
    </style>
    
    <!-- CSS non-critique chargé async -->
    <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>

"""
OUTILS POUR EXTRAIRE CRITICAL CSS :
"""

# Critical (Node.js)
npm install critical

# Utilisation
critical extract --inline index.html > critical.css

# Puppeteer-based
npm install penthouse

"""
GAINS :
- First Contentful Paint : -50%
- Time to Interactive : -30%


# ----------------------------------------------------------------------------
# [SYNC] STRATÉGIES DE CHARGEMENT
# ----------------------------------------------------------------------------

"""
1. PRÉCHARGEMENT (preload)
"""
<link rel="preload" href="critical.css" as="style">

"""
2. PRÉCONNEXION (preconnect)
"""
<link rel="preconnect" href="https://fonts.googleapis.com">

"""
3. CHARGEMENT ASYNCHRONE
"""
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

"""
4. LAZY LOADING PAR ROUTE
"""
// React
const HomeStyles = lazy(() => import('./Home.css'));

// Vue
const aboutStyles = () => import('./About.css');

"""
5. CODE SPLITTING
"""
// Webpack
entry: {
  home: './src/home.js',
  about: './src/about.js',
}

// Résultat : home.css, about.css séparés


# ----------------------------------------------------------------------------
# [GRAPHIQUE] MESURER PERFORMANCE
# ----------------------------------------------------------------------------

"""
OUTILS D'ANALYSE :

1. LIGHTHOUSE (Chrome DevTools)
"""
- Performance score
- First Contentful Paint
- Largest Contentful Paint
- Cumulative Layout Shift
- Suggestions d'optimisation

"""
2. WEBPAGETEST
"""
https://www.webpagetest.org/
- Tests multi-localisations
- Filmstrip view
- Waterfall chart

"""
3. CHROME DEVTOOLS COVERAGE
"""
1. Ouvrir DevTools
2. Cmd/Ctrl + Shift + P
3. Taper "Coverage"
4. Analyser CSS non utilisé

"""
4. CSS STATS
"""
https://cssstats.com/
- Analyse complète CSS
- Taille, sélecteurs, couleurs
- Complexité


# ----------------------------------------------------------------------------
# [OBJECTIF] BEST PRACTICES PERFORMANCE
# ----------------------------------------------------------------------------

"""
[OK] CHECKLIST PERFORMANCE CSS :

SÉLECTEURS :
[WHITE_SQUARE] Éviter sélecteurs universels (*)
[WHITE_SQUARE] Limiter profondeur (max 3 niveaux)
[WHITE_SQUARE] Préférer classes aux tags
[WHITE_SQUARE] Éviter !important

TAILLE :
[WHITE_SQUARE] Minifier CSS production
[WHITE_SQUARE] Purger CSS inutilisé
[WHITE_SQUARE] Activer Gzip/Brotli
[WHITE_SQUARE] Utiliser CSS sprites ou SVG

CHARGEMENT :
[WHITE_SQUARE] Inline Critical CSS
[WHITE_SQUARE] Précharger polices importantes
[WHITE_SQUARE] Code splitting par route
[WHITE_SQUARE] Charger CSS non-critique en async

ANIMATIONS :
[WHITE_SQUARE] Utiliser transform et opacity (GPU)
[WHITE_SQUARE] Éviter width, height, margin
[WHITE_SQUARE] will-change pour animations fréquentes
[WHITE_SQUARE] Désactiver animations complexes sur mobile

IMAGES :
[WHITE_SQUARE] WebP avec fallback
[WHITE_SQUARE] Lazy loading images
[WHITE_SQUARE] Responsive images (srcset)
[WHITE_SQUARE] Optimiser SVG

FONTS :
[WHITE_SQUARE] Limiter nombre de polices (max 2-3)
[WHITE_SQUARE] Subset fonts (seulement caractères nécessaires)
[WHITE_SQUARE] font-display: swap
[WHITE_SQUARE] Précharger polices critiques


# ============================================================================
# [GUIDE] CHAPITRE 21 : FRAMEWORKS CSS
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Principaux frameworks CSS
[OK] Avantages et inconvénients
[OK] Quand utiliser un framework
[OK] Personnaliser frameworks
[OK] Tendances actuelles
"""


# ----------------------------------------------------------------------------
# [DESIGN] FRAMEWORKS CSS MAJEURS
# ----------------------------------------------------------------------------

"""
1. BOOTSTRAP
"""

Le plus populaire, component-based

<!-- Installation -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Utilisation -->
<button class="btn btn-primary">Bouton</button>
<div class="container">
  <div class="row">
    <div class="col-md-6">Colonne 1</div>
    <div class="col-md-6">Colonne 2</div>
  </div>
</div>

"""
[OK] AVANTAGES :
- Ecosystem riche
- Documentation excellente
- Components prêts à l'emploi
- Communauté massive

[ATTENTION] INCONVÉNIENTS :
- Lourd (150+ Ko)
- Design générique
- Markup verbeux
- Courbe d'apprentissage


2. TAILWIND CSS
"""

Utility-first framework (Atomic CSS)

<!-- Installation -->
npm install tailwindcss

<!-- Configuration -->
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

<div class="flex justify-between items-center p-4 bg-gray-100">
  <h1 class="text-2xl font-bold">Titre</h1>
  <nav class="space-x-4">
    <a href="#" class="text-blue-600 hover:underline">Lien</a>
  </nav>
</div>

"""
[OK] AVANTAGES :
- Très petit en production (avec PurgeCSS)
- Customizable à 100%
- Pas de naming
- Développement rapide

[ATTENTION] INCONVÉNIENTS :
- HTML très verbeux
- Courbe d'apprentissage
- Dépendance au framework
- Moins de components


3. BULMA
"""

Modern, Flexbox-based

<!-- Installation -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">

<!-- Utilisation -->
<button class="button is-primary">Bouton</button>

<div class="columns">
  <div class="column">Colonne 1</div>
  <div class="column">Colonne 2</div>
</div>

"""
[OK] AVANTAGES :
- Moderne et propre
- Pure CSS (pas de JavaScript)
- Flexbox natif
- Syntaxe claire

[ATTENTION] INCONVÉNIENTS :
- Moins populaire que Bootstrap
- Ecosystem plus petit


4. FOUNDATION
"""

Professional, enterprise-grade

<!-- Installation -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">

"""
[OK] AVANTAGES :
- Très flexible
- Professional
- Mobile-first
- Accessibility focus

[ATTENTION] INCONVÉNIENTS :
- Moins populaire
- Courbe d'apprentissage


5. MATERIALIZE
"""

Material Design par Google

<!-- Installation -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

"""
[OK] AVANTAGES :
- Material Design
- Components riches
- Animations intégrées

[ATTENTION] INCONVÉNIENTS :
- Style très "Google"
- Moins maintenu


# ----------------------------------------------------------------------------
# [REFLEXION] QUAND UTILISER UN FRAMEWORK ?
# ----------------------------------------------------------------------------

"""
[OK] UTILISEZ UN FRAMEWORK SI :

- Prototypage rapide
- Petit projet / MVP
- Équipe débutante
- Deadline serrée
- Besoin components standards
- Pas de design custom


[X] N'UTILISEZ PAS SI :

- Design très custom
- Performance critique
- Petit projet simple
- Vous maîtrisez CSS
- Besoin contrôle total
- Éviter dépendances


[IDEE] ALTERNATIVE : Créer votre propre système
"""

/* Votre mini-framework custom */
:root {
  --primary: #0066cc;
  --spacing: 8px;
}

/* Utilitaires */
.flex { display: flex; }
.items-center { align-items: center; }
.gap-4 { gap: calc(var(--spacing) * 4); }

/* Components */
.btn {
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.btn-primary {
  background: var(--primary);
  color: white;
}


# ----------------------------------------------------------------------------
# [OUTIL] PERSONNALISER FRAMEWORKS
# ----------------------------------------------------------------------------

"""
BOOTSTRAP PERSONNALISÉ :

1. Variables Sass
"""
// custom.scss
$primary: #0066cc;
$secondary: #764ba2;
$border-radius: 8px;

@import "node_modules/bootstrap/scss/bootstrap";

"""
2. Importer seulement ce qui est nécessaire
"""
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
// Pas tout Bootstrap !

"""
TAILWIND PERSONNALISÉ :

tailwind.config.js
"""
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#0066cc',
        secondary: '#764ba2',
      },
      spacing: {
        '128': '32rem',
      },
      fontFamily: {
        sans: ['Roboto', 'sans-serif'],
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}


# ============================================================================
# [GUIDE] CHAPITRE 22 : BEST PRACTICES PRODUCTION
# ============================================================================

"""
[OBJECTIF] OBJECTIFS FINAUX

À la fin de ce chapitre, vous saurez :
[OK] Organiser projet CSS professionnel
[OK] Workflow de développement
[OK] Git et versioning CSS
[OK] Documentation CSS
[OK] Tests et validation
[OK] Déploiement et monitoring
"""


# ----------------------------------------------------------------------------
# [DOSSIER] ARCHITECTURE PROJET
# ----------------------------------------------------------------------------

"""
STRUCTURE RECOMMANDÉE (7-1 Pattern) :
"""
styles/
├── abstracts/
│   ├── _variables.scss
│   ├── _functions.scss
│   ├── _mixins.scss
│   └── _placeholders.scss
├── base/
│   ├── _reset.scss
│   ├── _typography.scss
│   └── _animations.scss
├── components/
│   ├── _buttons.scss
│   ├── _cards.scss
│   ├── _forms.scss
│   ├── _modals.scss
│   └── _navigation.scss
├── layout/
│   ├── _header.scss
│   ├── _footer.scss
│   ├── _sidebar.scss
│   └── _grid.scss
├── pages/
│   ├── _home.scss
│   ├── _about.scss
│   └── _contact.scss
├── themes/
│   ├── _default.scss
│   └── _dark.scss
├── vendors/
│   └── _bootstrap.scss
└── main.scss  (importe tout)

"""
main.scss :
"""
// Abstracts
@import 'abstracts/variables';
@import 'abstracts/functions';
@import 'abstracts/mixins';

// Vendors
@import 'vendors/bootstrap';

// Base
@import 'base/reset';
@import 'base/typography';

// Layout
@import 'layout/header';
@import 'layout/footer';
@import 'layout/grid';

// Components
@import 'components/buttons';
@import 'components/cards';
@import 'components/forms';

// Pages
@import 'pages/home';
@import 'pages/about';

// Themes
@import 'themes/default';


# ----------------------------------------------------------------------------
# [SYNC] WORKFLOW DÉVELOPPEMENT
# ----------------------------------------------------------------------------

"""
1. CONVENTIONS DE NOMMAGE

Variables :
"""
$color-primary
$spacing-large
$font-size-base

"""
Classes :
"""
// BEM
.card
.card__header
.card--featured

// SMACSS
.l-container
.is-active
.has-error

"""
2. COMMENTAIRES
"""

/* ==========================================================================
   Section Title
   ========================================================================== */

/**
 * Component: Button
 * Description: Primary action button with variants
 * Usage: <button class="btn btn--primary">Click</button>
 */
.btn {
  /* Implementation */
}

// TODO: Refactor this section
// FIXME: Bug on IE11
// NOTE: This is a temporary solution

"""
3. ORDRE DES PROPRIÉTÉS
"""

.element {
  /* Positionnement */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  
  /* Box Model */
  display: flex;
  width: 100%;
  height: 100%;
  padding: 1rem;
  margin: 0 auto;
  
  /* Typographie */
  font-family: sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
  
  /* Visuel */
  background-color: white;
  border: 1px solid gray;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  
  /* Animations */
  transition: all 0.3s;
  transform: translateZ(0);
}


# ----------------------------------------------------------------------------
# [TEST] TESTS ET VALIDATION
# ----------------------------------------------------------------------------

"""
1. LINTING (Stylelint)

Installation :
"""
npm install --save-dev stylelint stylelint-config-standard

"""
Configuration (.stylelintrc.json) :
"""
{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": 2,
    "color-hex-length": "short",
    "max-nesting-depth": 3,
    "selector-max-id": 0,
    "declaration-no-important": true
  }
}

"""
Usage :
"""
npx stylelint "**/*.css"
npx stylelint "**/*.scss" --fix

"""
2. VALIDATION W3C
"""
https://jigsaw.w3.org/css-validator/

"""
3. TESTS CROSS-BROWSER
"""
- BrowserStack
- Sauce Labs
- CrossBrowserTesting
- Manuel : Chrome, Firefox, Safari, Edge

"""
4. TESTS ACCESSIBILITÉ
"""
- WAVE (Web Accessibility Evaluation Tool)
- aXe DevTools
- Lighthouse Accessibility Score

"""
5. TESTS VISUELS
"""
- Percy (visual regression)
- Chromatic (Storybook)
- BackstopJS


# ----------------------------------------------------------------------------
# [RAPIDE] BUILD ET DÉPLOIEMENT
# ----------------------------------------------------------------------------

"""
WEBPACK CONFIG :
"""

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    })
  ],
  optimization: {
    minimizer: [
      new CssMinimizerPlugin()
    ]
  }
};

"""
POSTCSS CONFIG :
"""

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')({
      preset: 'default',
    }),
  ],
};

"""
PACKAGE.JSON SCRIPTS :
"""

{
  "scripts": {
    "dev": "sass --watch src/scss:dist/css",
    "build": "sass src/scss:dist/css --style=compressed",
    "lint": "stylelint 'src/**/*.scss'",
    "test": "npm run lint"
  }
}


# ----------------------------------------------------------------------------
# [DOCS] DOCUMENTATION CSS
# ----------------------------------------------------------------------------

"""
1. STYLEGUIDE (Pattern Library)

Outils :
- Storybook
- Fractal
- Pattern Lab
"""

// Button.stories.js (Storybook)
export default {
  title: 'Components/Button',
  component: Button,
};

export const Primary = {
  args: {
    label: 'Button',
    variant: 'primary',
  },
};

"""
2. SASSDOC

Documentation automatique Sass
"""

/// Primary button mixin
/// @group buttons
/// @param {Color} $bg-color - Background color
/// @param {Color} $text-color - Text color
/// @example scss - Usage
///   .btn {
///     @include button(blue, white);
///   }
@mixin button($bg-color, $text-color) {
  background: $bg-color;
  color: $text-color;
}

"""
Génération :
"""
sassdoc src/scss --dest docs

"""
3. README.md
"""

# Project Styles

## Structure
- `/abstracts` - Variables, mixins, functions
- `/components` - UI components
- `/layout` - Page layout

## Installation
```bash
npm install
npm run dev
```

## Build
```bash
npm run build
```

## Conventions
- BEM naming
- Mobile-first
- 8px spacing system


# ============================================================================
# [COURS] PROJETS PROFESSIONNELS FINAUX
# ============================================================================

"""
PROJET 1 : DESIGN SYSTEM COMPLET

Créer un design system complet avec :
- Variables CSS (couleurs, espacements, typographie)
- Components réutilisables (buttons, cards, forms)
- Grid system responsive
- Thème light/dark
- Documentation (Storybook)
- Tests (Stylelint)
- Build optimisé

Structure :
"""
design-system/
├── src/
│   ├── tokens/
│   │   ├── colors.scss
│   │   ├── spacing.scss
│   │   └── typography.scss
│   ├── components/
│   │   ├── button/
│   │   │   ├── button.scss
│   │   │   ├── button.stories.js
│   │   │   └── button.test.css
│   │   ├── card/
│   │   └── form/
│   └── main.scss
├── docs/
├── dist/
├── .stylelintrc
├── webpack.config.js
└── package.json

"""
PROJET 2 : SITE E-COMMERCE RESPONSIVE

Créer site e-commerce avec :
- Header sticky avec navigation
- Grid produits responsive (auto-fit)
- Filtres et sidebar
- Modal panier
- Formulaire checkout
- Footer
- Thème customizable
- Performance optimisée (Critical CSS)

Exigences :
- Mobile-first
- Accessibilité (WCAG AA)
- Performance (Lighthouse > 90)
- Cross-browser compatible
- BEM ou autre méthodologie


PROJET 3 : DASHBOARD ADMIN

Créer dashboard avec :
- Sidebar navigation
- Top bar avec user menu
- Grid de cards (stats)
- Charts et graphiques
- Tables responsives
- Dark mode toggle
- Notifications
- Settings panel

Technologies :
- CSS Grid pour layout
- Flexbox pour components
- Variables CSS pour thème
- Animations subtiles
- Glassmorphism effects


# ============================================================================
# [LISTE] RÉCAPITULATIF PARTIE 4
# ============================================================================

"""
[OK] CE QUE VOUS AVEZ APPRIS :

CHAPITRE 17 - VARIABLES CSS :
[WHITE_SQUARE] Créer et utiliser variables (--custom-property)
[WHITE_SQUARE] Portée et héritage
[WHITE_SQUARE] Système de design complet
[WHITE_SQUARE] Thèmes light/dark
[WHITE_SQUARE] Manipulation JavaScript
[WHITE_SQUARE] Calculs avec variables

CHAPITRE 18 - SASS :
[WHITE_SQUARE] Variables, nesting, mixins
[WHITE_SQUARE] @import et partials
[WHITE_SQUARE] @extend et placeholders
[WHITE_SQUARE] Fonctions et opérations
[WHITE_SQUARE] Boucles et conditions
[WHITE_SQUARE] Compilation Sass -> CSS

CHAPITRE 19 - MÉTHODOLOGIES :
[WHITE_SQUARE] BEM (Block Element Modifier)
[WHITE_SQUARE] OOCSS (Object-Oriented CSS)
[WHITE_SQUARE] SMACSS (5 catégories)
[WHITE_SQUARE] ITCSS (Triangle inversé)
[WHITE_SQUARE] Atomic CSS

CHAPITRE 20 - PERFORMANCE :
[WHITE_SQUARE] Optimiser sélecteurs
[WHITE_SQUARE] Minification et compression
[WHITE_SQUARE] Critical CSS
[WHITE_SQUARE] PurgeCSS
[WHITE_SQUARE] Mesurer performance

CHAPITRE 21 - FRAMEWORKS :
[WHITE_SQUARE] Bootstrap, Tailwind, Bulma
[WHITE_SQUARE] Quand utiliser framework
[WHITE_SQUARE] Personnalisation
[WHITE_SQUARE] Tendances actuelles

CHAPITRE 22 - PRODUCTION :
[WHITE_SQUARE] Architecture projet (7-1)
[WHITE_SQUARE] Workflow développement
[WHITE_SQUARE] Tests et validation
[WHITE_SQUARE] Build et déploiement
[WHITE_SQUARE] Documentation


[OBJECTIF] CHECKLIST NIVEAU EXPERT :

ORGANISATION :
[WHITE_SQUARE] Structurer projet avec 7-1 pattern
[WHITE_SQUARE] Utiliser méthodologie (BEM)
[WHITE_SQUARE] Documenter code (comments, README)
[WHITE_SQUARE] Versionner avec Git

DÉVELOPPEMENT :
[WHITE_SQUARE] Utiliser variables CSS + Sass
[WHITE_SQUARE] Créer mixins réutilisables
[WHITE_SQUARE] Respecter conventions nommage
[WHITE_SQUARE] Linter code (Stylelint)

PERFORMANCE :
[WHITE_SQUARE] Minifier CSS production
[WHITE_SQUARE] Purger CSS inutilisé
[WHITE_SQUARE] Implémenter Critical CSS
[WHITE_SQUARE] Optimiser animations

QUALITÉ :
[WHITE_SQUARE] Tests cross-browser
[WHITE_SQUARE] Validation W3C
[WHITE_SQUARE] Accessibilité (WCAG)
[WHITE_SQUARE] Performance (Lighthouse > 90)

PROFESSIONNEL :
[WHITE_SQUARE] Build process (Webpack/Vite)
[WHITE_SQUARE] Documentation (Storybook)
[WHITE_SQUARE] Tests automatisés
[WHITE_SQUARE] CI/CD pipeline


# ============================================================================
# [BRAVO] FIN DE LA PARTIE 4 & DU GUIDE COMPLET CSS
# ============================================================================

[BRAVO] FÉLICITATIONS ! [BRAVO]

Vous avez complété le guide CSS ultra-détaillé complet !

Vous maîtrisez maintenant :
[OK] Fondamentaux CSS (Partie 1)
[OK] Layouts Responsive (Partie 2)
[OK] Design Avancé (Partie 3)
[OK] Niveau Professionnel (Partie 4)


[GRAPHIQUE] VOTRE NIVEAU :

Vous êtes désormais capable de :
• Créer n'importe quel layout moderne
• Développer design systems complets
• Optimiser performance CSS
• Travailler en équipe professionnelle
• Résoudre problèmes CSS complexes
• Continuer apprentissage autonome


[RAPIDE] PROCHAINES ÉTAPES :

1. Pratiquer avec projets réels
2. Contribuer open-source
3. Créer portfolio professionnel
4. Apprendre frameworks JS (React, Vue)
5. Explorer CSS moderne (Container Queries, :has(), etc.)
6. Se tenir à jour avec nouveautés


[DOCS] RESSOURCES FINALES :

Documentation :
- MDN Web Docs
- CSS-Tricks
- Web.dev

Communautés :
- CSS Discord servers
- Reddit r/css
- CodePen
- DEV.to

Newsletters :
- CSS Weekly
- Frontend Focus
- Smashing Magazine


[LOVE_LETTER] MERCI !

Merci d'avoir suivi ce guide jusqu'au bout.
Vous avez investi 50-70 heures pour maîtriser CSS.

Continuez à pratiquer, expérimenter, et créer !
Le CSS évolue constamment, restez curieux.

Bon développement ! [DESIGN]*