📐 Les Positions CSS

static, relative, absolute, fixed, sticky

Tout expliqué avec des exemples visuels

Formation DWWM - 2025-2026

Au programme 📋

On va comprendre le positionnement CSS :

  • 🎯 C'est quoi le positionnement ? Pourquoi c'est important ?
  • 📄 Static : La position par défaut (le flux normal)
  • ↔️ Relative : Se décaler par rapport à soi-même
  • 📍 Absolute : Se détacher complètement du flux
  • 📌 Fixed : Coller à l'écran (navbar qui suit)
  • 🎢 Sticky : Normal puis collé (le meilleur des deux)
  • 🗂️ Z-index : Qui passe devant/derrière ?
  • 💡 Cas pratiques : Quand utiliser quoi ?

🎓 Partie 0

C'est quoi le positionnement ?

Comprendre avant de coder

Le flux normal HTML 🌊

📚 Analogie de la bibliothèque :

Imaginez que vous rangez des livres sur une étagère.

Flux normal = Vous posez les livres les uns à côté des autres
Quand l'étagère est pleine → vous passez à la ligne suivante

En HTML/CSS :
Les éléments se placent les uns après les autres
(de gauche à droite, de haut en bas)
Flux normal :
Élément 1
Élément 2
Élément 3

👆 Ils se placent automatiquement les uns à côté des autres

Pourquoi positionner ? 🤔

🤔 Problème du flux normal :
Parfois, on veut placer un élément AILLEURS :
  • Un bouton "Retour en haut" en bas à droite de l'écran
  • Une navbar qui reste en haut quand on scroll
  • Une notification qui apparaît par-dessus tout
  • Un badge "Nouveau" sur une image produit
💡 La solution : La propriété position !

Elle permet de sortir du flux normal et de placer les éléments où on veut.

Les 5 valeurs de position 🎯

Valeur Comportement Usage
static Par défaut, flux normal 95% des éléments
relative Décalé par rapport à soi Légers ajustements
absolute Sorti du flux, positionné Pop-ups, badges
fixed Collé à l'écran Navbar, bouton flottant
sticky Normal puis collé En-têtes de tableau

Les propriétés de déplacement 📏

Une fois positionné, on peut déplacer avec :
  • top : Distance du haut
  • right : Distance de la droite
  • bottom : Distance du bas
  • left : Distance de la gauche
Système de coordonnées : top: 20px ↓ ┌────────────────────┐ │ │ ← right: 20px │ │ │ ELEMENT │ │ │ left:│ │ 20px → │ └────────────────────┘ ↑ bottom: 20px
⚠️ Attention : Ces propriétés ne fonctionnent QU'avec position !
Sans position, top et left ne font rien !

📄 Partie 1

Position Static

La position par défaut

C'est quoi static ? 📄

position: static = Position PAR DÉFAUT

L'élément suit le flux normal du document.
C'est comme si vous n'aviez rien mis !
🚗 Analogie de la file de voitures :

Static = Votre voiture dans la file normale
Elle avance quand les autres avancent
Elle ne peut pas doubler, ni sortir de la file

Elle est dans le FLUX DE CIRCULATION

Code static 💻

/* Ces deux codes sont IDENTIQUES */

/* Version 1 : sans rien (static par défaut) */
.box {
    background: blue;
    padding: 20px;
}

/* Version 2 : avec position static (pareil !) */
.box {
    background: blue;
    padding: 20px;
    position: static;  /* Inutile, c'est déjà le défaut */
}
💡 Dans la vraie vie :
Vous n'écrivez JAMAIS position: static
C'est automatique ! Tous les éléments sont static par défaut.

Static : top/left ne marchent pas ❌

/* ❌ Ceci NE MARCHE PAS */
.box {
    position: static;
    top: 50px;     /* IGNORÉ ! */
    left: 100px;   /* IGNORÉ ! */
}

/* La boîte reste dans le flux normal
   top et left sont complètement ignorés */
⚠️ Règle importante :
top, right, bottom, left
ne fonctionnent qu'avec position: relative/absolute/fixed/sticky

Démonstration visuelle 👀

Flux normal (static) :

