# ============================================================================
# [LIVRE] HTML & CSS - GUIDE ULTRA-DÉTAILLÉ POUR ÉTUDIANTS EN GÉNIE LOGICIEL
# ============================================================================
#
# [OBJECTIF] GUIDE COMPLET POUR MAÎTRISER HTML & CSS DE ZÉRO À EXPERT
#
# Ce guide est organisé en 5 parties progressives :
#
# PARTIE 1 : FONDAMENTAUX HTML (Chapitres 0-4)
# - Chapitre 0 : Introduction à HTML et au Web
# - Chapitre 1 : Structure HTML, Balises et Attributs
# - Chapitre 2 : Texte, Liens et Images
# - Chapitre 3 : Listes, Tableaux et Formulaires
# - Chapitre 4 : HTML5 Sémantique et Accessibilité
#
# PARTIE 2 : FONDAMENTAUX CSS (Chapitres 5-9)
# - Chapitre 5 : Introduction au CSS et Sélecteurs
# - Chapitre 6 : Le Modèle de Boîte (Box Model)
# - Chapitre 7 : Couleurs, Typographie et Arrière-plans
# - Chapitre 8 : Positionnement et Display
# - Chapitre 9 : Flexbox (Layout Moderne)
#
# PARTIE 3 : CSS AVANCÉ (Chapitres 10-14)
# - Chapitre 10 : CSS Grid (Layout 2D)
# - Chapitre 11 : Responsive Design et Media Queries
# - Chapitre 12 : Animations et Transitions CSS
# - Chapitre 13 : Pseudo-classes et Pseudo-éléments
# - Chapitre 14 : Variables CSS (Custom Properties)
#
# PARTIE 4 : TECHNIQUES MODERNES (Chapitres 15-18)
# - Chapitre 15 : CSS Architecture (BEM, OOCSS)
# - Chapitre 16 : Formulaires Avancés et Validation
# - Chapitre 17 : Icônes, Polices Web et SVG
# - Chapitre 18 : Performance et Optimisation
#
# PARTIE 5 : PROJETS ET BONNES PRATIQUES (Chapitres 19-20)
# - Chapitre 19 : Accessibilité (a11y)
# - Chapitre 20 : Best Practices et Checklist Professionnelle
#
# [TEMPS] TEMPS DE LECTURE TOTAL : ~20-25 heures
# [DOCS] PRÉREQUIS : Aucun (guide pour grand débutant)
#
# [IDEE] COMMENT UTILISER CE GUIDE :
# 1. Lisez les parties dans l'ordre
# 2. Testez TOUS les exemples dans un navigateur
# 3. Créez vos propres projets
# 4. Utilisez ce guide comme référence permanente
#
# ============================================================================

"""
[OBJECTIF] PHILOSOPHIE DE CE GUIDE

COMMENT ? -> Explications pas à pas avec code
POURQUOI ? -> Raisons techniques et contexte
QUAND ? -> Cas d'usage concrets
PRATIQUE -> Exemples réels et exercices

Ce guide vise à être VOTRE SEULE RÉFÉRENCE HTML/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
[WEB] Rendu dans le navigateur
"""


# ============================================================================
# ═══════════════════════════════════════════════════════════════════════════
# PARTIE 1 : FONDAMENTAUX HTML
# ═══════════════════════════════════════════════════════════════════════════
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 0 : INTRODUCTION À HTML ET AU WEB
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Comment fonctionne le Web
[OK] Ce qu'est HTML et pourquoi il existe
[OK] La différence entre HTML, CSS et JavaScript
[OK] Comment créer et ouvrir votre premier fichier HTML
[OK] La structure minimale d'une page HTML
"""


# ----------------------------------------------------------------------------
# [WEB] COMMENT FONCTIONNE LE WEB ?
# ----------------------------------------------------------------------------

"""
LE CYCLE REQUÊTE-RÉPONSE


CLIENT (Navigateur)         INTERNET           SERVEUR
     │                                           │
     │  1. Tape URL dans barre d'adresse         │
     │  https://www.example.com                  │
     │                                           │
     │──────── 2. Requête HTTP GET ─────────────[BLACK_RIGHT-POINTING_POINTER]│
     │                                           │
     │                               3. Cherche  │
     │                               les fichiers│
     │                               HTML,CSS,JS │
     │                                           │
     │[BLACK_LEFT-POINTING_POINTER]──────── 4. Réponse HTTP ────────────────-│
     │           (HTML + CSS + JS)               │
     │                                           │
     │  5. Navigateur lit HTML                   │
     │  6. Applique CSS (style)                  │
     │  7. Exécute JavaScript (interaction)      │
     │  8. AFFICHE LA PAGE                       │


[IDEE] LES 3 TECHNOLOGIES DU WEB

                    PAGE WEB
                       │
         ┌─────────────┼─────────────┐
         │             │             │
        HTML          CSS        JavaScript
         │             │             │
    "Squelette"    "Habillage"   "Cerveau"
    Structure      Apparence    Comportement
    Contenu        Style        Interaction
         │             │             │
    <h1>Titre</h1>  color: red   button.click()
    <p>Texte</p>    font: Arial  animation
    <img src="..."> background   form validate


ANALOGIE [ACCUEIL] CONSTRUCTION D'UNE MAISON

HTML = Structure : murs, planchers, portes, fenêtres
CSS  = Décoration : peinture, meubles, rideaux
JS   = Fonctionnalités : électricité, plomberie, chauffage


POURQUOI APPRENDRE HTML/CSS POUR UN INGÉNIEUR LOGICIEL ?

[OK] COMPRÉHENSION DU WEB
   Tout développeur doit comprendre les bases du web

[OK] COMMUNICATION AVEC FRONTEND DEVELOPERS
   Parler le même langage

[OK] DÉVELOPPEMENT FULL-STACK
   Flask, Django, etc. génèrent du HTML

[OK] PROTOTYPAGE RAPIDE
   Créer des interfaces pour démontrer des concepts

[OK] DÉBOGAGE
   Inspecter les problèmes d'affichage

[OK] LECTURE DE CODE
   Comprendre les templates HTML dans les projets
"""


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

"""
CE DONT VOUS AVEZ BESOIN (GRATUIT !)


1. UN ÉDITEUR DE CODE
───────────────────────
RECOMMANDÉ : Visual Studio Code (VS Code)
   - Gratuit, open-source
   - Extensions utiles
   - Télécharger : https://code.visualstudio.com/

EXTENSIONS VS CODE UTILES :
   - "Live Server" : Recharge la page automatiquement
   - "HTML CSS Support" : Autocomplétion
   - "Prettier" : Formatage automatique
   - "HTML Snippets" : Raccourcis code


2. UN NAVIGATEUR WEB
───────────────────────
RECOMMANDÉ : Google Chrome ou Firefox
   - Outils de développement (F12)
   - Inspecteur d'éléments
   - Console JavaScript


3. CRÉER VOTRE PREMIER FICHIER HTML
───────────────────────────────────

Étape 1 : Ouvrez VS Code
Étape 2 : Créez un nouveau fichier
Étape 3 : Sauvegardez avec l'extension .html
          Par exemple : index.html
Étape 4 : Tapez votre code HTML
Étape 5 : Ouvrez dans le navigateur


RACCOURCI HTML5 DANS VS CODE :

1. Créez index.html
2. Tapez exactement : html:5
3. Appuyez sur TAB
4. VS Code génère automatiquement la structure de base !

Ou tapez : !
Puis appuyez sur TAB
"""


# ----------------------------------------------------------------------------
# [FICHIER] VOTRE PREMIÈRE PAGE HTML
# ----------------------------------------------------------------------------

"""
CRÉER index.html
"""

# Votre tout premier fichier HTML :
"""
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma Première Page</title>
</head>
<body>
    <h1>Bonjour le Monde !</h1>
    <p>Voici ma première page web. [BRAVO]</p>
</body>
</html>
"""

"""
[IDEE] DÉCRYPTAGE LIGNE PAR LIGNE


LIGNE 1 : <!DOCTYPE html>
─────────────────────────
[REFLEXION] QU'EST-CE QUE C'EST ?
   Une déclaration (pas une balise HTML) qui dit au navigateur :
   "Ce fichier est du HTML version 5"

[REFLEXION] POURQUOI ?
   Avant HTML5, il existait plusieurs versions (HTML 4, XHTML 1.0...)
   Chaque version avait sa propre déclaration DOCTYPE complexe.
   HTML5 a simplifié ça à juste : <!DOCTYPE html>

[ATTENTION] TOUJOURS mettre EN PREMIER, avant même <html>
[OK] Toujours minuscule dans HTML5 : <!DOCTYPE html>


LIGNE 2 : <html lang="fr">
──────────────────────────
[REFLEXION] QU'EST-CE QUE C'EST ?
   L'élément racine qui contient TOUTE la page
   lang="fr" = la langue de la page est le français

[REFLEXION] POURQUOI lang ?
   - Aide les lecteurs d'écran (accessibilité)
   - Aide les moteurs de recherche (SEO)
   - Permet le bon rendu typographique
   - lang="en" pour anglais, lang="ar" pour arabe, etc.

[ATTENTION] Tout le HTML doit être DANS <html>...</html>


LIGNES 3-7 : <head>...</head>
──────────────────────────────
[REFLEXION] QU'EST-CE QUE C'EST ?
   La "tête" de la page - contient les MÉTADONNÉES
   Le contenu de <head> n'est PAS visible dans la page

[REFLEXION] QU'EST-CE QU'UNE MÉTADONNÉE ?
   Informations SUR la page, pas le contenu DE la page
   - Titre de l'onglet
   - Encodage des caractères
   - Liens vers CSS
   - Scripts JavaScript
   - Informations pour SEO

LIGNE 4 : <meta charset="UTF-8">
   charset = jeu de caractères
   UTF-8 = encoding qui supporte TOUS les caractères :
   - Français (é, à, ç, ê...)
   - Arabe, Chinois, Japonais...
   - Emojis [BRAVO]
   [ATTENTION] Sans ça : caractères spéciaux cassés !

LIGNE 5 : <meta name="viewport"...>
   Indispensable pour le responsive design (mobile)
   width=device-width : Largeur = largeur de l'écran
   initial-scale=1.0 : Zoom initial = 100%
   [ATTENTION] Sans ça : page non lisible sur mobile !

LIGNE 6 : <title>Ma Première Page</title>
   Texte affiché dans l'ONGLET du navigateur
   Aussi utilisé par les moteurs de recherche


LIGNES 8-11 : <body>...</body>
──────────────────────────────
[REFLEXION] QU'EST-CE QUE C'EST ?
   Le "corps" - contient TOUT le contenu VISIBLE de la page
   Text, images, liens, boutons... tout va ici !


LIGNE 9 : <h1>Bonjour le Monde !</h1>
   h1 = Heading 1 = Titre de niveau 1
   Plus grand et plus important titre de la page

LIGNE 10 : <p>Voici ma première page web.</p>
   p = Paragraph = Paragraphe de texte


[WEB] DANS LE NAVIGATEUR :
   ┌─────────────────────────────────────┐
   │ Tab: Ma Première Page          [x] │
   ├─────────────────────────────────────┤
   │                                     │
   │  Bonjour le Monde !                 │  <- gros titre
   │                                     │
   │  Voici ma première page web. [BRAVO]     │  <- paragraphe
   │                                     │
   └─────────────────────────────────────┘
"""


# ----------------------------------------------------------------------------
# [CONSTRUCTION] ANATOMIE D'UNE BALISE HTML
# ----------------------------------------------------------------------------

"""
UNE BALISE = UN ÉLÉMENT HTML

SYNTAXE DE BASE :

      Balise ouvrante    Contenu    Balise fermante
            │               │             │
            [BLACK_DOWN-POINTING_TRIANGLE]               [BLACK_DOWN-POINTING_TRIANGLE]             [BLACK_DOWN-POINTING_TRIANGLE]
        <h1>    Bonjour le Monde !    </h1>
        ┌─┘                              └─┐
        │                                  │
   nom de balise                      nom de balise
   (même nom)                         (même nom)


BALISE AVEC ATTRIBUT :

    <img src="photo.jpg" alt="Ma photo" width="300">
     │    │             │               │
     │    │             │               └── Attribut 3
     │    │             └────────────────── Attribut 2
     │    └──────────────────────────────── Attribut 1
     └───────────────────────────────────── Nom de balise


ANATOMIE D'UN ATTRIBUT :

        Nom        Valeur
         │           │
         [BLACK_DOWN-POINTING_TRIANGLE]           [BLACK_DOWN-POINTING_TRIANGLE]
        src  =  "photo.jpg"
                ^         ^
              guillemets  guillemets
            (toujours utiliser)


BALISES VIDES (auto-fermantes) :
Certaines balises n'ont PAS de contenu et PAS de balise fermante :

<br>          -> Saut de ligne
<hr>          -> Ligne horizontale
<img>         -> Image
<input>       -> Champ de formulaire
<meta>        -> Métadonnée
<link>        -> Lien vers fichier externe

[ATTENTION] En HTML5, l'espace avant /> est OPTIONNEL mais courant
   <br> et <br /> sont tous les deux valides


IMBRICATION (NESTING) :

[OK] CORRECT :
<p>Voici du <strong>texte en gras</strong> dans un paragraphe.</p>

[X] INCORRECT (chevauchement) :
<p>Voici du <strong>texte</p></strong>  <- JAMAIS faire ça !


RÈGLE FONDAMENTALE :
La balise ouverte EN DERNIER doit être fermée EN PREMIER.
Comme des parenthèses imbriquées : (( ))
"""


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

"""
CE QUE VOUS AVEZ APPRIS

[OK] Le Web = Client/Serveur avec requêtes HTTP
[OK] HTML = Structure, CSS = Style, JS = Comportement
[OK] Structure minimale d'une page HTML
[OK] <!DOCTYPE html>, <html>, <head>, <body>
[OK] Anatomie d'une balise et d'un attribut
[OK] Balises vides vs balises avec contenu
[OK] Règle d'imbrication des balises


[CLE] POINTS CLÉS

1. TOUJOURS commencer par <!DOCTYPE html>
2. lang="fr" sur <html> pour l'accessibilité
3. charset="UTF-8" pour les caractères spéciaux
4. viewport pour le responsive mobile
5. <head> = invisible, <body> = visible


-> PROCHAINE ÉTAPE : Chapitre 1 - Structure HTML et Balises
"""


# ============================================================================
# [GUIDE] CHAPITRE 1 : STRUCTURE HTML, BALISES ET ATTRIBUTS
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Utiliser les balises de titre (h1-h6)
[OK] Structurer du texte avec les balises courantes
[OK] Comprendre les éléments block vs inline
[OK] Utiliser les commentaires HTML
[OK] Valider votre HTML
"""


# ----------------------------------------------------------------------------
# [NEWSPAPER] TITRES (HEADINGS)
# ----------------------------------------------------------------------------

"""
LES 6 NIVEAUX DE TITRES

HTML offre 6 niveaux de titres, de h1 (le plus important) à h6 (le moins important).
"""

# Exemple complet :
"""
<h1>Titre de niveau 1 - Le plus grand</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6 - Le plus petit</h6>
"""

"""
[WEB] DANS LE NAVIGATEUR (taille relative) :

# Titre de niveau 1    <- taille ~32px, très gros
## Titre de niveau 2   <- taille ~24px
### Titre de niveau 3  <- taille ~18px
#### Titre de niveau 4 <- taille ~16px, gras
##### Titre de niveau 5 <- taille ~14px, gras
###### Titre de niveau 6 <- taille ~12px, gras


[IDEE] RÈGLES D'UTILISATION DES TITRES

STRUCTURE LOGIQUE (comme un document Word) :
"""

# [OK] CORRECT - Hiérarchie logique
"""
<h1>Mon Blog de Cuisine</h1>        <- 1 seul h1 par page !

    <h2>Recettes Françaises</h2>
        <h3>Plats Principaux</h3>
            <h4>Bœuf Bourguignon</h4>
        <h3>Desserts</h3>
            <h4>Tarte Tatin</h4>

    <h2>Recettes Italiennes</h2>
        <h3>Pâtes</h3>
            <h4>Carbonara</h4>
"""

# [X] INCORRECT - Sauter des niveaux ou mauvaise structure
"""
<h1>Titre principal</h1>
<h4>Sous-section</h4>    <- Saute h2 et h3 !
<h2>Section</h2>         <- Revient à h2 après h4 !
"""

"""
[CLE] RÈGLES FONDAMENTALES DES TITRES

1. UN SEUL h1 PAR PAGE
   Le h1 = sujet principal de la page
   Comme le titre d'un journal

2. HIÉRARCHIE STRICTE
   Ne jamais sauter de niveau (h1 -> h3 sans h2)
   
3. TITRES ≠ STYLE
   N'utilisez pas h3 parce qu'il "a la bonne taille"
   Utilisez CSS pour styler les titres !
   
4. IMPORTANCE SÉMANTIQUE
   Les moteurs de recherche (Google) lisent les titres
   Importance : h1 > h2 > h3 > h4 > h5 > h6

[REFLEXION] POURQUOI ça importe pour le SEO ?
   Google scanne les titres pour comprendre le contenu
   h1 = "Le sujet principal de cette page est..."
"""


# ----------------------------------------------------------------------------
# [NOTE] PARAGRAPHES ET TEXTE
# ----------------------------------------------------------------------------

"""
BALISES DE TEXTE COURANTES
"""

# Exemple complet de texte formaté :
"""
<!-- Paragraphe standard -->
<p>Ceci est un paragraphe. En HTML, les espaces multiples
   et les retours à la ligne dans le code source
   sont ignorés par le navigateur.</p>

<!-- Saut de ligne (dans un paragraphe) -->
<p>Première ligne.<br>
Deuxième ligne du même paragraphe.</p>

<!-- Ligne horizontale (séparateur) -->
<hr>

<!-- Texte en gras (importance sémantique) -->
<p>Ceci est <strong>très important</strong> à retenir.</p>

<!-- Texte en gras (juste visuel, sans importance) -->
<p>Texte en <b>gras</b> pour décoration.</p>

<!-- Texte en italique (emphase sémantique) -->
<p>Le terme <em>polymorphisme</em> est fondamental en POO.</p>

<!-- Texte en italique (juste visuel) -->
<p>Titre du livre : <i>Clean Code</i></p>

<!-- Texte souligné -->
<p>Ceci est <u>souligné</u>.</p>

<!-- Texte barré -->
<p>Prix original : <del>100€</del> -> Prix solde : <ins>75€</ins></p>

<!-- Exposant et indice -->
<p>H<sub>2</sub>O et E = mc<sup>2</sup></p>

<!-- Code inline -->
<p>Utilisez <code>print("Hello")</code> en Python.</p>

<!-- Bloc de code préformaté -->
<pre><code>
def hello():
    print("Hello World")
    return True
</code></pre>

<!-- Citation courte (inline) -->
<p>Comme disait Churchill : <q>Never give up.</q></p>

<!-- Citation longue (bloc) -->
<blockquote cite="https://source.com">
    <p>Le code est plus souvent lu qu'écrit.</p>
    <footer>— Guido van Rossum</footer>
</blockquote>

<!-- Texte de petite taille -->
<p>Prix TTC <small>(TVA incluse)</small></p>

<!-- Mise en évidence -->
<p>Résultat : <mark>98/100</mark> [OK]</p>

<!-- Abréviation -->
<p><abbr title="Cascading Style Sheets">CSS</abbr> est indispensable.</p>
"""

"""
[IDEE] STRONG vs B, EM vs I : QUELLE DIFFÉRENCE ?

QUESTION FRÉQUENTE : Quelle est la différence entre <strong> et <b> ?

<strong> = SÉMANTIQUE (importance)
   Signifie : "Ce texte est IMPORTANT"
   Les lecteurs d'écran lisent ce texte avec emphase
   Les moteurs de recherche accordent plus d'importance

<b> = PRÉSENTATIF (style seulement)
   Signifie : "Ce texte est en gras par convention typographique"
   Pas d'importance ajoutée
   Exemple : Noms de produits dans un catalogue

MÊME CHOSE pour <em> vs <i> :

<em> = SÉMANTIQUE (emphase sur le sens)
   "Ce texte change le SENS de la phrase"
   Exemple : "Je n'ai PAS dit qu'il avait volé l'argent."

<i> = PRÉSENTATIF (italique typographique)
   Termes techniques, mots étrangers, titres d'œuvres
   Exemple : <i>Carpe Diem</i>


RÈGLE PRATIQUE :
Si vous voulez METTRE EN ÉVIDENCE quelque chose d'important -> <strong>
Si vous voulez juste du gras pour la typographie -> <b>
Pour l'emphase qui change le sens -> <em>
Pour l'italique typographique standard -> <i>
"""


# ----------------------------------------------------------------------------
# [BLEU] BLOCK VS INLINE
# ----------------------------------------------------------------------------

"""
DEUX TYPES FONDAMENTAUX D'ÉLÉMENTS HTML


ÉLÉMENTS BLOCK :
───────────────
Prennent TOUTE la largeur disponible
Commencent TOUJOURS sur une nouvelle ligne
Peuvent contenir d'autres éléments block ET inline

Exemples :
<h1>à<h6>  <p>  <div>  <ul>  <ol>  <li>
<table>  <form>  <section>  <article>
<header>  <footer>  <nav>  <main>


ÉLÉMENTS INLINE :
─────────────────
Prennent seulement la largeur de leur contenu
Restent sur la MÊME ligne que le texte
Ne doivent contenir QUE d'autres éléments inline

Exemples :
<a>  <strong>  <em>  <span>
<img>  <code>  <br>  <abbr>


VISUALISATION :

┌────────────────────────────────────────────┐
│  <div>                                     │ <- BLOCK (toute la largeur)
│                                            │
│  <p>Voici du texte <strong>gras</strong>   │
│  et du texte <em>italique</em>.</p>        │
│   │                │              │        │
│   │                └──────────────┘        │
│   │              (éléments inline côte à   │
│   │               côte dans le texte)      │
│   │                                        │
│   └── <p> est BLOCK (nouvelle ligne)       │
│                                            │
└────────────────────────────────────────────┘


EXEMPLES PRATIQUES :
"""

