Web - TP2 - CSS

src/cours/CIEL1/01-bases-python/evaluation/evaluation.md

@@ -1,101 +1 @@
-# Evaluation - Bases de Python
-
-#### QCM (5pts)
-
-1. (1pt) Qu'affiche le code suivant ? 
-    ```python
-    mon_age = 16
-    if mon_age >= 18:
-        print("Je suis majeur")
-    else:
-        print("Je suis mineur")
-    ```
-    - [ ] Rien
-    - [ ] Je suis mineur
-    - [ ] Je suis majeur
-    - [ ] 16
-
-2. (1pt) Si j'écris `ma_variable = []`, `ma_variable` est :
-   - [ ] Un dictionnaire vide
-   - [ ] Un tuple vide
-   - [ ] Une liste vide
-   - [ ] Une fonction
-
-3. (1pt) Si j'écris la fonction suivante, quel nom serait le plus pertinent (à la place de `ma_fonction`) ?
-    ```python
-    def ma_fonction(valeur):
-        for i in range(11):
-            print(f"{i} x {valeur} = {i*valeur}")
-    ```
-    - [ ] `mult`
-    - [ ] `afficher_table_de_multiplication`
-    - [ ] `aff_tbl_mult`
-    - [ ] `table`
-    - [ ] `multiplication`
-
-4. (1pt) Quelle est la valeur de `prix_ttc` à la fin du programme suivant ?
-    ```python
-    tva = 20 / 100
-    prix_ht = 100
-    prix_ttc = prix_ht * (1 + tva)
-    ```
-    - [ ] 100
-    - [ ] 2100
-    - [ ] 120
-    - [ ] 47
-
-5. (1pt) Que retourne le code suivant ?
-    ```python
-    ma_liste = []
-    for lettre in 'abcdefghijklmnopqrstuvwxyz':
-        ma_liste.append(lettre)
-        return ma_liste
-   ```
-   - [ ] Une liste contenant uniquement la lettre a
-   - [ ] Une liste contenant toutes les lettres de l'alphabet
-   - [ ] Une liste vide
-   - [ ] Une chaîne de caractères contenant toutes les lettres de l'alphabet
-   - [ ] Une chaîne de caractères contenant uniquement la lettre a
-
-6. (1pt) Quel opérateur utiliser pour dire "différent de"
-   - `not` 
-   - `==`
-   - `<>`
-   - `!=`
-
-#### Questions (8pts)
-
-1. (2 pts) Quel est le type des valeurs suivantes ? (types possibles : int, float, bool, str)
-   - 2
-   - 2.4
-   - "Bonjour !"
-   - True
-   - "17"
-
-2. (1pt) Donner les deux types de boucles possibles en Python.
-
-3. (1pt) Quel type de boucle préfère-t-on si on a un nombre d'itérations connu d'avance ?
-
-4. (3pts) Lire le code ci-dessous et répondre aux questions :
-   1. Qu'est-ce que `calculer_age` ? 
-   2. Où se trouvent les paramètres ? la valeur de retour ?
-   3. Que vaut `mon_age` ?
-    ```python
-    def calculer_age(annee_de_naissance):
-        annee_en_cours = 2025
-        age = annee_en_cours - annee_de_naissance
-        return age
-
-    mon_age = calculer_age(2000)
-    ```
-
-5. (1pt) Lorsqu'on ouvre un fichier dans un programme, que ne faut-il jamais oublier de faire une fois que l'on a terminé de l'utiliser ?
-
-#### Exercices (7pts)
-
-1. (3pts) Écrire un programme qui demande le prénom de l'utilisateur et le salue : si l'utilisateur s'appelle Jean, le programme devra afficher `Bonjour, Jean !` 
-
-2. (4pts) Écrire une **fonction** `maximum` qui retourne le plus grand nombre d'une liste de nombres.
-   - Par exemple, `maximum([3, 7, 12, 1 , 6])` devra retourner la valeur `12`
-   - Attention, "retourner" ne signifie pas "afficher"
-   - Toute trace de recherche sera valorisée
+# Evaluation