Box 1 (static)
Box 2 (static)
Box 3 (static)

👆 Les 3 boîtes se suivent naturellement

✅ Quand utiliser static :
Pour 95% de vos éléments !
Paragraphes, titres, images, divs... tout est static par défaut.

↔️ Partie 2

Position Relative

Se décaler par rapport à soi-même

C'est quoi relative ? ↔️

position: relative

L'élément reste dans le flux normal
MAIS on peut le décaler visuellement
Il laisse son espace d'origine réservé
👻 Analogie du fantôme :

Vous êtes dans une file d'attente.
Votre corps reste à votre place dans la file
Mais votre esprit (fantôme) peut se balader à côté !

Votre place reste RÉSERVÉE dans la file
Même si vous vous êtes déplacé visuellement

Code relative 💻

.box {
    position: relative;
    top: 20px;      /* Descend de 20px */
    left: 30px;     /* Va à droite de 30px */
}

/* L'élément se déplace de 20px vers le BAS
   et de 30px vers la DROITE
   PAR RAPPORT à sa position d'origine */
📝 Comment lire les valeurs :
top: 20px → "Pousse-moi de 20px DEPUIS le haut" = Descend
left: 30px → "Pousse-moi de 30px DEPUIS la gauche" = Va à droite
bottom: 20px → "Pousse-moi de 20px DEPUIS le bas" = Monte
right: 30px → "Pousse-moi de 30px DEPUIS la droite" = Va à gauche

Démonstration visuelle 👀

Avec position: relative :

Box 1 (normal)
Box 2 (relative)
top: 20px; left: 40px;
Box 3 (normal)

👆 Box 2 est décalée mais son espace reste réservé !
Box 3 ne remonte pas pour combler le vide

Le "fantôme" expliqué 👻

Position d'origine (fantôme invisible) : ┌─────────────┐ │ Box 1 │ └─────────────┘ ┌─────────────┐ │ [espace] │ ← Place réservée (fantôme) └─────────────┘ ┌─────────────┐ │ Box 3 │ └─────────────┘ ┌─────────────┐ │ Box 2 │ ← Décalée visuellement │ (relative) │ mais place gardée ! └─────────────┘
💡 Concept clé :
Relative = L'élément se déplace VISUELLEMENT
Mais il garde sa place dans le flux
Les autres éléments ne bougent pas

Relative comme référence 🎯

🤔 Usage principal de relative :
Servir de référence pour un enfant en absolute ! 
<div class="carte" style="position: relative;">
    <img src="produit.jpg">
    <span class="badge" style="position: absolute; top: 10px; right: 10px;">
        NOUVEAU
    </span>
</div>
/* Le parent est relative */
.carte {
    position: relative;  /* Devient la référence ! */
}

/* L'enfant est absolute */
.badge {
    position: absolute;
    top: 10px;      /* 10px du HAUT de .carte */
    right: 10px;    /* 10px de la DROITE de .carte */
}
💡 On verra ça en détail dans la partie Absolute !

Cas d'usage relative ✅

✅ Quand utiliser relative :
  • Légers ajustements : Décaler un élément de quelques pixels
  • Parent de référence : Pour enfant absolute (++++ utilisé)
  • Animations : Déplacer au survol (:hover)
/* Exemple : bouton qui monte au survol */
.btn {
    position: relative;
    transition: top 0.3s;
}

.btn:hover {
    top: -3px;  /* Monte de 3px */
}

📍 Partie 3

Position Absolute

Sortir complètement du flux

C'est quoi absolute ? 📍

position: absolute

L'élément est SORTI du flux
Il ne prend plus de place
Il se positionne par rapport à son parent positionné
🎈 Analogie du ballon :

Vous lâchez un ballon à hélium dans une pièce.

Le ballon monte et flotte au plafond
Il ne touche plus le sol (flux normal)
Il flotte par rapport aux MURS de la pièce

Absolute = L'élément flotte et se positionne par rapport à son conteneur !

Absolute : sorti du flux 🎈

Avec absolute :

Box 1
Box 2 (absolute)
Box 3

👆 Box 2 est SORTIE du flux !
Box 3 remonte comme si Box 2 n'existait pas