# [OK] CORRECT : Inline dans block
"""
<p>
    Du texte avec <strong>du gras</strong> et <em>de l'italique</em>.
</p>
"""

# [OK] CORRECT : Block dans block
"""
<div>
    <h2>Section</h2>
    <p>Paragraphe</p>
</div>
"""

# [X] INCORRECT : Block dans inline
"""
<span>
    <p>Jamais mettre un paragraphe dans un span !</p>
</span>
"""

# [X] INCORRECT : Block dans paragraphe
"""
<p>
    <div>Un div dans un paragraphe est invalide !</div>
</p>
"""

"""
[IDEE] DIV ET SPAN : LES CONTENEURS GÉNÉRIQUES

<div> = Division = Conteneur BLOCK générique
    Utilisé pour grouper d'autres éléments block
    Sert de "boîte" pour le CSS et JavaScript

<span> = Conteneur INLINE générique
    Utilisé pour cibler une partie de texte
    Pour appliquer du style CSS à une partie de texte
"""

# Exemples d'utilisation :
"""
<!-- div pour grouper et styliser une section -->
<div class="card">
    <h3>Mon Article</h3>
    <p>Contenu de l'article...</p>
</div>

<!-- span pour cibler du texte dans un paragraphe -->
<p>
    La réponse est <span class="highlight">42</span>.
</p>
"""


# ----------------------------------------------------------------------------
# [SPEECH_BALLOON] COMMENTAIRES HTML
# ----------------------------------------------------------------------------

"""
SYNTAXE DES COMMENTAIRES
"""

# Commentaire sur une ligne :
"""
<!-- Ceci est un commentaire HTML -->
"""

# Commentaire sur plusieurs lignes :
"""
<!--
    Ceci est un commentaire
    sur plusieurs lignes
    Il peut contenir du HTML désactivé :
    <p>Ce paragraphe ne sera pas affiché</p>
-->
"""

# Utilisation pratique :
"""
<!-- NAVIGATION -->
<nav>
    <!-- Menu principal -->
    <ul>
        <li><a href="/">Accueil</a></li>
        <!-- <li><a href="/admin">Admin</a></li>   Désactivé temporairement -->
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>
<!-- FIN NAVIGATION -->
"""

"""
[IDEE] QUAND UTILISER LES COMMENTAIRES

[OK] BONS USAGES :
- Expliquer du code complexe
- Marquer le début/fin de sections
- Désactiver temporairement du code
- TODOs et notes de développement

[X] MAUVAIS USAGES :
- Commenter chaque ligne (le code HTML devrait être lisible)
- Laisser du vieux code commenté pendant des mois
- Mettre des informations sensibles (mots de passe, etc.)

[ATTENTION] ATTENTION :
Les commentaires HTML sont VISIBLES dans le code source
("Clic droit -> Afficher le code source" dans le navigateur)
Ne jamais y mettre d'informations confidentielles !
"""


# ----------------------------------------------------------------------------
# [WEB] ENCODAGE ET ENTITÉS HTML
# ----------------------------------------------------------------------------

"""
ENTITÉS HTML : CARACTÈRES SPÉCIAUX

Certains caractères ont une signification spéciale en HTML
(comme < et >) et doivent être "échappés" avec des entités.


ENTITÉS ESSENTIELLES :

Caractère   Entité    Nom
─────────────────────────────────────
<           &lt;      less than
>           &gt;      greater than
&           &amp;     ampersand
"           &quot;    quotation mark
'           &apos;    apostrophe
 (espace)   &nbsp;    non-breaking space
©           &copy;    copyright
®           &reg;     registered
™           &trade;   trademark
€           &euro;    euro
£           &pound;   pound
->           &rarr;    right arrow
<-           &larr;    left arrow
<->           &harr;    left-right arrow
*           &#9733;   star (notation décimale)
[OK]           &#10003;  checkmark


EXEMPLES D'UTILISATION :
"""

"""
<!-- Sans entités - INCORRECT ! -->
<p>3 < 5 et 7 > 4</p>   <- Le navigateur peut confondre < avec une balise !

<!-- Avec entités - CORRECT -->
<p>3 &lt; 5 et 7 &gt; 4</p>

<!-- Copyright -->
<footer>
    <p>&copy; 2024 MonSite.com. Tous droits réservés.</p>
</footer>

<!-- Prix en euros -->
<p>Prix : 29&euro;99</p>

<!-- Espace insécable (empêche le retour à la ligne) -->
<p>M.&nbsp;Dupont est arrivé.</p>   <- "M." et "Dupont" restent ensemble

<!-- Code HTML dans une page (pour documentation) -->
<p>Utilisez la balise <code>&lt;p&gt;</code> pour les paragraphes.</p>
"""


# ----------------------------------------------------------------------------
# [COURS] EXERCICE PRATIQUE 1 : PAGE ARTICLE
# ----------------------------------------------------------------------------

"""
OBJECTIF : Créer une page d'article de blog


CAHIER DES CHARGES :

1. Structure correcte avec DOCTYPE, html, head, body
2. Un titre h1 pour le nom du blog
3. Un titre h2 pour l'article
4. Date et auteur (avec balises appropriées)
5. Au moins 2 paragraphes
6. Utilisation de strong, em, mark
7. Une citation avec blockquote
8. Une ligne séparatrice
9. Un pied de page avec copyright


SOLUTION :
"""

"""
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Article - Mon Blog Tech</title>
</head>
<body>

    <!-- En-tête du site -->
    <h1>Mon Blog Tech</h1>
    <p><em>Un blog pour les passionnés de technologie</em></p>

    <hr>

    <!-- Article principal -->
    <article>
        <h2>Introduction à l'Intelligence Artificielle</h2>

        <!-- Métadonnées de l'article -->
        <p>
            <strong>Auteur :</strong> Alice Martin |
            <strong>Date :</strong> <time datetime="2024-12-18">18 décembre 2024</time> |
            <strong>Lecture :</strong> 5 min
        </p>

        <hr>

        <!-- Contenu -->
        <p>
            L'<mark>Intelligence Artificielle</mark> (IA) est aujourd'hui
            partout : dans nos smartphones, nos voitures, et même nos
            réfrigérateurs. Mais qu'est-ce que c'est exactement ?
        </p>

        <p>
            En termes simples, l'IA est la capacité d'une machine à
            <strong>imiter l'intelligence humaine</strong>. Cela inclut
            l'apprentissage, le raisonnement, et la résolution de problèmes.
            Le terme a été inventé en <em>1956</em> lors d'une conférence à
            Dartmouth.
        </p>

        <!-- Citation -->
        <blockquote>
            <p>
                "Toute suffisamment avancée technologie est
                indiscernable de la magie."
            </p>
            <footer>— Arthur C. Clarke</footer>
        </blockquote>

        <p>
            Les applications concrètes incluent la
            <abbr title="Natural Language Processing">NLP</abbr>,
            la vision par ordinateur, et les systèmes de recommandation
            (comme Netflix ou Spotify).
        </p>

    </article>

    <hr>

    <!-- Pied de page -->
    <footer>
        <p><small>&copy; 2024 Mon Blog Tech. Tous droits réservés.</small></p>
    </footer>

</body>
</html>
"""

"""
[OBJECTIF] TESTEZ VOTRE SOLUTION

1. Créez un fichier article.html
2. Copiez ce code
3. Ouvrez dans le navigateur
4. Vérifiez que :
   - Le titre apparaît dans l'onglet
   - La hiérarchie des titres est visible
   - Les formatages (gras, italique) fonctionnent
   - La citation est en retrait
   - Le pied de page est visible
"""


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

"""
CE QUE VOUS AVEZ APPRIS

[OK] Titres h1 à h6 et hiérarchie
[OK] Balises de texte (p, strong, em, mark, code, etc.)
[OK] Différence sémantique : strong vs b, em vs i
[OK] Éléments block vs inline
[OK] div et span (conteneurs génériques)
[OK] Commentaires HTML
[OK] Entités HTML (&lt;, &amp;, &copy;, etc.)


[CLE] POINTS CLÉS

1. Un SEUL h1 par page
2. Respecter la hiérarchie h1->h2->h3
3. Block ne va PAS dans inline
4. < doit être écrit &lt; dans le texte
5. Commentaires = visibles dans le code source
"""


# ============================================================================
# [GUIDE] CHAPITRE 2 : TEXTE, LIENS ET IMAGES
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Créer des liens hypertextes (absolus et relatifs)
[OK] Ouvrir des liens dans un nouvel onglet
[OK] Insérer et optimiser des images
[OK] Créer des liens d'ancrage
[OK] Liens email et téléphone
[OK] Image map et figure
"""


# ----------------------------------------------------------------------------
# [LIEN] LIENS HYPERTEXTES
# ----------------------------------------------------------------------------

"""
LA BALISE <a> (ANCHOR)

SYNTAXE :
<a href="URL">Texte cliquable</a>

L'attribut href (hypertext reference) = destination du lien
"""

# TYPES DE LIENS :
"""
<!-- 1. LIEN ABSOLU (URL complète) -->
<a href="https://www.google.com">Aller sur Google</a>
<a href="https://github.com">Mon GitHub</a>

<!-- 2. LIEN RELATIF (vers un fichier de votre site) -->
<!-- Même dossier -->
<a href="about.html">À propos</a>
<a href="contact.html">Contact</a>

<!-- Sous-dossier -->
<a href="pages/services.html">Nos Services</a>

<!-- Dossier parent -->
<a href="../index.html">Retour à l'accueil</a>

<!-- Deux dossiers en remontant -->
<a href="../../index.html">Accueil</a>

<!-- 3. ANCRAGE (vers une section de la même page) -->
<a href="#section-contact">Aller au contact</a>
<a href="#introduction">Lire l'introduction</a>

<!-- 4. LIEN EMAIL -->
<a href="mailto:contact@example.com">Nous écrire</a>
<a href="mailto:contact@example.com?subject=Demande d'info">Email avec sujet</a>

<!-- 5. LIEN TÉLÉPHONE (mobile) -->
<a href="tel:+33612345678">Appeler : +33 6 12 34 56 78</a>

<!-- 6. LIEN DE TÉLÉCHARGEMENT -->
<a href="documents/guide.pdf" download>Télécharger le guide</a>
<a href="documents/guide.pdf" download="mon-guide.pdf">Télécharger</a>
"""

"""
[IDEE] COMPRENDRE LES CHEMINS RELATIFS

Imaginons cette structure de fichiers :

mon-site/
├── index.html          <- Page d'accueil
├── about.html          <- Page À propos
├── contact.html        <- Page Contact
├── pages/
│   ├── services.html   <- Page Services
│   └── portfolio.html  <- Page Portfolio
├── blog/
│   ├── article1.html   <- Article 1
│   └── article2.html   <- Article 2
└── images/
    └── logo.png


DEPUIS index.html :
───────────────────
<a href="about.html">          -> about.html (même dossier)
<a href="contact.html">        -> contact.html (même dossier)
<a href="pages/services.html"> -> pages/services.html (sous-dossier)
<a href="images/logo.png">     -> images/logo.png (sous-dossier)


DEPUIS pages/services.html :
─────────────────────────────
<a href="../index.html">       -> remonte d'un dossier -> index.html
<a href="../about.html">       -> ../about.html
<a href="portfolio.html">      -> même dossier -> pages/portfolio.html
<a href="../blog/article1.html"> -> remonte puis descend


DEPUIS blog/article1.html :
────────────────────────────
<a href="../index.html">              -> retour à index.html
<a href="../pages/services.html">     -> ../pages/services.html
<a href="article2.html">             -> même dossier


[IDEE] ASTUCE : / au début = chemin ABSOLU depuis la racine du site
<a href="/index.html">   -> toujours index.html depuis la racine
<a href="/pages/services.html">   -> toujours depuis la racine
"""


# ----------------------------------------------------------------------------
# [OBJECTIF] ATTRIBUTS IMPORTANTS DES LIENS
# ----------------------------------------------------------------------------

"""
OUVRIR DANS UN NOUVEL ONGLET
"""

# target="_blank" ouvre dans un nouvel onglet/fenêtre :
"""
<a href="https://www.google.com" target="_blank">
    Ouvrir Google dans un nouvel onglet
</a>
"""

"""
[ATTENTION] SÉCURITÉ IMPORTANTE avec target="_blank"

Problème : Sans precaution, la page cible peut accéder
à votre page via window.opener (attaque "tabnapping")

Solution : Toujours ajouter rel="noopener noreferrer"
"""

# [OK] CORRECT et SÉCURISÉ :
"""
<a href="https://www.google.com"
   target="_blank"
   rel="noopener noreferrer">
    Ouvrir Google en sécurité
</a>
"""

# rel="noopener" -> Empêche accès à window.opener
# rel="noreferrer" -> Empêche envoi de l'URL référente


"""
AUTRES VALEURS DE target :

target="_blank"  -> Nouvel onglet/fenêtre
target="_self"   -> Même onglet (défaut)
target="_parent" -> Frame parent
target="_top"    -> Fenêtre principale
"""

"""
ÉTAT DES LIENS (pour CSS)

Le navigateur mémorise les liens visités :

a:link     -> Lien non visité (bleu par défaut)
a:visited  -> Lien visité (violet par défaut)
a:hover    -> Souris dessus
a:active   -> En cours de clic

On verra comment les styliser avec CSS au Chapitre 5.
"""


# ----------------------------------------------------------------------------
# [ANCHOR] ANCRES (NAVIGUER DANS LA PAGE)
# ----------------------------------------------------------------------------

"""
CRÉER UN ANCRAGE

Pour naviguer vers une section de la même page :
1. Donnez un id à l'élément cible
2. Créez un lien avec href="#id"
"""

"""
<!-- Table des matières -->
<nav>
    <h2>Table des matières</h2>
    <ul>
        <li><a href="#introduction">1. Introduction</a></li>
        <li><a href="#installation">2. Installation</a></li>
        <li><a href="#utilisation">3. Utilisation</a></li>
        <li><a href="#conclusion">4. Conclusion</a></li>
    </ul>
</nav>

<!-- Contenu (les cibles) -->
<section id="introduction">
    <h2>1. Introduction</h2>
    <p>Contenu de l'introduction...</p>
</section>

<section id="installation">
    <h2>2. Installation</h2>
    <p>Étapes d'installation...</p>
</section>

<section id="utilisation">
    <h2>3. Utilisation</h2>
    <p>Comment utiliser...</p>
</section>

<section id="conclusion">
    <h2>4. Conclusion</h2>
    <p>En conclusion...</p>
</section>

<!-- Lien retour en haut -->
<a href="#top">^ Retour en haut</a>
"""

"""
[IDEE] LIEN VERS UNE ANCRE SUR UNE AUTRE PAGE

<a href="page.html#section2">Voir la section 2 de page.html</a>

Le navigateur :
1. Charge page.html
2. Scroll automatiquement jusqu'à l'élément avec id="section2"
"""


# ----------------------------------------------------------------------------
# [FRAME_WITH_PICTURE] IMAGES
# ----------------------------------------------------------------------------

"""
LA BALISE <img>

<img src="chemin/image.jpg" alt="Description de l'image">

