Update index.html

index.html

@@ -4,8 +4,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>LiftTrack - Suivi Musculation Multi-Utilisateurs</title>
+    <!-- Ajout de la librairie pour les confettis -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
     <style>
-        /* --- Styles CSS --- */
+        /* --- Styles CSS (avec ajouts/modifications) --- */
         :root {
             --bg-dark: #121212;
             --bg-card: #1e1e1e;
@@ -13,26 +15,42 @@
             --accent: #4CAF50;
             --accent-dark: #3a8a3d;
             --danger: #f44336;
+            --superset-border: #4a90e2; /* Couleur pour indiquer superset */
         }
         * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
-        body { background-color: var(--bg-dark); color: var(--text-light); min-height: 100vh; padding-bottom: 80px; /* Espace pour nav bottom */ }
+        body { background-color: var(--bg-dark); color: var(--text-light); min-height: 100vh; padding-bottom: 80px; }
         .container { width: 100%; max-width: 800px; margin: 0 auto; padding: 1rem; }
         header { padding: 1rem 0; text-align: center; border-bottom: 1px solid #333; margin-bottom: 1rem; }
         h1, h2, h3 { color: var(--accent); }
         .btn { background-color: var(--accent); color: white; border: none; padding: 0.6rem 1.2rem; border-radius: 4px; cursor: pointer; font-weight: bold; transition: background-color 0.2s; }
         .btn:hover { background-color: var(--accent-dark); }
+        .btn:disabled { background-color: #555; cursor: not-allowed; }
         .btn-outline { background-color: transparent; color: var(--accent); border: 1px solid var(--accent); }
+        .btn-outline:disabled { color: #555; border-color: #555; }
         .btn-danger { background-color: var(--danger); }
         input, select, textarea { width: 100%; padding: 0.6rem; margin-bottom: 1rem; background-color: #2a2a2a; border: 1px solid #444; border-radius: 4px; color: var(--text-light); }
-        input[type="checkbox"] { width: auto; margin-right: 0.5rem; vertical-align: middle; } /* Align checkbox */
+        input[type="checkbox"] { width: auto; margin-right: 0.5rem; vertical-align: middle; }
         .card { background-color: var(--bg-card); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
         .form-group { margin-bottom: 1rem; }
-        .form-row { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; /* Allow wrapping on small screens */ }
-        .form-row > * { flex: 1; margin-bottom: 0; min-width: 100px; /* Prevent items from becoming too small */ }
+        .form-row { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
+        .form-row > * { flex: 1; margin-bottom: 0; min-width: 100px; }
         label { display: block; margin-bottom: 0.3rem; color: #bbb; font-size: 0.9rem; }
-        .exercise { border-left: 3px solid var(--accent); padding-left: 1rem; margin-bottom: 1.5rem; }
+        .exercise {
+            border-left: 3px solid var(--accent);
+            padding-left: 1rem;
+            margin-bottom: 1.5rem;
+            display: none; /* Caché par défaut, montré par JS */
+        }
+        .exercise.active-exercise {
+            display: block; /* Afficher l'exercice actif */
+             animation: fadeIn 0.3s ease-in-out;
+        }
+        /* Style pour exercice débutant un superset (dans le formulaire) */
+        .exercise.is-superset-start {
+            border-left-color: var(--superset-border);
+        }
         .exercise-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; gap: 0.5rem;}
-        .exercise-header input {margin-bottom: 0;} /* Remove margin on input in header */
+        .exercise-header input {margin-bottom: 0;}
         .series-container { margin-left: 0.5rem; margin-top: 0.5rem; }
         .series { background-color: #252525; padding: 0.7rem; border-radius: 4px; margin-bottom: 0.5rem; }
         .nav-bottom { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #1a1a1a; display: flex; justify-content: space-around; padding: 0.7rem 0; box-shadow: 0 -2px 10px rgba(0,0,0,0.3); z-index: 10; }
@@ -45,40 +63,65 @@
         .stat-card { text-align: center; padding: 1rem; }
         .stat-value { font-size: 1.8rem; color: var(--accent); font-weight: bold; }
         .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; }
-
-        /* --- Règles d'Affichage Cruciales --- */
-        .hidden { display: none; } /* Utilitaire pour cacher des éléments spécifiques */
-        #login-page { display: block; } /* Montrer la page de login au début */
-        #main-app-content { display: none; } /* Cacher le contenu principal au début */
-        #app-container > div:not(.active) {
-             display: none !important; /* Cache les divs enfants non actives de app-container (CORRIGÉ avec !important) */
-        }
-        /* --- Fin Règles d'Affichage --- */
-
-        .flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;} /* Allow wrapping */
+        .hidden { display: none; }
+        #login-page { display: block; }
+        #main-app-content { display: none; }
+        #app-container > div:not(.active) { display: none !important; }
+        .flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;}
         .badge { background-color: var(--accent); color: white; padding: 0.2rem 0.5rem; border-radius: 10px; font-size: 0.8rem; white-space: nowrap; }
+        .badge-superset { background-color: var(--superset-border); }
         .spinner { border: 4px solid rgba(0, 0, 0, 0.1); width: 36px; height: 36px; border-radius: 50%; border-left-color: var(--accent); animation: spin 1s linear infinite; margin: 2rem auto; display: none; }
         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
         .exercise-summary { margin: 0.3rem 0; padding: 0.3rem 0; border-bottom: 1px solid #333; font-size: 0.9rem;}
         .exercise-summary:last-child { border-bottom: none; }
         .satisfaction { display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 1rem; }
         .satisfaction-value { font-size: 2rem; color: var(--accent); margin-top: 0.5rem; }
-        @media (max-width: 600px) {
-             .form-row { flex-direction: column; gap: 0; }
-             .container { padding: 0.5rem; }
-             h1 { font-size: 1.5rem; }
-             .flex-between { flex-direction: column; align-items: stretch; } /* Stack items vertically */
-             .flex-between > div { width: 100%; display: flex; justify-content: flex-end; margin-top: 0.5rem;} /* Push buttons to the right */
-             .user-info { text-align: center; margin-bottom: 0.5rem;}
-             .user-info button { display: block; margin: 0.5rem auto 0;} /* Center logout button */
+        .exercise-navigation { display: flex; justify-content: space-between; margin-top: 1rem; margin-bottom: 1rem; }
+        .detail-exercise-card.is-superset-start {
+             border-left: 3px solid var(--superset-border);
+             margin-bottom: 0.2rem; /* Réduire l'espace avant le suivant */
         }
-        /* Styles page de connexion */
+         .detail-exercise-card.is-superset-continuation {
+            border-left: 3px solid var(--superset-border);
+             padding-top: 0.5rem;
+             margin-top: -0.8rem; /* Rapprocher visuellement */
+             border-top-left-radius: 0; /* Pour lier visuellement */
+              border-bottom-left-radius: 8px;
+        }
+
+
+        /* Animation d'apparition/zoom pour nouvelle séance */
+         @keyframes fadeInZoom {
+            from { opacity: 0; transform: scale(0.95); }
+            to { opacity: 1; transform: scale(1); }
+        }
+         #new-workout-page.active {
+             animation: fadeInZoom 0.3s ease-out;
+         }
+
+         /* Styles page de connexion & user info */
         #login-page .card { max-width: 400px; margin: 2rem auto; }
         #login-page h2 { text-align: center; margin-bottom: 1.5rem; }
         #login-error { color: var(--danger); text-align: center; margin-top: 1rem; display: none; }
         .user-info { text-align: right; margin-bottom: 1rem; font-size: 0.9rem; color: #bbb;}
         .user-info strong { color: var(--text-light); }
         .user-info button { margin-left: 0.5rem; padding: 0.2rem 0.5rem; font-size: 0.8rem; }
+
+         @media (max-width: 600px) {
+             .form-row { flex-direction: column; gap: 0; }
+             .container { padding: 0.5rem; }
+             h1 { font-size: 1.5rem; }
+             .flex-between { flex-direction: column; align-items: stretch; }
+             .flex-between > div { width: 100%; display: flex; justify-content: flex-end; margin-top: 0.5rem;}
+             .user-info { text-align: center; margin-bottom: 0.5rem;}
+             .user-info button { display: block; margin: 0.5rem auto 0;}
+             .exercise-navigation button { padding: 0.5rem; font-size: 0.9rem;} /* Ajuster boutons nav exercice */
+         }
+        /* Animation fade in standard */
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
     </style>
 </head>
 <body>
@@ -90,7 +133,8 @@
 
         <!-- Écran de Connexion -->
         <div id="login-page">
-            <div class="card">
+             <!-- Contenu page connexion -->
+             <div class="card">
                 <h2>Accès Utilisateur</h2>
                 <div class="form-group">
                     <label for="username">Nom d'utilisateur</label>
@@ -104,7 +148,7 @@
             </div>
         </div>
 
-        <!-- Contenu Principal de l'Application (initiallement caché) -->
+        <!-- Contenu Principal de l'Application -->
         <div id="main-app-content">
             <div class="user-info">
                 Connecté: <strong id="current-user-display"></strong>
@@ -113,143 +157,84 @@
 
             <div id="app-container">
                 <!-- Page Accueil / Liste Séances -->
-                <!-- Seule cette page a la classe 'active' au début -->
                 <div id="home-page" class="active">
-                    <div class="flex-between">
+                     <div class="flex-between">
                         <h2>Mes séances</h2>
                         <button id="new-workout-btn" class="btn">Nouvelle séance</button>
                     </div>
                     <div id="workouts-list" class="workout-list" style="margin-top: 1rem;">
-                         <!-- Liste des séances ici -->
-                        <div class="spinner hidden"></div> <!-- Spinner caché au début -->
+                        <div class="spinner hidden"></div>
                         <p id="empty-workout-message" class="hidden" style="text-align: center; margin-top: 2rem;">
-                            Aucune séance enregistrée pour cet utilisateur.
+                            Aucune séance enregistrée.
                         </p>
                     </div>
                 </div>
 
-                <!-- Page Nouvelle Séance (PAS de classe 'hidden' ici) -->
+                <!-- Page Nouvelle Séance -->
                 <div id="new-workout-page">
                      <div class="flex-between">
-                        <h2>Nouvelle séance</h2>
-                        <div> <!-- Conteneur pour les boutons -->
+                        <h2>Nouvelle séance <span id="current-exercise-indicator" style="font-size: 0.9rem; color: #ccc;"></span></h2>
+                        <div>
                              <button id="cancel-new-workout-btn" class="btn btn-outline" style="margin-right: 0.5rem;">Annuler</button>
-                             <button id="save-workout-btn" class="btn">Enregistrer</button>
+                             <button id="save-workout-btn" class="btn">Enregistrer Séance</button>
                         </div>
                     </div>
+                    <!-- Infos Séance -->
                     <div class="card">
-                        <div class="form-group">
-                            <label for="workout-name">Nom de la séance</label>
-                            <input type="text" id="workout-name" placeholder="Ex: Push, Legs, Full Body...">
-                        </div>
-                        <div class="form-row">
-                            <div class="form-group">
-                                <label for="workout-date">Date</label>
-                                <input type="date" id="workout-date">
-                            </div>
-                            <div class="form-group">
-                                <label for="workout-duration">Durée (min)</label>
-                                <input type="number" id="workout-duration" min="1" placeholder="60">
-                            </div>
-                        </div>
+                         <div class="form-group"> <label for="workout-name">Nom de la séance</label> <input type="text" id="workout-name" placeholder="Ex: Push, Legs, Full Body..."> </div>
+                         <div class="form-row"> <div class="form-group"> <label for="workout-date">Date</label> <input type="date" id="workout-date"> </div> <div class="form-group"> <label for="workout-duration">Durée (min)</label> <input type="number" id="workout-duration" min="1" placeholder="60"> </div> </div>
                     </div>
+
                     <h3 style="margin: 1rem 0;">Exercices</h3>
+                    <!-- Navigation entre exercices -->
+                    <div class="exercise-navigation card">
+                        <button id="prev-exercise-btn" class="btn btn-outline">< Précédent</button>
+                        <span style="align-self: center; color: #ccc;">Exercice Actif</span>
+                        <button id="next-exercise-btn" class="btn btn-outline">Suivant ></button>
+                    </div>
+                    <!-- Conteneur pour les exercices (un seul visible à la fois) -->
                     <div id="exercises-container">
                         <!-- Exercices ajoutés dynamiquement ici -->
                     </div>
-                    <button id="add-exercise-btn" class="btn btn-outline" style="width: 100%; margin-top: 1rem;">+ Ajouter Exercice</button>
+                    <button id="add-exercise-btn" class="btn btn-outline" style="width: 100%; margin-top: 1rem;">+ Ajouter un Nouvel Exercice</button>
+
+                     <!-- Satisfaction -->
                     <div class="card" style="margin-top: 2rem;">
-                        <div class="form-group">
-                            <label for="satisfaction">Niveau de satisfaction (1-100%)</label>
-                            <input type="range" id="satisfaction" min="1" max="100" value="75">
-                            <div class="satisfaction">
-                                <span>Satisfaction</span>
-                                <div class="satisfaction-value">75%</div>
-                            </div>
-                        </div>
+                        <div class="form-group"> <label for="satisfaction">Niveau de satisfaction (1-100%)</label> <input type="range" id="satisfaction" min="1" max="100" value="75"> <div class="satisfaction"> <span>Satisfaction</span> <div class="satisfaction-value">75%</div> </div> </div>
                     </div>
                 </div>
 
-                <!-- Page Détail Séance (PAS de classe 'hidden' ici) -->
+                <!-- Page Détail Séance -->
                 <div id="workout-details-page">
-                    <div class="flex-between">
-                        <h2 id="detail-workout-name">Détail Séance</h2>
-                        <button id="back-to-home" class="btn btn-outline">Retour</button>
-                    </div>
-                     <div class="card">
-                        <div class="workout-details-info">
-                            <div class="form-row">
-                                <p><strong>Date:</strong> <span id="detail-date"></span></p>
-                                <p><strong>Durée:</strong> <span id="detail-duration"></span> min</p>
-                            </div>
-                        </div>
-                    </div>
-                     <div class="stats-grid" style="margin-top: 1rem;">
-                        <div class="card stat-card">
-                            <div class="stat-value" id="detail-tonnage">0</div>
-                            <div>Tonnage Total (kg)</div>
-                        </div>
-                        <div class="card stat-card">
-                            <div class="stat-value" id="detail-satisfaction">0%</div>
-                            <div>Satisfaction</div>
-                        </div>
-                        <div class="card stat-card">
-                            <div class="stat-value" id="detail-exercises-count">0</div>
-                            <div>Exercices</div>
-                        </div>
-                    </div>
+                    <div class="flex-between"> <h2 id="detail-workout-name">Détail Séance</h2> <button id="back-to-home" class="btn btn-outline">Retour</button> </div>
+                    <div class="card"> <div class="workout-details-info"> <div class="form-row"> <p><strong>Date:</strong> <span id="detail-date"></span></p> <p><strong>Durée:</strong> <span id="detail-duration"></span> min</p> </div> </div> </div>
+                    <div class="stats-grid" style="margin-top: 1rem;"> <div class="card stat-card"> <div class="stat-value" id="detail-tonnage">0</div> <div>Tonnage Total (kg)</div> </div> <div class="card stat-card"> <div class="stat-value" id="detail-satisfaction">0%</div> <div>Satisfaction</div> </div> <div class="card stat-card"> <div class="stat-value" id="detail-exercises-count">0</div> <div>Exercices</div> </div> </div>
                     <h3 style="margin: 1.5rem 0 1rem;">Exercices Réalisés</h3>
-                    <div id="detail-exercises-container">
-                        <!-- Détails des exercices affichés ici -->
-                    </div>
+                    <div id="detail-exercises-container"> <!-- Détails des exercices affichés ici --> </div>
                     <button id="delete-workout-btn" class="btn btn-danger" style="width: 100%; margin-top: 2rem;">Supprimer cette séance</button>
                 </div>
 
-                <!-- Page Statistiques (PAS de classe 'hidden' ici) -->
+                <!-- Page Statistiques -->
                 <div id="stats-page">
-                    <h2>Statistiques</h2>
-                    <div class="stats-grid">
-                       <div class="card stat-card">
-                            <div class="stat-value" id="stats-workout-count">0</div>
-                            <div>Séances Totales</div>
-                        </div>
-                        <div class="card stat-card">
-                            <div class="stat-value" id="stats-avg-tonnage">0</div>
-                            <div>Tonnage Moyen</div>
-                        </div>
-                        <div class="card stat-card">
-                            <div class="stat-value" id="stats-avg-satisfaction">0%</div>
-                            <div>Satisfaction Moyenne</div>
-                        </div>
-                    </div>
+                     <h2>Statistiques</h2>
+                     <div class="stats-grid"> <div class="card stat-card"> <div class="stat-value" id="stats-workout-count">0</div> <div>Séances Totales</div> </div> <div class="card stat-card"> <div class="stat-value" id="stats-avg-tonnage">0</div> <div>Tonnage Moyen</div> </div> <div class="card stat-card"> <div class="stat-value" id="stats-avg-satisfaction">0%</div> <div>Satisfaction Moyenne</div> </div> </div>
                      <h3 style="margin: 1.5rem 0 1rem;">Tendances Récentes</h3>
-                    <div class="card">
-                        <p style="text-align: center; margin: 1rem 0;">
-                            Les statistiques détaillées seront affichées après plusieurs séances enregistrées.
-                        </p>
-                    </div>
+                     <div class="card"> <p style="text-align: center; margin: 1rem 0;"> Les statistiques détaillées seront affichées après plusieurs séances enregistrées. </p> </div>
                 </div>
             </div>
 
             <!-- Menu Navigation Bas -->
-            <nav class="nav-bottom">
-                <a href="#" class="nav-item active" data-page="home-page">
-                    <div class="nav-icon">📋</div>
-                    <div>Séances</div>
-                </a>
-                <a href="#" class="nav-item" data-page="stats-page">
-                    <div class="nav-icon">📊</div>
-                    <div>Stats</div>
-                </a>
-            </nav>
-        </div> <!-- Fin de #main-app-content -->
-    </div> <!-- Fin de .container -->
+            <nav class="nav-bottom"> <a href="#" class="nav-item active" data-page="home-page"> <div class="nav-icon">📋</div> <div>Séances</div> </a> <a href="#" class="nav-item" data-page="stats-page"> <div class="nav-icon">📊</div> <div>Stats</div> </a> </nav>
+        </div>
+    </div>
 
     <script>
         // --- Variables d'État ---
-        let workouts = []; // Séances pour l'utilisateur courant
-        let currentUser = null; // Nom de l'utilisateur connecté
-        let currentWorkoutId = null; // ID de la séance en cours de visualisation/modification
+        let workouts = [];
+        let currentUser = null;
+        let currentWorkoutId = null;
+        let currentExerciseIndex = 0; // Index de l'exercice affiché dans le formulaire Nouvelle Séance
+        let workoutExercisesForm = []; // Tableau temporaire pour les divs d'exercice dans le form
 
         // --- Éléments DOM ---
         const loginPage = document.getElementById('login-page');
@@ -260,238 +245,122 @@
         const currentUserDisplay = document.getElementById('current-user-display');
         const logoutBtn = document.getElementById('logout-btn');
         const spinner = document.querySelector('#workouts-list .spinner');
-
         const appContainer = document.getElementById('app-container');
         const navItems = document.querySelectorAll('.nav-item');
         const newWorkoutBtn = document.getElementById('new-workout-btn');
         const saveWorkoutBtn = document.getElementById('save-workout-btn');
         const cancelNewWorkoutBtn = document.getElementById('cancel-new-workout-btn');
         const addExerciseBtn = document.getElementById('add-exercise-btn');
-        const exercisesContainer = document.getElementById('exercises-container'); // Pour la page nouvelle séance
-        const workoutsList = document.getElementById('workouts-list'); // Pour afficher la liste
+        const exercisesContainer = document.getElementById('exercises-container');
+        const workoutsList = document.getElementById('workouts-list');
         const backToHomeBtn = document.getElementById('back-to-home');
         const deleteWorkoutBtn = document.getElementById('delete-workout-btn');
         const satisfactionRange = document.getElementById('satisfaction');
         const satisfactionValue = document.querySelector('.satisfaction-value');
         const emptyWorkoutMessage = document.getElementById('empty-workout-message');
         const workoutDateInput = document.getElementById('workout-date');
+        const prevExerciseBtn = document.getElementById('prev-exercise-btn');
+        const nextExerciseBtn = document.getElementById('next-exercise-btn');
+        const currentExerciseIndicator = document.getElementById('current-exercise-indicator');
 
 
         // --- Initialisation ---
         document.addEventListener('DOMContentLoaded', () => {
             const rememberedUser = sessionStorage.getItem('liftTrackCurrentUser');
-            if (rememberedUser) {
-                loginUser(rememberedUser);
-            } else {
-                showLoginPage();
-            }
+            if (rememberedUser) { loginUser(rememberedUser); } else { showLoginPage(); }
             initEventListeners();
-            // setTodayDate sera appelé dans showApp après la connexion
         });
 
-        // --- Fonctions d'Authentification ---
-        function showLoginPage() {
-            loginPage.style.display = 'block';
-            mainAppContent.style.display = 'none';
-            loginError.style.display = 'none';
-            usernameInput.value = '';
-            currentUser = null; // Assurer que l'utilisateur est bien déconnecté
-        }
-
-        function showApp() {
-            if (!currentUser) return; // Ne rien faire si pas d'utilisateur défini
-            loginPage.style.display = 'none';
-            mainAppContent.style.display = 'block';
-            currentUserDisplay.textContent = currentUser;
-            setTodayDate(); // Mettre la date du jour par défaut
-            loadWorkouts(); // Charger les données de l'utilisateur
-            renderWorkoutsList(); // Afficher ses séances
-            showPage('home-page'); // Afficher la page d'accueil par défaut
-        }
-
-        function handleLogin() {
-            const username = usernameInput.value.trim();
-            // Validation simple: non vide
-            if (username && username.length > 0) {
-                loginUser(username);
-            } else {
-                loginError.textContent = "Veuillez entrer un nom d'utilisateur.";
-                loginError.style.display = 'block';
-            }
-        }
-
-        function loginUser(username) {
-            currentUser = username;
-            sessionStorage.setItem('liftTrackCurrentUser', currentUser); // Mémoriser pour la session
-            showApp(); // Afficher l'application principale
-        }
-
-        function handleLogout() {
-            currentUser = null;
-            sessionStorage.removeItem('liftTrackCurrentUser');
-            workouts = []; // Vider les données en mémoire
-            showLoginPage(); // Revenir à la page de connexion
-        }
-
-        // --- Fonctions de Persistance des Données (Spécifique à l'utilisateur) ---
-        function getStorageKey() {
-            if (!currentUser) return null;
-            const safeUsername = currentUser.replace(/[^a-zA-Z0-9_-]/g, '_'); // Rendre le nom sûr pour une clé
-            return `liftTrackData_${safeUsername}`;
-        }
-
-        function loadWorkouts() {
-            const storageKey = getStorageKey();
-            if (!storageKey) {
-                workouts = []; // Pas d'utilisateur, pas de données
-                return;
-            }
-            // Simuler un petit chargement
-            if (spinner) spinner.classList.remove('hidden');
-            emptyWorkoutMessage.classList.add('hidden'); // Cacher le message pendant le chargement
-            workoutsList.innerHTML = ''; // Vider la liste actuelle
-
-            setTimeout(() => { // Simule un délai réseau ou de traitement
-                try {
-                    const savedData = localStorage.getItem(storageKey);
-                    workouts = savedData ? JSON.parse(savedData) : [];
-                    console.log(`Chargé ${workouts.length} séances pour ${currentUser}`);
-                } catch (e) {
-                    console.error("Erreur lors du parsing des données depuis localStorage:", e);
-                    workouts = []; // En cas d'erreur de parsing, repartir de zéro
-                    alert("Erreur lors du chargement de vos données. Certaines données pourraient être corrompues.");
-                } finally {
-                     if (spinner) spinner.classList.add('hidden');
-                     renderWorkoutsList(); // Afficher la liste (même si vide) après chargement
-                }
-            }, 150); // Petit délai pour voir le spinner
+        // --- Authentification & Persistance (inchangées) ---
+        function showLoginPage() { /* ... */ loginPage.style.display = 'block'; mainAppContent.style.display = 'none'; loginError.style.display = 'none'; usernameInput.value = ''; currentUser = null; }
+        function showApp() { /* ... */ if (!currentUser) return; loginPage.style.display = 'none'; mainAppContent.style.display = 'block'; currentUserDisplay.textContent = currentUser; setTodayDate(); loadWorkouts(); showPage('home-page'); }
+        function handleLogin() { /* ... */ const username = usernameInput.value.trim(); if (username && username.length > 0) { loginUser(username); } else { loginError.textContent = "Veuillez entrer un nom d'utilisateur."; loginError.style.display = 'block'; }}
+        function loginUser(username) { /* ... */ currentUser = username; sessionStorage.setItem('liftTrackCurrentUser', currentUser); showApp(); }
+        function handleLogout() { /* ... */ currentUser = null; sessionStorage.removeItem('liftTrackCurrentUser'); workouts = []; showLoginPage(); }
+        function getStorageKey() { /* ... */ if (!currentUser) return null; const safeUsername = currentUser.replace(/[^a-zA-Z0-9_-]/g, '_'); return `liftTrackData_${safeUsername}`; }
+        function loadWorkouts() { /* ... (avec spinner) */
+             const storageKey = getStorageKey(); if (!storageKey) { workouts = []; return; }
+             if (spinner) spinner.classList.remove('hidden'); emptyWorkoutMessage.classList.add('hidden'); workoutsList.innerHTML = '';
+             setTimeout(() => { try { const savedData = localStorage.getItem(storageKey); workouts = savedData ? JSON.parse(savedData) : []; console.log(`Chargé ${workouts.length} séances pour ${currentUser}`); } catch (e) { console.error("Erreur parsing localStorage:", e); workouts = []; alert("Erreur chargement données."); } finally { if (spinner) spinner.classList.add('hidden'); renderWorkoutsList(); } }, 150);
         }
-
-
-        function saveWorkouts() {
-            const storageKey = getStorageKey();
-            if (!storageKey) {
-                console.error("Sauvegarde impossible: aucun utilisateur connecté.");
-                return;
-            }
-            try {
-                localStorage.setItem(storageKey, JSON.stringify(workouts));
-                console.log(`Sauvegardé ${workouts.length} séances pour ${currentUser}`);
-            } catch (e) {
-                 console.error("Erreur lors de la sauvegarde dans localStorage:", e);
-                 alert("Erreur lors de la sauvegarde de vos données. Le stockage local est peut-être plein ou indisponible.");
-            }
+        function saveWorkouts() { /* ... (avec try/catch) */
+             const storageKey = getStorageKey(); if (!storageKey) { console.error("Sauvegarde impossible: non connecté."); return; } try { localStorage.setItem(storageKey, JSON.stringify(workouts)); console.log(`Sauvegardé ${workouts.length} séances pour ${currentUser}`); } catch (e) { console.error("Erreur sauvegarde localStorage:", e); alert("Erreur sauvegarde données."); }
         }
 
         // --- Écouteurs d'Événements ---
         function initEventListeners() {
             loginBtn.addEventListener('click', handleLogin);
             logoutBtn.addEventListener('click', handleLogout);
-            usernameInput.addEventListener('keypress', (e) => {
-                if (e.key === 'Enter') {
-                    e.preventDefault(); // Empêche soumission formulaire (si jamais il y en avait un)
-                    handleLogin();
-                }
-            });
+            usernameInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') { e.preventDefault(); handleLogin(); } });
 
-            // Navigation principale (menu du bas)
-            navItems.forEach(item => {
-                item.addEventListener('click', (e) => {
-                    e.preventDefault();
-                    if (!currentUser) return; // Sécurité
-                    const targetPageId = item.getAttribute('data-page');
-                    showPage(targetPageId);
-                    // Mettre à jour l'état actif du menu
-                    navItems.forEach(nav => nav.classList.remove('active'));
-                    item.classList.add('active');
-                    // Mettre à jour les stats si on va sur la page stats
-                    if (targetPageId === 'stats-page') {
-                        updateStats();
-                    }
-                });
+            navItems.forEach(item => { /* ... navigation menu bas ... */
+                item.addEventListener('click', (e) => { e.preventDefault(); if (!currentUser) return; const targetPageId = item.getAttribute('data-page'); showPage(targetPageId); navItems.forEach(nav => nav.classList.remove('active')); item.classList.add('active'); if (targetPageId === 'stats-page') { updateStats(); } });
             });
 
-            // Boutons de l'application principale
+            // Bouton Nouvelle Séance
             newWorkoutBtn.addEventListener('click', () => {
                 if (!currentUser) return;
-                showPage('new-workout-page');
-                clearNewWorkoutForm();
-                currentWorkoutId = null; // Important pour indiquer une nouvelle séance
+                 currentWorkoutId = null; // C'est une nouvelle séance
+                 clearNewWorkoutForm(); // Réinitialise le formulaire et ajoute le premier exercice vide
+                 showPage('new-workout-page');
+                 // Déclencher l'animation d'entrée (la classe 'active' est déjà ajoutée par showPage)
+                 // L'animation CSS sur #new-workout-page.active s'en charge
             });
 
-            cancelNewWorkoutBtn.addEventListener('click', () => {
-                 showPage('home-page'); // Retour simple à l'accueil
-            });
+            cancelNewWorkoutBtn.addEventListener('click', () => showPage('home-page'));
+            saveWorkoutBtn.addEventListener('click', saveWorkout); // Sauvegarde tous les exercices ajoutés
+            addExerciseBtn.addEventListener('click', handleAddNewExercise); // Ajoute un exo et navigue vers lui
+
+            // Navigation formulaire exercices
+            prevExerciseBtn.addEventListener('click', navigateExerciseForm.bind(null, -1));
+            nextExerciseBtn.addEventListener('click', navigateExerciseForm.bind(null, 1));
 
-            saveWorkoutBtn.addEventListener('click', saveWorkout);
-            addExerciseBtn.addEventListener('click', addExercise); // Note: addExercise ajoute aussi la première série
             backToHomeBtn.addEventListener('click', () => showPage('home-page'));
             deleteWorkoutBtn.addEventListener('click', deleteWorkout);
-
-            // Slider satisfaction
-            satisfactionRange.addEventListener('input', () => {
-                satisfactionValue.textContent = `${satisfactionRange.value}%`;
-            });
+            satisfactionRange.addEventListener('input', () => { satisfactionValue.textContent = `${satisfactionRange.value}%`; });
         }
 
-        // --- Logique Principale de l'Application ---
-        function setTodayDate() {
-            if(workoutDateInput) {
-                 try {
-                    const today = new Date().toISOString().split('T')[0];
-                    workoutDateInput.value = today;
-                 } catch (e) {
-                     console.error("Impossible de définir la date d'aujourd'hui:", e);
-                     // Fallback si toISOString n'est pas supporté (très improbable)
-                     workoutDateInput.value = '';
-                 }
-            }
-        }
+        // --- Logique Principale ---
+        function setTodayDate() { /* ... */ if(workoutDateInput) { try { const today = new Date().toISOString().split('T')[0]; workoutDateInput.value = today; } catch (e) { console.error("Impossible définir date:", e); workoutDateInput.value = ''; } } }
 
-        function showPage(pageId) {
-            if (!currentUser) { showLoginPage(); return; } // Rediriger si pas connecté
+         function showPage(pageId) {
+            if (!currentUser) { showLoginPage(); return; }
 
-            // Cacher toutes les pages
             document.querySelectorAll('#app-container > div').forEach(page => {
                 page.classList.remove('active');
             });
 
-            // Afficher la page cible
             const pageToShow = document.getElementById(pageId);
             if (pageToShow) {
                 pageToShow.classList.add('active');
             } else {
-                console.error(`Page ID "${pageId}" non trouvée. Affichage de home-page.`);
+                console.error(`Page ID "${pageId}" non trouvée. Affichage home-page.`);
                 document.getElementById('home-page').classList.add('active');
-                pageId = 'home-page'; // Corriger pageId pour la nav
+                pageId = 'home-page';
             }
 
-            // Mettre à jour la nav du bas
-             navItems.forEach(item => {
-                if (item.getAttribute('data-page') === pageId) {
-                    item.classList.add('active');
-                } else {
-                    item.classList.remove('active');
-                }
-            });
+             // Gérer la nav active
+             navItems.forEach(item => { item.classList.remove('active'); });
+             const activeNavItem = document.querySelector(`.nav-item[data-page="${pageId === 'stats-page' ? 'stats-page' : 'home-page'}"]`);
+             if(activeNavItem) activeNavItem.classList.add('active');
 
-             // Si la page cible est 'home-page', on s'assure que la nav 'Séances' est active
-             if (pageId === 'home-page' || pageId === 'new-workout-page' || pageId === 'workout-details-page') {
-                 document.querySelector('.nav-item[data-page="home-page"]').classList.add('active');
-                 document.querySelector('.nav-item[data-page="stats-page"]').classList.remove('active');
-             } else if (pageId === 'stats-page') {
-                 document.querySelector('.nav-item[data-page="home-page"]').classList.remove('active');
-                 document.querySelector('.nav-item[data-page="stats-page"]').classList.add('active');
+             // Si on affiche la page nouvelle séance, s'assurer que le premier exercice est visible
+             if (pageId === 'new-workout-page') {
+                 renderActiveExerciseForm(); // Affichera l'exercice à currentExerciseIndex
              }
+        }
 
+        // --- Logique Formulaire Nouvelle Séance ---
+
+        function handleAddNewExercise() {
+             addExercise(true); // true pour naviguer vers le nouvel exercice
         }
 
-        function addExercise() {
+        function addExercise(navigateToNew = false) {
             if (!currentUser) return;
             const exerciseId = `exercise-${Date.now()}`;
             const exerciseDiv = document.createElement('div');
-            // Utiliser 'card exercise' pour le style et l'identification
-            exerciseDiv.className = 'card exercise';
+            exerciseDiv.className = 'card exercise'; // Pas 'active-exercise' ici
             exerciseDiv.setAttribute('data-exercise-id', exerciseId);
 
             exerciseDiv.innerHTML = `
@@ -499,310 +368,262 @@
                     <input type="text" placeholder="Nom Exercice" class="exercise-name">
                     <button class="btn btn-danger remove-exercise" style="padding: 0.3rem 0.6rem; flex-shrink: 0;">×</button>
                 </div>
-                <div class="form-group" style="margin-top: 0.5rem; margin-bottom: 0.5rem;">
-                    <label style="display: inline-flex; align-items: center; color: #bbb; font-size: 0.9rem;">
+                <div class="form-row" style="margin-top: 0.5rem; margin-bottom: 0.5rem; gap: 1rem;">
+                     <label style="display: inline-flex; align-items: center; color: #bbb; font-size: 0.9rem;">
                         <input type="checkbox" class="unilateral-checkbox"> Unilatéral
                     </label>
+                     <label style="display: inline-flex; align-items: center; color: #bbb; font-size: 0.9rem;">
+                        <input type="checkbox" class="superset-checkbox"> Début de Superset
+                    </label>
                 </div>
-                <div class="series-container">
-                    <!-- Séries ajoutées ici -->
-                </div>
+                <div class="series-container"></div>
                 <button class="btn btn-outline add-series" style="width: 100%; margin-top: 0.5rem; padding: 0.4rem;">+ Ajouter Série</button>
             `;
-            exercisesContainer.appendChild(exerciseDiv);
+            exercisesContainer.appendChild(exerciseDiv); // Ajouter au DOM
 
-            // Écouteurs pour cet exercice spécifique
+            // Garder une référence (important pour la navigation)
+             workoutExercisesForm = Array.from(exercisesContainer.querySelectorAll('.exercise'));
+
+            // Écouteurs pour cet exercice
             const removeBtn = exerciseDiv.querySelector('.remove-exercise');
-            removeBtn.addEventListener('click', () => exerciseDiv.remove());
+             // Gérer la suppression d'exercice dans le formulaire
+             removeBtn.addEventListener('click', () => {
+                 const indexToRemove = workoutExercisesForm.indexOf(exerciseDiv);
+                 if (indexToRemove > -1) {
+                     exerciseDiv.remove(); // Supprimer du DOM
+                     workoutExercisesForm = Array.from(exercisesContainer.querySelectorAll('.exercise')); // Mettre à jour la liste
+                     // Ajuster l'index courant si on supprime l'actuel ou un précédent
+                     if (currentExerciseIndex >= indexToRemove) {
+                         currentExerciseIndex = Math.max(0, currentExerciseIndex - 1);
+                     }
+                      // Si on supprime le dernier, l'index doit pointer sur le nouveau dernier (ou 0 si vide)
+                     if (currentExerciseIndex >= workoutExercisesForm.length) {
+                          currentExerciseIndex = Math.max(0, workoutExercisesForm.length - 1);
+                     }
+                     renderActiveExerciseForm(); // Afficher le bon exercice après suppression
+                 }
+             });
+
 
             const addSeriesBtn = exerciseDiv.querySelector('.add-series');
             const seriesContainer = exerciseDiv.querySelector('.series-container');
             addSeriesBtn.addEventListener('click', () => addSeries(seriesContainer));
 
-            // Ajouter la première série automatiquement
-            addSeries(seriesContainer);
+            addSeries(seriesContainer); // Ajouter la première série
+
+             if (navigateToNew) {
+                 currentExerciseIndex = workoutExercisesForm.length - 1; // Aller au nouvel exercice ajouté
+                 renderActiveExerciseForm();
+             } else {
+                 updateExerciseNavButtons(); // Juste mettre à jour les boutons si on n'y navigue pas
+             }
+
         }
 
-        function addSeries(container) {
-            if (!currentUser || !container) return;
-            const seriesId = `series-${Date.now()}`;
-            const seriesDiv = document.createElement('div');
-            seriesDiv.className = 'series';
-            seriesDiv.setAttribute('data-series-id', seriesId);
-
-            seriesDiv.innerHTML = `
-                <div class="form-row" style="align-items: flex-end; gap: 0.8rem;"> <!-- Ajout gap -->
-                    <div class="form-group" style="flex: 1.2;">
-                        <label>Reps</label>
-                        <input type="number" class="reps" min="1" placeholder="10" style="padding: 0.4rem;">
-                    </div>
-                    <div class="form-group" style="flex: 1.2;">
-                         <label>Charge (kg)</label>
-                        <input type="number" class="weight" min="0" step="0.1" placeholder="20" style="padding: 0.4rem;">
-                    </div>
-                    <div class="form-group" style="flex: 1; display: flex; align-items: center; padding-bottom: 0.6rem; min-width: 100px;">
-                         <label style="display: inline-flex; align-items: center; color: #bbb; font-size: 0.8rem; margin-bottom: 0; white-space: nowrap;">
-                            <input type="checkbox" class="degressive-checkbox" style="margin-right: 0.3rem;"> Dégressive
-                         </label>
-                    </div>
-                    <button class="btn btn-danger remove-series" style="padding: 0.3rem 0.6rem; margin-bottom: 0.6rem; flex-basis: 30px; flex-grow: 0; align-self: center;">×</button>
-                </div>
-            `;
-            container.appendChild(seriesDiv);
+        function addSeries(container) { /* ... (inchangé) ... */
+            if (!currentUser || !container) return; const seriesId = `series-${Date.now()}`; const seriesDiv = document.createElement('div'); seriesDiv.className = 'series'; seriesDiv.setAttribute('data-series-id', seriesId);
+            seriesDiv.innerHTML = `<div class="form-row" style="align-items: flex-end; gap: 0.8rem;"> <div class="form-group" style="flex: 1.2;"> <label>Reps</label> <input type="number" class="reps" min="1" placeholder="10" style="padding: 0.4rem;"> </div> <div class="form-group" style="flex: 1.2;"> <label>Charge (kg)</label> <input type="number" class="weight" min="0" step="0.1" placeholder="20" style="padding: 0.4rem;"> </div> <div class="form-group" style="flex: 1; display: flex; align-items: center; padding-bottom: 0.6rem; min-width: 100px;"> <label style="display: inline-flex; align-items: center; color: #bbb; font-size: 0.8rem; margin-bottom: 0; white-space: nowrap;"> <input type="checkbox" class="degressive-checkbox" style="margin-right: 0.3rem;"> Dégressive </label> </div> <button class="btn btn-danger remove-series" style="padding: 0.3rem 0.6rem; margin-bottom: 0.6rem; flex-basis: 30px; flex-grow: 0; align-self: center;">×</button> </div>`;
+            container.appendChild(seriesDiv); const removeBtn = seriesDiv.querySelector('.remove-series'); removeBtn.addEventListener('click', () => seriesDiv.remove());
+        }
+
+        function navigateExerciseForm(direction) {
+            const newIndex = currentExerciseIndex + direction;
+            if (newIndex >= 0 && newIndex < workoutExercisesForm.length) {
+                currentExerciseIndex = newIndex;
+                renderActiveExerciseForm();
+            }
+        }
+
+        function renderActiveExerciseForm() {
+             workoutExercisesForm = Array.from(exercisesContainer.querySelectorAll('.exercise')); // MAJ référence
+            // Cacher tous les exercices du formulaire
+             workoutExercisesForm.forEach(ex => ex.classList.remove('active-exercise'));
+
+            // Afficher l'exercice courant s'il existe
+            if (currentExerciseIndex >= 0 && currentExerciseIndex < workoutExercisesForm.length) {
+                 const currentExDiv = workoutExercisesForm[currentExerciseIndex];
+                 currentExDiv.classList.add('active-exercise');
+                 // Appliquer style superset si coché
+                  const isSuperset = currentExDiv.querySelector('.superset-checkbox').checked;
+                  if (isSuperset) {
+                      currentExDiv.classList.add('is-superset-start');
+                  } else {
+                      currentExDiv.classList.remove('is-superset-start');
+                  }
+
+            }
+
+            // Mettre à jour l'indicateur et les boutons
+            updateExerciseNavButtons();
+        }
+
+         function updateExerciseNavButtons() {
+             const totalExercises = workoutExercisesForm.length;
+             if (totalExercises === 0) {
+                 currentExerciseIndicator.textContent = "(Aucun exercice)";
+                 prevExerciseBtn.disabled = true;
+                 nextExerciseBtn.disabled = true;
+             } else {
+                 currentExerciseIndicator.textContent = `(${currentExerciseIndex + 1}/${totalExercises})`;
+                 prevExerciseBtn.disabled = currentExerciseIndex === 0;
+                 nextExerciseBtn.disabled = currentExerciseIndex === totalExercises - 1;
+             }
+         }
 
-            const removeBtn = seriesDiv.querySelector('.remove-series');
-            removeBtn.addEventListener('click', () => seriesDiv.remove());
+
+        function clearNewWorkoutForm() {
+            if (!currentUser) return;
+            document.getElementById('workout-name').value = '';
+            document.getElementById('workout-duration').value = '';
+            setTodayDate();
+            exercisesContainer.innerHTML = ''; // Vider le conteneur
+            workoutExercisesForm = []; // Vider la référence
+            satisfactionRange.value = 75;
+            satisfactionValue.textContent = '75%';
+            currentWorkoutId = null;
+             currentExerciseIndex = 0; // Revenir au premier potentiel exercice
+            addExercise(false); // Ajouter le premier bloc d'exercice vide mais ne pas naviguer (render s'en charge)
+            renderActiveExerciseForm(); // Afficher le premier exercice et MAJ boutons
         }
 
         function saveWorkout() {
             if (!currentUser) return;
 
-            // --- Récupération Données ---
             const workoutName = document.getElementById('workout-name').value.trim();
             const workoutDate = document.getElementById('workout-date').value;
             const workoutDuration = parseInt(document.getElementById('workout-duration').value) || 0;
             const satisfaction = parseInt(document.getElementById('satisfaction').value);
 
-            // --- Validation Données Séance ---
-            if (!workoutName) { alert("Veuillez entrer un nom pour la séance."); return; }
-            if (!workoutDate) { alert("Veuillez choisir une date pour la séance."); return; }
-            if (workoutDuration <= 0) { alert("Veuillez entrer une durée valide (en minutes)."); return; }
+            if (!workoutName) { alert("Nom séance requis."); return; }
+            if (!workoutDate) { alert("Date requise."); return; }
+            if (workoutDuration <= 0) { alert("Durée invalide."); return; }
 
-            // --- Récupération Exercices ---
+            // Lire depuis les divs d'exercices présents dans le conteneur du formulaire
+            const exerciseElements = workoutExercisesForm; // Utiliser notre référence à jour
             const exercises = [];
-            const exerciseElements = exercisesContainer.querySelectorAll('.exercise');
-
-            if (exerciseElements.length === 0) { alert("Veuillez ajouter au moins un exercice à la séance."); return; }
-
-            let validationError = null; // Pour stocker le message d'erreur
-
-            exerciseElements.forEach(exerciseEl => {
-                if (validationError) return; // Arrêter si une erreur précédente a eu lieu
+            if (exerciseElements.length === 0) { alert("Ajoutez au moins un exercice."); return; }
 
+            let validationError = null;
+             exerciseElements.forEach(exerciseEl => {
+                if (validationError) return;
                 const exerciseName = exerciseEl.querySelector('.exercise-name').value.trim();
-                const isUnilateral = exerciseEl.querySelector('.unilateral-checkbox').checked;
+                 const isUnilateral = exerciseEl.querySelector('.unilateral-checkbox').checked;
+                 const isSupersetStart = exerciseEl.querySelector('.superset-checkbox').checked; // Récupérer état superset
 
-                if (!exerciseName) {
-                    validationError = "Veuillez nommer tous les exercices.";
-                    return;
-                }
+                if (!exerciseName) { validationError = "Nommez tous les exercices."; return; }
 
                 const series = [];
                 const seriesElements = exerciseEl.querySelectorAll('.series');
-
-                if (seriesElements.length === 0) {
-                    validationError = `L'exercice "${exerciseName}" doit contenir au moins une série.`;
-                    return;
-                }
+                if (seriesElements.length === 0) { validationError = `Exercice "${exerciseName}" sans série.`; return; }
 
                 seriesElements.forEach(seriesEl => {
-                    if (validationError) return;
-
-                    const repsInput = seriesEl.querySelector('.reps');
-                    const weightInput = seriesEl.querySelector('.weight');
-                    const reps = parseInt(repsInput.value) || 0;
-                    const weight = parseFloat(weightInput.value) || 0; // Permet 0 pour poids du corps
+                     if (validationError) return;
+                    const repsInput = seriesEl.querySelector('.reps'); const weightInput = seriesEl.querySelector('.weight');
+                    const reps = parseInt(repsInput.value) || 0; const weight = parseFloat(weightInput.value) || 0;
                     const isDegressive = seriesEl.querySelector('.degressive-checkbox').checked;
-
-                    if (reps <= 0) {
-                        validationError = `Nombre de répétitions invalide pour une série de "${exerciseName}".`;
-                         repsInput.focus(); // Focus sur le champ erroné
-                        return;
-                    }
-                    if (weight < 0) { // Poids négatif n'est pas permis
-                         validationError = `Charge invalide pour une série de "${exerciseName}".`;
-                         weightInput.focus();
-                         return;
-                    }
+                    if (reps <= 0) { validationError = `Reps invalides pour "${exerciseName}".`; repsInput.focus(); return; }
+                    if (weight < 0) { validationError = `Charge invalide pour "${exerciseName}".`; weightInput.focus(); return; }
                     series.push({ reps, weight, isDegressive });
                 });
 
                 if (!validationError) {
-                    exercises.push({ name: exerciseName, isUnilateral, series });
+                     // Ajouter isSupersetStart à l'objet exercice
+                    exercises.push({ name: exerciseName, isUnilateral, isSupersetStart, series });
                 }
             });
 
-            // Afficher l'erreur et arrêter si nécessaire
-            if (validationError) {
-                alert(validationError);
-                return;
-            }
+            if (validationError) { alert(validationError); return; }
 
             // --- Calcul Tonnage ---
             let totalTonnage = 0;
             exercises.forEach(exercise => {
                 exercise.series.forEach(serie => {
-                    const weightFactor = exercise.isUnilateral ? 2 : 1; // Compte double pour unilatéral
+                    const weightFactor = exercise.isUnilateral ? 2 : 1;
                     totalTonnage += serie.reps * serie.weight * weightFactor;
                 });
             });
 
-            // --- Création Objet Séance ---
             const workout = {
-                id: currentWorkoutId || `workout-${Date.now()}`, // Utilise l'ID existant si modification
-                name: workoutName,
-                date: workoutDate,
-                duration: workoutDuration,
-                exercises: exercises, // Utilise la variable locale remplie
-                totalTonnage: totalTonnage,
-                satisfaction: satisfaction
+                id: currentWorkoutId || `workout-${Date.now()}`, name: workoutName, date: workoutDate, duration: workoutDuration,
+                exercises: exercises, // Tableau d'exercices avec potentiellement isSupersetStart
+                totalTonnage: totalTonnage, satisfaction: satisfaction
             };
 
-            // --- Ajout ou Mise à Jour ---
             const existingIndex = workouts.findIndex(w => w.id === workout.id);
-            if (existingIndex > -1) {
-                workouts[existingIndex] = workout; // Mise à jour
-                console.log("Séance mise à jour:", workout.id);
-            } else {
-                workouts.push(workout); // Ajout nouvelle séance
-                console.log("Nouvelle séance ajoutée:", workout.id);
-            }
+            if (existingIndex > -1) { workouts[existingIndex] = workout; } else { workouts.push(workout); }
 
-            // --- Sauvegarde et Affichage ---
             saveWorkouts();
-            showPage('home-page');
-            renderWorkoutsList(); // Mettre à jour la liste immédiatement
-        }
 
-        function renderWorkoutsList() {
-            if (!currentUser) return; // Sécurité
-            workoutsList.innerHTML = ''; // Vider avant de remplir
+             // Animation Confettis !
+             confetti({ particleCount: 150, spread: 90, origin: { y: 0.6 } });
 
-             if (workouts.length === 0) {
-                emptyWorkoutMessage.classList.remove('hidden'); // Afficher message si vide
-                updateStats(); // Mettre à jour les stats (qui seront à 0)
-                return;
-            }
-
-            emptyWorkoutMessage.classList.add('hidden'); // Cacher message si pas vide
+            showPage('home-page');
+            renderWorkoutsList();
+        }
 
-            // Trier par date (plus récent en premier)
+        // --- Affichage et Stats (avec gestion superset dans l'affichage détail) ---
+        function renderWorkoutsList() { /* ... (inchangé sauf appel updateStats) ... */
+            if (!currentUser) return; workoutsList.innerHTML = ''; if (workouts.length === 0) { emptyWorkoutMessage.classList.remove('hidden'); updateStats(); return; } emptyWorkoutMessage.classList.add('hidden');
             const sortedWorkouts = [...workouts].sort((a, b) => new Date(b.date) - new Date(a.date));
-
-            sortedWorkouts.forEach(workout => {
-                const workoutDate = new Date(workout.date).toLocaleDateString('fr-FR', { year: 'numeric', month: 'short', day: 'numeric' });
-                const workoutDiv = document.createElement('div');
-                workoutDiv.className = 'card workout-card';
-                workoutDiv.setAttribute('data-workout-id', workout.id);
-
-                // Simplification de l'affichage pour plus de clarté
-                workoutDiv.innerHTML = `
-                    <div class="workout-header">
-                        <h3 style="margin-bottom: 0.5rem;">${workout.name}</h3>
-                        <div class="badge">${workoutDate}</div>
-                    </div>
-                    <div class="workout-details" style="font-size: 0.9rem; color: #ccc; margin-top: 0.5rem;">
-                        <span>${workout.duration} min</span> |
-                        <span>${workout.exercises.length} exo${workout.exercises.length > 1 ? 's' : ''}</span> |
-                        <span>${workout.totalTonnage.toFixed(1)} kg</span> |
-                        <span>${workout.satisfaction}%</span>
-                    </div>
-                `;
-                workoutDiv.addEventListener('click', () => displayWorkoutDetails(workout.id));
-                workoutsList.appendChild(workoutDiv);
-            });
-
-            updateStats(); // Mettre à jour les stats globales
-        }
+            sortedWorkouts.forEach(workout => { const workoutDate = new Date(workout.date).toLocaleDateString('fr-FR', { year: 'numeric', month: 'short', day: 'numeric' }); const workoutDiv = document.createElement('div'); workoutDiv.className = 'card workout-card'; workoutDiv.setAttribute('data-workout-id', workout.id); workoutDiv.innerHTML = `<div class="workout-header"><h3 style="margin-bottom: 0.5rem;">${workout.name}</h3><div class="badge">${workoutDate}</div></div><div class="workout-details" style="font-size: 0.9rem; color: #ccc; margin-top: 0.5rem;"><span>${workout.duration} min</span> | <span>${workout.exercises.length} exo${workout.exercises.length > 1 ? 's' : ''}</span> | <span>${workout.totalTonnage.toFixed(1)} kg</span> | <span>${workout.satisfaction}%</span></div>`; workoutDiv.addEventListener('click', () => displayWorkoutDetails(workout.id)); workoutsList.appendChild(workoutDiv); });
+            updateStats();
+         }
 
         function displayWorkoutDetails(workoutId) {
             if (!currentUser) return;
             const workout = workouts.find(w => w.id === workoutId);
-            if (!workout) {
-                 console.error("Séance non trouvée:", workoutId);
-                 showPage('home-page'); // Retour à l'accueil si non trouvée
-                 return;
-            }
+            if (!workout) { console.error("Séance non trouvée:", workoutId); showPage('home-page'); return; }
 
-            // MAJ Infos générales
-            document.getElementById('detail-workout-name').textContent = workout.name;
-            document.getElementById('detail-date').textContent = new Date(workout.date).toLocaleDateString('fr-FR');
-            document.getElementById('detail-duration').textContent = workout.duration;
-            document.getElementById('detail-tonnage').textContent = workout.totalTonnage.toFixed(1);
-            document.getElementById('detail-satisfaction').textContent = `${workout.satisfaction}%`;
-            document.getElementById('detail-exercises-count').textContent = workout.exercises.length;
+            // MAJ Infos générales (inchangé)
+             document.getElementById('detail-workout-name').textContent = workout.name; document.getElementById('detail-date').textContent = new Date(workout.date).toLocaleDateString('fr-FR'); document.getElementById('detail-duration').textContent = workout.duration; document.getElementById('detail-tonnage').textContent = workout.totalTonnage.toFixed(1); document.getElementById('detail-satisfaction').textContent = `${workout.satisfaction}%`; document.getElementById('detail-exercises-count').textContent = workout.exercises.length;
 
-            // MAJ Liste des exercices détaillés
             const detailExercisesContainer = document.getElementById('detail-exercises-container');
-            detailExercisesContainer.innerHTML = ''; // Vider
+            detailExercisesContainer.innerHTML = '';
 
-            workout.exercises.forEach(exercise => {
+            // MAJ Exercices avec indicateur Superset
+            workout.exercises.forEach((exercise, index) => {
                 const exerciseDiv = document.createElement('div');
-                exerciseDiv.className = 'card'; // Style carte pour chaque exo
+                 // Ajouter des classes pour le style Superset
+                 exerciseDiv.classList.add('card', 'detail-exercise-card'); // Classe de base
+                 let isContinuation = false;
+                 if (exercise.isSupersetStart) {
+                     exerciseDiv.classList.add('is-superset-start');
+                 }
+                 // Vérifier si l'exercice *précédent* était un début de superset
+                 if (index > 0 && workout.exercises[index - 1].isSupersetStart) {
+                     exerciseDiv.classList.add('is-superset-continuation');
+                     isContinuation = true;
+                 }
+
+
                 let seriesHtml = '';
-                exercise.series.forEach((serie, index) => {
-                    const degressiveLabel = serie.isDegressive ? ' <span class="badge" style="font-size: 0.7rem; background-color: var(--accent-dark);">Dégr.</span>' : '';
-                    const weightFactor = exercise.isUnilateral ? 2 : 1;
-                    const seriesTonnage = serie.reps * serie.weight * weightFactor;
-                    seriesHtml += `
-                        <div class="exercise-summary">
-                            <div class="flex-between">
-                                <span>Série ${index + 1}: ${serie.reps} reps × ${serie.weight} kg${degressiveLabel}</span>
-                                <span style="color: #aaa;">(${seriesTonnage.toFixed(1)} kg)</span>
-                            </div>
-                        </div>
-                    `;
-                });
+                exercise.series.forEach((serie, sIndex) => { /* ... (inchangé) ... */
+                     const degressiveLabel = serie.isDegressive ? ' <span class="badge" style="font-size: 0.7rem; background-color: var(--accent-dark);">Dégr.</span>' : ''; const weightFactor = exercise.isUnilateral ? 2 : 1; const seriesTonnage = serie.reps * serie.weight * weightFactor;
+                     seriesHtml += `<div class="exercise-summary"><div class="flex-between"><span>Série ${sIndex + 1}: ${serie.reps} reps × ${serie.weight} kg${degressiveLabel}</span><span style="color: #aaa;">(${seriesTonnage.toFixed(1)} kg)</span></div></div>`;
+                 });
 
                 const unilateralLabel = exercise.isUnilateral ? ' <span class="badge" style="font-size: 0.7rem;">Unilat.</span>' : '';
+                 // Ajout badge Superset si c'est le début
+                 const supersetLabel = exercise.isSupersetStart ? ` <span class="badge badge-superset" style="font-size: 0.7rem;">Superset 🔽</span>` : '';
+
                 exerciseDiv.innerHTML = `
-                    <h3 style="font-size: 1.1rem; margin-bottom: 0.5rem;">${exercise.name}${unilateralLabel}</h3>
+                    <h3 style="font-size: 1.1rem; margin-bottom: 0.5rem;">${exercise.name}${unilateralLabel}${supersetLabel}</h3>
                     <div class="series-summary-container">
                         ${seriesHtml}
                     </div>`;
                 detailExercisesContainer.appendChild(exerciseDiv);
             });
 
-            currentWorkoutId = workoutId; // Stocker pour suppression éventuelle
-            showPage('workout-details-page'); // Afficher la page détail
+            currentWorkoutId = workoutId;
+            showPage('workout-details-page');
         }
 
-        function deleteWorkout() {
-            if (!currentUser || !currentWorkoutId) return;
-            const workoutToDelete = workouts.find(w => w.id === currentWorkoutId);
-            if (!workoutToDelete) return; // Sécurité
-
-            const confirmDelete = confirm(`Êtes-vous sûr de vouloir supprimer la séance "${workoutToDelete.name}" du ${new Date(workoutToDelete.date).toLocaleDateString('fr-FR')} ?\nCette action est irréversible.`);
-            if (!confirmDelete) return;
-
-            // Filtrer la séance
-            workouts = workouts.filter(w => w.id !== currentWorkoutId);
-            saveWorkouts(); // Sauvegarder la liste mise à jour
-            currentWorkoutId = null; // Réinitialiser l'ID courant
-            showPage('home-page');
-            renderWorkoutsList(); // Rafraîchir la liste
+        function deleteWorkout() { /* ... (inchangé) ... */
+             if (!currentUser || !currentWorkoutId) return; const workoutToDelete = workouts.find(w => w.id === currentWorkoutId); if (!workoutToDelete) return; const confirmDelete = confirm(`Supprimer séance "${workoutToDelete.name}" du ${new Date(workoutToDelete.date).toLocaleDateString('fr-FR')} ?`); if (!confirmDelete) return; workouts = workouts.filter(w => w.id !== currentWorkoutId); saveWorkouts(); currentWorkoutId = null; showPage('home-page'); renderWorkoutsList();
         }
 
-        function clearNewWorkoutForm() {
-            if (!currentUser) return;
-            document.getElementById('workout-name').value = '';
-            document.getElementById('workout-duration').value = '';
-            setTodayDate(); // Remettre date du jour
-            exercisesContainer.innerHTML = ''; // Vider les exercices ajoutés
-            satisfactionRange.value = 75; // Reset satisfaction
-            satisfactionValue.textContent = '75%';
-            currentWorkoutId = null; // Assurer qu'on est bien en mode création
-        }
-
-        function updateStats() {
-             if (!currentUser) return;
-             const workoutCount = workouts.length;
-
-             document.getElementById('stats-workout-count').textContent = workoutCount;
-
-             if (workoutCount === 0) {
-                document.getElementById('stats-avg-tonnage').textContent = '0';
-                document.getElementById('stats-avg-satisfaction').textContent = '0%';
-                return;
-            }
-
-            const totalTonnageAll = workouts.reduce((sum, workout) => sum + (workout.totalTonnage || 0), 0);
-            const avgTonnage = totalTonnageAll / workoutCount;
-            document.getElementById('stats-avg-tonnage').textContent = avgTonnage.toFixed(1);
-
-            const totalSatisfaction = workouts.reduce((sum, workout) => sum + (workout.satisfaction || 0), 0);
-            const avgSatisfaction = totalSatisfaction / workoutCount;
-            document.getElementById('stats-avg-satisfaction').textContent = `${Math.round(avgSatisfaction)}%`;
+        function updateStats() { /* ... (inchangé) ... */
+             if (!currentUser) return; const workoutCount = workouts.length; document.getElementById('stats-workout-count').textContent = workoutCount; if (workoutCount === 0) { document.getElementById('stats-avg-tonnage').textContent = '0'; document.getElementById('stats-avg-satisfaction').textContent = '0%'; return; } const totalTonnageAll = workouts.reduce((sum, workout) => sum + (workout.totalTonnage || 0), 0); const avgTonnage = totalTonnageAll / workoutCount; document.getElementById('stats-avg-tonnage').textContent = avgTonnage.toFixed(1); const totalSatisfaction = workouts.reduce((sum, workout) => sum + (workout.satisfaction || 0), 0); const avgSatisfaction = totalSatisfaction / workoutCount; document.getElementById('stats-avg-satisfaction').textContent = `${Math.round(avgSatisfaction)}%`;
         }
 
     </script>