src/cours/CIEL1/01-bases-python/evaluation/evaluation_sujet1.md

@@ -0,0 +1,101 @@
+# Evaluation - Bases de Python
+
+#### QCM (5pts)
+
+1. (1pt) Qu'affiche le code suivant ? 
+    ```python
+    mon_age = 16
+    if mon_age >= 18:
+        print("Je suis majeur")
+    else:
+        print("Je suis mineur")
+    ```
+    - [ ] Rien
+    - [ ] Je suis mineur
+    - [ ] Je suis majeur
+    - [ ] 16
+
+2. (1pt) Si j'écris `ma_variable = []`, `ma_variable` est :
+   - [ ] Un dictionnaire vide
+   - [ ] Un tuple vide
+   - [ ] Une liste vide
+   - [ ] Une fonction
+
+3. (1pt) Si j'écris la fonction suivante, quel nom serait le plus pertinent (à la place de `ma_fonction`) ?
+    ```python
+    def ma_fonction(valeur):
+        for i in range(11):
+            print(f"{i} x {valeur} = {i*valeur}")
+    ```
+    - [ ] `mult`
+    - [ ] `afficher_table_de_multiplication`
+    - [ ] `aff_tbl_mult`
+    - [ ] `table`
+    - [ ] `multiplication`
+
+4. (1pt) Quelle est la valeur de `prix_ttc` à la fin du programme suivant ?
+    ```python
+    tva = 20 / 100
+    prix_ht = 100
+    prix_ttc = prix_ht * (1 + tva)
+    ```
+    - [ ] 100
+    - [ ] 2100
+    - [ ] 120
+    - [ ] 47
+
+5. (1pt) Que retourne le code suivant ?
+    ```python
+    ma_liste = []
+    for lettre in 'abcdefghijklmnopqrstuvwxyz':
+        ma_liste.append(lettre)
+        return ma_liste
+   ```
+   - [ ] Une liste contenant uniquement la lettre a
+   - [ ] Une liste contenant toutes les lettres de l'alphabet
+   - [ ] Une liste vide
+   - [ ] Une chaîne de caractères contenant toutes les lettres de l'alphabet
+   - [ ] Une chaîne de caractères contenant uniquement la lettre a
+
+6. (1pt) Quel opérateur utiliser pour dire "différent de"
+   - `not` 
+   - `==`
+   - `<>`
+   - `!=`
+
+#### Questions (8pts)
+
+1. (2 pts) Quel est le type des valeurs suivantes ? (types possibles : int, float, bool, str)
+   - 2
+   - 2.4
+   - "Bonjour !"
+   - True
+   - "17"
+
+2. (1pt) Donner les deux types de boucles possibles en Python.
+
+3. (1pt) Quel type de boucle préfère-t-on si on a un nombre d'itérations connu d'avance ?
+
+4. (3pts) Lire le code ci-dessous et répondre aux questions :
+   1. Qu'est-ce que `calculer_age` ? 
+   2. Où se trouvent les paramètres ? la valeur de retour ?
+   3. Que vaut `mon_age` ?
+    ```python
+    def calculer_age(annee_de_naissance):
+        annee_en_cours = 2025
+        age = annee_en_cours - annee_de_naissance
+        return age
+
+    mon_age = calculer_age(2000)
+    ```
+
+5. (1pt) Lorsqu'on ouvre un fichier dans un programme, que ne faut-il jamais oublier de faire une fois que l'on a terminé de l'utiliser ?
+
+#### Exercices (7pts)
+
+1. (3pts) Écrire un programme qui demande le prénom de l'utilisateur et le salue : si l'utilisateur s'appelle Jean, le programme devra afficher `Bonjour, Jean !` 
+
+2. (4pts) Écrire une **fonction** `maximum` qui retourne le plus grand nombre d'une liste de nombres.
+   - Par exemple, `maximum([3, 7, 12, 1 , 6])` devra retourner la valeur `12`
+   - Attention, "retourner" ne signifie pas "afficher"
+   - Toute trace de recherche sera valorisée