⚠️ Différence avec relative :
Relative : Garde sa place (fantôme)
Absolute : Ne garde RIEN, totalement sorti !

Absolute par rapport à quoi ? 🎯

💡 Règle ESSENTIELLE :

Un élément absolute se positionne par rapport à son premier parent positionné
(parent avec position: relative/absolute/fixed)
Recherche du parent : <body> ← position: static (ignoré) <div class="container"> ← position: relative ✅ TROUVÉ ! <div class="card"> ← position: static (ignoré) <span class="badge" style="position: absolute"> ^ Se positionne par rapport à .container </span> </div> </div> </body>

Code absolute 💻

<div class="parent" style="position: relative; width: 300px; height: 200px;">
    <div class="enfant" style="position: absolute; top: 20px; right: 20px;">
        Badge
    </div>
</div>
/* Le parent DOIT être positionné */
.parent {
    position: relative;  /* Devient la référence */
    width: 300px;
    height: 200px;
}

/* L'enfant est absolute */
.enfant {
    position: absolute;
    top: 20px;      /* 20px du HAUT du parent */
    right: 20px;    /* 20px de la DROITE du parent */
}
💡 Astuce mnémotechnique :
"Absolute cherche son Relative" (ou autre position)
Le parent DOIT avoir position: relative/absolute/fixed

Démonstration visuelle parent/enfant 👀

Parent (relative)
Enfant (absolute)
top: 10px
right: 10px
Autre enfant
bottom: 10px
left: 10px

👆 Les enfants absolute flottent dans le parent relative

Si pas de parent positionné ? 🌐

⚠️ Attention :
Si AUCUN parent n'a de position → absolute se positionne par rapport au <body> 
<body>
    <div>  <!-- position: static -->
        <div>  <!-- position: static -->
            <span style="position: absolute; top: 0; right: 0;">
                Badge
            </span>
        </div>
    </div>
</body>

<!-- Le badge sera en HAUT à DROITE de TOUTE la page ! -->
💀 Erreur fréquente débutant :
Oublier de mettre position: relative sur le parent !
→ L'élément absolute part n'importe où !

Centrer avec absolute 🎯

/* Technique pour centrer parfaitement */
.modal {
    position: absolute;
    top: 50%;           /* Milieu vertical */
    left: 50%;          /* Milieu horizontal */
    transform: translate(-50%, -50%);  /* Recentrer */
    
    width: 400px;
    height: 300px;
}

/* OU avec les 4 directions (pour remplir) */
.overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Remplit TOUT le parent */
}

Cas d'usage absolute ✅

✅ Quand utiliser absolute :
  • Badges "Nouveau/Promo" sur images produits
  • Boutons de fermeture (×) en haut à droite
  • Pop-ups / Modals qui flottent au centre
  • Overlays (fond sombre derrière modal)
  • Tooltips qui apparaissent au survol
  • Icônes de réseaux sociaux flottantes
/* Exemple : Badge "Nouveau" sur image */
.product-card {
    position: relative;  /* Parent = référence */
}

.badge-nouveau {
    position: absolute;
    top: 10px;
    right: 10px;
    background: red;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
}

📌 Partie 4

Position Fixed

Coller à l'écran

C'est quoi fixed ? 📌

position: fixed

L'élément est collé à l'écran (viewport)
Il ne bouge PAS quand on scroll
Sorti du flux (comme absolute)
🖼️ Analogie du cadre sur un mur :

Imaginez un tableau accroché AU MUR (écran)

Vous bougez dans la pièce (scroll) → Le tableau ne bouge PAS
Il reste toujours au même endroit sur le mur

Fixed = Collé à l'écran, indépendant du scroll !

Fixed vs Absolute 🆚

Critère Absolute Fixed
Par rapport à Parent positionné Écran (viewport)
Quand on scroll Scroll avec la page NE BOUGE PAS
Sorti du flux ✅ Oui ✅ Oui
Usage typique Badges, tooltips Navbar, bouton flottant

Code fixed 💻

/* Navbar qui reste en haut */
.navbar {
    position: fixed;
    top: 0;         /* Collé en haut */
    left: 0;        /* Collé à gauche */
    right: 0;       /* Collé à droite (= largeur 100%) */
    
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;  /* Au-dessus de tout */
}

