Update index.html

index.html

@@ -31,6 +31,7 @@
             --neutral-white: #FFFFFF; /* Blanc pur du logo Fitness */
             --danger: #f44336; /* Rouge pour danger (inchangé) */
             --info: #6c757d; /* Couleur neutre/grise pour info (ancien bleu) */
+            --success: #4CAF50; /* Vert pour succès */
             --border-color: #333333; /* Couleur des bordures */
 
             --font-primary: 'Roboto', sans-serif; /* Police par défaut */
@@ -38,312 +39,89 @@
         }
         /* ===== FIN NOUVELLES VARIABLES ===== */
 
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            /* Police par défaut appliquée */
-            font-family: var(--font-primary);
-        }
-
-        body {
-            background-color: var(--bg-dark);
-            color: var(--text-light);
-            min-height: 100vh;
-            padding-bottom: 80px; /* Espace pour nav bottom */
-        }
-
-        .container {
-            width: 100%;
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 1rem;
-        }
-
-        /* Header modifié pour intégrer le logo */
-        header {
-            padding: 1rem 0;
-            text-align: center;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 1rem;
-            display: flex; /* Utilisation de flex pour centrer le logo */
-            flex-direction: column; /* Logo au-dessus du slogan */
-            align-items: center; /* Centrage horizontal */
-        }
-
-        header img#app-logo {
-            max-width: 250px; /* Ajustez la taille selon vos besoins */
-            height: auto;
-            margin-bottom: 0.5rem; /* Espace entre logo et slogan */
-        }
-
-        header p {
-            color: var(--text-secondary);
-            font-size: 0.9rem;
-        }
-        /* Fin modif header */
-
-        h1, h2, h3, h4 {
-            /* Application de la police titre + couleur accent */
-            font-family: var(--font-headings);
-            font-weight: 700; /* Assurez-vous que le poids est chargé */
-            color: var(--accent);
-            text-transform: uppercase; /* Style COCKTAIL */
-            letter-spacing: 0.5px; /* Léger espacement */
-        }
-
-        .btn {
-            background-color: var(--accent);
-            /* Texte sur bouton doit contraster avec le jaune */
-            color: var(--text-on-accent);
-            border: none;
-            padding: 0.6rem 1.2rem;
-            border-radius: 4px;
-            cursor: pointer;
-            font-weight: bold; /* Utilise le poids de Roboto Bold par défaut */
-            font-family: var(--font-headings); /* Police titre sur boutons */
-            text-transform: uppercase; /* Style COCKTAIL */
-            transition: background-color 0.2s, color 0.2s;
-        }
-
-        .btn:hover {
-            background-color: var(--accent-dark);
-            color: var(--text-on-accent);
-        }
-
-        .btn:disabled {
-            background-color: #555;
-            color: #999;
-            cursor: not-allowed;
-        }
-
-        .btn-outline {
-            background-color: transparent;
-            color: var(--accent);
-            border: 1px solid var(--accent);
-        }
-        .btn-outline:hover {
-            background-color: rgba(255, 193, 7, 0.1); /* Léger fond jaune au survol */
-            color: var(--accent);
-        }
-
-        .btn-outline:disabled {
-            color: #555;
-            border-color: #555;
-            background-color: transparent;
-        }
-
-        .btn-danger {
-            background-color: var(--danger);
-            color: white; /* Texte blanc sur rouge */
-            border-color: var(--danger);
-        }
-         .btn-danger:hover {
-            background-color: #d32f2f; /* Rouge plus foncé */
-            color: white;
-        }
-
-        .btn-info {
-            background-color: var(--info);
-            color: var(--text-light); /* Texte clair sur fond gris */
-            border-color: var(--info);
-        }
-        .btn-info:hover {
-             background-color: #5a6268; /* Gris plus foncé */
-             color: var(--text-light);
-        }
-
-        input, select, textarea {
-            width: 100%;
-            padding: 0.7rem; /* Légèrement plus de padding */
-            margin-bottom: 1rem;
-            background-color: #2a2a2a;
-            border: 1px solid #444;
-            border-radius: 4px;
-            color: var(--text-light);
-            font-size: 1rem; /* Taille de police standard */
-        }
-        input:focus, select:focus, textarea:focus {
-            outline: none;
-            border-color: var(--accent);
-            box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.3); /* Ombre focus jaune */
-        }
-
-        input[type="checkbox"] {
-            width: auto;
-            margin-right: 0.5rem;
-            vertical-align: middle;
-             accent-color: var(--accent); /* Couleur de la coche */
-        }
-
-        .card {
-            background-color: var(--bg-card);
-            border-radius: 8px;
-            padding: 1.2rem; /* Padding un peu plus grand */
-            margin-bottom: 1rem;
-            box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Ombre un peu plus prononcée */
-        }
-
+        * { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-primary); }
+        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 */
+        header { padding: 1rem 0; text-align: center; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; display: flex; flex-direction: column; align-items: center; }
+        header img#app-logo { max-width: 250px; height: auto; margin-bottom: 0.5rem; }
+        header p { color: var(--text-secondary); font-size: 0.9rem; }
+
+        /* Typography */
+        h1, h2, h3, h4 { font-family: var(--font-headings); font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; }
+
+        /* Buttons */
+        .btn { background-color: var(--accent); color: var(--text-on-accent); border: none; padding: 0.6rem 1.2rem; border-radius: 4px; cursor: pointer; font-weight: bold; font-family: var(--font-headings); text-transform: uppercase; transition: background-color 0.2s, color 0.2s; }
+        .btn:hover { background-color: var(--accent-dark); color: var(--text-on-accent); }
+        .btn:disabled { background-color: #555; color: #999; cursor: not-allowed; }
+        .btn-outline { background-color: transparent; color: var(--accent); border: 1px solid var(--accent); }
+        .btn-outline:hover { background-color: rgba(255, 193, 7, 0.1); color: var(--accent); }
+        .btn-outline:disabled { color: #555; border-color: #555; background-color: transparent; }
+        .btn-danger { background-color: var(--danger); color: white; border-color: var(--danger); }
+        .btn-danger:hover { background-color: #d32f2f; color: white; }
+        .btn-info { background-color: var(--info); color: var(--text-light); border-color: var(--info); }
+        .btn-info:hover { background-color: #5a6268; color: var(--text-light); }
+
+        /* Forms */
+        input, select, textarea { width: 100%; padding: 0.7rem; margin-bottom: 1rem; background-color: #2a2a2a; border: 1px solid #444; border-radius: 4px; color: var(--text-light); font-size: 1rem; }
+        input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.3); }
+        input[type="checkbox"] { width: auto; margin-right: 0.5rem; vertical-align: middle; accent-color: var(--accent); }
+        label { display: block; margin-bottom: 0.4rem; color: var(--text-secondary); font-size: 0.9rem; font-weight: bold; }
         .form-group { margin-bottom: 1rem; }
-        .form-row { display: flex; gap: 1rem; margin-bottom: 0.5rem; flex-wrap: wrap; } /* Espace augmenté */
+        .form-row { display: flex; gap: 1rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
         .form-row > * { flex: 1; margin-bottom: 0; min-width: 100px; }
 
-        label {
-            display: block;
-            margin-bottom: 0.4rem; /* Espace label/input */
-            color: var(--text-secondary);
-            font-size: 0.9rem;
-            font-weight: bold; /* Labels en gras */
-        }
+        /* Cards */
+        .card { background-color: var(--bg-card); border-radius: 8px; padding: 1.2rem; margin-bottom: 1rem; box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
 
-        /* Exercise styling */
-        .exercise {
-            border-left: 4px solid var(--accent); /* Bordure accentuée */
-            padding-left: 1rem;
-            margin-bottom: 1.5rem;
-            display: none;
-            background-color: rgba(0,0,0,0.1); /* Léger fond pour démarquer */
-            padding: 1rem; /* Padding interne */
-            border-radius: 0 4px 4px 0;
-        }
+        /* Exercise Styling */
+        .exercise { border-left: 4px solid var(--accent); padding-left: 1rem; margin-bottom: 1.5rem; display: none; background-color: rgba(0,0,0,0.1); padding: 1rem; border-radius: 0 4px 4px 0; }
         .exercise.active-exercise { display: block; animation: fadeIn 0.3s ease-in-out; }
         .exercise-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 0.5rem;}
         .exercise-header input { margin-bottom: 0; }
-        .series-container { margin-left: 0rem; margin-top: 1rem; } /* Pas de marge gauche superflue */
-        .series { background-color: #282828; padding: 0.8rem; border-radius: 4px; margin-bottom: 0.8rem; border: 1px solid #333; } /* Style série amélioré */
+        .series-container { margin-left: 0rem; margin-top: 1rem; }
+        .series { background-color: #282828; padding: 0.8rem; border-radius: 4px; margin-bottom: 0.8rem; border: 1px solid #333; }
 
         /* Nav Bottom */
-        .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 -3px 10px rgba(0,0,0,0.4);
-            z-index: 10;
-        }
-        .nav-item {
-            text-align: center; color: var(--text-secondary);
-            text-decoration: none; font-size: 0.85rem;
-            transition: color 0.2s; padding: 0 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 -3px 10px rgba(0,0,0,0.4); z-index: 10; }
+        .nav-item { text-align: center; color: var(--text-secondary); text-decoration: none; font-size: 0.85rem; transition: color 0.2s; padding: 0 0.5rem; }
         .nav-item.active { color: var(--accent); font-weight: bold; }
-        .nav-icon { font-size: 1.5rem; margin-bottom: 0.2rem; } /* Icônes plus grandes */
-
-        /* ===== CSS MODIFIÉ POUR LA CARTE SÉANCE ===== */
-        .workout-card {
-            border-left: 4px solid var(--accent);
-            cursor: pointer;
-            transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
-        }
-        .workout-card:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 6px 12px rgba(0,0,0,0.4);
-        }
-        .workout-header {
-            display: flex;
-            align-items: center; /* Centre verticalement titre et badge */
-            gap: 0.75rem; /* Espace entre le titre et le badge */
-            margin-bottom: 0.5rem; /* Espace sous l'en-tête, avant les détails */
-        }
-        .workout-header h3 {
-            color: var(--text-light);
-            font-family: var(--font-primary);
-            text-transform: none;
-            letter-spacing: normal;
-            font-weight: bold;
-            flex-grow: 1; /* Permet au titre de prendre l'espace disponible */
-            min-width: 0; /* Important pour permettre au titre de rétrécir */
-            position: static; /* Assure positionnement normal */
-            margin-bottom: 0; /* Retiré car géré par gap */
-        }
-        /* Cible spécifiquement le badge DANS le .workout-header (le badge de date) */
-        .workout-header > .badge {
-            background-color: #2a2a2a; /* Fond plus discret, correspond aux inputs */
-            color: var(--text-secondary); /* Texte gris clair */
-            padding: 0.3rem 0.6rem;
-            border-radius: 4px; /* Moins arrondi, plus sobre */
-            font-size: 0.8rem;
-            font-weight: normal; /* Date pas forcément en gras */
-            white-space: nowrap; /* Garde la date sur une ligne */
-            flex-shrink: 0; /* Empêche le badge de rétrécir */
-            margin-left: auto; /* Pousse le badge vers la droite après que le h3 ait pris sa place */
-            position: static; /* Assure positionnement normal */
-        }
-        .workout-details {
-            font-size: 0.9rem;
-            color: var(--text-secondary);
-            margin-top: 0.8rem; /* Rétabli ou ajusté */
-        }
-        .workout-details span {
-            margin-right: 0.8rem; /* Espacement entre les détails */
-        }
-        /* Assure que le badge de type à l'intérieur du h3 garde son style */
-        .workout-header h3 .badge.type-badge {
-             background-color: var(--neutral-white);
-             color: var(--bg-dark);
-             padding: 0.3rem 0.6rem;
-             border-radius: 12px;
-             font-size: 0.8rem;
-             font-weight: bold;
-             white-space: nowrap;
-             margin-left: 5px;
-             /* On s'assure qu'il n'hérite pas du style du badge de date */
-             position: static;
-             flex-shrink: initial;
-             margin-left: 5px; /* Garde la marge gauche du badge type */
-        }
-        /* ===== FIN CSS MODIFIÉ POUR LA CARTE SÉANCE ===== */
-
+        .nav-icon { font-size: 1.5rem; margin-bottom: 0.2rem; }
+
+        /* Workout Card */
+        .workout-card { border-left: 4px solid var(--accent); cursor: pointer; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; }
+        .workout-card:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.4); }
+        .workout-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
+        .workout-header h3 { color: var(--text-light); font-family: var(--font-primary); text-transform: none; letter-spacing: normal; font-weight: bold; flex-grow: 1; min-width: 0; position: static; margin-bottom: 0; }
+        .workout-header > .badge { background-color: #2a2a2a; color: var(--text-secondary); padding: 0.3rem 0.6rem; border-radius: 4px; font-size: 0.8rem; font-weight: normal; white-space: nowrap; flex-shrink: 0; margin-left: auto; position: static; }
+        .workout-details { font-size: 0.9rem; color: var(--text-secondary); margin-top: 0.8rem; }
+        .workout-details span { margin-right: 0.8rem; }
+        .workout-header h3 .badge.type-badge { background-color: var(--neutral-white); color: var(--bg-dark); padding: 0.3rem 0.6rem; border-radius: 12px; font-size: 0.8rem; font-weight: bold; white-space: nowrap; margin-left: 5px; position: static; flex-shrink: initial; margin-left: 5px; }
 
         /* Stats */
         .stat-card { text-align: center; padding: 1rem; }
-        .stat-value {
-            font-size: 2rem; /* Taille augmentée */
-            color: var(--accent);
-            font-weight: bold;
-            font-family: var(--font-headings); /* Police titre */
-            margin-bottom: 0.3rem;
-        }
-        .stat-card div:last-child { color: var(--text-secondary); font-size: 0.9rem; } /* Label stat */
-        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; } /* Min width augmentée */
+        .stat-value { font-size: 2rem; color: var(--accent); font-weight: bold; font-family: var(--font-headings); margin-bottom: 0.3rem; }
+        .stat-card div:last-child { color: var(--text-secondary); font-size: 0.9rem; }
+        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
 
-        .hidden { display: none !important; } /* Utilise !important pour forcer */
+        /* Utility */
+        .hidden { display: none !important; }
         #app-container > div:not(.active) { display: none !important; }
-        .flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } /* Espace augmenté */
-
-        /* Badges Généraux (non date, non type) */
-        .badge {
-            background-color: var(--accent);
-            color: var(--text-on-accent);
-            padding: 0.3rem 0.6rem; /* Padding ajusté */
-            border-radius: 12px; /* Plus arrondi */
-            font-size: 0.8rem;
-            font-weight: bold;
-            white-space: nowrap;
-            margin-left: 5px;
-        }
-        /* Style spécifique pour le badge de type déjà géré plus haut */
+        .flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
 
+        /* Badges (General) */
+        .badge { background-color: var(--accent); color: var(--text-on-accent); padding: 0.3rem 0.6rem; border-radius: 12px; font-size: 0.8rem; font-weight: bold; white-space: nowrap; margin-left: 5px; }
+        /* .badge.type-badge is handled in .workout-header h3 .badge.type-badge */
 
         /* Spinner */
-        .spinner {
-            border: 4px solid rgba(255, 255, 255, 0.1);
-            width: 36px; height: 36px;
-            border-radius: 50%;
-            border-left-color: var(--accent); /* Couleur accent pour spinner */
-            animation: spin 1s linear infinite;
-            margin: 2rem auto; display: none;
-        }
+        .spinner { border: 4px solid rgba(255, 255, 255, 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 in Details */
-        .exercise-summary {
-            margin: 0.3rem 0; padding: 0.5rem 0;
-            border-bottom: 1px solid var(--border-color);
-            font-size: 0.9rem;
-        }
+        .exercise-summary { margin: 0.3rem 0; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color); font-size: 0.9rem; }
         .exercise-summary:last-child { border-bottom: none; }
-        .series-summary-container .badge { font-size: 0.7rem; padding: 0.2rem 0.4rem; background-color: var(--info); color: var(--text-light); } /* Style badge Dégr/Unilat dans détails */
+        .series-summary-container .badge { font-size: 0.7rem; padding: 0.2rem 0.4rem; background-color: var(--info); color: var(--text-light); }
 
         /* Satisfaction Slider */
         .satisfaction { display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 1rem; }
@@ -357,10 +135,16 @@
         /* Login Page */
         #login-page .card { max-width: 400px; margin: 3rem auto; }
         #login-page h2 { text-align: center; margin-bottom: 1.5rem; color: var(--accent); }
-        #login-error { color: var(--danger); text-align: center; margin-top: 1rem; font-size: 0.9rem; display: none; min-height: 1.2em; font-weight: bold; }
+        /* Error/Success message styling */
+        #login-message { text-align: center; margin-top: 1rem; font-size: 0.9rem; min-height: 1.2em; font-weight: bold; display: none; }
+        #login-message.error { color: var(--danger); }
+        #login-message.success { color: var(--success); }
         #login-form button { margin-top: 1rem; }
-        .auth-switch { text-align: center; margin-top: 1.5rem; font-size: 0.9rem; color: var(--text-secondary); }
-        .auth-switch a { color: var(--accent); cursor: pointer; text-decoration: underline; font-weight: bold; }
+        .auth-options { margin-top: 1.5rem; font-size: 0.9rem; text-align: center; } /* Container for switch and forgot password */
+        .auth-switch { margin-bottom: 0.5rem; color: var(--text-secondary); } /* Style for "Pas de compte..." */
+        .auth-options a { color: var(--accent); cursor: pointer; text-decoration: underline; font-weight: bold; }
+        #forgot-password-link { display: block; /* Place it below the switch link */ }
+
 
         /* User Info */
         .user-info { text-align: right; margin-bottom: 1rem; font-size: 0.9rem; color: var(--text-secondary);}
@@ -368,13 +152,7 @@
         .user-info button { margin-left: 0.8rem; padding: 0.3rem 0.7rem; font-size: 0.8rem; }
 
         /* Manage Types Page */
-        #workout-types-list li {
-            display: flex; justify-content: space-between; align-items: center;
-            background-color: #2a2a2a; padding: 0.7rem 1rem; /* Padding augmenté */
-            margin-bottom: 0.5rem; border-radius: 4px;
-            border-left: 4px solid var(--neutral-white); /* Bordure blanche */
-            color: var(--text-light); font-weight: bold;
-        }
+        #workout-types-list li { display: flex; justify-content: space-between; align-items: center; background-color: #2a2a2a; padding: 0.7rem 1rem; margin-bottom: 0.5rem; border-radius: 4px; border-left: 4px solid var(--neutral-white); color: var(--text-light); font-weight: bold; }
         #add-type-form { display: flex; gap: 0.5rem; align-items: flex-end;}
         #add-type-form input { margin-bottom: 0; flex-grow: 1;}
         #add-type-form button { flex-shrink: 0; }
@@ -382,23 +160,17 @@
 
         /* Select Workout Type Page */
         #select-workout-type-page .card { text-align: center; }
-        #select-workout-type-page .btn { margin-top: 1rem; width: 80%; } /* Boutons plus larges */
+        #select-workout-type-page .btn { margin-top: 1rem; width: 80%; }
         #select-workout-type { margin-bottom: 1rem;}
 
         /* Type Trend Card */
         .type-trend-card { margin-bottom: 1.5rem; }
-        .type-trend-card h4 {
-             /* Style titre appliqué par défaut */
-             color: var(--neutral-white); /* Titre Tendance en Blanc */
-             border-bottom: 1px solid var(--border-color);
-             padding-bottom: 0.5rem; margin-bottom: 1rem;
-             text-transform: uppercase; /* Garde uppercase pour section */
-        }
+        .type-trend-card h4 { color: var(--neutral-white); border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; margin-bottom: 1rem; text-transform: uppercase; }
         .type-trend-card ul { list-style: none; padding: 0; font-size: 0.95rem; }
         .type-trend-card li { margin-bottom: 0.6rem; color: var(--text-light); display: flex; justify-content: space-between; border-bottom: 1px dashed #333; padding-bottom: 0.4rem;}
         .type-trend-card li:last-child { border-bottom: none; }
-        .type-trend-card li span:first-child { color: var(--text-secondary); font-size: 0.85rem; margin-right: 1rem; } /* Date */
-        .type-trend-card li strong { color: var(--accent); } /* Tonnage en accent */
+        .type-trend-card li span:first-child { color: var(--text-secondary); font-size: 0.85rem; margin-right: 1rem; }
+        .type-trend-card li strong { color: var(--accent); }
 
 
         /* Media Queries */
@@ -408,11 +180,9 @@
             .form-row { flex-direction: column; gap: 0.8rem; }
             .flex-between { flex-direction: column; align-items: stretch; gap: 0.8rem; }
             .flex-between > div { width: 100%; display: flex; justify-content: center; margin-top: 0.5rem;}
-             /* Ajustement spécifique pour l'en-tête de carte séance sur mobile */
-            .workout-header { flex-wrap: wrap; } /* Permet au badge de passer en dessous si manque de place */
-            .workout-header h3 { margin-bottom: 0.3rem; /* Ajoute un peu d'espace si ça passe en dessous */ }
-            .workout-header > .badge { margin-left: 0; /* Pas besoin de le pousser à droite si ça passe en dessous */ }
-
+            .workout-header { flex-wrap: wrap; }
+            .workout-header h3 { margin-bottom: 0.3rem; }
+            .workout-header > .badge { margin-left: 0; }
             .user-info { text-align: center; margin-bottom: 0.8rem;}
             .user-info button { display: block; margin: 0.5rem auto 0;}
             .exercise-navigation button { padding: 0.6rem; font-size: 0.9rem;}
@@ -426,9 +196,8 @@
 </head>
 <body>
     <div class="container">
-        <!-- Header modifié avec le logo -->
+        <!-- Header -->
         <header>
-            <!-- Assurez-vous que le fichier 'input_file_0.png' est bien à la racine -->
             <img src="input_file_0.png" alt="Cocktail Fitness Logo" id="app-logo">
             <p>Votre suivi de séances personnalisé</p>
         </header>
@@ -437,13 +206,22 @@
         <div id="login-page">
              <div class="card">
                  <h2 id="auth-title">Connexion</h2>
-                 <form id="login-form" novalidate> <!-- novalidate évite validation navigateur simple -->
+                 <form id="login-form" novalidate>
                      <div class="form-group"> <label for="auth-email">Email</label> <input type="email" id="auth-email" placeholder="[email protected]" required> </div>
                      <div class="form-group"> <label for="auth-password">Mot de passe</label> <input type="password" id="auth-password" placeholder="********" required> </div>
-                     <p id="login-error" style="display: none;"></p>
+                     <!-- Message pour erreurs OU succès (ex: email reset envoyé) -->
+                     <p id="login-message" style="display: none;"></p>
                      <button type="submit" id="auth-action-btn" class="btn" style="width: 100%;">Se Connecter</button>
                  </form>
-                 <div class="auth-switch"> <span id="auth-switch-text">Pas encore de compte ?</span> <a id="auth-switch-link">Inscrivez-vous ici</a> </div>
+                 <!-- Options supplémentaires sous le formulaire -->
+                 <div class="auth-options">
+                     <div class="auth-switch">
+                         <span id="auth-switch-text">Pas encore de compte ?</span>
+                         <a id="auth-switch-link">Inscrivez-vous ici</a>
+                     </div>
+                     <!-- Lien Mot de passe oublié -->
+                     <a href="#" id="forgot-password-link">Mot de passe oublié ?</a>
+                 </div>
              </div>
         </div>
 
@@ -455,6 +233,7 @@
             </div>
 
             <div id="app-container">
+                <!-- Contenu des différentes pages (Home, Manage Types, etc.) -->
                 <!-- Home Page -->
                 <div id="home-page">
                      <div class="flex-between">
@@ -601,7 +380,7 @@
     <!-- ================= JAVASCRIPT =================== -->
     <!-- ================================================== -->
     <script>
-        // Firebase Init - Remplacez avec votre propre config si différente
+        // Firebase Init
         const firebaseConfig = { apiKey: "AIzaSyAkWvrRyXgrC7zbTtoh_GppsHMrz2rF7WM", authDomain: "lifttrackapp.firebaseapp.com", projectId: "lifttrackapp", storageBucket: "lifttrackapp.appspot.com", messagingSenderId: "594426771796", appId: "1:594426771796:web:789bef037ca0016c54b0c1", measurementId: "G-MXLFK0H160" };
         let app, auth, db;
         try {
@@ -616,14 +395,7 @@
         }
 
         // --- Variables d'État ---
-        let workouts = [];
-        let currentWorkoutId = null;
-        let currentExerciseIndex = 0;
-        let workoutExercisesForm = [];
-        let currentFirebaseUser = null;
-        let userWorkoutTypes = [];
-        let selectedWorkoutTypeName = null;
-        let isLoginMode = true;
+        let workouts = []; let currentWorkoutId = null; let currentExerciseIndex = 0; let workoutExercisesForm = []; let currentFirebaseUser = null; let userWorkoutTypes = []; let selectedWorkoutTypeName = null; let isLoginMode = true;
 
         // --- Éléments DOM ---
         const loginPage = document.getElementById('login-page');
@@ -633,9 +405,10 @@
         const loginForm = document.getElementById('login-form');
         const authActionButton = document.getElementById('auth-action-btn');
         const authSwitchLink = document.getElementById('auth-switch-link');
+        const forgotPasswordLink = document.getElementById('forgot-password-link'); // **NOUVEAU**
         const authTitle = document.getElementById('auth-title');
         const authSwitchText = document.getElementById('auth-switch-text');
-        const loginError = document.getElementById('login-error');
+        const loginMessage = document.getElementById('login-message'); // **MODIFIÉ** (remplace loginError)
         const currentUserDisplay = document.getElementById('current-user-display');
         const logoutBtn = document.getElementById('logout-btn');
         const spinner = document.querySelector('#workouts-list .spinner');
@@ -681,18 +454,88 @@
         // --- DÉFINITION DES FONCTIONS ---
         // ===========================================
 
-        // (Les définitions des fonctions JavaScript sont ici - identiques à la version précédente)
-        // ... (initAuthListener, showLoginPage, showApp, handleAuthAction, etc...) ...
-        // ... (TOUTES les fonctions JS jusqu'à la fin de la section fonctions) ...
-
-        function initAuthListener() { if (!auth) { console.error("Auth object not ready in initAuthListener"); return; } auth.onAuthStateChanged(user => { console.log("Auth state changed:", user ? user.uid : 'null'); currentFirebaseUser = user; if (user) { showApp(); } else { workouts = []; userWorkoutTypes = []; showLoginPage(); } }); }
-        function showLoginPage() { if(loginPage) loginPage.style.display = 'block'; if(mainAppContent) mainAppContent.style.display = 'none'; isLoginMode = true; authSwitchMode(); }
-        function showApp() { if (!currentFirebaseUser || !mainAppContent) { console.error("Cannot show app: No user or main content missing."); showLoginPage(); return; } console.log("Affichage App for user:", currentFirebaseUser.email); if(loginPage) loginPage.style.display = 'none'; mainAppContent.style.display = 'block'; if(currentUserDisplay) currentUserDisplay.textContent = currentFirebaseUser.email; setTodayDate(); loadWorkouts(); loadWorkoutTypes(); showPage('home-page'); }
-        function handleAuthAction(event) { if (!auth || !authEmailInput || !authPasswordInput || !authActionButton) { console.error("Auth or input/button elements missing in handleAuthAction"); return; } event.preventDefault(); const email = authEmailInput.value; const password = authPasswordInput.value; if (loginError) { loginError.textContent = ''; loginError.style.display = 'none'; } if (!email || !password) { if (loginError) { loginError.textContent = 'Email et Mot de passe requis.'; loginError.style.display = 'block'; } return; } authActionButton.disabled = true; authActionButton.textContent = 'Chargement...'; if (isLoginMode) { console.log("Attempting sign in for:", email); auth.signInWithEmailAndPassword(email, password).then(userCredential => { console.log("Sign in successful:", userCredential.user.uid); }).catch(handleAuthError).finally(() => { authActionButton.disabled = false; authActionButton.textContent = 'Se Connecter'; }); } else { console.log("Attempting create user for:", email); auth.createUserWithEmailAndPassword(email, password).then(userCredential => { console.log("Create user successful:", userCredential.user.uid); }).catch(handleAuthError).finally(() => { authActionButton.disabled = false; authActionButton.textContent = 'S\'inscrire'; authSwitchMode(); }); } }
-        function handleLogout() { if (!auth) { console.error("Auth missing for logout"); return; } console.log("Déconnexion..."); auth.signOut().catch(error => { console.error("Logout Error:", error); alert("Erreur lors de la déconnexion."); }); }
-        function authSwitchMode() { isLoginMode = !isLoginMode; if (loginError) { loginError.textContent = ''; loginError.style.display = 'none'; } if (authEmailInput) authEmailInput.value = ''; if (authPasswordInput) authPasswordInput.value = ''; if (authTitle) authTitle.textContent = isLoginMode ? 'Connexion' : 'Inscription'; if (authActionButton) authActionButton.textContent = isLoginMode ? 'Se Connecter' : 'S\'inscrire'; if (authSwitchText) authSwitchText.textContent = isLoginMode ? 'Pas encore de compte ?' : 'Déjà un compte ?'; if (authSwitchLink) authSwitchLink.textContent = isLoginMode ? 'Inscrivez-vous ici' : 'Connectez-vous ici'; if (authEmailInput) authEmailInput.focus(); }
-        function handleAuthError(error) { console.error("Erreur Auth Firebase:", error.code, error.message); if (loginError) { loginError.textContent = getAuthErrorMessage(error); loginError.style.display = 'block'; } }
-        function getAuthErrorMessage(error) { switch (error.code) { case 'auth/invalid-email': return 'Format d\'email invalide.'; case 'auth/user-disabled': return 'Ce compte utilisateur a été désactivé.'; case 'auth/user-not-found': return 'Aucun utilisateur trouvé avec cet email.'; case 'auth/wrong-password': return 'Mot de passe incorrect.'; case 'auth/email-already-in-use': return 'Cet email est déjà utilisé par un autre compte.'; case 'auth/weak-password': return 'Le mot de passe doit contenir au moins 6 caractères.'; case 'auth/operation-not-allowed': return 'Méthode de connexion non activée (vérifiez Console Firebase).'; case 'auth/missing-password': return 'Mot de passe manquant.'; default: console.error("Unhandled Auth Error Code:", error.code); return `Erreur (${error.code}). Veuillez réessayer.`; } }
+        function showMessage(message, isError = true) {
+            if (loginMessage) {
+                loginMessage.textContent = message;
+                loginMessage.className = isError ? 'error' : 'success'; // Applique la classe CSS
+                loginMessage.style.display = 'block';
+            }
+        }
+
+        function clearMessage() {
+             if (loginMessage) {
+                 loginMessage.textContent = '';
+                 loginMessage.style.display = 'none';
+            }
+        }
+
+
+        function initAuthListener() { /* ... identique ... */ if (!auth) { console.error("Auth object not ready in initAuthListener"); return; } auth.onAuthStateChanged(user => { console.log("Auth state changed:", user ? user.uid : 'null'); currentFirebaseUser = user; if (user) { showApp(); } else { workouts = []; userWorkoutTypes = []; showLoginPage(); } }); }
+        function showLoginPage() { /* ... identique ... */ if(loginPage) loginPage.style.display = 'block'; if(mainAppContent) mainAppContent.style.display = 'none'; isLoginMode = true; authSwitchMode(); }
+        function showApp() { /* ... identique ... */ if (!currentFirebaseUser || !mainAppContent) { console.error("Cannot show app: No user or main content missing."); showLoginPage(); return; } console.log("Affichage App for user:", currentFirebaseUser.email); if(loginPage) loginPage.style.display = 'none'; mainAppContent.style.display = 'block'; if(currentUserDisplay) currentUserDisplay.textContent = currentFirebaseUser.email; setTodayDate(); loadWorkouts(); loadWorkoutTypes(); showPage('home-page'); }
+
+        function handleAuthAction(event) {
+            if (!auth || !authEmailInput || !authPasswordInput || !authActionButton) return;
+            event.preventDefault();
+            const email = authEmailInput.value;
+            const password = authPasswordInput.value;
+            clearMessage(); // **MODIFIÉ**
+            if (!email || !password) { showMessage('Email et Mot de passe requis.'); return; } // **MODIFIÉ**
+            authActionButton.disabled = true; authActionButton.textContent = 'Chargement...';
+            if (isLoginMode) { auth.signInWithEmailAndPassword(email, password).catch(handleAuthError).finally(() => { authActionButton.disabled = false; authActionButton.textContent = 'Se Connecter'; }); }
+            else { auth.createUserWithEmailAndPassword(email, password).catch(handleAuthError).finally(() => { authActionButton.disabled = false; authActionButton.textContent = 'S\'inscrire'; }); }
+        }
+
+        // **NOUVELLE FONCTION** pour la réinitialisation du mot de passe
+        function handlePasswordReset(event) {
+            event.preventDefault(); // Empêche le lien de naviguer
+            if (!auth) { alert("Service d'authentification non disponible."); return; }
+            clearMessage(); // Efface les messages précédents
+
+            const email = prompt("Veuillez entrer votre adresse email pour recevoir le lien de réinitialisation :");
+
+            if (!email) { // Si l'utilisateur annule ou ne saisit rien
+                showMessage("Saisie de l'email annulée.", true);
+                return;
+            }
+
+            console.log("Tentative d'envoi de l'email de réinitialisation à :", email);
+            auth.sendPasswordResetEmail(email)
+                .then(() => {
+                    console.log("Email de réinitialisation envoyé.");
+                    showMessage("Si un compte existe pour " + email + ", un email de réinitialisation a été envoyé.", false); // Message succès (vert)
+                })
+                .catch((error) => {
+                    console.error("Erreur sendPasswordResetEmail:", error);
+                    // Utilise handleAuthError pour afficher un message standardisé si possible
+                    handleAuthError(error); // Affiche l'erreur dans la zone de message
+                });
+        }
+
+
+        function handleLogout() { /* ... identique ... */ if (!auth) { console.error("Auth missing for logout"); return; } console.log("Déconnexion..."); auth.signOut().catch(error => { console.error("Logout Error:", error); alert("Erreur lors de la déconnexion."); }); }
+
+        function authSwitchMode() {
+             isLoginMode = !isLoginMode;
+             clearMessage(); // **MODIFIÉ**
+             if (authEmailInput) authEmailInput.value = '';
+             if (authPasswordInput) authPasswordInput.value = '';
+             if (authTitle) authTitle.textContent = isLoginMode ? 'Connexion' : 'Inscription';
+             if (authActionButton) authActionButton.textContent = isLoginMode ? 'Se Connecter' : 'S\'inscrire';
+             if (authSwitchText) authSwitchText.textContent = isLoginMode ? 'Pas encore de compte ?' : 'Déjà un compte ?';
+             if (authSwitchLink) authSwitchLink.textContent = isLoginMode ? 'Inscrivez-vous ici' : 'Connectez-vous ici';
+             if (authEmailInput) authEmailInput.focus();
+        }
+
+        function handleAuthError(error) {
+             console.error("Erreur Auth Firebase:", error.code, error.message);
+             // Utilise la fonction showMessage pour afficher l'erreur
+             showMessage(getAuthErrorMessage(error), true); // true indique que c'est une erreur (rouge)
+        }
+
+        function getAuthErrorMessage(error) { /* ... identique ... */ switch (error.code) { case 'auth/invalid-email': return 'Format d\'email invalide.'; case 'auth/user-disabled': return 'Ce compte utilisateur a été désactivé.'; case 'auth/user-not-found': return 'Aucun utilisateur trouvé avec cet email.'; case 'auth/wrong-password': return 'Mot de passe incorrect.'; case 'auth/email-already-in-use': return 'Cet email est déjà utilisé par un autre compte.'; case 'auth/weak-password': return 'Le mot de passe doit contenir au moins 6 caractères.'; case 'auth/operation-not-allowed': return 'Méthode de connexion non activée (vérifiez Console Firebase).'; case 'auth/missing-password': return 'Mot de passe manquant.'; case 'auth/missing-email': return 'Adresse email manquante.'; default: console.error("Unhandled Auth Error Code:", error.code); return `Erreur (${error.code}). Veuillez réessayer.`; } } // Ajout case 'auth/missing-email'
+
+        // ... (Le reste des fonctions JS : loadWorkoutTypes, renderWorkoutTypesList, handleAddWorkoutType, ..., handleFirestoreError reste identique) ...
         function loadWorkoutTypes() { if (!currentFirebaseUser || !db || !typesSpinner) return; const userId = currentFirebaseUser.uid; console.log("Chargement types pour", userId); userWorkoutTypes = []; typesSpinner.classList.remove('hidden'); db.collection('workoutTypes').where('userId', '==', userId).orderBy('name').get().then(snapshot => { userWorkoutTypes = []; snapshot.forEach(doc => { userWorkoutTypes.push({ id: doc.id, ...doc.data() }); }); console.log("Types chargés:", userWorkoutTypes); renderWorkoutTypesList(); populateWorkoutTypeSelector(); }).catch(handleFirestoreError).finally(() => { typesSpinner.classList.add('hidden'); }); }
         function renderWorkoutTypesList() { if (!workoutTypesList || !emptyTypesMessage) { console.error("DOM elements for types list missing"); return; } workoutTypesList.innerHTML = ''; if (userWorkoutTypes.length === 0) { emptyTypesMessage.classList.remove('hidden'); } else { emptyTypesMessage.classList.add('hidden'); userWorkoutTypes.forEach(type => { const li = document.createElement('li'); li.textContent = type.name; workoutTypesList.appendChild(li); }); } }
         function handleAddWorkoutType(event) { event.preventDefault(); if (!currentFirebaseUser || !newTypeNameInput || !db || !addTypeError || !addTypeForm) { console.error("Missing elements for adding workout type"); return; } const typeName = newTypeNameInput.value.trim(); addTypeError.textContent = ''; addTypeError.style.display = 'none'; if (!typeName) { addTypeError.textContent = "Le nom du type ne peut pas être vide."; addTypeError.style.display = 'block'; return; } if (userWorkoutTypes.some(t => t.name.toLowerCase() === typeName.toLowerCase())) { addTypeError.textContent = "Ce type de séance existe déjà."; addTypeError.style.display = 'block'; return; } console.log("Ajout type:", typeName); const typeData = { userId: currentFirebaseUser.uid, name: typeName, createdAt: firebase.firestore.FieldValue.serverTimestamp() }; const addBtn = addTypeForm.querySelector('button'); if (addBtn) { addBtn.disabled = true; addBtn.textContent = '...'; } db.collection('workoutTypes').add(typeData).then(() => { console.log("Type ajouté avec succès"); newTypeNameInput.value = ''; loadWorkoutTypes(); }).catch(handleFirestoreError).finally(() => { if (addBtn) { addBtn.disabled = false; addBtn.textContent = 'Ajouter'; } }); }
@@ -717,26 +560,38 @@
         function renderTypeTrends(trends) { if (!typeTrendsContainer || !noTrendsMessage || !trendsSpinner) { console.error("Cannot render trends: Missing DOM elements."); return;} trendsSpinner.classList.add('hidden'); typeTrendsContainer.innerHTML = ''; const trendTypes = Object.keys(trends); if (trendTypes.length === 0) { noTrendsMessage.classList.remove('hidden'); } else { noTrendsMessage.classList.add('hidden'); trendTypes.sort().forEach(typeName => { const typeData = trends[typeName]; if (!typeData || typeData.length === 0) return; const card = document.createElement('div'); card.className = 'card type-trend-card'; let listItems = ''; typeData.forEach(session => { const formattedDate = session.date ? new Date(session.date).toLocaleDateString('fr-FR', { day: '2-digit', month: 'short' }) : '??'; const tonnageText = (session.tonnage !== undefined && session.tonnage !== null) ? `${session.tonnage.toFixed(1)} kg` : 'N/A'; listItems += `<li><span>${formattedDate}</span> <strong>${tonnageText}</strong></li>`; }); card.innerHTML = `<h4>${typeName} (3 Dernières)</h4><ul>${listItems}</ul>`; typeTrendsContainer.appendChild(card); }); } }
         function handleFirestoreError(error) { console.error("Erreur Firestore:", error.code, error.message); alert(`Erreur de base de données: ${error.message}`); }
 
+
         // --- ÉCOUTEURS D'ÉVÉNEMENTS ---
         function initEventListeners() {
             console.log("initEventListeners: Attachement...");
+            // Auth
             if (loginForm) loginForm.addEventListener('submit', handleAuthAction); else console.error("!loginForm");
             if (authSwitchLink) authSwitchLink.addEventListener('click', authSwitchMode); else console.error("!authSwitchLink");
+            if (forgotPasswordLink) forgotPasswordLink.addEventListener('click', handlePasswordReset); else console.error("!forgotPasswordLink"); // **NOUVEAU**
             if (logoutBtn) logoutBtn.addEventListener('click', handleLogout); else console.error("!logoutBtn");
+            // Nav
             navItems.forEach((item) => { if (item) item.addEventListener('click', (e) => { e.preventDefault(); const targetPageId = item.getAttribute('data-page'); if (!currentFirebaseUser && targetPageId !== 'login-page') { showLoginPage(); return; } if (targetPageId) showPage(targetPageId); }); else console.error(`!navItem`); });
+            // Workout List Actions
             if (newWorkoutBtn) newWorkoutBtn.addEventListener('click', () => { if (!currentFirebaseUser) return; showPage('select-workout-type-page'); }); else console.error("!newWorkoutBtn");
             if (manageTypesBtn) manageTypesBtn.addEventListener('click', () => { if (!currentFirebaseUser) return; showPage('manage-types-page'); }); else console.error("!manageTypesBtn");
+            // Type Management
             if (addTypeForm) addTypeForm.addEventListener('submit', handleAddWorkoutType); else console.error("!addTypeForm");
+            // Select Type Page
             if (selectWorkoutTypeDropdown) selectWorkoutTypeDropdown.addEventListener('change', updateStartStructuredBtnState); else console.error("!selectWorkoutTypeDropdown");
             if (startStructuredWorkoutBtn) startStructuredWorkoutBtn.addEventListener('click', () => { if (selectWorkoutTypeDropdown) { const type = selectWorkoutTypeDropdown.value; if (type) { clearNewWorkoutForm(type); showPage('new-workout-page'); } else { alert("Veuillez sélectionner un type de séance."); } } }); else console.error("!startStructuredWorkoutBtn");
             if (startFreeWorkoutBtn) startFreeWorkoutBtn.addEventListener('click', () => { clearNewWorkoutForm("Libre"); showPage('new-workout-page'); }); else console.error("!startFreeWorkoutBtn");
+            // General Nav
             backToHomeBtns.forEach(btn => { if (btn) btn.addEventListener('click', () => showPage('home-page')); else console.error("!backToHomeBtn"); });
+            // New Workout Actions
             if (cancelNewWorkoutBtn) cancelNewWorkoutBtn.addEventListener('click', () => { if (confirm("Annuler cette séance ? Les données non enregistrées seront perdues.")) showPage('home-page'); }); else console.error("!cancelNewWorkoutBtn");
             if (saveWorkoutBtn) saveWorkoutBtn.addEventListener('click', saveWorkout); else console.error("!saveWorkoutBtn");
             if (addExerciseBtn) addExerciseBtn.addEventListener('click', handleAddNewExercise); else console.error("!addExerciseBtn");
+            // Exercise Nav
             if (prevExerciseBtn) prevExerciseBtn.addEventListener('click', () => navigateExerciseForm(-1)); else console.error("!prevExerciseBtn");
             if (nextExerciseBtn) nextExerciseBtn.addEventListener('click', () => navigateExerciseForm(1)); else console.error("!nextExerciseBtn");
+            // Details Page
             if (deleteWorkoutBtn) deleteWorkoutBtn.addEventListener('click', deleteWorkout); else console.error("!deleteWorkoutBtn");
+            // Satisfaction
             if (satisfactionRange) satisfactionRange.addEventListener('input', () => { if (satisfactionValue) satisfactionValue.textContent = `${satisfactionRange.value}%`; }); else console.error("!satisfactionRange");
             console.log("initEventListeners: Fin attachement.");
         }
@@ -749,35 +604,33 @@
         document.addEventListener('DOMContentLoaded', () => {
             console.log("DOM chargé. Initialisation de l'application...");
             if (typeof firebase !== 'undefined' && typeof firebase.initializeApp === 'function' && typeof firebase.auth === 'function' && typeof firebase.firestore === 'function') {
-                if (!auth) auth = firebase.auth(); // Ensure auth is assigned
-                if (!db) db = firebase.firestore(); // Ensure db is assigned
-
+                if (!auth) auth = firebase.auth();
+                if (!db) db = firebase.firestore();
                 if (auth && db) {
                     console.log("Firebase prêt. Initialisation des listeners...");
                     initEventListeners(); // Initialize event listeners first
                     initAuthListener(); // Initialize auth listener to handle state changes and initial check
-                    // Initial check after listeners are set up
-                    const user = auth.currentUser;
+                    const user = auth.currentUser; // Check initial state synchronously IF possible
                     if (user) {
                         console.log("Utilisateur déjà connecté trouvé:", user.uid);
                         currentFirebaseUser = user;
-                        showApp(); // Show app directly
+                        showApp();
                     } else {
                         console.log("Utilisateur non connecté au chargement.");
-                        showLoginPage(); // Show login page
+                        showLoginPage();
                     }
                 } else {
-                    console.error("ERREUR CRITIQUE: Firebase Auth ou Firestore non initialisé correctement après tentative.");
+                    console.error("ERREUR CRITIQUE: Firebase Auth ou Firestore non initialisé.");
                     alert("Erreur critique : Services Firebase non disponibles.");
                 }
             } else {
                 console.error("ERREUR CRITIQUE: Firebase SDK non chargé ou incomplet !");
                 alert("Erreur critique : Impossible de charger les composants Firebase.");
-                document.body.innerHTML = '<div style="color: red; padding: 30px; text-align: center; font-family: sans-serif; background-color: #333;"><h1>Erreur Critique</h1><p>Impossible de charger les composants nécessaires. Vérifiez votre connexion et la console (F12) pour plus de détails.</p></div>';
+                document.body.innerHTML = '<div style="color: red; padding: 30px; text-align: center; font-family: sans-serif; background-color: #333;"><h1>Erreur Critique</h1><p>Impossible de charger les composants nécessaires. Vérifiez votre connexion et la console (F12).</p></div>';
             }
-        }); // FIN DU Listener DOMContentLoaded
+        }); // FIN DOMContentLoaded
 
-    </script> <!-- FIN de la balise SCRIPT -->
+    </script> <!-- FIN SCRIPT -->
 
-</body> <!-- FIN de la balise BODY -->
-</html> <!-- FIN de la balise HTML -->
+</body> <!-- FIN BODY -->
+</html> <!-- FIN HTML -->