src/cours/CIEL1/01-bases-python/evaluation/evaluation_sujet2.md

@@ -0,0 +1,105 @@
+---
+puppeteer:
+    format: A4
+---
+
+# Evaluation - Bases de Python
+
+## QCM (5 pts)
+
+1. (1pt) Que va afficher le code suivant ?
+```python
+note = 19
+if note > 10:
+    print("Admis")
+else:
+    print("Ajourné")
+```
+
+- [ ] Rien
+- [ ] Admis
+- [ ] Ajourné
+- [ ] 19
+
+2. (1pt) Si j'écris `data = {}`, `data` est :
+
+- [ ] Un ensemble vide
+- [ ] Un dictionnaire vide
+- [ ] Une liste vide
+- [ ] Une chaîne vide
+
+3. (1pt) Quel nom serait le plus pertinent pour la fonction ci-dessous ?
+```python
+def ma_fonction(n):
+    for i in range(1, 11):
+        print(f"{n} x {i} = {n*i}")
+```
+
+- [ ] `calcul`
+- [ ] `multiplication`
+- [ ] `afficher_table_de_multiplication`
+- [ ] `tableau`
+- [ ] `aff_tbl_mult`
+
+4. (1pt) Quelle est la valeur finale de `total` dans ce code ?
+```python
+total = 4
+for i in range(3):
+    total += 2
+```
+
+- [ ] 4
+- [ ] 6
+- [ ] 10
+- [ ] 8
+
+5. (1pt) Comment afficher le dernier élément d'une liste `ma_liste` ?
+
+- [ ] `print(ma_liste[-1])`
+- [ ] `print(ma_liste[^1])`
+- [ ] `print(ma_liste[^0])`
+- [ ] `print(ma_liste[len(ma_liste)])`
+
+6. (1pt) Pour tester l'égalité de deux valeurs en Python, on utilise :
+
+- [ ] `==`
+- [ ] `!=`
+- [ ] `=`
+- [ ] `===`
+
+
+## Questions (8 pts)
+
+1. (2 pts) Donnez le type Python des valeurs suivantes (`int`, `float`, `bool`, `str`) :
+    - `False`
+    - `7.5`
+    - `"Python"`
+    - `5`
+    - `"3"`
+2. (1pt) Quels sont les deux types de boucles possibles en Python ?
+3. (1 pt) Quelle boucle est utilisée de préférence pour parcourir les éléments d'une liste ?
+4. (3 pts) Analysez et expliquez le résultat du code :
+    1. À quoi sert la fonction `somme_pairs` ?
+    1. Que vaut `resultat` après exécution ?
+    1. Où sont les paramètres de la fonction ? Où est la valeur de retour ? (entourez et annotez dans le code)
+```python
+def somme_pairs(liste):
+    somme = 0
+    for element in liste:
+        if element % 2 == 0:
+            somme += element
+    return somme
+
+resultat = somme_pairs([1, 2, 3, 4])
+```
+
+1. (1 pt) Quelle *méthode* faut-il utiliser pour ajouter un élément en fin de liste Python ?
+
+## Exercices (7 pts)
+
+1. (3 pts) Écrire un **programme** qui demande l’âge d’un utilisateur et affiche s’il est "majeur" ou "mineur" (majeur à partir de 18 ans).
+2. (4 pts) Écrire une **fonction** `moyenne` qui retourne la moyenne des valeurs d’une liste fournie en paramètre.
+    - Par **exemple**, `moyenne([10, 20, 30])` doit retourner `20`.
+    - La fonction ne doit rien afficher, seulement **retourner** le résultat.
+
+

src/cours/CIEL1/01-bases-python/evaluation/evaluation_sujet2_corrige.md