/* Bouton "Retour en haut" en bas à droite */
.back-to-top {
    position: fixed;
    bottom: 20px;   /* 20px du bas de l'écran */
    right: 20px;    /* 20px de la droite de l'écran */
    
    background: blue;
    color: white;
    padding: 15px;
    border-radius: 50%;
    cursor: pointer;
}

Fixed et le scroll 📜

Sans scroll (haut de page) : ┌─────────────────────────┐ │ NAVBAR (fixed) │ ← top: 0 ├─────────────────────────┤ │ │ │ Contenu page │ │ │ │ │ └─────────────────────────┘ [BTN] ← bottom: 20px; right: 20px Après scroll (bas de page) : ┌─────────────────────────┐ │ NAVBAR (fixed) │ ← TOUJOURS top: 0 ! ├─────────────────────────┤ │ │ │ Contenu page │ │ (a scrollé) │ │ │ └─────────────────────────┘ [BTN] ← TOUJOURS au même endroit !
💡 Concept clé :
Fixed = Indépendant du scroll
Reste TOUJOURS au même endroit sur votre écran

Attention au contenu caché ! ⚠️

⚠️ Problème fréquent :
La navbar fixed passe PAR-DESSUS le contenu ! 
/* ❌ PROBLÈME : Le titre est caché sous la navbar */
.navbar {
    position: fixed;
    top: 0;
    height: 60px;
}

h1 {
    /* Le h1 commence à 0px du haut
       = Caché sous la navbar ! */
}

/* ✅ SOLUTION : Ajouter un padding au body */
body {
    padding-top: 60px;  /* Hauteur de la navbar */
}

/* Maintenant le contenu commence APRÈS la navbar */

Cas d'usage fixed ✅

✅ Quand utiliser fixed :
  • Navbar qui reste en haut (très fréquent)
  • Bouton "Retour en haut" en bas à droite
  • Chat / Support client en bas à droite
  • Cookie banner en bas de page
  • Sidebar qui suit le scroll
  • Player vidéo/audio qui reste visible

🎢 Partie 5

Position Sticky

Le meilleur des deux mondes

C'est quoi sticky ? 🎢

position: sticky

Mélange de relative et fixed
Normal au début, puis se colle quand on scroll
🎢 Analogie des montagnes russes :

Vous êtes dans le wagon en montée (début)
→ Vous suivez les rails normalement (relative)

Vous arrivez en haut → Vous vous COLLEZ à la barre (fixed)

Sticky = Normal puis collé au bon moment !

Comment ça marche ? 🔍

Comportement sticky : DÉBUT (pas de scroll) : ┌─────────────────┐ │ Contenu 1 │ ├─────────────────┤ │ Sticky │ ← position: relative (normal) ├─────────────────┤ │ Contenu 2 │ └─────────────────┘ PENDANT LE SCROLL (sticky atteint top: 0) : ┌─────────────────┐ │ Sticky │ ← position: fixed (COLLÉ !) ├─────────────────┤ │ Contenu 2 │ │ │ │ │ └─────────────────┘ (Contenu 1 a scrollé vers le haut) FIN DU PARENT (fin du container) : ┌─────────────────┐ │ Contenu 2 │ ├─────────────────┤ │ Sticky │ ← Redevient normal, part avec le parent └─────────────────┘

Code sticky 💻

/* En-tête de tableau qui se colle */
thead {
    position: sticky;
    top: 0;  /* Se colle à 0px du haut */
    
    background: white;  /* Important : cache le contenu qui passe dessous */
    z-index: 10;
}

/* Menu de navigation sticky */
.menu {
    position: sticky;
    top: 80px;  /* Se colle à 80px du haut (sous la navbar) */
}

/* Sidebar qui suit */
.sidebar {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);  /* Hauteur max = écran - marges */
}
💡 La propriété top/bottom est OBLIGATOIRE !
Sans top ou bottom, sticky ne fonctionne pas !

Sticky : limitations ⚠️

