---
name: presentation-structure
description: Connaissance du format des slides de présentation, du système de niveaux, de la navigation et de la structure des sections
---

# Skill Presentation Structure

Connaissance de la façon dont la présentation dans `presentation/index.html` est structurée.

## Emplacement du fichier

`presentation/index.html` — une présentation HTML mono-fichier avec CSS et JS inline.

## Format des slides

Chaque slide est un div avec `data-slide` (numéro séquentiel) et éventuellement `data-level` (niveau de journey aux points de transition) :

```html
<!-- Regular slide — inherits level from previous data-level slide -->
<div class="slide" data-slide="12">
    <h1>Slide Title</h1>
    <!-- content -->
</div>

<!-- Level transition slide — sets new level for this slide and all following -->
<div class="slide section-slide" data-slide="10" data-level="low">
    <h1>Section Name</h1>
    <p class="section-desc">Level: Low — description of this section</p>
</div>

<!-- Title slide (centered) -->
<div class="slide title-slide" data-slide="1">
    <h1>Presentation Title</h1>
    <p class="subtitle">Subtitle text</p>
</div>
```

## Système de niveaux de la Journey Bar

La présentation utilise un système à 4 niveaux au lieu de pourcentages cumulés :

- Les niveaux sont définis via l'attribut `data-level` sur les slides de transition clés (section dividers)
- Toutes les slides après une slide `data-level` héritent de ce niveau jusqu'à la transition suivante
- La journey bar se remplit à 25% / 50% / 75% / 100% pour Low / Medium / High / Pro
- La barre est masquée sur la slide 1 (title slide) ; à partir de la slide 2, elle est affichée
- Les slides avant le premier `data-level` (slides 2–9) affichent une barre vide (aucun niveau encore défini)
- Un `.level-badge` est injecté par JS sur le `<h1>` des slides portant `data-level` — ne le code PAS en dur dans le HTML

### Transitions de niveaux par section

| Section | Plage de slides | data-level | Hauteur de barre |
|---------|-----------------|------------|------------------|
| Part 0: Introduction | Slides 1-4 | (aucun) | masquée / vide |
| Part 1: Prerequisites | Slides 5-9 | (aucun) | vide |
| Part 2: Better Prompting | Slides 10-17 | `low` | 25% |
| Part 3: Project Memory | Slides 18-24 | `medium` | 50% |
| Part 4: Structured Workflows | Slides 25-28 | (hérite medium) | 50% |
| Part 5: Domain Knowledge | Slides 29-33 | `high` | 75% |
| Part 6: Agentic Engineering | Slides 34-46 | `high` | 75% |
| Appendix | Slides 47+ | (hérite high) | 75% |

## Système de navigation

- `goToSlide(n)` — utilisé dans les liens de TOC, doit correspondre aux vrais numéros `data-slide`
- `totalSlides` est auto-calculé depuis le DOM (`document.querySelectorAll('[data-slide]').length`)
- Touches fléchées, Space et swipe tactile pour la navigation
- Le compteur affiche `current / total` en bas à gauche

## Règles de renumérotation

Après ajout, suppression ou réordonnancement de slides :
1. Renuméroter TOUS les attributs `data-slide` séquentiellement à partir de 1
2. Mettre à jour tous les appels `goToSlide()` dans la slide TOC/Journey Map
3. Le JS `totalSlides` s'auto-calcule — aucune mise à jour manuelle nécessaire
4. Vérifier qu'il n'y a ni trou ni doublon

## Format des section dividers

Les section dividers utilisent la classe `section-slide`. Les section dividers de transition de niveau portent `data-level` et affichent le nom du niveau dans la description :

```html
<div class="slide section-slide" data-slide="10" data-level="low">
    <p class="section-number">Part 2</p>
    <h1>Better Prompting</h1>
    <p class="section-desc">Level: Low — effective prompting for real results.</p>
</div>
```

Le JS injectera un `.level-badge` (par ex. "→ Low") dans le `<h1>` au runtime quand le niveau change — ne l'ajoute pas manuellement en HTML.