@@ -0,0 +1,48 @@
+# Corrigé
+
+## QCM
+
+1. **Admis** (car 19 > 10)
+2. **Un dictionnaire vide** (`{}` initialise un dict)
+3. **afficher_table_de_multiplication** (fonction adaptée à la signature)
+4. **10** (total = 4 + 2 + 2 + 2 = 10)
+5. **print(l[-1])** (accesseur du dernier élément d’une liste)
+6. **==** (test d'égalité)
+
+## Questions de cours
+
+1. Types :
+    - `False` : **bool**
+    - `7.5` : **float**
+    - `"Python"` : **str**
+    - `5` : **int**
+    - `"3"` : **str**
+2. Les trois structures de contrôle :
+    - Conditionnelles (`if`, `elif`, `else`)
+    - Boucles (`for`, `while`)
+    - Bloc d'exception (`try`, `except`)
+3. **Boucle for** (adaptée pour parcourir les éléments d’une liste)
+4. Analyse du code :
+a) La fonction `somme_pairs` renvoie la somme des éléments pairs d’une liste passée en paramètre
+b) Après exécution avec `[^1][^2][^3][^4]`, `resultat = 6` (car 2 + 4)
+c) Les paramètres sont dans la définition de la fonction (`liste`), la valeur de retour est donnée par le mot-clé `return`.
+5. **append** (la méthode `append()` permet d’ajouter en fin de liste)
+
+## Exercices
+
+1. Programme :
+```python
+age = int(input("Quel est votre âge ? "))
+if age >= 18:
+    print("majeur")
+else:
+    print("mineur")
+```
+
+2. Fonction moyenne :
+```python
+def moyenne(liste):
+    if len(liste) == 0:
+        return 0
+    return sum(liste) / len(liste)
+```

src/cours/CIEL1/02-reseau/evaluations/numeration_sujet2.md

@@ -0,0 +1,25 @@
+# Evaluation - Représentation des nombres et opérations logiques
+
+1. Convertissez les nombres suivants en décimal :
+    - $ 1110~1101_{|2} $
+    - $ 3E_{|16} $
+2. Convertissez les nombres suivants en binaire :
+    - $ 45_{|10} $
+    - $ 9F_{|16} $
+3. Convertissez les nombres suivants en hexadécimal :
+    - $ 101011_{|2} $
+    - $ 297_{|10} $
+4. Sur le nombre $ 10110110_2 $, indiquez :
+    - Le bit de poids faible (LSB)
+    - Le bit de poids fort (MSB)
+5. **Combien d'entiers** peut-on représenter avec un nombre de 7 bits ?
+6. Mon ordinateur m'indique qu'un fichier fait 24 567 890 octets. Combien cela représente-t-il environ (2 chiffres après la virgule, attention aux unités) :
+    - en Mo (Mégaoctets) ?
+    - en Mio (Mébioctets) ?
+7. Mon disque dur a une capacité de 512 Go (Gigaoctets). Combien cela représente-t-il en Gio (Gibioctets) ?
+8. Donnez la table de vérité de l'opération logique OU.
+9. Donnez le résultat des opérations booléennes suivantes si `a = True` et `b = False` :
+    - `a and b`
+    - `a or not b`
+10. Donnez le résultat de l'opération bit à bit suivante (les nombres sont en base 10) :
+    - `85 | 60`

src/cours/CIEL1/02-reseau/evaluations/numeration_sujet2_corrige.md