⚠️ Sticky ne marche QUE si :
  • ✅ Vous avez mis top ou bottom
  • ✅ Le parent n'a PAS overflow: hidden
  • ✅ Le parent est assez grand (sticky a besoin d'espace pour coller)
/* ❌ NE MARCHE PAS */
.parent {
    overflow: hidden;  /* BLOQUE sticky ! */
}

.sticky {
    position: sticky;
    top: 0;
}

/* ✅ SOLUTION : Enlever overflow: hidden du parent */
.parent {
    /* Pas d'overflow */
}

.sticky {
    position: sticky;
    top: 0;  /* Maintenant ça marche ! */
}

Cas d'usage sticky ✅

✅ Quand utiliser sticky :
  • En-têtes de tableau (très fréquent)
  • Titres de sections dans une longue page
  • Sidebar qui suit mais reste dans son parent
  • Menu de navigation secondaire
  • Boutons d'action qui se collent en scrollant
<!-- Exemple : Titres de sections qui se collent -->
<section>
    <h2 style="position: sticky; top: 0;">Section 1</h2>
    <p>Contenu long...</p>
</section>

<section>
    <h2 style="position: sticky; top: 0;">Section 2</h2>
    <p>Contenu long...</p>
</section>

<!-- Quand vous scrollez, chaque h2 se colle puis est remplacé par le suivant ! -->

🗂️ Partie 6

Z-index et superposition

Qui passe devant/derrière ?

C'est quoi z-index ? 🗂️

z-index = Profondeur (axe Z)

Contrôle quel élément passe devant ou derrière
📚 Analogie des feuilles de papier :

Vous empilez des feuilles de papier sur un bureau

z-index: 1 → Feuille du bas
z-index: 2 → Feuille du milieu
z-index: 3 → Feuille du haut (visible)

Plus le z-index est GRAND, plus c'est au-dessus !

Axes 3D 📐

Les 3 axes CSS : Y (haut/bas) ↑ | | +-------→ X (gauche/droite) / / ↙ Z (devant/derrière) top/bottom = Axe Y left/right = Axe X z-index = Axe Z (profondeur)

Code z-index 💻

/* Navbar au-dessus de tout */
.navbar {
    position: fixed;
    top: 0;
    z-index: 1000;  /* Très haut = au-dessus */
}

/* Modal par-dessus la navbar */
.modal {
    position: fixed;
    z-index: 2000;  /* Encore plus haut */
}

/* Overlay (fond sombre) entre navbar et modal */
.overlay {
    position: fixed;
    z-index: 1500;  /* Entre les deux */
    background: rgba(0,0,0,0.5);
}
⚠️ Z-index ne marche QU'avec position !
z-index est ignoré si position: static

Valeurs z-index courantes 📊

Z-index Élément Usage
1-10 Éléments normaux Tooltips, badges
100 Dropdowns Menus déroulants
1000 Navbar, Header Navigation fixe
2000+ Modals, Overlays Pop-ups importantes
9999 Notifications Au-dessus de TOUT
💡 Bonne pratique :
Utilisez des multiples de 10 ou 100 pour pouvoir insérer des éléments entre deux !

Z-index négatif ❓

/* Élément DERRIÈRE son parent */
.background-decoration {
    position: absolute;
    z-index: -1;  /* DERRIÈRE */
    
    /* Passe derrière le contenu du parent */
}

/* Exemple : fond décoratif derrière du texte */
.card {
    position: relative;
}

.card::before {
    content: '';
    position: absolute;
    z-index: -1;
    background: linear-gradient(...);
    /* Reste DERRIÈRE le texte de .card */
}

💡 Partie 7

Cas pratiques

Quand utiliser quoi ?

Récapitulatif complet 📋

Position Dans le flux ? Par rapport à Usage principal
static ✅ Oui Flux normal 95% des éléments
relative ✅ Oui (fantôme) Soi-même Parent de référence
absolute ❌ Non Parent positionné Badges, tooltips
fixed ❌ Non Écran (viewport) Navbar, bouton flottant
sticky ✅ Oui puis colle Parent + écran En-têtes tableau

Cas pratique 1 : Carte produit 🛍️

<div class="product-card">
    <span class="badge-promo">-20%</span>
    <img src="produit.jpg" alt="Produit">
    <h3>Nom du produit</h3>
    <p class="price">29.99€</p>
</div>
/* Parent = relative (référence) */
.product-card {
    position: relative;
    border: 1px solid #ddd;
    padding: 15px;
}

/* Badge = absolute (flotte sur l'image) */
.badge-promo {
    position: absolute;
    top: 10px;
    right: 10px;
    
    background: red;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 10;
}

Cas pratique 2 : Navbar + Retour en haut 📌

<nav class="navbar">
    <div class="logo">MonSite</div>
    <ul class="menu">...</ul>
</nav>

<button class="back-to-top">↑</button>
/* Navbar = fixed (reste en haut) */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
}