ATTRIBUTS OBLIGATOIRES :
- src  = Source (chemin vers l'image)
- alt  = Texte alternatif (TRÈS important !)

ATTRIBUTS OPTIONNELS :
- width  = Largeur en pixels
- height = Hauteur en pixels
- title  = Infobulle (survol)
- loading = lazy (chargement différé)
"""

# Exemples complets :
"""
<!-- Image locale (même dossier) -->
<img src="photo.jpg" alt="Photo de profil">

<!-- Image dans un sous-dossier -->
<img src="images/logo.png" alt="Logo de l'entreprise">

<!-- Image externe (URL absolue) -->
<img src="https://example.com/image.jpg" alt="Image externe">

<!-- Image avec dimensions -->
<img src="banner.jpg" alt="Bannière d'accueil" width="1200" height="400">

<!-- Image avec chargement différé (performance) -->
<img src="grande-image.jpg" alt="Grande image" loading="lazy">

<!-- Image décorative (pas d'alt ou alt vide) -->
<img src="decoration.png" alt="">   <- alt="" pour les lecteurs d'écran
"""

"""
[IDEE] L'ATTRIBUT ALT : POURQUOI EST-IL CRUCIAL ?

alt = "Alternate text" = Texte de remplacement

UTILISATION PAR LE NAVIGATEUR :
1. Affiché si l'image ne se charge pas
2. Lu par les lecteurs d'écran (personnes aveugles)
3. Indexé par Google Images
4. Affiché pendant le chargement

RÈGLES POUR UN BON ALT :
"""

# [OK] BON alt :
"""
<img src="chien.jpg" alt="Golden retriever jouant dans un parc">
<img src="logo.png" alt="Logo TechCorp - Retour à l'accueil">
<img src="graphique.png" alt="Graphique montrant une croissance de 45% en 2024">
<img src="portrait.jpg" alt="Alice Martin, PDG de TechCorp">
"""

# [X] MAUVAIS alt :
"""
<img src="chien.jpg" alt="image">          <- Trop générique
<img src="chien.jpg" alt="chien.jpg">      <- Nom du fichier
<img src="chien.jpg" alt="photo d'un animal domestique de race canine"> <- Trop verbeux
<img src="decoration.png" alt="">          <- [OK] OK pour image décorative
"""

"""
FORMATS D'IMAGES ET QUAND LES UTILISER

JPEG/JPG :
  Avantages : Petite taille de fichier, photos
  Inconvénients : Perte de qualité (compression lossy)
  [OK] Utiliser pour : Photos, images complexes

PNG :
  Avantages : Transparence, qualité parfaite
  Inconvénients : Fichier plus lourd
  [OK] Utiliser pour : Logos, icônes, captures d'écran

GIF :
  Avantages : Animations simples
  Inconvénients : 256 couleurs seulement
  [OK] Utiliser pour : Animations simples (préférer WebP maintenant)

SVG :
  Avantages : Vectoriel (pas de pixelisation !), léger
  Inconvénients : Pas pour les photos
  [OK] Utiliser pour : Logos, icônes, illustrations

WebP :
  Avantages : 30% plus léger que JPEG, supporte transparence et animation
  Inconvénients : Navigateurs anciens (mais 95%+ supporte maintenant)
  [OK] Utiliser pour : Tout ! Le format moderne recommandé

AVIF :
  Avantages : Encore plus léger que WebP
  Inconvénients : Support navigateur moins universel
  [OK] Utiliser pour : Sites modernes hautes performances
"""


# ----------------------------------------------------------------------------
# [FRAME_WITH_PICTURE] FIGURE ET FIGCAPTION
# ----------------------------------------------------------------------------

"""
ASSOCIER UNE IMAGE À SA LÉGENDE
"""

"""
<!-- Image avec légende (sémantique) -->
<figure>
    <img src="graphique-ventes.png"
         alt="Graphique des ventes 2024 montrant 45% de croissance"
         width="600">
    <figcaption>
        Figure 1 : Évolution des ventes en 2024.
        Source : Rapport annuel TechCorp.
    </figcaption>
</figure>
"""

"""
[IDEE] POURQUOI UTILISER FIGURE ?

<figure> permet d'associer sémantiquement :
- Une image à sa légende
- Du code à son explication
- Une citation à sa source

<figcaption> est DANS <figure> et peut être avant ou après le contenu.
"""

"""
<!-- figure pour du code -->
<figure>
    <pre><code>
def factorial(n):
    if n <= 1:
        return 1
    return n * factorial(n-1)
    </code></pre>
    <figcaption>Listing 1 : Calcul factoriel récursif en Python</figcaption>
</figure>
"""


# ----------------------------------------------------------------------------
# [COURS] EXERCICE PRATIQUE 2 : PAGE PORTFOLIO
# ----------------------------------------------------------------------------

"""
OBJECTIF : Créer une page portfolio avec liens et images


CAHIER DES CHARGES :

1. Navigation avec liens vers sections (ancres)
2. Section "À propos" avec photo (utilisez une URL externe)
3. Section "Projets" avec liens vers GitHub (nouvel onglet)
4. Section "Contact" avec lien email
5. Lien "Retour en haut"
6. Pied de page


SOLUTION :
"""

"""
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio - Alice Martin</title>
</head>
<body>

    <a id="top"></a>

    <!-- Navigation -->
    <nav>
        <a href="#about">À propos</a> |
        <a href="#projects">Projets</a> |
        <a href="#contact">Contact</a>
    </nav>

    <!-- Section À propos -->
    <section id="about">
        <h1>Alice Martin</h1>
        <h2>Ingénieure Logiciel</h2>

        <figure>
            <img src="https://via.placeholder.com/200x200"
                 alt="Photo de profil d'Alice Martin"
                 width="200">
            <figcaption>Alice Martin, développeuse full-stack</figcaption>
        </figure>

        <p>
            Passionnée par le développement web depuis <strong>5 ans</strong>,
            je me spécialise en <em>Python</em> et <em>JavaScript</em>.
        </p>
    </section>

    <hr>

    <!-- Section Projets -->
    <section id="projects">
        <h2>Mes Projets</h2>

        <article>
            <h3>Blog Personnel avec Flask</h3>
            <p>Application web avec authentification, base de données SQLite.</p>
            <p>
                <a href="https://github.com" target="_blank" rel="noopener noreferrer">
                    [LIEN] Voir sur GitHub
                </a> |
                <a href="https://demo.example.com" target="_blank" rel="noopener noreferrer">
                    [WEB] Voir la démo
                </a>
            </p>
        </article>

        <article>
            <h3>Application de Todo avec React</h3>
            <p>Frontend moderne avec hooks, localStorage et animations.</p>
            <p>
                <a href="https://github.com" target="_blank" rel="noopener noreferrer">
                    [LIEN] Voir sur GitHub
                </a>
            </p>
        </article>
    </section>

    <hr>

    <!-- Section Contact -->
    <section id="contact">
        <h2>Contact</h2>
        <p>
            [EMAIL] <a href="mailto:alice@example.com">alice@example.com</a>
        </p>
        <p>
            [PRO] <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer">
                LinkedIn
            </a>
        </p>
        <p>
            [MOBILE] <a href="tel:+33612345678">+33 6 12 34 56 78</a>
        </p>
    </section>

    <p><a href="#top">^ Retour en haut</a></p>

    <footer>
        <p><small>&copy; 2024 Alice Martin</small></p>
    </footer>

</body>
</html>
"""


# ============================================================================
# [GUIDE] CHAPITRE 3 : LISTES, TABLEAUX ET FORMULAIRES
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Créer des listes non ordonnées, ordonnées et de définition
[OK] Imbriquer des listes
[OK] Créer des tableaux avec en-têtes, corps et pied
[OK] Créer des formulaires complets
[OK] Utiliser tous les types d'inputs
[OK] Valider des formulaires côté HTML
"""


# ----------------------------------------------------------------------------
# [LISTE] LISTES
# ----------------------------------------------------------------------------

"""
1. LISTE NON ORDONNÉE <ul> (Unordered List)
Affiche des puces (bullets)
"""

"""
<ul>
    <li>Python</li>
    <li>JavaScript</li>
    <li>CSS</li>
    <li>SQL</li>
</ul>
"""

"""
[WEB] DANS LE NAVIGATEUR :
• Python
• JavaScript
• CSS
• SQL
"""

"""
2. LISTE ORDONNÉE <ol> (Ordered List)
Affiche des numéros
"""

"""
<ol>
    <li>Installer Python</li>
    <li>Créer l'environnement virtuel</li>
    <li>Installer Flask</li>
    <li>Créer app.py</li>
    <li>Lancer le serveur</li>
</ol>
"""

"""
[WEB] DANS LE NAVIGATEUR :
1. Installer Python
2. Créer l'environnement virtuel
3. Installer Flask
4. Créer app.py
5. Lancer le serveur
"""

"""
ATTRIBUTS DE <ol> :

start="5"     -> Commencer à 5
reversed      -> Ordre décroissant
type="A"      -> A, B, C (majuscules)
type="a"      -> a, b, c (minuscules)
type="I"      -> I, II, III (chiffres romains)
type="i"      -> i, ii, iii
type="1"      -> 1, 2, 3 (défaut)
"""

"""
<!-- Liste commençant à 5 -->
<ol start="5">
    <li>Cinquième point</li>
    <li>Sixième point</li>
</ol>

<!-- Liste alphabétique -->
<ol type="A">
    <li>Option A</li>
    <li>Option B</li>
    <li>Option C</li>
</ol>

<!-- Ordre décroissant (compte à rebours) -->
<ol start="3" reversed>
    <li>Troisième</li>
    <li>Deuxième</li>
    <li>Premier</li>
</ol>
"""

"""
3. LISTE DE DÉFINITIONS <dl>

Utilisée pour des termes et leurs définitions (glossaire)
"""

"""
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language - Langage de structure des pages web</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets - Langage de mise en forme des pages web</dd>

    <dt>JavaScript</dt>
    <dd>Langage de programmation pour rendre les pages web interactives</dd>

    <dt>Framework</dt>
    <dd>Ensemble de bibliothèques et outils pour faciliter le développement</dd>
    <dd>Exemple : Flask, Django, React</dd>   <- Plusieurs dd possibles !
</dl>
"""

"""
[WEB] DANS LE NAVIGATEUR :
HTML
    HyperText Markup Language - Langage de structure des pages web

CSS
    Cascading Style Sheets - Langage de mise en forme des pages web
"""

"""
4. LISTES IMBRIQUÉES
"""

"""
<ul>
    <li>Langages Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript
                <ul>
                    <li>React</li>
                    <li>Vue.js</li>
                    <li>Angular</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Langages Backend
        <ul>
            <li>Python</li>
            <li>Java</li>
            <li>PHP</li>
        </ul>
    </li>
</ul>
"""

"""
[WEB] DANS LE NAVIGATEUR :
• Langages Frontend
    [WHITE_CIRCLE] HTML
    [WHITE_CIRCLE] CSS
    [WHITE_CIRCLE] JavaScript
        [BLACK_SQUARE] React
        [BLACK_SQUARE] Vue.js
        [BLACK_SQUARE] Angular
• Langages Backend
    [WHITE_CIRCLE] Python
    [WHITE_CIRCLE] Java
    [WHITE_CIRCLE] PHP
"""


# ----------------------------------------------------------------------------
# [GRAPHIQUE] TABLEAUX
# ----------------------------------------------------------------------------

"""
STRUCTURE COMPLÈTE D'UN TABLEAU

<table>           -> Le tableau
  <caption>       -> Titre du tableau
  <thead>         -> En-tête (header)
    <tr>          -> Ligne (table row)
      <th>        -> Cellule d'en-tête (table header)
  <tbody>         -> Corps du tableau
    <tr>          -> Ligne
      <td>        -> Cellule de données (table data)
  <tfoot>         -> Pied de tableau
    <tr>
      <td>
"""

# Tableau complet avec toutes les parties :
"""
<table>
    <caption>Comparaison des langages de programmation</caption>

    <!-- En-tête -->
    <thead>
        <tr>
            <th>Langage</th>
            <th>Popularité</th>
            <th>Difficulté</th>
            <th>Utilisation principale</th>
        </tr>
    </thead>

    <!-- Corps -->
    <tbody>
        <tr>
            <td>Python</td>
            <td>*****</td>
            <td>Facile</td>
            <td>IA, Web, Scripts</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>*****</td>
            <td>Moyen</td>
            <td>Web Frontend/Backend</td>
        </tr>
        <tr>
            <td>Java</td>
            <td>****</td>
            <td>Difficile</td>
            <td>Entreprise, Android</td>
        </tr>
        <tr>
            <td>C++</td>
            <td>***</td>
            <td>Très difficile</td>
            <td>Systèmes, Jeux</td>
        </tr>
    </tbody>

    <!-- Pied (totaux, notes) -->
    <tfoot>
        <tr>
            <td colspan="4">
                <small>Source : Stack Overflow Developer Survey 2024</small>
            </td>
        </tr>
    </tfoot>
</table>
"""

"""
[WEB] DANS LE NAVIGATEUR :
╔══════════╦════════════╦═══════════╦═══════════════════════╗
║ Langage  ║ Popularité ║ Difficulté║ Utilisation           ║
╠══════════╬════════════╬═══════════╬═══════════════════════╣
║ Python   ║ *****  ║ Facile    ║ IA, Web, Scripts      ║
║ JavaScript║*****  ║ Moyen     ║ Web Frontend/Backend  ║
║ Java     ║ ****    ║ Difficile ║ Entreprise, Android   ║
║ C++      ║ ***      ║ Très diff.║ Systèmes, Jeux        ║
╠══════════╩════════════╩═══════════╩═══════════════════════╣
║ Source : Stack Overflow Developer Survey 2024              ║
╚═══════════════════════════════════════════════════════════╝


[IDEE] ATTRIBUTS DE FUSION

colspan="n" -> Fusionner n colonnes horizontalement
rowspan="n" -> Fusionner n lignes verticalement
"""

"""
<!-- FUSION DE COLONNES (colspan) -->
<table>
    <tr>
        <th colspan="2">Nom complet</th>   <- Occupe 2 colonnes
        <th>Age</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>Martin</td>
        <td>28</td>
    </tr>
</table>

┌─────────────────┬─────┐
│    Nom complet  │ Age │
├────────┬────────┤     │
│ Alice  │ Martin │ 28  │
└────────┴────────┴─────┘


<!-- FUSION DE LIGNES (rowspan) -->
<table>
    <tr>
        <td rowspan="2">Même cellule</td>  <- Occupe 2 lignes
        <td>Ligne 1</td>
    </tr>
    <tr>
        <td>Ligne 2</td>   <- Pas de première cellule !
    </tr>
</table>

┌──────────────┬────────┐
│ Même cellule │ Ligne 1│
│              ├────────┤
│              │ Ligne 2│
└──────────────┴────────┘
"""

"""
[ATTENTION] QUAND UTILISER LES TABLEAUX ?

[OK] BON USAGE : Données tabulaires (qui iraient dans Excel)
   - Comparaisons
   - Horaires
   - Prix
   - Statistiques

[X] MAUVAIS USAGE : Mise en page (layout)
   Autrefois, les développeurs utilisaient des tableaux
   pour créer des layouts (colonnes, grilles).
   C'est UNE TRÈS MAUVAISE PRATIQUE aujourd'hui !
   -> Utiliser CSS Flexbox ou Grid pour les layouts
"""


# ----------------------------------------------------------------------------
# [NOTE] FORMULAIRES HTML
# ----------------------------------------------------------------------------

"""
LES FORMULAIRES PERMETTENT :
- Inscription, connexion
- Recherche
- Commandes, paiements
- Envoi de messages
- Upload de fichiers
- Sondages, quiz

STRUCTURE DE BASE :

<form action="URL" method="GET|POST">
    <!-- champs -->
    <button type="submit">Envoyer</button>
</form>

ATTRIBUTS DE FORM :
- action : URL vers laquelle envoyer les données
- method : GET ou POST
  -> GET  : Données dans l'URL (?nom=valeur)
           Recherche, filtres, liens
  -> POST : Données dans le corps HTTP
           Formulaires avec données sensibles, fichiers
- enctype : nécessaire pour upload de fichiers
  -> "multipart/form-data"
"""

# FORMULAIRE COMPLET avec tous les types de champs :
"""
<form action="/inscription" method="POST">

    <!-- TEXTE SIMPLE -->
    <label for="nom">Nom complet :</label>
    <input type="text"
           id="nom"
           name="nom"
           placeholder="Ex: Alice Martin"
           required
           minlength="2"
           maxlength="100">

    <!-- EMAIL -->
    <label for="email">Email :</label>
    <input type="email"
           id="email"
           name="email"
           placeholder="alice@example.com"
           required>

    <!-- MOT DE PASSE -->
    <label for="password">Mot de passe :</label>
    <input type="password"
           id="password"
           name="password"
           minlength="8"
           required>

    <!-- NOMBRE -->
    <label for="age">Age :</label>
    <input type="number"
           id="age"
           name="age"
           min="18"
           max="120"
           value="25">

    <!-- TÉLÉPHONE -->
    <label for="tel">Téléphone :</label>
    <input type="tel"
           id="tel"
           name="tel"
           pattern="[0-9]{10}"
           placeholder="0612345678">

    <!-- URL -->
    <label for="website">Site web :</label>
    <input type="url"
           id="website"
           name="website"
           placeholder="https://example.com">

    <!-- DATE -->
    <label for="naissance">Date de naissance :</label>
    <input type="date"
           id="naissance"
           name="naissance"
           min="1900-01-01"
           max="2005-12-31">

    <!-- HEURE -->
    <label for="rdv">Heure de RDV :</label>
    <input type="time" id="rdv" name="rdv">

    <!-- COULEUR -->
    <label for="couleur">Couleur préférée :</label>
    <input type="color" id="couleur" name="couleur" value="#ff6600">

    <!-- RANGE (curseur) -->
    <label for="satisfaction">Satisfaction (1-10) :</label>
    <input type="range"
           id="satisfaction"
           name="satisfaction"
           min="1"
           max="10"
           value="5"
           step="1">

    <!-- CHECKBOX (case à cocher) -->
    <label>
        <input type="checkbox" name="newsletter" value="oui" checked>
        S'inscrire à la newsletter
    </label>

    <label>
        <input type="checkbox" name="cgu" value="accepte" required>
        J'accepte les <a href="/cgu">CGU</a>
    </label>

    <!-- RADIO BUTTONS (choix unique) -->
    <p>Niveau :</p>
    <label>
        <input type="radio" name="niveau" value="debutant" checked>
        Débutant
    </label>
    <label>
        <input type="radio" name="niveau" value="intermediaire">
        Intermédiaire
    </label>
    <label>
        <input type="radio" name="niveau" value="avance">
        Avancé
    </label>

    <!-- SELECT (liste déroulante) -->
    <label for="pays">Pays :</label>
    <select id="pays" name="pays">
        <option value="">-- Choisissez --</option>
        <option value="fr" selected>France</option>
        <option value="be">Belgique</option>
        <option value="ch">Suisse</option>
        <option value="ca">Canada</option>
        <optgroup label="Autres">
            <option value="gb">Royaume-Uni</option>
            <option value="de">Allemagne</option>
        </optgroup>
    </select>

    <!-- SELECT MULTIPLE -->
    <label for="competences">Compétences :</label>
    <select id="competences" name="competences" multiple size="4">
        <option value="python">Python</option>
        <option value="js">JavaScript</option>
        <option value="sql">SQL</option>
        <option value="git">Git</option>
    </select>

    <!-- TEXTAREA (texte multiligne) -->
    <label for="message">Message :</label>
    <textarea id="message"
              name="message"
              rows="5"
              cols="40"
              placeholder="Votre message ici..."
              required
              maxlength="500"></textarea>

    <!-- FICHIER -->
    <label for="photo">Photo :</label>
    <input type="file"
           id="photo"
           name="photo"
           accept="image/jpeg, image/png, image/webp"
           multiple>

    <!-- CHAMP CACHÉ -->
    <input type="hidden" name="form_id" value="inscription-2024">

    <!-- BOUTONS -->
    <button type="submit">[OK] S'inscrire</button>
    <button type="reset">[SUPPRIMER] Effacer</button>
    <button type="button" onclick="preview()">[EYE] Prévisualiser</button>

</form>
"""

"""
[IDEE] EXPLICATION DES ATTRIBUTS DE INPUT

name="..."
   Identifiant des données côté serveur
   C'est le NOM qui sera envoyé au serveur
   Ex: name="email" -> le serveur reçoit email=alice@example.com

id="..."
   Identifiant unique côté HTML
   Permet d'associer label au champ avec for="id"
   Permet de cibler avec CSS (#id) et JavaScript (getElementById)

[ATTENTION] name ET id peuvent avoir la MÊME valeur (souvent le cas)
   Mais ce sont deux choses différentes !

placeholder="..."
   Texte indicatif (disparaît à la saisie)
   [ATTENTION] N'est PAS un remplacement pour le label !

required
   Champ obligatoire - le navigateur valide avant envoi

pattern="regex"
   Validation par expression régulière côté navigateur

autocomplete="off"
   Désactive la complétion automatique

autofocus
   Focus automatique sur ce champ au chargement


[IDEE] POURQUOI ASSOCIER label ET input ?

Deux bonnes raisons :
1. ACCESSIBILITÉ : Les lecteurs d'écran lisent le label
2. UX : Cliquer sur le label met le focus dans le champ
"""

# [OK] CORRECT (3 façons) :
"""
<!-- Méthode 1 : for + id (recommandée) -->
<label for="email">Email :</label>
<input type="email" id="email" name="email">

<!-- Méthode 2 : label englobe l'input -->
<label>
    Email :
    <input type="email" name="email">
</label>

<!-- Méthode 3 : aria-label (sans label visible) -->
<input type="search" aria-label="Rechercher">
"""

# [X] INCORRECT :
"""
Email : <input type="email" name="email">  <- Pas de label associé !
"""


# ----------------------------------------------------------------------------
# [OBJECTIF] FIELDSET ET LEGEND (Grouper les champs)
# ----------------------------------------------------------------------------

"""
GROUPER DES CHAMPS LIÉS
"""

"""
<form>
    <!-- Groupe 1 : Informations personnelles -->
    <fieldset>
        <legend>Informations personnelles</legend>

        <label for="prenom">Prénom :</label>
        <input type="text" id="prenom" name="prenom" required>

        <label for="nom">Nom :</label>
        <input type="text" id="nom" name="nom" required>

        <label for="age">Age :</label>
        <input type="number" id="age" name="age" min="18" max="120">
    </fieldset>

    <!-- Groupe 2 : Informations de contact -->
    <fieldset>
        <legend>Coordonnées</legend>

        <label for="email">Email :</label>
        <input type="email" id="email" name="email" required>

        <label for="tel">Téléphone :</label>
        <input type="tel" id="tel" name="tel">
    </fieldset>

    <button type="submit">Enregistrer</button>
</form>
"""

"""
[WEB] DANS LE NAVIGATEUR :
┌─────────────────────────────────┐
│ Informations personnelles       │  <- legend
│  Prénom : [___________]         │
│  Nom    : [___________]         │
│  Age    : [___________]         │
└─────────────────────────────────┘
┌─────────────────────────────────┐
│ Coordonnées                     │  <- legend
│  Email : [___________________]  │
│  Tél   : [___________________]  │
└─────────────────────────────────┘
[Enregistrer]
"""


# ============================================================================
# [GUIDE] CHAPITRE 4 : HTML5 SÉMANTIQUE ET ACCESSIBILITÉ
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Utiliser les éléments sémantiques HTML5
[OK] Comprendre l'importance de la sémantique
[OK] Bases de l'accessibilité (a11y)
[OK] Attributs ARIA
[OK] Structure d'une page moderne
"""


# ----------------------------------------------------------------------------
# [CONSTRUCTION] ÉLÉMENTS SÉMANTIQUES HTML5
# ----------------------------------------------------------------------------

"""
AVANT HTML5 : TOUT EN DIV (mauvaise pratique)
"""

# [X] Avant HTML5 (encore vu dans du vieux code) :
"""
<div id="header">
    <div id="logo">...</div>
    <div id="navigation">...</div>
</div>
<div id="main-content">
    <div class="article">...</div>
    <div class="sidebar">...</div>
</div>
<div id="footer">...</div>
"""

# [OK] Avec HTML5 sémantique :
"""
<header>
    <div class="logo">...</div>
    <nav>...</nav>
</header>
<main>
    <article>...</article>
    <aside>...</aside>
</main>
<footer>...</footer>
"""

"""
[IDEE] POURQUOI LA SÉMANTIQUE ?

1. LISIBILITÉ DU CODE
   <header> dit immédiatement "c'est un en-tête"
   <div id="header"> est ambigu et verbeux

2. SEO (RÉFÉRENCEMENT)
   Google comprend mieux la structure de la page
   <article> = contenu principal et unique
   <nav> = liens de navigation importants

3. ACCESSIBILITÉ
   Les lecteurs d'écran naviguent par landmarks :
   "Aller à la navigation principale"
   "Aller au contenu principal"

4. MAINTENANCE
   Code plus facile à comprendre et modifier
   Pour vous et votre équipe


LES ÉLÉMENTS SÉMANTIQUES PRINCIPAUX
"""


# STRUCTURE D'UNE PAGE COMPLÈTE :
"""
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Site</title>
</head>
<body>

    <!-- ─────────────────────────────────── -->
    <!-- HEADER : En-tête du site           -->
    <!-- ─────────────────────────────────── -->
    <header>
        <!-- Logo -->
        <div class="logo">
            <a href="/">
                <img src="logo.svg" alt="MonSite - Accueil">
            </a>
        </div>

        <!-- Navigation principale -->
        <nav aria-label="Navigation principale">
            <ul>
                <li><a href="/">Accueil</a></li>
                <li><a href="/about">À propos</a></li>
                <li><a href="/services">Services</a></li>
                <li><a href="/blog">Blog</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <!-- ─────────────────────────────────── -->
    <!-- MAIN : Contenu principal           -->
    <!-- ─────────────────────────────────── -->
    <main>

        <!-- HERO section (bannière d'accueil) -->
        <section aria-label="Bannière d'accueil">
            <h1>Bienvenue sur MonSite</h1>
            <p>Votre solution pour le développement web</p>
        </section>

        <!-- ARTICLE : Contenu autonome et réutilisable -->
        <article>
            <header>
                <h2>Introduction au HTML5</h2>
                <p>Par <strong>Alice Martin</strong> -
                   <time datetime="2024-12-18">18 décembre 2024</time></p>
            </header>

            <section>
                <h3>Qu'est-ce que HTML5 ?</h3>
                <p>HTML5 est la 5ème version du langage...</p>
            </section>

            <section>
                <h3>Nouvelles fonctionnalités</h3>
                <p>HTML5 apporte des éléments sémantiques...</p>
            </section>

            <footer>
                <p>Tags: <a href="/tag/html">HTML</a>,
                         <a href="/tag/web">Web</a></p>
            </footer>
        </article>

        <!-- ASIDE : Contenu secondaire (sidebar) -->
        <aside>
            <h2>Articles récents</h2>
            <nav aria-label="Articles récents">
                <ul>
                    <li><a href="/article1">Article 1</a></li>
                    <li><a href="/article2">Article 2</a></li>
                </ul>
            </nav>

            <section>
                <h2>Newsletter</h2>
                <form>
                    <label for="email-newsletter">Email :</label>
                    <input type="email" id="email-newsletter" name="email">
                    <button type="submit">S'inscrire</button>
                </form>
            </section>
        </aside>

    </main>

    <!-- ─────────────────────────────────── -->
    <!-- FOOTER : Pied de page              -->
    <!-- ─────────────────────────────────── -->
    <footer>
        <nav aria-label="Navigation pied de page">
            <ul>
                <li><a href="/mentions-legales">Mentions légales</a></li>
                <li><a href="/confidentialite">Politique de confidentialité</a></li>
                <li><a href="/sitemap">Plan du site</a></li>
            </ul>
        </nav>

        <p>&copy; 2024 MonSite. Tous droits réservés.</p>

        <address>
            123 Rue du Web, 75001 Paris<br>
            <a href="mailto:contact@monsite.com">contact@monsite.com</a>
        </address>
    </footer>

</body>
</html>
"""

"""
[IDEE] DESCRIPTION DES ÉLÉMENTS SÉMANTIQUES

<header>
  En-tête de la page OU d'une section/article
  Contient généralement : logo, titre, nav
  Peut apparaître plusieurs fois sur une page

<nav>
  Groupes de liens de navigation
  Page entière ou section
  Ajouter aria-label pour différencier plusieurs <nav>
  Exemples : menu principal, fil d'Ariane, pagination

<main>
  Contenu principal et unique de la page
  UN SEUL <main> par page
  Pas dans <header>, <footer>, <aside>

<section>
  Section thématique d'une page
  A généralement un titre (h2-h6)
  Différent de <div> : <section> est sémantique

<article>
  Contenu autonome et réutilisable
  Peut être syndiqué (RSS)
  Exemples : article de blog, post de forum, produit

<aside>
  Contenu tangentiellement lié
  Barre latérale, publicités, biographie de l'auteur
  Contenu qui pourrait être supprimé sans affecter le contenu principal

<footer>
  Pied de page OU de section
  Informations légales, liens, contact
  Peut apparaître plusieurs fois

<address>
  Informations de contact pour l'article ou le site
  Email, adresse physique, téléphone

<time datetime="">
  Date et heure lisibles par les machines
  datetime="YYYY-MM-DD" ou "YYYY-MM-DDTHH:MM"
  Permet aux moteurs de recherche et apps de lire les dates

<figure> + <figcaption>
  Contenu illustratif avec légende
  Images, diagrammes, code, citations

<details> + <summary>
  Contenu pliable/dépliable (accordéon natif)

<dialog>
  Boîte de dialogue / modal native HTML5
"""

"""
DETAILS ET SUMMARY (Accordéon natif)
"""

"""
<details>
    <summary>Cliquez pour voir la réponse</summary>
    <p>La réponse est 42. C'est la réponse à la grande question
       sur la vie, l'univers et le reste.</p>
</details>

<details open>  <- ouvert par défaut
    <summary>Section ouverte par défaut</summary>
    <p>Ce contenu est visible immédiatement.</p>
</details>
"""

"""
[WEB] DANS LE NAVIGATEUR :
[BLACK_RIGHT-POINTING_TRIANGLE] Cliquez pour voir la réponse   <- fermé
[BLACK_DOWN-POINTING_TRIANGLE] Section ouverte par défaut     <- ouvert
  Ce contenu est visible immédiatement.
"""

"""
DIALOG (Modal natif HTML)
"""

"""
<dialog id="ma-modal">
    <h2>Confirmation</h2>
    <p>Êtes-vous sûr de vouloir continuer ?</p>
    <form method="dialog">
        <button value="non">Non</button>
        <button value="oui" autofocus>Oui</button>
    </form>
</dialog>

<button onclick="document.getElementById('ma-modal').showModal()">
    Ouvrir la modal
</button>
"""


# ============================================================================
# ═══════════════════════════════════════════════════════════════════════════
# PARTIE 2 : FONDAMENTAUX CSS
# ═══════════════════════════════════════════════════════════════════════════
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 5 : INTRODUCTION AU CSS ET SÉLECTEURS
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Ce qu'est CSS et comment ça fonctionne
[OK] Lier CSS à HTML (3 méthodes)
[OK] Maîtriser tous les sélecteurs CSS
[OK] Comprendre la cascade et la spécificité
[OK] Utiliser les pseudo-classes et pseudo-éléments de base
"""


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

"""
CSS = Cascading Style Sheets

CSS permet de contrôler :
- Les couleurs et typographies
- L'espacement et les dimensions
- Les positions et layouts
- Les animations et transitions
- Le responsive design (adaptation mobile)
- Et bien plus...


SYNTAXE CSS DE BASE :

      Sélecteur          Déclaration
          │              ┌────────────┐
          [BLACK_DOWN-POINTING_TRIANGLE]              │            │
      h1, h2  {    color: red;   font-size: 24px;  }
      │    │          │     │         │       │
      │    │          │     │         │       └── Valeur
      │    │          │     │         └────────── Propriété
      │    │          │     └──────────────────── Valeur
      │    │          └────────────────────────── Propriété
      │    └────────────────────────────────────── Sélecteur 2
      └─────────────────────────────────────────── Sélecteur 1


Chaque déclaration = propriété: valeur;
Le point-virgule est OBLIGATOIRE après chaque déclaration
Les accolades { } délimitent le bloc de règles


EXEMPLES :
"""

"""
/* Sélectionner TOUS les paragraphes */
p {
    color: #333333;          /* Couleur du texte */
    font-size: 16px;         /* Taille du texte */
    line-height: 1.6;        /* Hauteur de ligne */
    margin-bottom: 20px;     /* Espace en bas */
}

/* Sélectionner le titre principal */
h1 {
    color: #2563eb;          /* Bleu */
    font-size: 2.5rem;       /* 2.5 fois la taille de base */
    text-align: center;      /* Centré */
}

/* Sélectionner tous les liens */
a {
    color: #0066cc;
    text-decoration: underline;
}

/* Sélectionner les liens au survol */
a:hover {
    color: #003366;
    text-decoration: none;
}
"""


# ----------------------------------------------------------------------------
# [LIEN] LES 3 MÉTHODES POUR LIER CSS À HTML
# ----------------------------------------------------------------------------

"""
MÉTHODE 1 : CSS EXTERNE (RECOMMANDÉE [OK])

Fichier CSS séparé, lié depuis le <head>

Avantages :
[OK] Séparation des responsabilités
[OK] Un fichier CSS pour plusieurs pages
[OK] Mise en cache par le navigateur
[OK] Facile à maintenir
"""

# Dans index.html :
"""
<head>
    <meta charset="UTF-8">
    <title>Mon Site</title>
    <!-- Lier le fichier CSS externe -->
    <link rel="stylesheet" href="styles.css">
    <!-- Plusieurs fichiers CSS possibles -->
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="components.css">
</head>
"""

# Dans styles.css :
"""
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

h1 {
    color: #2563eb;
}

p {
    color: #333;
    line-height: 1.6;
}
"""

"""
MÉTHODE 2 : CSS INTERNE (Dans le <head>)

Utile pour page unique ou styles très spécifiques

Avantages :
[OK] Une seule requête réseau
[OK] Utile pour page email, page unique
[ATTENTION] Non réutilisable sur d'autres pages
[X] Mélange structure et style
"""

"""
<head>
    <meta charset="UTF-8">
    <title>Page Unique</title>
    <style>
        body {
            background: #f0f0f0;
        }
        h1 {
            color: blue;
        }
    </style>
</head>
"""

"""
MÉTHODE 3 : CSS INLINE (Attribut style)

Style directement sur l'élément

[ATTENTION] À éviter sauf cas spéciaux
[X] Impossible de réutiliser
[X] Très difficile à maintenir
[X] Spécificité maximale (écrase tout)
[OK] Acceptable pour : emails HTML, style généré dynamiquement
"""

"""
<h1 style="color: blue; font-size: 2rem; text-align: center;">
    Titre avec style inline
</h1>

<p style="color: red; font-weight: bold;">
    Texte en rouge et gras
</p>
"""

"""
[IDEE] ORDRE DE PRIORITÉ (CASCADING)

1. Styles inline (priorité la plus haute)
2. Styles internes (<style> dans <head>)
3. Styles externes (<link href="...css">)
4. Styles par défaut du navigateur (priorité la plus basse)

Le mot "Cascading" dans CSS signifie que les styles
se cumulent et les plus spécifiques écrasent les moins spécifiques.
"""


# ----------------------------------------------------------------------------
# [OBJECTIF] SÉLECTEURS CSS
# ----------------------------------------------------------------------------

"""
LES SÉLECTEURS PERMETTENT DE CIBLER DES ÉLÉMENTS


1. SÉLECTEUR DE TYPE (Balise)
───────────────────────────
Cible TOUS les éléments du type donné
"""

"""
/* Tous les paragraphes */
p { color: #333; }

/* Tous les liens */
a { color: blue; }

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

/* Toutes les listes non ordonnées */
ul { list-style-type: disc; }
"""

"""
2. SÉLECTEUR DE CLASSE
──────────────────────
Cible les éléments qui ont l'attribut class=
Commence par un POINT .
"""

"""
/* HTML : <p class="important">Texte</p> */
.important {
    color: red;
    font-weight: bold;
}

/* HTML : <div class="card">...</div> */
.card {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 16px;
}

/* HTML : <span class="highlight">mot</span> */
.highlight {
    background-color: yellow;
    padding: 2px 4px;
}
"""

"""
[IDEE] UN ÉLÉMENT PEUT AVOIR PLUSIEURS CLASSES :
<p class="important highlight large">Texte</p>
                           ^
            Chaque classe séparée par un espace
"""

"""
3. SÉLECTEUR D'ID
─────────────────
Cible UN SEUL élément avec l'attribut id=
Commence par un DIÈSE #
UNIQUE par page !
"""

"""
/* HTML : <header id="main-header">...</header> */
#main-header {
    background: #2563eb;
    color: white;
    padding: 20px;
}

/* HTML : <div id="hero">...</div> */
#hero {
    height: 100vh;
    background-image: url('hero.jpg');
}
"""

"""
[ATTENTION] BONNE PRATIQUE : Éviter les sélecteurs d'ID pour le CSS !
Raisons :
- Spécificité très haute -> difficile à surcharger
- Mauvaise réutilisabilité
- Réservez les ID pour JavaScript (getElementById)

[OK] Préférer les classes pour le CSS
"""

"""
4. SÉLECTEUR UNIVERSEL
──────────────────────
Cible TOUS les éléments de la page
"""

"""
/* Réinitialiser marges et paddings de TOUT */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;  /* On verra ça au Chapitre 6 */
}
"""

"""
5. SÉLECTEURS DE COMBINAISON
──────────────────────────────
"""

"""
/* DESCENDANT : Tous les p dans un article */
article p {
    font-size: 1.1rem;
}
/* Cible : <article><div><p>[OK]</p></div></article> */


/* ENFANT DIRECT : Seulement les p directs */
article > p {
    font-size: 1.1rem;
}
/* Cible : <article><p>[OK]</p></article> */
/* Pas : <article><div><p>[X]</p></div></article> */


/* ADJACENT (suivant immédiat) : p juste après un h2 */
h2 + p {
    font-size: 1.2rem;
    font-weight: bold;
}
/* HTML : <h2>Titre</h2><p>[OK] Ce p</p><p>[X] Pas celui-ci</p> */


/* SIBLING GÉNÉRAL : Tous les p après un h2 */
h2 ~ p {
    color: #555;
}
/* HTML : <h2>Titre</h2><p>[OK]</p><p>[OK]</p><p>[OK]</p> */
"""

"""
6. SÉLECTEUR D'ATTRIBUT
─────────────────────────
Cible les éléments selon leurs attributs
"""

"""
/* Tout élément avec attribut disabled */
[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Inputs de type email */
[type="email"] {
    border-color: blue;
}

/* Liens vers des fichiers PDF */
[href$=".pdf"] {
    /* $ = se termine par */
    color: red;
}

/* Liens externes (commencent par http) */
[href^="http"] {
    /* ^ = commence par */
    text-decoration: underline dotted;
}

/* Éléments avec class contenant "btn" */
[class*="btn"] {
    /* * = contient */
    padding: 10px 20px;
    border-radius: 4px;
}

/* Inputs avec placeholder */
[placeholder] {
    font-style: italic;
}
"""

"""
7. GROUPEMENT DE SÉLECTEURS
──────────────────────────────
Appliquer le même style à plusieurs sélecteurs
"""

"""
/* Même style pour h1, h2 et h3 */
h1, h2, h3 {
    font-family: Georgia, serif;
    color: #1a1a2e;
}

/* Même style pour plusieurs classes */
.btn-primary, .btn-secondary, .btn-danger {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
"""


# ----------------------------------------------------------------------------
# [RAPIDE] SPÉCIFICITÉ CSS
# ----------------------------------------------------------------------------

"""
LA SPÉCIFICITÉ DÉTERMINE QUELLE RÈGLE "GAGNE"

Quand plusieurs règles ciblent le même élément,
la plus SPÉCIFIQUE gagne.

CALCUL DE SPÉCIFICITÉ :

┌──────────────┬────────────┬───────────────────────────────┐
│ Sélecteur    │ Points     │ Exemple                       │
├──────────────┼────────────┼───────────────────────────────┤
│ Inline style │ 1000       │ style="color:red"             │
│ ID           │  100       │ #header                       │
│ Class, attr  │   10       │ .menu, [type="text"]          │
│ Pseudo-class │   10       │ :hover, :first-child          │
│ Type         │    1       │ p, h1, div                    │
│ Universel    │    0       │ *                             │
└──────────────┴────────────┴───────────────────────────────┘


EXEMPLES DE CALCUL :

Sélecteur                Calcul    Score
────────────────────────────────────────────
p                        0+0+1     = 1
.menu                    0+10+0    = 10
#header                  100+0+0   = 100
#header .menu            100+10+0  = 110
#header .menu p          100+10+1  = 111
style="..."              1000+0+0  = 1000


QUI GAGNE ?

/* Score: 1 */
p { color: blue; }

/* Score: 10 */
.text { color: red; }   <- GAGNE (score plus élevé)

Pour un élément <p class="text">Texte</p>
-> Le texte sera rouge (la règle .text gagne avec score 10)


[IDEE] !important (UTILISER AVEC PRÉCAUTION !)

!important écrase TOUTE la spécificité :
"""

"""
/* Même un style inline est écrasé */
p { color: green !important; }

/* L'élément est vert même si style="color: red" */
"""

"""
[ATTENTION] UTILISER !important seulement :
- Pour surcharger des styles de bibliothèques tierces
- Styles utilitaires critiques (comme .hidden { display: none !important; })
- Jamais pour résoudre des problèmes de spécificité dans votre propre CSS !
"""


# ----------------------------------------------------------------------------
# [SCENARIO] PSEUDO-CLASSES ET PSEUDO-ÉLÉMENTS
# ----------------------------------------------------------------------------

"""
PSEUDO-CLASSES : État d'un élément
Syntaxe : :nom-pseudo-classe

Les plus courantes :
"""

"""
/* Survol de la souris */
a:hover { text-decoration: none; }
button:hover { background: #0056b3; }

/* Clic en cours */
button:active { transform: scale(0.98); }

/* Focus (tabulation ou clic) */
input:focus { outline: 2px solid blue; }
a:focus { outline: 2px solid orange; }

/* Lien déjà visité */
a:visited { color: purple; }

/* Premier enfant de son parent */
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }

/* N-ième enfant */
li:nth-child(2) { color: red; }           /* 2ème enfant */
li:nth-child(odd) { background: #f5f5f5; } /* lignes impaires */
li:nth-child(even) { background: white; }  /* lignes paires */
li:nth-child(3n) { color: blue; }          /* tous les 3 */

/* Pas celui-là */
li:not(.active) { opacity: 0.7; }

/* Champs valides/invalides */
input:valid { border-color: green; }
input:invalid { border-color: red; }

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

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

"""
PSEUDO-ÉLÉMENTS : Partie d'un élément
Syntaxe : ::nom-pseudo-element

Notez le DOUBLE DEUX-POINTS ::
(Certains anciens en simple : ne pas copier)
"""

"""
/* Première lettre d'un paragraphe */
p::first-letter {
    font-size: 3em;
    font-weight: bold;
    float: left;
    margin-right: 4px;
}

/* Première ligne d'un paragraphe */
p::first-line {
    font-weight: bold;
    color: #333;
}

/* Avant un élément (contenu généré) */
.quote::before {
    content: "\201C"; /* Guillemet ouvrant " */
    font-size: 2em;
    color: #ccc;
}

/* Après un élément (contenu généré) */
.quote::after {
    content: "\201D"; /* Guillemet fermant " */
    font-size: 2em;
    color: #ccc;
}

/* Sélection de texte */
::selection {
    background: #2563eb;
    color: white;
}

/* Placeholder des inputs */
input::placeholder {
    color: #999;
    font-style: italic;
}
"""


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

"""
CE QUE VOUS AVEZ APPRIS

[OK] Syntaxe CSS : sélecteur { propriété: valeur; }
[OK] 3 méthodes de liaison : externe (recommandé), interne, inline
[OK] Sélecteur type, classe, ID, universel
[OK] Sélecteurs de combinaison (descendant, enfant, adjacent)
[OK] Sélecteurs d'attribut
[OK] Spécificité et cascade
[OK] Pseudo-classes (:hover, :focus, :nth-child)
[OK] Pseudo-éléments (::before, ::after, ::first-letter)
"""


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

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Comprendre le modèle de boîte CSS (Box Model)
[OK] Maîtriser margin, padding, border, content
[OK] La différence entre box-sizing: content-box vs border-box
[OK] Gérer les marges automatiques pour centrer
[OK] Overflow et gestion du dépassement
"""


# ----------------------------------------------------------------------------
# [PACKAGE] LE BOX MODEL
# ----------------------------------------------------------------------------

"""
CHAQUE ÉLÉMENT HTML EST UNE BOÎTE

                    Margin (espace extérieur)
    ┌─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┐
    │                                         │
    │   ┌─────────────────────────────────┐   │
    │   │         Border                   │   │
    │   │   ┌─────────────────────────┐   │   │
    │   │   │      Padding            │   │   │
    │   │   │   ┌─────────────────┐   │   │   │
    │   │   │   │                 │   │   │   │
    │   │   │   │    Content      │   │   │   │
    │   │   │   │    (texte,      │   │   │   │
    │   │   │   │     image...)   │   │   │   │
    │   │   │   │                 │   │   │   │
    │   │   │   └─────────────────┘   │   │   │
    │   │   │      Padding            │   │   │
    │   │   └─────────────────────────┘   │   │
    │   │         Border                   │   │
    │   └─────────────────────────────────┘   │
    │                                         │
    └─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┘
                    Margin


CONTENT : Le contenu réel (texte, image)
PADDING : Espace intérieur entre contenu et bordure
BORDER  : La bordure elle-même (peut être invisible)
MARGIN  : Espace extérieur entre l'élément et ses voisins
"""

# Exemple complet :
"""
.box {
    /* CONTENT (dimensions du contenu) */
    width: 300px;
    height: 150px;

    /* PADDING (espace intérieur) */
    padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 20px;
    padding-left: 30px;
    /* Raccourci : padding: haut droite bas gauche */
    padding: 20px 30px 20px 30px;
    /* Si haut=bas et droite=gauche : */
    padding: 20px 30px;
    /* Si tout pareil : */
    padding: 20px;

    /* BORDER */
    border-width: 2px;
    border-style: solid;
    border-color: #2563eb;
    /* Raccourci : */
    border: 2px solid #2563eb;

    /* MARGIN (espace extérieur) */
    margin-top: 10px;
    margin-right: auto;   /* auto pour centrer horizontalement */
    margin-bottom: 10px;
    margin-left: auto;    /* auto pour centrer horizontalement */
    /* Raccourci : */
    margin: 10px auto;    /* vertical: 10px, horizontal: auto (centré) */
}
"""

"""
[IDEE] RACCOURCIS DES 4 CÔTÉS

Pour margin et padding, il y a 4 raccourcis :

1. 4 valeurs : TOP RIGHT BOTTOM LEFT (sens des aiguilles d'une montre)
   padding: 10px 20px 30px 40px;
            ^    ^    ^    ^
            haut droit bas  gauche

2. 3 valeurs : TOP  RIGHT-LEFT  BOTTOM
   padding: 10px 20px 30px;
            ^    ^         ^
            haut droit=gauche bas

3. 2 valeurs : TOP-BOTTOM  RIGHT-LEFT
   padding: 10px 20px;
            ^         ^
            haut=bas  droit=gauche

4. 1 valeur : TOUS LES CÔTÉS
   padding: 10px;
   (=10px partout)

[IDEE] MOYEN MNÉMOTECHNIQUE : TRouBLe (TRouBLe = TRBL = Top Right Bottom Left)
"""

"""
LA BORDURE EN DÉTAIL
"""

"""
/* Styles de bordure */
border-style: solid;        /* Pleine */
border-style: dashed;       /* Tirets */
border-style: dotted;       /* Points */
border-style: double;       /* Double trait */
border-style: none;         /* Invisible (défaut) */

/* Arrondir les coins */
border-radius: 8px;         /* Tous les coins */
border-radius: 50%;         /* Cercle parfait ! */
border-radius: 10px 0;      /* haut-gauche/bas-droit vs haut-droit/bas-gauche */

/* Bordure seulement sur un côté */
border-top: 3px solid #2563eb;
border-bottom: 1px dashed #ccc;
border-left: 4px solid green;

/* Supprimer une bordure */
border: none;
border: 0;
"""


# ----------------------------------------------------------------------------
# [OBJECTIF] BOX-SIZING : LA PROPRIÉTÉ INDISPENSABLE
# ----------------------------------------------------------------------------

"""
[IDEE] PROBLÈME : content-box vs border-box

CONTENT-BOX (défaut du navigateur) :
La largeur s'applique AU CONTENU SEULEMENT
La taille réelle = width + padding + border

Exemple :
.box {
    width: 300px;
    padding: 20px;
    border: 2px solid black;
}
Taille réelle = 300 + (20+20) + (2+2) = 344px  <- Surprise !


BORDER-BOX (recommandé) :
La largeur s'applique À TOUT (contenu + padding + border)
La taille réelle = width (toujours)

.box {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 2px solid black;
}
Taille réelle = 300px (toujours !)  <- Prévisible !


[OK] BONNE PRATIQUE : Appliquer border-box à TOUT
"""

# Reset universel recommandé :
"""
/* CSS Reset avec border-box */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
"""

"""
Avec ce reset :
- Toutes les tailles sont prévisibles
- Pas de surprises de dépassement
- Calculs de layout beaucoup plus simples


[IDEE] VISUALISATION border-box vs content-box :

CONTENT-BOX (défaut):
┌──────────────────────────────┐
│ margin                       │
│   ┌──────────────────────┐   │
│   │ border (2px)         │   │
│   │  ┌────────────────┐  │   │
│   │  │ padding (20px) │  │   │
│   │  │  ┌──────────┐  │  │   │
│   │  │  │ 300px    │  │  │   │   <- width s'applique ici
│   │  │  └──────────┘  │  │   │
│   │  └────────────────┘  │   │
│   └──────────────────────┘   │   Total : 344px !!
└──────────────────────────────┘


BORDER-BOX (recommandé):
┌──────────────────────────────┐
│ margin                       │
│   ┌────────────────────────┐ │
│   │ 300px total            │ │   <- width s'applique ici
│   │ (border + pad + content)│ │
│   └────────────────────────┘ │   Total : 300px
└──────────────────────────────┘
"""


# ----------------------------------------------------------------------------
# [MESURE] MARGIN : CENTRER ET ESPACEMENT
# ----------------------------------------------------------------------------

"""
CENTRER UN ÉLÉMENT HORIZONTALEMENT

Pour centrer un élément block horizontalement :
- Donner une largeur (width)
- Mettre margin: auto (ou margin-left: auto; margin-right: auto;)
"""

"""
/* Centrer un conteneur */
.container {
    width: 1200px;
    max-width: 100%;    /* Responsive : ne dépasse pas l'écran */
    margin: 0 auto;     /* 0 vertical, auto horizontal = centré */
}

/* Centre avec max-width (meilleure pratique) */
.container {
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}
"""

"""
FUSION DES MARGES (MARGIN COLLAPSE)

[ATTENTION] Phénomène surprenant : les marges VERTICALES entre éléments fusionnent !

<p style="margin-bottom: 20px">Paragraphe 1</p>
<p style="margin-top: 30px">Paragraphe 2</p>

-> L'espace entre les deux n'est PAS 20+30 = 50px
-> L'espace est MAX(20, 30) = 30px (la plus grande des deux)

Cela s'applique uniquement aux marges VERTICALES
Les marges HORIZONTALES ne fusionnent JAMAIS
"""


# ----------------------------------------------------------------------------
# [WATER_WAVE] OVERFLOW
# ----------------------------------------------------------------------------

"""
QUE SE PASSE-T-IL QUAND LE CONTENU DÉPASSE LA BOÎTE ?

overflow: visible;   -> Contenu dépasse (défaut)
overflow: hidden;    -> Contenu coupé
overflow: scroll;    -> Barre de défilement toujours visible
overflow: auto;      -> Barre de défilement si nécessaire

overflow-x et overflow-y pour contrôler chaque axe
"""

"""
/* Image qui dépasse - couper -->
.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
}
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* Remplit sans déformer */
}

/* Boîte avec scroll si contenu long -->
.scrollable-box {
    height: 300px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 16px;
}

/* Empêcher texte de sortir -->
.text-clamp {
    white-space: nowrap;     /* Pas de retour à la ligne */
    overflow: hidden;
    text-overflow: ellipsis; /* Ajoute "..." à la fin */
    max-width: 200px;
}
"""


# ============================================================================
# [GUIDE] CHAPITRE 7 : COULEURS, TYPOGRAPHIE ET ARRIÈRE-PLANS
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Utiliser toutes les notations de couleur CSS
[OK] Maîtriser les propriétés typographiques
[OK] Charger des polices Google Fonts
[OK] Contrôler les arrière-plans
[OK] Utiliser les dégradés
"""


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

"""
5 FAÇONS D'ÉCRIRE DES COULEURS EN CSS


1. NOM DE COULEUR (140 noms prédéfinis)
────────────────────────────────────────
"""

"""
color: red;
color: blue;
color: green;
color: black;
color: white;
color: transparent;
color: tomato;          /* Tomate (rouge-orangé) */
color: steelblue;       /* Bleu acier */
color: mediumpurple;    /* Violet moyen */
color: cornflowerblue;  /* Bleuet */
"""

"""
2. HEXADÉCIMAL (#RRGGBB)
────────────────────────
Format : #RRGGBB ou #RGB (raccourci)
Valeurs : 00 à FF pour chaque canal
"""

"""
color: #ff0000;    /* Rouge pur */
color: #00ff00;    /* Vert pur */
color: #0000ff;    /* Bleu pur */
color: #000000;    /* Noir */
color: #ffffff;    /* Blanc */
color: #808080;    /* Gris 50% */
color: #2563eb;    /* Bleu moderne */
color: #f59e0b;    /* Orange/ambre */
color: #10b981;    /* Vert émeraude */

/* Raccourci : #RGB = #RRGGBB */
color: #f00;       /* = #ff0000 (rouge) */
color: #333;       /* = #333333 (gris foncé) */
color: #abc;       /* = #aabbcc */

/* Avec canal alpha (#RRGGBBAA) */
color: #ff000080;  /* Rouge à 50% de transparence */
"""

"""
3. RGB et RGBA
─────────────
R, G, B : 0-255
A (alpha/opacité) : 0.0 (transparent) à 1.0 (opaque)
"""

"""
color: rgb(255, 0, 0);            /* Rouge pur */
color: rgb(37, 99, 235);         /* Bleu (#2563eb) */
color: rgb(0, 0, 0);             /* Noir */
color: rgb(255, 255, 255);       /* Blanc */

/* Avec transparence */
color: rgba(255, 0, 0, 0.5);     /* Rouge à 50% */
color: rgba(0, 0, 0, 0.8);       /* Noir à 80% (overlay) */
background: rgba(255, 255, 255, 0.9); /* Blanc légèrement transparent */
"""

"""
4. HSL et HSLA
──────────────
H (Hue/Teinte) : 0-360 degrés
S (Saturation) : 0%-100%
L (Lightness/Luminosité) : 0%-100%

Plus intuitif que RGB pour les variations de couleur
"""

"""
color: hsl(0, 100%, 50%);     /* Rouge (0°) */
color: hsl(120, 100%, 50%);   /* Vert (120°) */
color: hsl(240, 100%, 50%);   /* Bleu (240°) */
color: hsl(0, 0%, 0%);        /* Noir */
color: hsl(0, 0%, 100%);      /* Blanc */
color: hsl(0, 0%, 50%);       /* Gris */

/* Avec transparence */
color: hsla(240, 100%, 50%, 0.3);  /* Bleu transparent */

/* PRATIQUE : Varier la luminosité pour des shades */
/* Bouton normal */
.btn { background: hsl(220, 90%, 50%); }
/* Bouton hover (plus foncé) */
.btn:hover { background: hsl(220, 90%, 40%); }
/* Bouton actif (encore plus foncé) */
.btn:active { background: hsl(220, 90%, 30%); }
"""

"""
5. VARIABLE CSS (Modern)
────────────────────────
(On verra ça en détail au Chapitre 14)
"""

"""
:root {
    --color-primary: #2563eb;
    --color-secondary: #7c3aed;
}

.btn { background: var(--color-primary); }
"""

"""
[IDEE] LAQUELLE UTILISER ?

Hexadécimal (#2563eb) :
-> Standard, universel, copié depuis les outils de design

RGB/RGBA :
-> Quand vous avez besoin de transparence (overlays)

HSL :
-> Quand vous créez des thèmes et variations de couleurs

Variables CSS :
-> Pour les projets maintenables (thèmes, dark mode)
"""


# ----------------------------------------------------------------------------
# [NOTE] TYPOGRAPHIE CSS
# ----------------------------------------------------------------------------

"""
PROPRIÉTÉS DE POLICE (FONT)
"""

"""
/* Police de caractères */
font-family: Arial, Helvetica, sans-serif;
/* ^ Stack de polices : si Arial n'est pas dispo, essaie Helvetica, puis sans-serif */

font-family: Georgia, 'Times New Roman', serif;
font-family: 'Courier New', Courier, monospace;
font-family: 'Open Sans', sans-serif;  /* Police Google Fonts */

/* Taille */
font-size: 16px;      /* Pixels (absolu) */
font-size: 1rem;      /* Relatif à la racine (16px par défaut) */
font-size: 1.5em;     /* Relatif au parent */
font-size: 120%;      /* Pourcentage du parent */

/* Graisse */
font-weight: normal;  /* = 400 */
font-weight: bold;    /* = 700 */
font-weight: 100;     /* Très fin */
font-weight: 300;     /* Fin */
font-weight: 400;     /* Normal */
font-weight: 500;     /* Medium */
font-weight: 600;     /* Semi-gras */
font-weight: 700;     /* Gras */
font-weight: 800;     /* Extra-gras */
font-weight: 900;     /* Noir */

/* Style */
font-style: normal;
font-style: italic;
font-style: oblique;

/* Variante */
font-variant: normal;
font-variant: small-caps;  /* PETITES CAPITALES */

/* Raccourci font */
/* style variant weight size/line-height family */
font: italic bold 18px/1.5 Arial, sans-serif;
"""

"""
PROPRIÉTÉS DE TEXTE
"""

"""
/* Couleur */
color: #333333;

/* Alignement */
text-align: left;          /* Gauche (défaut) */
text-align: center;        /* Centré */
text-align: right;         /* Droite */
text-align: justify;       /* Justifié */
text-align: start;         /* Sens d'écriture (LTR/RTL) */

/* Décoration */
text-decoration: none;          /* Aucune */
text-decoration: underline;     /* Souligné */
text-decoration: line-through;  /* Barré */
text-decoration: overline;      /* Ligne au-dessus */
/* Raccourci : ligne style couleur */
text-decoration: underline wavy red;

/* Transformation */
text-transform: none;
text-transform: uppercase;     /* TOUT EN MAJUSCULES */
text-transform: lowercase;     /* tout en minuscules */
text-transform: capitalize;    /* Première Lettre Majuscule */

/* Espacement */
letter-spacing: 0.1em;    /* Entre les lettres */
word-spacing: 0.2em;      /* Entre les mots */
line-height: 1.6;         /* Hauteur de ligne (ratio) */
line-height: 24px;        /* Hauteur de ligne (absolu) */

/* Indentation */
text-indent: 2em;          /* Indenter première ligne */

/* Ombre */
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
/* X    Y    flou   couleur */

/* Dépassement de texte */
white-space: nowrap;       /* Pas de retour à la ligne */
overflow: hidden;
text-overflow: ellipsis;   /* Ajoute "..." */

/* Coupure de mots */
word-break: break-all;     /* Coupe partout */
overflow-wrap: break-word; /* Coupe seulement si nécessaire */
"""

"""
REM vs EM vs PX : QUELLE UNITÉ CHOISIR ?


px (pixels) :
  Taille absolue - ne change pas selon le parent
  Pas accessible (ignoré si l'utilisateur change la taille de police)
  [OK] Pour : Borders, box shadows, petits détails précis

em :
  Relatif à la taille de police du PARENT
  1em = taille de police de l'élément parent
  Peut être complexe avec l'imbrication
  [OK] Pour : Padding et margin (s'adaptent à la taille de police)

rem :
  Relatif à la taille de police de la RACINE (<html>)
  1rem = 16px par défaut
  Prévisible et accessible
  [OK] Pour : Font-size principalement

% :
  Relatif au parent
  [OK] Pour : Width, height (layout)

vw/vh :
  Relatif à la taille de la fenêtre
  1vw = 1% de la largeur de la fenêtre
  1vh = 1% de la hauteur de la fenêtre
  [OK] Pour : Layout full-screen, héros


RECOMMANDATION :
- font-size : rem
- line-height : sans unité (1.6 = 1.6 fois la taille de police)
- width/height : % ou rem
- padding/margin : rem
- border : px
"""


# ----------------------------------------------------------------------------
# [TEXTE] GOOGLE FONTS
# ----------------------------------------------------------------------------

"""
CHARGER DES POLICES WEB DEPUIS GOOGLE FONTS

Étape 1 : Aller sur https://fonts.google.com
Étape 2 : Choisir votre police
Étape 3 : Copier le lien fourni dans <head>
Étape 4 : Utiliser dans votre CSS

EXEMPLE : Police "Inter" (populaire pour les interfaces)
"""

# Dans HTML :
"""
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
"""

# Dans CSS :
"""
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

h1, h2, h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}
"""

# Plusieurs polices populaires pour interfaces :
"""
<!-- Roboto (Google Material Design) -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">

<!-- Poppins (Moderne, géométrique) -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">

<!-- Source Code Pro (pour code) -->
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600&display=swap" rel="stylesheet">
"""

"""
[IDEE] FONT STACK DE SECOURS

Toujours prévoir des polices de secours :
- font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

Ordre de priorité :
1. Inter (Google Font chargée)
2. -apple-system (SF Pro sur Apple)
3. BlinkMacSystemFont (Chrome sur macOS)
4. Segoe UI (Windows)
5. Roboto (Android)
6. sans-serif (n'importe quelle sans-serif disponible)

C'est le "System Font Stack" utilisé par GitHub, Medium, etc.
"""


# ----------------------------------------------------------------------------
# [FRAME_WITH_PICTURE] ARRIÈRE-PLANS CSS
# ----------------------------------------------------------------------------

"""
PROPRIÉTÉS D'ARRIÈRE-PLAN
"""

"""
/* Couleur de fond */
background-color: #f0f4f8;
background-color: transparent;

/* Image de fond */
background-image: url('bg.jpg');
background-image: url('../images/texture.png');

/* Position de l'image */
background-position: center center;
background-position: top left;
background-position: 50% 50%;
background-position: 20px 40px;

/* Répétition */
background-repeat: repeat;      /* Répète (défaut) */
background-repeat: no-repeat;   /* Ne répète pas */
background-repeat: repeat-x;    /* Répète horizontalement */
background-repeat: repeat-y;    /* Répète verticalement */

/* Taille */
background-size: auto;          /* Taille originale */
background-size: 300px 200px;   /* Taille exacte */
background-size: 50%;           /* 50% de l'élément */
background-size: cover;         /* Couvre tout (peut rogner) */
background-size: contain;       /* Tout visible (peut laisser des espaces) */

/* Comportement au scroll */
background-attachment: scroll;  /* Scroll avec la page (défaut) */
background-attachment: fixed;   /* Reste fixe (effet parallax) */
background-attachment: local;   /* Scroll avec le contenu */

/* Raccourci background */
background: #2563eb url('pattern.png') center/cover no-repeat;
/* couleur image position/taille répétition */


DÉGRADÉS (GRADIENTS)

/* Dégradé linéaire */
background: linear-gradient(direction, couleur1, couleur2, ...);

background: linear-gradient(to right, #2563eb, #7c3aed);
background: linear-gradient(to bottom, #ffffff, #f0f0f0);
background: linear-gradient(135deg, #ff6b6b, #ffd93d);
background: linear-gradient(to right, #ff0000 0%, #00ff00 50%, #0000ff 100%);

/* Dégradé radial (cercle) */
background: radial-gradient(circle, #ffffff, #2563eb);
background: radial-gradient(ellipse at center, #ffd93d, #ff6b6b);

/* Dégradé conique */
background: conic-gradient(red, yellow, green, blue, red);


EXEMPLES PRATIQUES
"""

"""
/* Card avec ombre et fond légèrement gris */
.card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                0 2px 4px -2px rgba(0, 0, 0, 0.1);
    padding: 24px;
}

/* Bannière hero avec image */
.hero {
    background-image: url('hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 600px;
    position: relative;
}

/* Overlay sombre sur image */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

/* Bouton avec dégradé */
.btn-gradient {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-gradient:hover {
    transform: translateY(-2px);
}
"""


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

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Maîtriser les valeurs de la propriété display
[OK] Comprendre le positionnement CSS (static, relative, absolute, fixed, sticky)
[OK] Utiliser z-index
[OK] Masquer/afficher des éléments
[OK] Float (concept legacy mais encore présent)
"""


# ----------------------------------------------------------------------------
# [ECRAN] PROPRIÉTÉ DISPLAY
# ----------------------------------------------------------------------------

"""
LA PROPRIÉTÉ DISPLAY CONTRÔLE COMMENT UN ÉLÉMENT EST RENDU

Valeurs principales :
"""

"""
/* BLOCK : Prend toute la largeur, nouvelle ligne */
display: block;
/* Éléments block par défaut : div, p, h1-h6, ul, ol, li,
   form, fieldset, section, article, header, footer, nav, main */

/* INLINE : Reste dans le flux du texte */
display: inline;
/* Éléments inline par défaut : span, a, strong, em, img,
   input, label, button */

/* INLINE-BLOCK : Inline mais avec propriétés de block */
display: inline-block;
/* Reste dans le texte MAIS accepte width, height, margin, padding */
/* Très utile pour des boutons côte à côte */

/* NONE : Masque l'élément (ne prend plus de place) */
display: none;
/* DIFFÉRENT de visibility: hidden (l'espace est conservé) */

/* FLEX : Conteneur flex (Chapitre 9) */
display: flex;

/* GRID : Conteneur grid (Chapitre 10) */
display: grid;

/* TABLE : Comportement de tableau */
display: table;
display: table-row;
display: table-cell;

/* LIST-ITEM : Comme un li (avec puce) */
display: list-item;
"""

# Exemples pratiques :
"""
/* Boutons inline-block côte à côte */
.btn {
    display: inline-block;
    padding: 10px 20px;
    background: #2563eb;
    color: white;
    text-decoration: none;
    border-radius: 4px;
}

/* Menu horizontal (items de liste en inline-block) */
.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav-list li {
    display: inline-block;
    margin-right: 20px;
}

/* Masquer un élément */
.hidden {
    display: none;
}

/* Masquer mais garder l'espace */
.invisible {
    visibility: hidden;
}

/* Masquer aux lecteurs d'écran mais garder visible */
.decorative {
    aria-hidden: true;
}

/* Masquer visuellement mais garder pour lecteurs d'écran */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
"""


# ----------------------------------------------------------------------------
# [IMPORTANT] POSITIONNEMENT CSS
# ----------------------------------------------------------------------------

"""
LA PROPRIÉTÉ POSITION

5 valeurs possibles :
"""

"""
/* 1. STATIC (défaut) ─────────────────────────────
   Position normale dans le flux du document
   top, right, bottom, left n'ont PAS d'effet */

.static {
    position: static;  /* Comportement par défaut */
}


/* 2. RELATIVE ─────────────────────────────────────
   Position par rapport à SA POSITION NORMALE
   L'espace original est CONSERVÉ */

.relative {
    position: relative;
    top: 10px;      /* Décale 10px vers le bas */
    left: 20px;     /* Décale 20px vers la droite */
}

/* Utilisation courante de relative :
   - Créer un contexte de positionnement pour les enfants absolute
   - Légèrement déplacer sans affecter le layout */


/* 3. ABSOLUTE ─────────────────────────────────────
   Position par rapport au premier ancêtre positionné (pas static)
   SORT DU FLUX normal (ne prend plus de place) */

.parent {
    position: relative;   /* Ancêtre positionné ! */
    width: 300px;
    height: 200px;
}

.absolute {
    position: absolute;
    top: 0;      /* 0px depuis le haut du parent */
    right: 0;    /* 0px depuis la droite du parent */
    /* Si pas d'ancêtre positionné -> positionnement par rapport au <html> */
}

/* Exemples courants :
   - Badges sur des images
   - Tooltips
   - Menus déroulants
   - Overlays */


/* 4. FIXED ────────────────────────────────────────
   Position par rapport à la FENÊTRE DU NAVIGATEUR
   Ne bouge JAMAIS même lors du scroll
   SORT DU FLUX */

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;    /* Toujours devant */
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Exemples courants :
   - Header fixe
   - Bouton "retour en haut"
   - Chat widget
   - Cookie banner */


/* 5. STICKY ───────────────────────────────────────
   Mélange entre relative et fixed
   Reste dans le flux JUSQU'à un seuil de scroll
   Ensuite se comporte comme fixed */

.sticky-nav {
    position: sticky;
    top: 0;           /* Reste en haut quand on scroll */
    background: white;
    z-index: 100;
}

/* Exemples courants :
   - Navigation qui colle en haut
   - Headers de tableau qui restent visibles
   - Sidebar qui suit le scroll */
"""

"""
[IDEE] VISUALISATION DU POSITIONNEMENT

RELATIVE :
Avant          Après (position: relative; top: 20px; left: 10px)
┌──────┐       ┌──────┐
│  A   │       │  A   │  <- l'espace original EST conservé
│      │       │      │
│  B   │       ╔══════╗
│      │       ║  B   ║  <- décalé mais espace toujours là
│  C   │       │      │
└──────┘       │  C   │
               └──────┘

ABSOLUTE :
Avant          Après (position: absolute; top: 20px; left: 10px)
┌──────┐       ┌──────┐
│  A   │       │  A   │
│      │       │          ╔══════╗
│  B   │       │  C   │   ║  B   ║  <- sort du flux
│      │       └──────┘   ╚══════╝  <- positionné par rapport au parent
│  C   │
└──────┘

FIXED :
L'élément est positionné par rapport à la FENÊTRE
Même si on scrolle, il reste au même endroit
"""


# ----------------------------------------------------------------------------
# [NOMBRE] Z-INDEX
# ----------------------------------------------------------------------------

"""
Z-INDEX : ORDRE D'EMPILEMENT (profondeur 3D)

Le z-index détermine quel élément est "devant" l'autre.

RÈGLES :
1. Seulement pour les éléments POSITIONNÉS (pas static)
2. Plus la valeur est grande, plus l'élément est devant
3. Peut être négatif (derrière le flux normal)
4. auto = même contexte que le parent
"""

"""
/* Modales, overlays */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 32px;
    border-radius: 12px;
    z-index: 1001;  /* Devant l'overlay */
}

/* Convention de z-index */
:root {
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-overlay: 400;
    --z-modal: 500;
    --z-tooltip: 600;
    --z-toast: 700;
}
"""


# ============================================================================
# [GUIDE] CHAPITRE 9 : FLEXBOX
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Comprendre le modèle Flexbox
[OK] Maîtriser les propriétés du conteneur flex
[OK] Maîtriser les propriétés des éléments flex
[OK] Créer tous types de layouts avec Flexbox
[OK] Résoudre des problèmes de layout courants
"""


# ----------------------------------------------------------------------------
# [FORCE] INTRODUCTION À FLEXBOX
# ----------------------------------------------------------------------------

"""
FLEXBOX = FLEXIBLE BOX LAYOUT

Flexbox est un système de layout UNIDIMENSIONNEL
(en ligne OU en colonne, pas les deux en même temps)

POUR ALLER PLUS LOIN POUR LAYOUTS 2D : CSS Grid (Chapitre 10)

TERMINOLOGIE :

    Axe principal (main axis) ───────────────[BLACK_RIGHT-POINTING_POINTER]
    ┌─────────────────────────────────────────┐
    │                                         │ ^
    │  ┌──────┐  ┌──────┐  ┌──────┐           │ │ Axe
    │  │Item 1│  │Item 2│  │Item 3│           │ │ croix
    │  └──────┘  └──────┘  └──────┘           │ │ (cross
    │                                         │ v  axis)
    └─────────────────────────────────────────┘

CONTENEUR FLEX (flex container) = l'élément avec display: flex
ÉLÉMENTS FLEX (flex items) = les enfants DIRECTS du conteneur


ACTIVER FLEXBOX :
"""

"""
.container {
    display: flex;          /* Ligne (défaut) */
    /* ou */
    display: inline-flex;   /* Inline mais flex */
}
"""


# ----------------------------------------------------------------------------
# [CONTROL_KNOBS] PROPRIÉTÉS DU CONTENEUR FLEX
# ----------------------------------------------------------------------------

"""
flex-direction : DIRECTION DE L'AXE PRINCIPAL
"""

"""
.container {
    /* Gauche à droite (défaut) */
    flex-direction: row;
    /* [BLACK_RIGHT-POINTING_POINTER] Item1  Item2  Item3

    /* Droite à gauche */
    flex-direction: row-reverse;
    /* [BLACK_LEFT-POINTING_POINTER] Item3  Item2  Item1

    /* Haut en bas */
    flex-direction: column;
    /* v Item1
         Item2
         Item3

    /* Bas en haut */
    flex-direction: column-reverse;
    /* ^ Item3
         Item2
         Item1
}
"""

"""
flex-wrap : RETOUR À LA LIGNE
"""

"""
.container {
    /* Ne pas retourner à la ligne (défaut) */
    flex-wrap: nowrap;
    /* Items se réduisent si nécessaire

    /* Retourner à la ligne si nécessaire */
    flex-wrap: wrap;
    /* [BLACK_RIGHT-POINTING_POINTER] Item1  Item2  Item3
         Item4  Item5

    /* Retourner à la ligne en sens inverse */
    flex-wrap: wrap-reverse;

    /* Raccourci direction + wrap */
    flex-flow: row wrap;
}
"""

"""
justify-content : ALIGNEMENT SUR L'AXE PRINCIPAL
"""

"""
.container {
    display: flex;
    justify-content: flex-start;     /* Début (défaut) */
    /* [BLACK_RIGHT-POINTING_POINTER] [I1][I2][I3]               */

    justify-content: flex-end;       /* Fin */
    /* [BLACK_RIGHT-POINTING_POINTER]            [I1][I2][I3]    */

    justify-content: center;         /* Centre */
    /* [BLACK_RIGHT-POINTING_POINTER]       [I1][I2][I3]         */

    justify-content: space-between;  /* Espaces entre */
    /* [BLACK_RIGHT-POINTING_POINTER] [I1]     [I2]     [I3]     */

    justify-content: space-around;   /* Espaces autour */
    /* [BLACK_RIGHT-POINTING_POINTER]  [I1]   [I2]   [I3]        */

    justify-content: space-evenly;   /* Espaces égaux partout */
    /* [BLACK_RIGHT-POINTING_POINTER]   [I1]   [I2]   [I3]       */
}
"""

"""
align-items : ALIGNEMENT SUR L'AXE CROIX (une ligne)
"""

"""
.container {
    display: flex;
    height: 200px;

    align-items: stretch;      /* Étire jusqu'en bas (défaut) */
    align-items: flex-start;   /* Haut */
    align-items: flex-end;     /* Bas */
    align-items: center;       /* Centre vertical <- TRÈS UTILE ! */
    align-items: baseline;     /* Aligne les baselines du texte */
}

/* CENTRER PARFAITEMENT (horizontalement ET verticalement) */
.center-everything {
    display: flex;
    justify-content: center;  /* Centre horizontal */
    align-items: center;      /* Centre vertical */
    height: 100vh;            /* Pleine hauteur */
}
"""

"""
align-content : ALIGNEMENT SUR L'AXE CROIX (plusieurs lignes)
(Seulement quand flex-wrap: wrap)
"""

"""
.container {
    flex-wrap: wrap;
    align-content: flex-start;
    align-content: flex-end;
    align-content: center;
    align-content: space-between;
    align-content: space-around;
    align-content: stretch;  /* défaut */
}
"""

"""
gap : ESPACEMENT ENTRE LES ÉLÉMENTS
"""

"""
.container {
    display: flex;
    gap: 20px;             /* Même gap partout */
    gap: 16px 24px;        /* row-gap column-gap */
    row-gap: 16px;         /* Espace entre lignes */
    column-gap: 24px;      /* Espace entre colonnes */
}
"""


# ----------------------------------------------------------------------------
# [RUNNER] PROPRIÉTÉS DES ÉLÉMENTS FLEX (flex items)
# ----------------------------------------------------------------------------

"""
flex-grow : AGRANDISSEMENT PROPORTIONNEL
"""

"""
/* Si on a 300px d'espace libre */
.item1 { flex-grow: 1; }   /* Prend 1/3 de l'espace libre */
.item2 { flex-grow: 2; }   /* Prend 2/3 de l'espace libre */
.item3 { flex-grow: 0; }   /* Ne grandit pas (défaut) */

/* Tous égaux */
.item { flex-grow: 1; }    /* Tous prennent la même part */
"""

"""
flex-shrink : RÉDUCTION PROPORTIONNELLE
"""

"""
/* Si on manque de 300px d'espace */
.item1 { flex-shrink: 1; }  /* Rétrécit normalement (défaut) */
.item2 { flex-shrink: 2; }  /* Rétrécit 2x plus vite */
.item3 { flex-shrink: 0; }  /* Ne rétrécit JAMAIS */
"""

"""
flex-basis : TAILLE DE BASE
"""

"""
.item { flex-basis: auto; }     /* Taille naturelle (défaut) */
.item { flex-basis: 200px; }    /* 200px de base */
.item { flex-basis: 25%; }      /* 25% de la largeur */
.item { flex-basis: 0; }        /* Aucune taille de base */
"""

"""
flex : RACCOURCI (grow shrink basis)
"""

"""
.item { flex: 0 1 auto; }    /* Défaut */
.item { flex: 1; }           /* = flex: 1 1 0 (item flexible) */
.item { flex: auto; }        /* = flex: 1 1 auto */
.item { flex: none; }        /* = flex: 0 0 auto (rigide) */
.item { flex: 2; }           /* Grandit 2x plus que flex: 1 */
"""

"""
align-self : ALIGNEMENT INDIVIDUEL
Écrase align-items pour cet élément
"""

"""
.item {
    align-self: auto;        /* Hérite de align-items */
    align-self: flex-start;
    align-self: flex-end;
    align-self: center;
    align-self: stretch;
    align-self: baseline;
}
"""

"""
order : ORDRE D'AFFICHAGE
"""

"""
.item1 { order: 2; }   /* Affiché en 2ème */
.item2 { order: 1; }   /* Affiché en 1er */
.item3 { order: 3; }   /* Affiché en 3ème */
/* Défaut : order 0, dans l'ordre du HTML */
/* Valeurs négatives = avant les order: 0 */
"""


# ----------------------------------------------------------------------------
# [COURS] EXEMPLES FLEXBOX PRATIQUES
# ----------------------------------------------------------------------------

"""
EXEMPLE 1 : Navigation horizontale
"""

"""
/* HTML */
<nav class="navbar">
    <a href="/" class="logo">MonSite</a>
    <ul class="nav-links">
        <li><a href="/">Accueil</a></li>
        <li><a href="/about">À propos</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

/* CSS */
.navbar {
    display: flex;
    justify-content: space-between;  /* Logo à gauche, links à droite */
    align-items: center;              /* Centré verticalement */
    padding: 16px 32px;
    background: #1a1a2e;
}

.logo {
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
}

.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 32px;
}

.nav-links a {
    color: white;
    text-decoration: none;
}
"""

"""
EXEMPLE 2 : Cards en grille flexible
"""

"""
/* HTML */
<div class="cards-container">
    <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-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 24px;
}

.card {
    flex: 1 1 300px;       /* Croît, rétrécit, base 300px */
    max-width: 400px;
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
"""

"""
EXEMPLE 3 : Centrer parfaitement
"""

"""
/* Centrer une modal */
.modal-overlay {
    position: fixed;
    inset: 0;              /* = top:0; right:0; bottom:0; left:0 */
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.5);
}

.modal {
    background: white;
    padding: 32px;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
}
"""

"""
EXEMPLE 4 : Layout header/main/footer
"""

"""
/* Layout full-page */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;  /* Disposition verticale */
}

header {
    flex-shrink: 0;          /* Ne rétrécit pas */
    background: #2563eb;
    padding: 16px;
}

main {
    flex: 1;                 /* Prend tout l'espace disponible */
    padding: 32px;
}

footer {
    flex-shrink: 0;          /* Ne rétrécit pas */
    background: #1a1a2e;
    padding: 16px;
}

/* RÉSULTAT : Footer toujours en bas même si le contenu est court ! */
"""


# ============================================================================
# ═══════════════════════════════════════════════════════════════════════════
# PARTIE 3 : CSS AVANCÉ
# ═══════════════════════════════════════════════════════════════════════════
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 10 : CSS GRID
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Comprendre le modèle CSS Grid (bidimensionnel)
[OK] Définir des colonnes et lignes
[OK] Placer des éléments dans la grille
[OK] Créer des layouts complexes
[OK] Grid vs Flexbox : quand utiliser quoi
"""


# ----------------------------------------------------------------------------
# [DOSSIER] INTRODUCTION À CSS GRID
# ----------------------------------------------------------------------------

"""
CSS GRID = LAYOUT BIDIMENSIONNEL

Contrairement à Flexbox (une dimension),
CSS Grid gère LIGNES ET COLONNES simultanément.

QUAND UTILISER GRID vs FLEXBOX ?

Grid    -> Layout de page (structure générale)
         "J'ai besoin de lignes ET colonnes"
         Dashboard, galeries photos, layouts complexes

Flexbox -> Composants (navigation, cards, boutons)
          "J'ai besoin d'une seule direction"
          Navigation, listes de cards, alignement


TERMINOLOGIE GRID :

┌─────┬─────┬─────┬─────┐
│     │     │     │     │  <- Ligne de grille (grid line)
│  C  │  C  │  C  │  C  │
│  e  │  e  │  e  │  e  │
│  l  │  l  │  l  │  l  │
│  l  │  l  │  l  │  l  │
│  u  │  u  │  u  │  u  │
│  l  │  l  │  l  │  l  │
│  e  │  e  │  e  │  e  │
├─────┼─────┼─────┼─────┤ <- Ligne de grille
│     │     │     │     │
│     │     │     │     │
└─────┴─────┴─────┴─────┘
  ^     ^     ^     ^
Colonnes de grille


Grid Container -> display: grid
Grid Items     -> les enfants directs
Grid Lines     -> les lignes de séparation
Grid Tracks    -> les colonnes ou lignes
Grid Cells     -> l'intersection d'une colonne et ligne
Grid Areas     -> regroupement de cells


ACTIVER CSS GRID :
"""

"""
.container {
    display: grid;
}
"""


# ----------------------------------------------------------------------------
# [MESURE] DÉFINIR LA GRILLE
# ----------------------------------------------------------------------------

"""
grid-template-columns : DÉFINIR LES COLONNES
grid-template-rows    : DÉFINIR LES LIGNES
"""

"""
.container {
    display: grid;

    /* 3 colonnes égales de 200px */
    grid-template-columns: 200px 200px 200px;

    /* Raccourci avec repeat() */
    grid-template-columns: repeat(3, 200px);

    /* Colonnes de tailles différentes */
    grid-template-columns: 250px 1fr 1fr;
    /* 250px fixe, puis le reste divisé en 2 */

    /* Fraction (fr) : unité flexible */
    grid-template-columns: 1fr 2fr 1fr;
    /* 1/4 - 2/4 - 1/4 de la largeur */

    /* 12 colonnes égales (système de grille) */
    grid-template-columns: repeat(12, 1fr);

    /* Colonnes automatiques avec taille min/max */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* Crée autant de colonnes que possible de 250px min à 1fr max */
    /* Parfait pour les galeries responsive ! */

    /* Définir les lignes */
    grid-template-rows: 80px 1fr auto;
    /* Header 80px, contenu flexible, footer auto */

    /* Espacement entre cellules */
    gap: 20px;              /* Même partout */
    gap: 16px 24px;         /* row-gap column-gap */
}
"""

"""
[IDEE] COMPRENDRE FR (FRACTION)

grid-template-columns: 1fr 2fr 1fr;
Total = 1+2+1 = 4 parts

Avec un container de 800px :
- 1fr = 800 / 4 * 1 = 200px
- 2fr = 800 / 4 * 2 = 400px
- 1fr = 800 / 4 * 1 = 200px
Total = 200 + 400 + 200 = 800px [OK]

Avec padding ou gap, la fraction s'adapte automatiquement
C'est l'avantage sur les pourcentages !
"""


# ----------------------------------------------------------------------------
# [OBJECTIF] PLACER LES ÉLÉMENTS
# ----------------------------------------------------------------------------

"""
PAR LIGNE (grid-column, grid-row)
"""

"""
/* Structure de base :
   Lignes 1 2 3 4 (colonnes)
        ┌──┬──┬──┐
   1    │  │  │  │
        ├──┼──┼──┤
   2    │  │  │  │
        └──┴──┴──┘
   Les lignes sont numérotées ENTRE les colonnes

   Column lines:  1 | 2 | 3 | 4
   Row lines:  1 | 2 | 3
*/

.header {
    grid-column: 1 / 4;      /* De la ligne 1 à 4 (toute la largeur) */
    grid-row: 1 / 2;         /* Première ligne */
}

.sidebar {
    grid-column: 1 / 2;      /* Première colonne */
    grid-row: 2 / 3;         /* Deuxième ligne */
}

.content {
    grid-column: 2 / 4;      /* 2ème et 3ème colonnes */
    grid-row: 2 / 3;
}

.footer {
    grid-column: 1 / 4;      /* Toute la largeur */
    grid-row: 3 / 4;
}

/* Raccourci avec span */
.item {
    grid-column: 2 / span 2;    /* Commence à 2, s'étend sur 2 colonnes */
    grid-row: span 2;            /* S'étend sur 2 lignes */
}

/* -1 pour la dernière ligne */
.full-width {
    grid-column: 1 / -1;        /* Du début à la fin */
}
"""

"""
AVEC GRID AREAS (méthode visuelle !)
"""

"""
.container {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 80px 1fr 60px;
    grid-template-areas:
        "header  header"
        "sidebar content"
        "footer  footer";
    min-height: 100vh;
    gap: 16px;
}

/* Assigner chaque élément à une zone */
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer  { grid-area: footer; }

/* RÉSULTAT VISUEL :
┌─────────────────────────────┐
│         HEADER              │
├──────────┬──────────────────┤
│          │                  │
│ SIDEBAR  │    CONTENT       │
│          │                  │
├──────────┴──────────────────┤
│         FOOTER              │
└─────────────────────────────┘

C'est EXACTEMENT ce que vous voyez dans le CSS !!
"""


# ----------------------------------------------------------------------------
# [DESIGN] EXEMPLES GRID PRATIQUES
# ----------------------------------------------------------------------------

"""
EXEMPLE 1 : Layout de page classique
"""

"""
.page-layout {
    display: grid;
    grid-template-areas:
        "nav     nav"
        "sidebar main"
        "footer  footer";
    grid-template-columns: 300px 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    gap: 0;
}

nav    { grid-area: nav; background: #1a1a2e; }
.sidebar { grid-area: sidebar; background: #f0f4f8; padding: 24px; }
main   { grid-area: main; padding: 32px; }
footer { grid-area: footer; background: #1a1a2e; color: white; }
"""

"""
EXEMPLE 2 : Galerie responsive (la killer feature de Grid)
"""

"""
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* auto-fit : crée le max de colonnes possibles */
    /* minmax(250px, 1fr) : min 250px, max 1fr */
    gap: 16px;
    padding: 16px;
}

.gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

/* Résultat :
- 4 colonnes sur grand écran (1000px+)
- 3 colonnes sur tablette (~750px)
- 2 colonnes sur mobile (~500px)
- 1 colonne sur très petit mobile
- TOUT ÇA SANS MEDIA QUERIES ! */
"""

"""
EXEMPLE 3 : Dashboard cards
"""

"""
.dashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto 1fr;
    gap: 20px;
    padding: 20px;
}

/* Stats en haut */
.stat-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Graphique qui prend 2 colonnes et 2 lignes */
.main-chart {
    grid-column: span 2;
    grid-row: span 2;
    background: white;
    border-radius: 12px;
    padding: 20px;
}

/* Activité récente : toute la dernière ligne */
.recent-activity {
    grid-column: 1 / -1;
    background: white;
    border-radius: 12px;
    padding: 20px;
}
"""

"""
GRID vs FLEXBOX : RÉSUMÉ

┌─────────────────────────────────────────────────────────┐
│                  QUAND UTILISER QUOI ?                  │
├──────────────────────┬──────────────────────────────────┤
│     FLEXBOX          │         CSS GRID                 │
├──────────────────────┼──────────────────────────────────┤
│ Une dimension        │ Deux dimensions                  │
│ (ligne OU colonne)   │ (lignes ET colonnes)             │
│                      │                                  │
│ Composants :         │ Layouts :                        │
│ • Navigation         │ • Structure de page              │
│ • Boutons            │ • Dashboard                      │
│ • Formulaires        │ • Galeries photos                │
│ • Cards horizontales │ • Mosaïques                      │
│ • Menu dropdown      │ • Layouts complexes              │
│                      │                                  │
│ Contenu dynamique    │ Contenu prévisible               │
│ dont vous ne         │ dont vous connaissez             │
│ connaissez pas la    │ la disposition                   │
│ taille               │                                  │
└──────────────────────┴──────────────────────────────────┘

[IDEE] Ils sont COMPLÉMENTAIRES, pas concurrents !
Un layout Grid peut contenir des composants Flexbox.
"""


# ============================================================================
# [GUIDE] CHAPITRE 11 : RESPONSIVE DESIGN ET MEDIA QUERIES
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Comprendre les principes du responsive design
[OK] Maîtriser les media queries
[OK] Approche Mobile-First
[OK] Unités relatives (rem, em, vw, vh, %)
[OK] Viewport et meta tag
[OK] Images responsive
"""


# ----------------------------------------------------------------------------
# [MOBILE] POURQUOI LE RESPONSIVE DESIGN ?
# ----------------------------------------------------------------------------

"""
Les utilisateurs accèdent au web depuis :
- Téléphones (360-430px)
- Tablettes (768-1024px)
- Laptops (1280-1600px)
- Desktops (1920px+)
- Montres connectées (280px)
- Télévisions (3840px+)

STATISTIQUES 2024 :
60%+ du trafic web provient des mobiles !

Un site non-responsive perd la majorité de ses visiteurs.


BREAKPOINTS COURANTS (tailles d'écran) :

Mobile   : <768px
Tablet   : 768px - 1024px
Laptop   : 1024px - 1440px
Desktop  : >1440px

FRAMEWORK TAILWIND CSS BREAKPOINTS (standards de l'industrie) :
sm  : 640px
md  : 768px
lg  : 1024px
xl  : 1280px
2xl : 1536px
"""


# ----------------------------------------------------------------------------
# [MESURE] MEDIA QUERIES
# ----------------------------------------------------------------------------

"""
SYNTAXE :

@media media-type and (condition) {
    /* Styles appliqués si condition vraie */
}

Types de médias :
screen  -> Écrans (le plus courant)
print   -> Impression
speech  -> Lecteurs d'écran
all     -> Tous (défaut)


CONDITIONS COURANTES :
"""

"""
/* MIN-WIDTH : Styles pour GRAND que cette taille */
@media (min-width: 768px) {
    /* Tablettes et plus */
    .container {
        max-width: 1200px;
    }
}

/* MAX-WIDTH : Styles pour PLUS PETIT que cette taille */
@media (max-width: 767px) {
    /* Mobiles uniquement */
    .nav-links {
        display: none;
    }
}

/* COMBINAISONS */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Tablettes uniquement */
    .sidebar {
        width: 200px;
    }
}

/* ORIENTATION */
@media (orientation: landscape) {
    /* Paysage */
}

@media (orientation: portrait) {
    /* Portrait */
}

/* RÉSOLUTION ÉCRAN */
@media (min-resolution: 2dppx) {
    /* Écrans Retina/HiDPI (iPhone, Mac Retina...) */
    .logo {
        background-image: url('logo@2x.png');
    }
}

/* PRÉFÉRENCE SYSTÈME */
@media (prefers-color-scheme: dark) {
    /* Mode sombre */
    body {
        background: #1a1a2e;
        color: #e2e8f0;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Utilisateur préfère pas d'animations */
    * {
        animation: none !important;
        transition: none !important;
    }
}
"""


# ----------------------------------------------------------------------------
# [MOBILE] APPROCHE MOBILE-FIRST
# ----------------------------------------------------------------------------

"""
DEUX APPROCHES :

DESKTOP-FIRST (ancienne méthode) :
1. Dessiner pour desktop
2. Utiliser max-width pour réduire sur mobile
-> CSS plus complexe, surcharge styles

MOBILE-FIRST (méthode moderne recommandée) :
1. Dessiner pour mobile d'abord
2. Utiliser min-width pour étendre sur desktop
-> CSS plus propre, priorité aux petits écrans
-> Meilleures performances sur mobile


EXEMPLE MOBILE-FIRST :
"""

"""
/* ─────────────────────────────────────────── */
/* MOBILE FIRST : styles de base (mobile)    */
/* ─────────────────────────────────────────── */

.container {
    padding: 16px;
}

.nav-links {
    display: none;                /* Masqué sur mobile */
}

.hamburger-menu {
    display: block;               /* Visible sur mobile */
}

.card-grid {
    display: grid;
    grid-template-columns: 1fr;   /* 1 colonne sur mobile */
    gap: 16px;
}


/* ─────────────────────────────────────────── */
/* TABLETTES (768px et plus)                  */
/* ─────────────────────────────────────────── */

@media (min-width: 768px) {
    .container {
        padding: 24px;
    }

    .nav-links {
        display: flex;             /* Visible sur tablette+ */
    }

    .hamburger-menu {
        display: none;             /* Masqué sur tablette+ */
    }

    .card-grid {
        grid-template-columns: repeat(2, 1fr);  /* 2 colonnes */
    }
}


/* ─────────────────────────────────────────── */
/* DESKTOP (1024px et plus)                   */
/* ─────────────────────────────────────────── */

@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 32px;
    }

    .card-grid {
        grid-template-columns: repeat(3, 1fr);  /* 3 colonnes */
    }
}


/* ─────────────────────────────────────────── */
/* GRAND DESKTOP (1440px et plus)             */
/* ─────────────────────────────────────────── */

@media (min-width: 1440px) {
    .card-grid {
        grid-template-columns: repeat(4, 1fr);  /* 4 colonnes */
    }
}
"""


# ----------------------------------------------------------------------------
# [FRAME_WITH_PICTURE] IMAGES RESPONSIVE
# ----------------------------------------------------------------------------

"""
IMAGES QUI S'ADAPTENT À LA TAILLE DE L'ÉCRAN
"""

"""
/* Image qui ne dépasse jamais son conteneur */
img {
    max-width: 100%;
    height: auto;               /* Maintient le ratio */
}

/* Pour tous les médias */
img, video, iframe, canvas, audio {
    max-width: 100%;
}

/* Couverture avec ratio maintenu */
.hero-image {
    width: 100%;
    height: 400px;
    object-fit: cover;          /* Remplit sans déformer */
    object-position: center;    /* Centre l'image */
}

/* Image différente selon écran */
/* (avec srcset HTML, pas CSS) */
"""

# HTML pour images responsive :
"""
<!-- srcset : images différentes selon résolution -->
<img
    src="image-800.jpg"
    srcset="image-400.jpg 400w,
            image-800.jpg 800w,
            image-1200.jpg 1200w,
            image-2400.jpg 2400w"
    sizes="(max-width: 600px) 100vw,
           (max-width: 1200px) 50vw,
           800px"
    alt="Description de l'image"
    loading="lazy">

<!-- Picture : image totalement différente selon écran -->
<picture>
    <!-- Mobile : image carrée -->
    <source media="(max-width: 768px)" srcset="image-mobile.jpg">
    <!-- Tablette : image standard -->
    <source media="(max-width: 1024px)" srcset="image-tablet.jpg">
    <!-- Desktop : image large -->
    <img src="image-desktop.jpg" alt="Description">
</picture>
"""

"""
[IDEE] EXPLICATION DE srcset ET sizes

srcset : liste des images disponibles avec leur largeur
    image-400.jpg 400w   -> Image large de 400px
    image-800.jpg 800w   -> Image large de 800px

sizes : indique au navigateur quelle largeur d'image choisir
    (max-width: 600px) 100vw  -> Sur mobile : utilise 100% de la fenêtre
    (max-width: 1200px) 50vw  -> Sur tablette : utilise 50% de la fenêtre
    800px                     -> Sur desktop : utilise 800px max

Le navigateur choisit automatiquement la meilleure image !
(Considère aussi la densité de pixels pour Retina)
"""


# ============================================================================
# [GUIDE] CHAPITRE 12 : ANIMATIONS ET TRANSITIONS CSS
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Créer des transitions smooth
[OK] Créer des animations CSS (keyframes)
[OK] Utiliser transform pour déplacer/tourner/zoomer
[OK] Animer avec performance (will-change, GPU)
"""


# ----------------------------------------------------------------------------
# [SYNC] TRANSITIONS CSS
# ----------------------------------------------------------------------------

"""
TRANSITION = Changement d'état smooth (A -> B)

SYNTAXE :
transition: propriété durée timing-function délai;

PROPRIÉTÉS ANIMABLES :
color, background-color, opacity, transform,
width, height, margin, padding, border, font-size...

PROPRIÉTÉS NON ANIMABLES :
display, visibility (on utilise opacity + pointer-events)
"""

"""
/* Bouton avec hover effect */
.btn {
    background: #2563eb;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;

    /* Transition sur toutes les propriétés */
    transition: all 0.3s ease;

    /* Ou propriétés spécifiques (mieux pour la perf) */
    transition: background-color 0.2s ease,
                transform 0.2s ease,
                box-shadow 0.2s ease;
}

.btn:hover {
    background: #1d4ed8;
    transform: translateY(-2px);       /* Légère élévation */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.btn:active {
    transform: translateY(0);           /* Retour à la position */
    box-shadow: none;
}
"""

"""
TIMING FUNCTIONS (courbes d'accélération) :

ease         -> Commence lent, accélère, finit lent (défaut)
linear       -> Vitesse constante
ease-in      -> Commence lent, finit rapide
ease-out     -> Commence rapide, finit lent
ease-in-out  -> Lent au début et à la fin
steps(n)     -> n étapes distinctes (comme une animation sprite)
cubic-bezier(x1,y1,x2,y2) -> Courbe personnalisée
"""

"""
/* Exemples visuels de timing */

.btn-ease     { transition: transform 0.5s ease; }
.btn-linear   { transition: transform 0.5s linear; }
.btn-ease-out { transition: transform 0.5s ease-out; }

/* Courbe personnalisée (utiliser cubic-bezier.com) */
.btn-bounce {
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Effet rebond */
}
"""


# ----------------------------------------------------------------------------
# [DEMARRAGE] ANIMATIONS CSS (KEYFRAMES)
# ----------------------------------------------------------------------------

"""
ANIMATIONS = Séquence d'états avec contrôle total

2 étapes :
1. Définir l'animation avec @keyframes
2. L'appliquer avec animation:
"""

"""
/* ÉTAPE 1 : Définir l'animation */

/* Fondu entrant */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Glissement depuis le bas */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation sur plusieurs étapes */
@keyframes pulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
    70%  { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

/* Rotation infinie */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Bounce */
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
    40%, 43%                 { transform: translateY(-30px); }
    70%                      { transform: translateY(-15px); }
    90%                      { transform: translateY(-4px); }
}

/* Effet tape à la machine */
@keyframes typing {
    from { width: 0; }
    to   { width: 100%; }
}
@keyframes blink {
    0%, 100% { border-color: transparent; }
    50%      { border-color: black; }
}
"""

"""
/* ÉTAPE 2 : Appliquer l'animation */

.card {
    animation: fadeIn 0.5s ease-out forwards;
    /* nom  durée timing fill-mode */
}

.spinner {
    animation: spin 1s linear infinite;
    /* Se répète à l'infini */
}

.hero-title {
    animation: slideUp 0.8s ease-out forwards;
}

.btn-cta {
    animation: pulse 2s infinite;
}

/* PROPRIÉTÉS D'ANIMATION */
.element {
    animation-name: fadeIn;           /* Nom de @keyframes */
    animation-duration: 0.5s;        /* Durée */
    animation-timing-function: ease; /* Courbe */
    animation-delay: 0.2s;           /* Délai avant démarrage */
    animation-iteration-count: 1;    /* Nb de répétitions (infinite) */
    animation-direction: normal;     /* normal, reverse, alternate */
    animation-fill-mode: forwards;   /* Quoi après l'animation */
    animation-play-state: running;   /* running, paused */

    /* Raccourci */
    animation: fadeIn 0.5s ease 0.2s 1 normal forwards running;
}

/* fill-mode :
   none     -> Revient à l'état initial
   forwards -> Garde l'état final
   backwards -> État initial dès le délai
   both     -> forwards + backwards
*/
"""


# ----------------------------------------------------------------------------
# [SYNC] TRANSFORM CSS
# ----------------------------------------------------------------------------

"""
TRANSFORM : Transformations 2D et 3D

Sans affecter le layout ! (ne déplace pas les autres éléments)
-> Excellent pour les animations (GPU accéléré)
"""

"""
.element {
    /* TRANSLATION (déplacement) */
    transform: translateX(50px);       /* Droite de 50px */
    transform: translateY(-20px);      /* Haut de 20px */
    transform: translate(50px, -20px); /* Droite 50, haut 20 */
    transform: translateZ(10px);       /* Vers l'avant (3D) */

    /* ROTATION */
    transform: rotate(45deg);          /* 45° sens horaire */
    transform: rotate(-90deg);         /* 90° sens anti-horaire */
    transform: rotateX(45deg);         /* Autour de l'axe X (3D) */
    transform: rotateY(30deg);         /* Autour de l'axe Y (3D) */

    /* REDIMENSIONNEMENT */
    transform: scaleX(1.5);            /* Élargit de 50% */
    transform: scaleY(0.8);            /* Rétrécit hauteur 20% */
    transform: scale(1.2);             /* 20% plus grand */
    transform: scale(0.5, 2);          /* Moitié large, double haut */

    /* INCLINAISON */
    transform: skewX(20deg);
    transform: skewY(-10deg);
    transform: skew(20deg, -10deg);

    /* COMBINAISONS (s'appliquent de droite à gauche) */
    transform: translateY(-50%) rotate(45deg) scale(1.2);

    /* ORIGINE DE TRANSFORMATION */
    transform-origin: center;          /* Défaut */
    transform-origin: top left;
    transform-origin: 50% 50%;
    transform-origin: 0 0;
}
"""

# EXEMPLE : Menu hamburger animé
"""
/* HTML */
<button class="hamburger" aria-label="Menu">
    <span></span>
    <span></span>
    <span></span>
</button>

/* CSS */
.hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #333;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* Quand ouvert (classe ajoutée par JS) */
.hamburger.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}
"""


# ============================================================================
# [GUIDE] CHAPITRE 13 : PSEUDO-CLASSES ET PSEUDO-ÉLÉMENTS AVANCÉS
# ============================================================================

"""
PSEUDO-CLASSES AVANCÉES
"""

"""
/* Sélection basée sur la position */

/* Exactement le 3ème enfant */
li:nth-child(3) { color: blue; }

/* Tous les enfants pairs */
tr:nth-child(even) { background: #f5f5f5; }

/* Tous les enfants impairs */
tr:nth-child(odd) { background: white; }

/* 3ème de type p (ignore les autres types) */
p:nth-of-type(3) { font-size: 1.2rem; }

/* Les 3 derniers éléments */
li:nth-last-child(-n+3) { font-weight: bold; }

/* Élément unique (seul enfant de son type) */
p:only-child { font-style: italic; }

/* Premier élément de son type */
p:first-of-type { font-size: 1.3rem; }

/* Dernier élément de son type */
p:last-of-type { margin-bottom: 0; }

/* Tout sauf .active */
li:not(.active) { opacity: 0.7; }
li:not(:first-child) { border-top: 1px solid #eee; }


/* ÉTATS DE FORMULAIRE */
input:focus { outline: 2px solid #2563eb; }
input:invalid { border-color: red; }
input:valid { border-color: green; }
input:required { border-left: 3px solid orange; }
input:disabled { opacity: 0.5; cursor: not-allowed; }
input:read-only { background: #f5f5f5; }
input:checked + label { font-weight: bold; }

/* Cibler le champ en cours d'édition */
input:focus-within { /* Sur le parent contenant l'input focus */ }


/* LIEN ET BOUTONS */
a:hover { color: #0056b3; }
a:focus-visible { outline: 2px solid blue; }  /* Seulement au clavier */
button:focus { outline: 2px solid #2563eb; }
"""

"""
PSEUDO-ÉLÉMENTS POUR EFFETS DÉCORATIFS
"""

"""
/* Badges et compteurs */
.notification-badge::after {
    content: attr(data-count);  /* Valeur de l'attribut data-count */
    position: absolute;
    top: -8px;
    right: -8px;
    background: red;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ligne décorative sous les titres */
h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: #2563eb;
    margin-top: 8px;
}

/* Citation stylisée */
blockquote::before {
    content: '\201C';  /* " */
    font-size: 4em;
    color: #2563eb;
    line-height: 0.1em;
    display: block;
    margin-bottom: 8px;
}

/* Icône externe sur les liens */
a[href^="http"]::after {
    content: ' ->';
    font-size: 0.8em;
    color: #666;
}

/* Overlay de chargement */
.loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.7);
    z-index: 10;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid #2563eb;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 11;
}
"""


# ============================================================================
# [GUIDE] CHAPITRE 14 : VARIABLES CSS (CUSTOM PROPERTIES)
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Déclarer et utiliser des variables CSS
[OK] Créer un système de design avec variables
[OK] Implémenter un thème sombre (dark mode)
[OK] Modifier les variables avec JavaScript
"""


# ----------------------------------------------------------------------------
# [NOTE] VARIABLES CSS
# ----------------------------------------------------------------------------

"""
DÉCLARATION :
--nom-variable: valeur;   (Commence par --)

UTILISATION :
propriété: var(--nom-variable);
propriété: var(--nom-variable, valeur-par-défaut);
"""

"""
/* EXEMPLE SYSTÈME DE DESIGN COMPLET */

:root {
    /* ─────────────────────────────────── */
    /* COULEURS                           */
    /* ─────────────────────────────────── */

    /* Primaire */
    --color-primary-50:  #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-900: #1e3a8a;

    /* Neutres */
    --color-gray-50:  #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-500: #6b7280;
    --color-gray-700: #374151;
    --color-gray-900: #111827;

    /* Sémantiques */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error:   #ef4444;
    --color-info:    #3b82f6;

    /* ─────────────────────────────────── */
    /* TYPOGRAPHIE                        */
    /* ─────────────────────────────────── */

    --font-sans:  'Inter', -apple-system, sans-serif;
    --font-serif: Georgia, 'Times New Roman', serif;
    --font-mono:  'Fira Code', 'Courier New', monospace;

    /* Tailles */
    --text-xs:   0.75rem;   /* 12px */
    --text-sm:   0.875rem;  /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg:   1.125rem;  /* 18px */
    --text-xl:   1.25rem;   /* 20px */
    --text-2xl:  1.5rem;    /* 24px */
    --text-3xl:  1.875rem;  /* 30px */
    --text-4xl:  2.25rem;   /* 36px */

    /* ─────────────────────────────────── */
    /* ESPACEMENT                         */
    /* ─────────────────────────────────── */

    --space-1:  0.25rem;  /* 4px */
    --space-2:  0.5rem;   /* 8px */
    --space-3:  0.75rem;  /* 12px */
    --space-4:  1rem;     /* 16px */
    --space-6:  1.5rem;   /* 24px */
    --space-8:  2rem;     /* 32px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */

    /* ─────────────────────────────────── */
    /* BORDURES                           */
    /* ─────────────────────────────────── */

    --radius-sm:   4px;
    --radius:      8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-full: 9999px;  /* Cercle ou pill */

    /* ─────────────────────────────────── */
    /* OMBRES                             */
    /* ─────────────────────────────────── */

    --shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
    --shadow:     0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:  0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg:  0 10px 15px rgba(0,0,0,0.1);
    --shadow-xl:  0 20px 25px rgba(0,0,0,0.1);

    /* ─────────────────────────────────── */
    /* TRANSITIONS                        */
    /* ─────────────────────────────────── */

    --transition-fast:   0.1s ease;
    --transition:        0.2s ease;
    --transition-slow:   0.3s ease;

    /* ─────────────────────────────────── */
    /* LAYOUT                             */
    /* ─────────────────────────────────── */

    --container-sm:  640px;
    --container-md:  768px;
    --container-lg:  1024px;
    --container-xl:  1280px;
    --container-2xl: 1536px;
}


/* UTILISATION DES VARIABLES */

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-gray-900);
    background: var(--color-gray-50);
}

.btn {
    padding: var(--space-3) var(--space-6);
    background: var(--color-primary-600);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.btn:hover {
    background: var(--color-primary-700);
    transform: translateY(-1px);
}

.card {
    background: white;
    border-radius: var(--radius-md);
    padding: var(--space-6);
    box-shadow: var(--shadow);
}
"""

"""
DARK MODE AVEC VARIABLES
"""

"""
/* Thème clair (défaut) */
:root {
    --bg-page:    #f9fafb;
    --bg-card:    #ffffff;
    --text-main:  #111827;
    --text-muted: #6b7280;
    --border:     #e5e7eb;
}

/* Thème sombre (préférence système) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-page:    #111827;
        --bg-card:    #1f2937;
        --text-main:  #f9fafb;
        --text-muted: #9ca3af;
        --border:     #374151;
    }
}

/* Thème sombre (classe manuelle) */
.dark-theme {
    --bg-page:    #111827;
    --bg-card:    #1f2937;
    --text-main:  #f9fafb;
    --text-muted: #9ca3af;
    --border:     #374151;
}

/* Les composants utilisent les variables */
body {
    background: var(--bg-page);
    color: var(--text-main);
}

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
}

/* SEULES LES VARIABLES CHANGENT, PAS LES COMPOSANTS ! */
"""

"""
MODIFIER VARIABLES AVEC JAVASCRIPT
"""

# JavaScript pour toggle dark mode :
"""
/* HTML */
<button id="theme-toggle">Changer de thème</button>

/* JavaScript */
const toggle = document.getElementById('theme-toggle');
toggle.addEventListener('click', () => {
    document.documentElement.classList.toggle('dark-theme');
    localStorage.setItem('theme',
        document.documentElement.classList.contains('dark-theme') ? 'dark' : 'light'
    );
});

/* Charger le thème sauvegardé */
if (localStorage.getItem('theme') === 'dark') {
    document.documentElement.classList.add('dark-theme');
}
"""


# ============================================================================
# ═══════════════════════════════════════════════════════════════════════════
# PARTIE 4 : TECHNIQUES MODERNES
# ═══════════════════════════════════════════════════════════════════════════
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 15 : CSS ARCHITECTURE (BEM)
# ============================================================================

"""
[OBJECTIF] OBJECTIFS D'APPRENTISSAGE

À la fin de ce chapitre, vous saurez :
[OK] Pourquoi l'architecture CSS est importante
[OK] La méthodologie BEM
[OK] Organiser vos fichiers CSS
[OK] Éviter les conflits de styles
"""


# ----------------------------------------------------------------------------
# [CONSTRUCTION] POURQUOI L'ARCHITECTURE CSS ?
# ----------------------------------------------------------------------------

"""
PROBLÈMES DU CSS NON ORGANISÉ

Symptômes du "CSS Spaghetti" :
[X] !important partout
[X] Copier-coller de styles
[X] Peur de modifier le CSS existant
[X] Conflits de noms de classes
[X] CSS de 5000+ lignes sans organisation
[X] Suppression impossible (on ne sait pas ce qui casse)


LA MÉTHODOLOGIE BEM

BEM = Block Element Modifier

Nomenclature pour nommer les classes CSS de façon cohérente.

BLOCK : Composant indépendant et réutilisable
ELEMENT : Partie d'un block (ne peut pas exister seul)
MODIFIER : Variation d'un block ou element

SYNTAXE :
.block
.block__element
.block--modifier
.block__element--modifier
"""

# EXEMPLE CONCRET : Bouton
"""
/* HTML */
<button class="btn">Cliquez</button>
<button class="btn btn--primary">Primaire</button>
<button class="btn btn--secondary btn--large">Grand secondaire</button>
<button class="btn btn--disabled" disabled>Désactivé</button>

/* CSS */
.btn {                              /* Block */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.btn--primary {                     /* Modifier */
    background: #2563eb;
    color: white;
}

.btn--secondary {                   /* Modifier */
    background: transparent;
    border: 1px solid #2563eb;
    color: #2563eb;
}

.btn--large {                       /* Modifier */
    padding: 14px 28px;
    font-size: 16px;
}

.btn--disabled {                    /* Modifier */
    opacity: 0.5;
    cursor: not-allowed;
}
"""

# EXEMPLE : Card
"""
/* HTML */
<div class="card">
    <img class="card__image" src="..." alt="...">
    <div class="card__body">
        <h3 class="card__title">Titre</h3>
        <p class="card__description">Description...</p>
        <div class="card__footer">
            <span class="card__price">29€</span>
            <button class="card__btn btn btn--primary">Acheter</button>
        </div>
    </div>
</div>

<div class="card card--featured">  <!-- card avec modifier featured -->
    <!-- ... -->
</div>

/* CSS */
.card {                             /* Block */
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.card--featured {                   /* Block modifier */
    border: 2px solid #f59e0b;
    box-shadow: 0 4px 16px rgba(245,158,11,0.2);
}

.card__image {                      /* Element */
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card__body {                       /* Element */
    padding: 20px;
}

.card__title {                      /* Element */
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.card__description {                /* Element */
    color: #6b7280;
    font-size: 14px;
}

.card__footer {                     /* Element */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}

.card__price {                      /* Element */
    font-size: 20px;
    font-weight: bold;
    color: #2563eb;
}
"""


# ----------------------------------------------------------------------------
# [DOSSIER] ORGANISATION DES FICHIERS CSS
# ----------------------------------------------------------------------------

"""
ARCHITECTURE 7-1 PATTERN

7 dossiers + 1 fichier principal

styles/
├── main.css          <- Fichier principal (importe tout)
├── abstracts/        <- Variables, mixins, fonctions
│   ├── _variables.css
│   └── _functions.css  (si SASS/SCSS)
├── base/             <- Reset, typographie de base
│   ├── _reset.css
│   └── _typography.css
├── components/       <- Composants réutilisables
│   ├── _buttons.css
│   ├── _cards.css
│   ├── _forms.css
│   └── _modals.css
├── layout/           <- Structure de page
│   ├── _header.css
│   ├── _footer.css
│   ├── _sidebar.css
│   └── _grid.css
├── pages/            <- Styles spécifiques à une page
│   ├── _home.css
│   ├── _about.css
│   └── _contact.css
├── themes/           <- Thèmes (dark mode...)
│   └── _dark.css
└── vendors/          <- CSS de librairies tierces
    └── _normalize.css


CSS RESET MODERNE
"""

"""
/* ─────────────────────────────────────── */
/* CSS RESET MODERNE (base/_reset.css)    */
/* ─────────────────────────────────────── */

/*
  Modern CSS Reset
  Inspiré de : https://piccalil.li/blog/a-more-modern-css-reset/
*/

/* Règles de boîte universelles */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Enlever les marges par défaut */
* {
    margin: 0;
}

/* Améliorer le rendu typographique */
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Images et médias responsive par défaut */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/* Hériter les styles de formulaire */
input, button, textarea, select {
    font: inherit;
}

/* Éviter le débordement de texte */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* Liste sans style (avec role="list" en HTML) */
ul[role="list"],
ol[role="list"] {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Ancres sans style */
a {
    text-decoration: inherit;
    color: inherit;
}

/* Bouton reset */
button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
"""


# ============================================================================
# [GUIDE] CHAPITRE 16 : FORMULAIRES AVANCÉS ET VALIDATION
# ============================================================================

"""
FORMULAIRES STYLISÉS ET VALIDÉS
"""

"""
/* ─────────────────────────────────────── */
/* STYLES DE FORMULAIRE COMPLETS          */
/* ─────────────────────────────────────── */

/* Groupe champ (label + input + erreur) */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}

/* Label */
.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

/* Indication requis */
.form-label.required::after {
    content: ' *';
    color: #ef4444;
}

/* Input de base */
.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.9375rem;
    color: #111827;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    appearance: none;  /* Enlève styles natifs du navigateur */
}

.form-control::placeholder {
    color: #9ca3af;
}

.form-control:hover {
    border-color: #9ca3af;
}

.form-control:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* États de validation */
.form-control.is-valid {
    border-color: #10b981;
}
.form-control.is-valid:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.form-control.is-invalid {
    border-color: #ef4444;
}
.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Validation HTML5 native */
.form-control:valid:not(:placeholder-shown) {
    border-color: #10b981;
}
.form-control:invalid:not(:placeholder-shown) {
    border-color: #ef4444;
}

/* Message d'aide et d'erreur */
.form-hint {
    font-size: 0.8125rem;
    color: #6b7280;
}

.form-error {
    font-size: 0.8125rem;
    color: #ef4444;
    display: none;
}
.form-error.show {
    display: block;
}

/* Textarea */
textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

/* Select stylisé */
select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
}

/* Checkbox et radio stylisés */
.form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.form-check-input {
    width: 18px;
    height: 18px;
    border: 2px solid #d1d5db;
    border-radius: 4px;  /* Carré pour checkbox */
    appearance: none;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    position: relative;
}

/* Cercle pour radio */
.form-check-input[type="radio"] {
    border-radius: 50%;
}

.form-check-input:checked {
    background: #2563eb;
    border-color: #2563eb;
}

.form-check-input:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Checkmark */
.form-check-input[type="checkbox"]:checked::after {
    width: 10px;
    height: 6px;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    transform: translate(-50%, -65%) rotate(-45deg);
}

/* Dot pour radio */
.form-check-input[type="radio"]:checked::after {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Bouton submit */
.btn-submit {
    width: 100%;
    padding: 12px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.btn-submit:hover {
    background: #1d4ed8;
}

.btn-submit:active {
    transform: scale(0.98);
}

.btn-submit:disabled {
    background: #93c5fd;
    cursor: not-allowed;
    transform: none;
}
"""


# ============================================================================
# [GUIDE] CHAPITRE 17 : ICÔNES, POLICES WEB ET SVG
# ============================================================================

"""
UTILISER FONT AWESOME (icônes populaires)
"""

# Dans HTML <head> :
"""
<!-- Font Awesome 6 CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
"""

# Utilisation :
"""
<!-- Icône -->
<i class="fas fa-home"></i>
<i class="far fa-heart"></i>
<i class="fab fa-github"></i>

<!-- Taille -->
<i class="fas fa-star fa-lg"></i>    <!-- 1.33em -->
<i class="fas fa-star fa-2x"></i>    <!-- 2em -->
<i class="fas fa-star fa-3x"></i>    <!-- 3em -->

<!-- Animation -->
<i class="fas fa-spinner fa-spin"></i>   <!-- Rotation -->
<i class="fas fa-bell fa-shake"></i>     <!-- Secousse -->

<!-- Couleur -->
<i class="fas fa-heart" style="color: red;"></i>

<!-- Avec texte -->
<button>
    <i class="fas fa-download" aria-hidden="true"></i>
    Télécharger
</button>

<!-- Icône seule (accessibilité) -->
<button aria-label="Supprimer">
    <i class="fas fa-trash" aria-hidden="true"></i>
</button>
"""

"""
SVG INLINE (Meilleure approche pour icônes)
"""

"""
<!-- SVG inline : contrôle total via CSS -->
<svg xmlns="http://www.w3.org/2000/svg"
     width="24"
     height="24"
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
     stroke-width="2"
     aria-hidden="true">
    <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
    <polyline points="9 22 9 12 15 12 15 22"/>
</svg>

/* CSS pour contrôler le SVG */
.icon {
    width: 24px;
    height: 24px;
    fill: currentColor;  /* Hérite la couleur du texte */
    flex-shrink: 0;
}

/* Changer la couleur via CSS */
.icon-primary { color: #2563eb; }
.icon-success { color: #10b981; }
.icon-danger  { color: #ef4444; }
"""

"""
HERO ICONS et FEATHER ICONS (icônes open-source populaires)
"""

# Utilisation de Heroicons (populaire avec Tailwind) :
"""
<!-- Via CDN (non officiel, préférer npm) -->
<!-- Ou simplement copier le SVG depuis heroicons.com -->

<!-- Exemple d'icône Heroicons -->
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>
"""


# ============================================================================
# [GUIDE] CHAPITRE 18 : PERFORMANCE ET OPTIMISATION
# ============================================================================

"""
RÈGLES DE PERFORMANCE CSS


1. ÉVITER LES SÉLECTEURS TROP SPÉCIFIQUES

[X] Mauvais (trop spécifique et fragile) :
div#header nav ul li.active a:hover { color: blue; }

[OK] Bon (plat et rapide) :
.nav-link--active:hover { color: blue; }


2. PROPRIÉTÉS PERFORMANTES POUR LES ANIMATIONS

Les navigateurs peuvent accélérer GPU :
[OK] transform  (translate, scale, rotate)
[OK] opacity

Les navigateurs recalculent tout le layout :
[X] width, height
[X] margin, padding
[X] top, left (utiliser transform: translate())
[X] font-size


3. WILL-CHANGE (UTILISER AVEC PRÉCAUTION)
"""

"""
/* Prévenir le navigateur qu'un élément va être animé */
.animated-card {
    will-change: transform;
}

/* ATTENTION : N'abusez pas ! */
/* will-change consomme de la mémoire GPU */
/* Utiliser seulement si vous observez des saccades */


4. LAZY LOADING DES IMAGES
"""

"""
<img src="photo.jpg" alt="..." loading="lazy">
<!-- Le navigateur ne charge pas l'image si elle est hors écran -->


5. OPTIMISER LES IMAGES

WebP : 30% plus léger que JPEG
AVIF : encore plus léger
Compresser : squoosh.app, imageoptim


6. MINIFIER LE CSS EN PRODUCTION

Outils : PostCSS, cssnano, UglifyCSS
Elimine espaces, commentaires, optimise les propriétés


7. PERFORMANCE DES POLICES
"""

"""
<!-- Préconnexion aux serveurs de polices -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- font-display: swap = Texte visible pendant le chargement -->
@font-face {
    font-family: 'Inter';
    src: url('inter.woff2') format('woff2');
    font-display: swap;  /* Évite le Flash Of Invisible Text (FOIT) */
}
"""

"""
8. CRITICAL CSS

Charger le CSS nécessaire au "above the fold" inline
Charger le reste en async
"""

"""
<head>
    <!-- CSS critique inline (style de ce qui est visible au chargement) -->
    <style>
        /* Styles du header, hero, etc. */
        body { margin: 0; font-family: sans-serif; }
        header { background: #2563eb; color: white; padding: 16px; }
    </style>

    <!-- Reste du CSS en async -->
    <link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>
"""


# ============================================================================
# ═══════════════════════════════════════════════════════════════════════════
# PARTIE 5 : PROJETS ET BONNES PRATIQUES
# ═══════════════════════════════════════════════════════════════════════════
# ============================================================================


# ============================================================================
# [GUIDE] CHAPITRE 19 : ACCESSIBILITÉ (A11Y)
# ============================================================================

"""
[OBJECTIF] POURQUOI L'ACCESSIBILITÉ ?

1.3 milliards de personnes dans le monde ont un handicap
(Source : OMS 2023)

Handicaps concernés :
- Visuel : daltonisme, malvoyance, cécité
- Auditif : surdité
- Moteur : impossibilité d'utiliser souris
- Cognitif : dyslexie, troubles de l'attention

L'accessibilité = meilleure UX pour TOUS

Bénéfices :
[OK] Plus grande audience
[OK] SEO amélioré
[OK] Conformité légale (lois dans beaucoup de pays)
[OK] Meilleure expérience pour tous
[OK] Code HTML plus sémantique et maintenable


WCAG (Web Content Accessibility Guidelines)

4 principes (POUR) :
Perceptible   -> Le contenu doit être visible et lisible
Utilisable    -> L'interface doit être navigable au clavier
Compréhensible -> Le contenu doit être compréhensible
Robuste       -> Fonctionner avec différentes technologies
"""


# ----------------------------------------------------------------------------
# [WHEELCHAIR_SYMBOL] PRATIQUES D'ACCESSIBILITÉ
# ----------------------------------------------------------------------------

"""
1. HTML SÉMANTIQUE (première ligne de défense)
"""

"""
<!-- [X] Non sémantique -->
<div class="button" onclick="submit()">Envoyer</div>

<!-- [OK] Sémantique -->
<button type="submit">Envoyer</button>

<!-- [X] Navigation non sémantique -->
<div class="menu">
    <div><a href="/">Accueil</a></div>
</div>

<!-- [OK] Navigation sémantique -->
<nav aria-label="Navigation principale">
    <ul>
        <li><a href="/">Accueil</a></li>
    </ul>
</nav>
"""

"""
2. TEXTE ALTERNATIF DES IMAGES
"""

"""
<!-- Image informative : alt descriptif -->
<img src="graphique.png"
     alt="Graphique montrant 45% de croissance en 2024">

<!-- Image décorative : alt vide -->
<img src="decoration.png" alt="">

<!-- Logo cliquable : décrire la destination -->
<a href="/">
    <img src="logo.png" alt="MonSite - Retour à l'accueil">
</a>
"""

"""
3. ATTRIBUTS ARIA
"""

"""
<!-- aria-label : Nom accessible -->
<button aria-label="Fermer la modal">×</button>
<nav aria-label="Navigation principale">...</nav>

<!-- aria-describedby : Description supplémentaire -->
<input id="password"
       type="password"
       aria-describedby="password-hint">
<span id="password-hint">Minimum 8 caractères</span>

<!-- aria-hidden : Cacher des lecteurs d'écran -->
<i class="fas fa-star" aria-hidden="true"></i>
<span>4.5/5 étoiles</span>

<!-- aria-expanded : État pliable -->
<button aria-expanded="false"
        aria-controls="menu">
    Menu
</button>
<ul id="menu" hidden>...</ul>

<!-- aria-live : Annonces dynamiques -->
<div aria-live="polite" aria-atomic="true">
    <!-- Contenu mis à jour dynamiquement -->
    Résultats chargés : 42 articles trouvés
</div>

<!-- role : Rôle sémantique -->
<div role="alert">Erreur : Email invalide</div>
<div role="status">Chargement en cours...</div>
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
    <h2 id="dialog-title">Confirmation</h2>
    ...
</div>
"""

"""
4. NAVIGATION AU CLAVIER
"""

"""
/* Skip link (aller directement au contenu) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: #2563eb;
    color: white;
    padding: 12px 24px;
    z-index: 9999;
    text-decoration: none;
    font-weight: bold;
}

.skip-link:focus {
    top: 0;
}

/* HTML */
<a href="#main-content" class="skip-link">
    Aller au contenu principal
</a>

<!-- ... header ... -->

<main id="main-content">
    <!-- Contenu principal -->
</main>
"""

"""
/* Outline visible pour la navigation au clavier */
*:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Enlever outline pour les clics souris SEULEMENT */
*:focus:not(:focus-visible) {
    outline: none;
}
"""

"""
5. CONTRASTE DES COULEURS

WCAG AA (minimum) :
- Texte normal (< 18px) : Ratio 4.5:1
- Texte grand (≥ 18px ou ≥ 14px gras) : Ratio 3:1

WCAG AAA (optimal) :
- Texte normal : 7:1
- Texte grand : 4.5:1

Vérifier avec : https://webaim.org/resources/contrastchecker/
"""

"""
/* [X] Faible contraste */
.bad {
    color: #999999;      /* Gris clair */
    background: #ffffff; /* Blanc */
    /* Ratio : 2.85:1 - INSUFFISANT */
}

/* [OK] Bon contraste */
.good {
    color: #374151;      /* Gris foncé */
    background: #ffffff; /* Blanc */
    /* Ratio : 10.3:1 - EXCELLENT */
}
"""

"""
6. TAILLE DE POLICE ACCESSIBLE
"""

"""
/* [OK] Utiliser rem pour respecter les préférences utilisateur */
html {
    font-size: 100%;       /* 16px par défaut = respecte paramètres */
}

body {
    font-size: 1rem;       /* 16px */
    line-height: 1.5;
}

/* [X] PX ignore les paramètres d'accessibilité */
html { font-size: 16px; } /* Fixe, ignoré si l'user augmente la taille */
"""


# ============================================================================
# [GUIDE] CHAPITRE 20 : BEST PRACTICES ET CHECKLIST PROFESSIONNELLE
# ============================================================================

"""
[OK] CHECKLIST HTML COMPLÈTE


STRUCTURE :
[ ] <!DOCTYPE html> en première ligne
[ ] <html lang="fr"> avec langue correcte
[ ] <meta charset="UTF-8"> dans le head
[ ] <meta name="viewport" content="..."> pour le responsive
[ ] <title> descriptif et unique pour chaque page
[ ] <meta name="description"> pour le SEO
[ ] Un seul <h1> par page
[ ] Hiérarchie de titres correcte (h1->h2->h3)
[ ] <main> pour le contenu principal
[ ] Structure sémantique (header, nav, main, aside, footer)

IMAGES :
[ ] attribut alt sur toutes les images
[ ] alt="" pour les images décoratives
[ ] loading="lazy" pour les images hors écran
[ ] dimensions spécifiées (width et height) pour éviter CLS
[ ] Formats optimisés (WebP, AVIF)

LIENS :
[ ] Texte descriptif (pas "cliquez ici")
[ ] rel="noopener noreferrer" sur les liens target="_blank"
[ ] Liens distinguables du texte normal

FORMULAIRES :
[ ] <label> associé à chaque input
[ ] Attributs name sur tous les inputs
[ ] Validation HTML5 (required, type, pattern)
[ ] Messages d'erreur clairs
[ ] Bouton submit de type "submit"

ACCESSIBILITÉ :
[ ] Navigation au clavier possible
[ ] Focus visible sur tous les éléments interactifs
[ ] Contraste suffisant (4.5:1 minimum)
[ ] Attributs ARIA appropriés
[ ] Skip link vers le contenu principal
[ ] Texte alternatif des images


[OK] CHECKLIST CSS COMPLÈTE


BASE :
[ ] CSS Reset / Normalize inclus
[ ] box-sizing: border-box sur tout
[ ] Variables CSS pour les couleurs, espacements, typographie

TYPOGRAPHIE :
[ ] Font-size en rem
[ ] Line-height sans unité (1.5-1.6)
[ ] Polices de fallback définies
[ ] Contraste minimum 4.5:1

LAYOUT :
[ ] Flexbox ou Grid pour les layouts
[ ] Pas de float pour les layouts (obsolète)
[ ] max-width sur les conteneurs pour les grands écrans

RESPONSIVE :
[ ] Approche mobile-first
[ ] Viewport meta tag en HTML
[ ] Media queries pour les breakpoints importants
[ ] Images responsive (max-width: 100%)
[ ] Testé sur mobile, tablette, desktop

PERFORMANCE :
[ ] CSS externe plutôt qu'inline
[ ] Pas de !important sauf cas spéciaux
[ ] Animations sur transform/opacity uniquement
[ ] Will-change seulement si nécessaire
[ ] CSS minifié en production

ORGANISATION :
[ ] Nomenclature cohérente (BEM ou autre)
[ ] Commentaires sur les sections
[ ] Pas de CSS mort (inutilisé)
[ ] Valeurs dans des variables CSS


[OK] CHECKLIST PERFORMANCE WEB VITALS


LCP (Largest Contentful Paint) :
[ ] Hero image optimisée (WebP, bonne taille)
[ ] Fonts préchargées
[ ] CSS critique inline

FID/INP (Interaction) :
[ ] JavaScript non bloquant
[ ] Animations performantes (transform/opacity)

CLS (Cumulative Layout Shift) :
[ ] Dimensions des images spécifiées
[ ] Pas d'injection de contenu dynamique au-dessus du contenu
[ ] Fonts avec font-display: swap
"""


# ============================================================================
# [COURS] PROJETS PRATIQUES SUGGÉRÉS
# ============================================================================

"""
NIVEAU DÉBUTANT (Après Partie 1-2) :

Projet 1 : PAGE PORTFOLIO PERSONNELLE
   - Page unique avec toutes les sections
   - Navigation avec ancres
   - À propos, Projets, Contact
   - Responsive (mobile, tablet, desktop)
   - Formulaire de contact

Projet 2 : PAGE DE BLOG SIMPLE
   - Page liste des articles
   - Page article individuel
   - Sidebar avec catégories
   - Commentaires (HTML seulement)


NIVEAU INTERMÉDIAIRE (Après Partie 3) :

Projet 3 : DASHBOARD D'ADMINISTRATION
   - Sidebar + Header + Main content
   - Cards de statistiques
   - Tableau de données
   - Graphiques simples (CSS uniquement)
   - Dark mode avec variables CSS

Projet 4 : LANDING PAGE PRODUIT
   - Hero section avec CTA
   - Features en grille
   - Témoignages
   - Prix (cards)
   - FAQ avec accordion natif
   - Footer complet
   - Animations CSS au scroll


NIVEAU AVANCÉ (Après Partie 4-5) :

Projet 5 : SYSTÈME DE DESIGN (Design System)
   - Variables CSS complètes
   - Composants réutilisables
   - Documentation des composants
   - Dark mode
   - Tests d'accessibilité

Projet 6 : CLONE D'UN SITE RÉEL
   - Reproduire l'interface de GitHub, Trello, ou Notion
   - Pixel-perfect
   - Fully responsive
   - Animations et interactions CSS
"""


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

"""
DOCUMENTATION OFFICIELLE
────────────────────────
MDN Web Docs (LA référence)    : https://developer.mozilla.org/fr/
HTML Validator                  : https://validator.w3.org/
CSS Validator                   : https://jigsaw.w3.org/css-validator/


APPRENTISSAGE INTERACTIF
─────────────────────────
CSS-Tricks                      : https://css-tricks.com/
Flexbox Froggy (jeu Flexbox)   : https://flexboxfroggy.com/
Grid Garden (jeu CSS Grid)     : https://cssgridgarden.com/
CSS Diner (sélecteurs)         : https://flukeout.github.io/


OUTILS DE DESIGN
─────────────────
Coolors (palettes de couleurs) : https://coolors.co/
Google Fonts                   : https://fonts.google.com/
Heroicons (icônes SVG)         : https://heroicons.com/
Cubic Bezier (animations)      : https://cubic-bezier.com/
Contrast Checker               : https://webaim.org/resources/contrastchecker/
Can I Use (support navigateurs): https://caniuse.com/


INSPIRATION ET UI
──────────────────
Dribbble                        : https://dribbble.com/
Awwwards                        : https://www.awwwards.com/
Tailwind UI (composants)        : https://tailwindui.com/


OUTILS DE DÉVELOPPEMENT
────────────────────────
VS Code                         : https://code.visualstudio.com/
DevTools Chrome/Firefox        : F12 dans le navigateur
Squoosh (compresser images)    : https://squoosh.app/
PageSpeed Insights             : https://pagespeed.web.dev/
WAVE (accessibilité)           : https://wave.webaim.org/
"""


# ============================================================================
# [RAPIDE] C'EST PARTI !
# ============================================================================

"""
═══════════════════════════════════════════════════════════════════════════
[BRAVO] FÉLICITATIONS POUR AVOIR LU CE GUIDE !

Vous maîtrisez maintenant :

HTML :
[OK] Structure complète d'une page HTML5
[OK] Toutes les balises essentielles
[OK] Liens, images, listes, tableaux
[OK] Formulaires complets avec validation
[OK] HTML sémantique (section, article, aside...)
[OK] Accessibilité de base

CSS :
[OK] Tous les sélecteurs (type, classe, ID, attribut)
[OK] Le Box Model (margin, padding, border)
[OK] Couleurs, typographie, arrière-plans
[OK] Flexbox (layout unidimensionnel)
[OK] CSS Grid (layout bidimensionnel)
[OK] Responsive Design et Media Queries
[OK] Animations et Transitions
[OK] Variables CSS (Custom Properties)
[OK] Architecture CSS (BEM)
[OK] Accessibilité (a11y)
[OK] Performance web


PROCHAINES ÉTAPES :

1. PRATIQUER chaque jour (même 30 minutes)
2. RECRÉER des sites que vous aimez
3. APPRENDRE JavaScript pour l'interactivité
4. DÉCOUVRIR des frameworks CSS (Tailwind, Bootstrap)
5. EXPLORER les outils modernes (SASS/SCSS, PostCSS)


VOUS POUVEZ MAINTENANT CRÉER :
[OK] N'importe quel site web statique
[OK] Interfaces responsive parfaites
[OK] Animations et micro-interactions
[OK] Composants réutilisables
[OK] Thèmes clairs/sombres

═══════════════════════════════════════════════════════════════════════════

[IDEE] "Tout ce que vous apprenez en CSS, vous le verrez dans tous les
    projets web : Flask, Django, React, Vue... le HTML/CSS est PARTOUT !"

═══════════════════════════════════════════════════════════════════════════
"""