@@ -0,0 +1,35 @@
+# Corrigé - Représentation des nombres et Opérations logiques
+
+1. Conversion en décimal :
+    - $1101_2 = 1 \times 2^3 + 1 \times 2^2 + 0 \times 2^1 + 1 \times 2^0 = 8 + 4 + 0 + 1 = 13$
+    - $3E_{16} = 3 \times 16^1 + 14 \times 16^0 = 48 + 14 = 62$
+2. Conversion en binaire :
+    - $45_{10} = 101101_2$ (division successive par 2)
+    - $9F_{16} = 10011111_2$ (9 = 1001, F = 1111)
+3. Conversion en hexadécimal :
+    - $101011_2 = 2B_{16}$ (regroupement en paquets de 4 bits: 0010 1011)
+    - $255_{10} = FF_{16}$
+4. Nombre $10110110_2$ :
+    - LSB (bit de poids faible) = dernier bit à droite = 0
+    - MSB (bit de poids fort) = premier bit à gauche = 1
+5. Avec 7 bits, on peut représenter $2^7 = 128$ entiers.
+6. Conversion des octets en Mo et Mio :
+    - $24,567,890$ octets en Mo = $\frac{24,567,890}{10^6} = 24.57$ Mo
+    - $24,567,890$ octets en Mio = $\frac{24,567,890}{2^{20}} \approx 23.43$ Mio
+7. Capacité de 512 Go en Gio :
+    - $512 \text{ Go} = \frac{512 \times 10^9}{2^{30}} \approx 476.84$ Gio
+8. Table de vérité du ET logique :
+| A | B | A ET B |
+| :-- | :-- | :-- |
+| False | False | False |
+| False | True | False |
+| True | False | False |
+| True | True | True |
+
+9. Résultats des opérations booléennes :
+    - \$ \neg (A \land B) = \neg (True \land False) = \neg (False) = True \$
+    - \$ A \lor \neg B = True \lor \neg (False) = True \lor True = True \$
+10. Opération bit à bit $85 \mid 60$ :
+    - $85_{10} = 01010101_2$
+    - $60_{10} = 00111100_2$
+    - $01010101 \mid 00111100 = 01111101_2 = 125_{10}$

src/cours/CIEL1/04-web-statique/tp/tp02-css-bases.md

@@ -1,20 +1,23 @@
-# Titre activité
+# Web statique - Activité - Feuilles de style CSS
 
 ## Objectifs
 
 ### Objectifs pédagogiques
 
-- **Objectif** : Description
+- Ajouter une feuille de style à notre page web
+- Manipuler les sléecteurs et les propriétés
+- Apprendre à utiliser le modèle de boîte
+- Apprendre à manipuler les flexbox
 
 ### Objectifs techniques
 
-- **Objectif** : Description
+- Améliorer l'aspect visuel de notre site web pour le rendre attrayant
 
 ## Validation
 
 ### Livrables
 
-- Le code final 
+- Le code final HTML + CSS (zip)
 - Le compte-rendu de l'activité
 
 Le tout dans un répertoire avec le nom suivant `YYYY-MM-DD_TPX_NOM1_Prenom1_NOM2_Prenom2`.
@@ -23,9 +26,10 @@ Le tout dans un répertoire avec le nom suivant `YYYY-MM-DD_TPX_NOM1_Prenom1_NOM
 
 ### Résultats attendus
 
-- [ ] Le programme se lance sans erreur.
-- [ ] Chaque fonction contient une docstring minimale expliquant sa fonctionnalité. Bonus : Doctsrings complètes au format Numpy.
 - [ ] Le code est propre, correctement formaté, les variables, fonctions et paramètres sont bien nommés, les conventions sont respectées.
+- [ ] La page web d'accueil affichée dans un navigateur ressemble à ceci (ou version personnalisée)
+
+![result-tp2](./images/result-tp2.png)
 
 ### Critères d'évaluation
 
@@ -41,15 +45,15 @@ Le tout dans un répertoire avec le nom suivant `YYYY-MM-DD_TPX_NOM1_Prenom1_NOM
     - Autonomie dans la progression (2pts)
 - Bonus +2pts
 
-## Documents fournis
-
-- Cours
-- Docs
-- Code préalable
-
 ## Étapes
 
-### 3 - Un peu de style
+### 0 - Mise en place
+
+- Nous repartons du résultat du TP précédent. 
+- Vérifiez que toutes vos modifications aient bien été commitées.
+- Créez un nouveau fichier de compte-rendu.
+
+### 1 - Un peu de style
 
 **Objectif :** Ajouter une feuille de style
 