/* Bouton = fixed (bas droite) */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    
    background: blue;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    z-index: 999;
}

Cas pratique 3 : Modal avec overlay 💬

<div class="modal-overlay"></div>
<div class="modal">
    <button class="close">×</button>
    <h2>Titre de la modal</h2>
    <p>Contenu...</p>
</div>
/* Overlay = fixed (couvre tout l'écran) */
.modal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    
    background: rgba(0,0,0,0.7);  /* Fond noir transparent */
    z-index: 1000;
}

/* Modal = fixed (centrée) */
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    background: white;
    width: 500px;
    padding: 30px;
    border-radius: 10px;
    z-index: 1001;  /* Au-dessus de l'overlay */
}

/* Bouton fermer = absolute (dans la modal) */
.close {
    position: absolute;
    top: 10px;
    right: 10px;
}

Cas pratique 4 : Tableau avec en-tête sticky 📊

<table>
    <thead>
        <tr>
            <th>Nom</th>
            <th>Email</th>
            <th>Téléphone</th>
        </tr>
    </thead>
    <tbody>
        <!-- 100 lignes de données... -->
    </tbody>
</table>
/* Table normale */
table {
    width: 100%;
    border-collapse: collapse;
}

/* En-tête = sticky (se colle en scrollant) */
thead {
    position: sticky;
    top: 0;
    
    background: #f5f5f5;
    z-index: 10;
}

th {
    padding: 15px;
    text-align: left;
    border-bottom: 2px solid #ddd;
}

Erreurs fréquentes débutants ❌

❌ Erreur 1 : Oublier position sur le parent 
/* ❌ L'absolute ne sait pas où se placer ! */
.parent {
    /* Pas de position ! */
}
.enfant {
    position: absolute;  /* Va chercher un autre parent ! */
}
❌ Erreur 2 : Utiliser top/left sans position 
/* ❌ top/left sont ignorés ! */
.box {
    /* position: static par défaut */
    top: 20px;  /* NE MARCHE PAS */
}
❌ Erreur 3 : Sticky sans top/bottom 
/* ❌ Sticky ne marche pas ! */
.menu {
    position: sticky;
    /* Manque top ou bottom ! */
}

Checklist avant de positionner ✅

Avant d'utiliser position, demandez-vous :
  1. ✅ L'élément doit-il sortir du flux ? → absolute/fixed
  2. ✅ Doit-il suivre le scroll ? → absolute/sticky
  3. ✅ Doit-il rester à l'écran ? → fixed
  4. ✅ Doit-il se coller en scrollant ? → sticky
  5. ✅ Juste un petit décalage ? → relative
  6. ✅ Parent de référence pour absolute ? → relative
  7. ✅ Sinon → static (ne rien mettre)

🎉 Récapitulatif Final

Les 5 positions CSS :
  1. static : Par défaut, flux normal (95% des cas)
  2. relative : Décalage + parent de référence
  3. absolute : Sorti du flux, badges/tooltips
  4. fixed : Collé à l'écran, navbar
  5. sticky : Normal puis collé, en-têtes
💡 Règle d'or :
Commencez TOUJOURS par le flux normal (static)
N'utilisez position que si VRAIMENT nécessaire !

Vous maîtrisez maintenant les positions CSS ! 🚀

Merci ! 👏

Des questions ?

📐 Pratiquez avec des exemples concrets !

La meilleure façon d'apprendre = expérimenter ! 💪