@@ -65,7 +69,8 @@ Le tout dans un répertoire avec le nom suivant `YYYY-MM-DD_TPX_NOM1_Prenom1_NOM
     ~~~html
     <link rel="stylesheet" href="style.css">
     ~~~
-4. Vérifier que le titre de votre site s'affiche désormais en bleu
+4. Vérifier que le titre de votre site s'affiche désormais en bleu.
+5. Vous pouvez mettre une couleur plus agréable (par exemple : `#213C54`)
 5. Faire un nouveau commit (après avoir complété votre compte-rendu).
 ```
 
@@ -83,25 +88,34 @@ Le tout dans un répertoire avec le nom suivant `YYYY-MM-DD_TPX_NOM1_Prenom1_NOM
     - les valeurs de propriétés
 ```
 
-### 4 - Un peu de créativité
+### 2 - Un peu plus de style
 
 **Objectif :** Compléter le style de votre site web avec la feuille de style CSS
 
 ```admonish travail
+#### Sélection par type de balise
 1. Utilisez la [documentation](https://developer.mozilla.org/fr/docs/Web/CSS/text-align) pour centrer le titre de votre page
-1. Ajoutez l'attribut `id="devise"` au paragraphe de la devise du cabinet.
-1. Utilisez cet attribut dans un sélecteur CSS pour centrer la phrase sous le titre et mettre le texte en italique (propriété `font-style`). Aidez-vous de la [documentation](https://developer.mozilla.org/fr/docs/Web/CSS/Reference#s%C3%A9lecteurs).
 1. Utilisez la [documentation de Mozilla](https://developer.mozilla.org/fr/docs/Web/CSS/font-family) pour que la police par défaut de votre page soit `Helvetica`
-1. Utilisez la documentation pour que le lien sur `Alexandrie` devienne vert que lorsqu'on le survole avec la souris. Il doit rester noir sinon.
-1. Encapsulez le texte de description ainsi que l'image dans une balise `<section>`. Ajoutez l'attribut `class="description"` à la section.
-1. À l'aide des propriétés CSS [`margin-right`](https://developer.mozilla.org/fr/docs/Web/CSS/margin) `margin-left` et [`max-width`](https://developer.mozilla.org/fr/docs/Web/CSS/max-width.), essayez de :
-    - centrer le contenu de votre page 
-    - limiter le contenu à 800 pixels de large.
-1. Faites un nouveau commit (après avoir complété votre compte-rendu).
-```
 
-```admonish help title="Aide"
-- Pour selectionner un élément lorsqu'il est survolé, vous pouvez utiliser la pseudo-classe `element:hover`
+#### Sélection par balise encapsulée
+1. Encapsulez les liens vers les autres pages dans une balise `<nav>` (en HTML).
+1. Utilisez la documentation pour changer le style des liens inclus dans `<nav>` vers les autres pages du site. 
+    - Ils devront s'afficher en `#1565c0`
+    - Ils ne devront plus être soulignés
+    - Il devront s'afficher en un peu plus grand que le reste
+
+#### Sélection par `id`
+1. Ajoutez l'attribut `id="devise"` au paragraphe de la devise du cabinet (dans le html)
+1. Utilisez cet attribut dans un sélecteur CSS pour centrer la phrase sous le titre et mettre le texte en italique (propriété `font-style`). Aidez-vous de la [documentation](https://developer.mozilla.org/fr/docs/Web/CSS/Reference#s%C3%A9lecteurs).
+
+#### Sélection par classe
+1. Dans le HTML, encapsulez le texte de description ainsi que l'image dans une balise `<section>`. Ajoutez l'attribut `class="description"` à la section.
+1. Modifiez la couleur de fond de cette zone pour avoir `#EAC194`
+
+#### Sélection par pseudo-classe
+1. Changez la couleur des liens de navigation vers les autres pages du site **uniquement** lorsque le curseur de la souris passe au-dessus. Il devront s'afficher en `#005f99`.
+
+1. Faites un nouveau commit (après avoir complété votre compte-rendu).
 ```
 
 ```admonish note title="Dans le compte rendu"
@@ -110,32 +124,60 @@ Le tout dans un répertoire avec le nom suivant `YYYY-MM-DD_TPX_NOM1_Prenom1_NOM
     - par classe
     - par id
     - quand on survole avec la souris
-2. Expliquez les propriétés que vous avez utilisées (donnez leur nom et leur rôle)
-3. Expliquez la différence entre la taille en `rem` et en `px`. Pour un site qui s'adapte aux préférences des utilisateurs, quelle notation allez-vous préférer ?
+2. Expliquez 3 **propriétés** que vous avez utilisées (donnez leur nom et leur rôle)
+3. Expliquez la différence entre la taille en `rem` et en `px`. Pour un site accessible, qui s'adapte aux préférences des utilisateurs, quelle notation allez-vous préférer ?
 ```
 
+### 3 - Une boîte autour de la description du site
 
-## Pour aller plus loin
-
-### Bonus facile - titre
-
-**Objectif**:
+**Objectif** : Manipuler les boîtes (box model) en CSS pour gérer la description et l’image, ainsi que leurs marges et paddings.
 
 ```admonish travail
-```
+2. Dans le fichier CSS, ajoutez des règles pour `.description` :
 
+    - Ajoutez une bordure continue de 2px `#8396a8`
+    - Ajoutez un padding de 20px pour créer un espace intérieur.
+    - Ajoutez une marge de 30px en haut et en bas.
+    - Fixez une largeur maximale de 800px.
+    - Centrez la boîte horizontalement avec `margin-left` et `margin-right` automatiques.
 
-### Bonus difficile - titre
+3. Pour l’image dans `.description img`, ajoutez :
 
-**Objectif** :
+    - Une bordure continue de 1px solid `#8396a8`.
+    - Arrondissez les angles à l'aide de `border-radius`.
 
-```admonish travail
-```
-
-```admonish help title="Aide"
+5. Faites un commit avec vos modifications après avoir mis à jour votre compte rendu.
 ```
 
 ```admonish note title="Dans le compte rendu"
+1. Expliquez ce qu’est le modèle de boîte CSS (box model).
+2. Quelle différence y a-t-il entre la marge (`margin`) et le remplissage (`padding`) ?
+    - N'hésitez pas à expérimenter à l'aide d'une bordure visible sur l'image et en changeant les valeurs des propriétés
+3. Quelle propriété CSS permet de centrer une boîte horizontalement ?
 ```
 
-### Ressources
+### 4 - Menu de navigation flexible
+
+**Objectif** : Utiliser Flexbox pour agencer les liens de navigation horizontalement et gérer les espaces entre eux.
+
+```admonish travail
+Pour cette étape, utilisez la documentation suivante : [Concepts de base pour Flexbox](https://developer.mozilla.org/fr/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
+
+1. Dans le CSS : activez flexbox dans la liste incluse dans la balise `<nav>`
+2. Centrez horizontalement les liens de la liste avec `justify-content`
+3. Ajoutez un écart (`gap`) entre les éléments de la liste.
+4. Retirez les puces de la liste, pour un effet plus moderne (propriété `list-style`)
+5. Faites un commit avec vos modifications après avoir mis à jour votre compte rendu.
+```
+
+```admonish note title="Dans le compte-rendu"
+1. Quelles sont les propriétés Flexbox utilisées dans cette étape et à quoi servent-elles ?
+2. Qu’est-ce que la propriété `gap` apporte par rapport aux marges classiques ?
+3. Pourquoi utiliser Flexbox plutôt qu’un simple affichage en ligne (`inline`) pour la navigation ?
+```
+
+## Pour aller plus loin
+
+### Bonus - Style
+
+**Objectif**: Améliorez le style de la page pour lui donner un rendu plus personnel. N'hésitez pas à fouiller la documentation et à expérimenter