diff --git a/templates/index.tpl b/templates/index.tpl
index 5abb9f4..40c2c90 100644
--- a/templates/index.tpl
+++ b/templates/index.tpl
@@ -1,183 +1,128 @@
 {include file="admin/_head.tpl" title="%s"|args:$plugin.nom current="plugin_%s"|args:$plugin.id}
 
-{* barre de navigation *}
+{* barre de navigation
 <nav class="tabs noprint">
-  <ul>
-    <li><a>Page 1</a></li>
-    <li><a>Page 2</a></li>
-    <li><a>Page 3</a></li>
-  </ul>
+    <ul>
+        <li><a>Page 1</a></li>
+        <li><a>Page 2</a></li>
+        <li><a>Page 3</a></li>
+    </ul>
 </nav>
-
+*}
 {* TODO : Temporaire - à supprimer (?) *}
 <h2>Liste des activités, cotisations et comptes associés</h2>
 <table class="list">
-  <thead>
-    <tr>
-      <th>Nom</th>
-      <th>Description</th>
-      <th>Tarif</th>
-      <th>Description</th>
-      <th>N° Compte</th>
-      <th>Nom Compte</th>
-    </tr>
-  </thead>
-  <tbody>
-    {foreach from=$activitesTarifsComptes item="activite"}
-      <tr>
-        <td>{$activite.label}</td>
-        <td>{$activite.descService}</td>
-        <td>{$activite.Tarif}</td>
-        <td>{$activite.descTarif}</td>
-        <td>{$activite.numero_cpt}</td>
-        <td>{$activite.nom_cpt}</td>
-      </tr>
-    {/foreach}
-  </tbody>
+    <thead>
+        <tr>
+            <th>Nom</th>
+            <th>Description</th>
+            <th>Tarif</th>
+            <th>Description</th>
+            <th>N° Compte</th>
+            <th>Nom Compte</th>
+        </tr>
+    </thead>
+    <tbody>
+        {foreach from=$activitesTarifsComptes item="activite"}
+            <tr>
+                <td>{$activite.label}</td>
+                <td>{$activite.descService}</td>
+                <td>{$activite.Tarif}</td>
+                <td>{$activite.descTarif}</td>
+                <td>{$activite.numero_cpt}</td>
+                <td>{$activite.nom_cpt}</td>
+            </tr>
+        {/foreach}
+    </tbody>
 </table>
 
 <h2>Liste des versements par activité et tarif</h2>
 
 {* TODO : vérifier le détail de ce div *}
 <div class="year-header noprint">
-  <button type="button" data-icon="↓" class="icn-btn" id="open_details">Déplier toutes les activités</button>
-  <button type="button" data-icon="↑" class="icn-btn" id="close_details">Replier toutes les activités</button>
+    <button type="button" data-icon="↓" class="icn-btn" id="open_details">Déplier toutes les activités</button>
+    <button type="button" data-icon="↑" class="icn-btn" id="close_details">Replier toutes les activités</button>
 </div>
 
 <form method="post" action="action.php" class="memberList">
 
-{* Itération sur les activités *}
-{foreach from=$listeParActiviteEtTarif item="activite"}
+    {* Itération sur les activités *}
+    {foreach from=$listeParActiviteEtTarif item="activite"}
 
-  {* Itération sur les tarifs de l'activité *}
-  {foreach from=$activite->tarifs item="tarif"}
+        {* Itération sur les tarifs de l'activité *}
+        {foreach from=$activite->tarifs item="tarif"}
 
-    {* TODO : s'inspirer du fonctionnement de <details pour (dé)sélectionner les lignes d'une table *}
-    <details open="open">
-      <summary>
-        <h3>Activité « {$activite->label} »</h3>
-        {if !empty($activite->description)}
-          <h4>{$activite->description}</h4>
-        {/if}
-        <h4>tarif « {$tarif->titreTarif} », montant : {if $tarif->montantTarif > 0}{$tarif->montantTarif}
-          €{else}libre
-          {/if}
-        </h4>
-      </summary>
+            <details open="open">
+                <summary>
+                    <h3>Activité « {$activite->label} »</h3>
+                    {if !empty($activite->description)}
+                        <h4>{$activite->description}</h4>
+                    {/if}
+                    <h4>tarif « {$tarif->titreTarif} », montant : {if $tarif->montantTarif > 0}{$tarif->montantTarif}
+                        €{else}libre
+                        {/if}
+                    </h4>
+                </summary>
 
-    {*
-      Itération sur les versements d'un tarif d'une activité
-      présentation : une table pour les versements d'une personne
-TODO : régler la fermeture de table lors du changement de personne
-    *}
-    <?php $currentUser = -1; $firstLine = true; ?>
-    {foreach from=$lesVersements key="rang" item="versement"}
-      {if $versement.idActivite == $activite->id &&
-          $versement.idTarif == $tarif->idTarif}
-        {if $versement.idUser != $currentUser}
-          {* changement de personne *}
-          {if $firstLine}
-            <?php $firstLine = false; ?>
-          {else}
-            {* fermer le tableau précédent *}
-            </tbody>
-            </table>
-            <?php $firstLine = true; ?>
-          {/if}
-          <h3>Versements de {$versement.Nom}</h3>
-          <table class="myList" id="versements_{$versement->idUser}">
-            {* on ne met pas thead pour éviter l'écouteur prédéfini ... *}
-            {* mais du coup, il faut mettre le mien ... *}
-            {* <thead> *}
-            <tbody>
-              <tr style="background: rgba(var(--gSecondColor), 0.5);">
-                {* TODO : voir common/dynamic_list_head.tpl *}
-                <?php $tableau = "check_" . $versement->idUser; ?>
-                <th class="check"><input class="{$tableau}" type="checkbox" title="Tout cocher / décocher" id="f_all" /><label
-                    for="f_all"></label>
-                </th>
-                <th>Versement</th>
-                <th>Date</th>
-              </tr>
-              {* </thead> *}
-              {* <tbody> *}
-          <?php $currentUser = $versement->idUser; ?>
-        {/if}
-              <tr>
-                {* TODO : voir admin/membres/index.tpl *}
-                <td class="check">{input class=$tableau type="checkbox" name="selected[]" value=$rang}</td>
-                <td>{$versement.Versement}</td>
-                <td>{$versement.Date|date_format:"%d/%m/%Y"}</td>
-              </tr>
-      {/if}
-    {/foreach} {* Itération sur les versements *}
-      </tbody>
-    </table>
-  </details>
-  {/foreach} {* Itération sur les tarifs de l'activité *}
-{/foreach} {* Itération sur les activités *}
+            {*
+                Itération sur les versements d'un tarif d'une activité
+                présentation : une table pour les versements d'une personne
+            *}
+            <?php $currentUser = -1; $firstUser = true; ?>
+            {foreach from=$lesVersements key="rang" item="versement"}
+                {if $versement.idActivite == $activite->id &&
+                    $versement.idTarif == $tarif->idTarif}
+                    {if $versement.idUser != $currentUser}
+                        {* changement de personne *}
+                        {if $firstUser}
+                            <?php $firstUser = false; ?>
+                        {else}
+                            {* fermer le tableau précédent *}
+                            </fieldset>
+                        {/if}
+                        {* Afficher les infos de la personne *}
+                        <?php $idVersements = $versement->idTarif."_".$versement->idUser; ?>
+                        <h3>Versements de {$versement.Nom} : <span id="total_{$idVersements}">0,00 €</span></h3>
+                        <fieldset class="versements" id="versements_{$idVersements}">
+                            <input class="check_{$idVersements}" type="checkbox" id="check_{$idVersements}" onclick="cocherDecocherPersonne(check_{$idVersements}, total_{$idVersements})" />
+                            <label for="check_{$idVersements}" style="font-weight:bold;">Cliquer ici pour sélectionner toutes les lignes</label><br />
+                            <hr>
+                            <?php $currentUser = $versement->idUser; ?>
+                    {/if}
+                    {* afficher les infos du versement de la personne*}
+                    <input class="check_{$idVersements}" type="checkbox" name="selected[]" value={$rang}>
+                    <label for={$rang}></label>
+                    <span class="montant">{$versement.Versement}</span>
+                    <span>{$versement.Date|date_format:"%d/%m/%Y"}</span><br />
+                {/if}
+            {/foreach} {* Itération sur les versements *}
+            </fieldset>
+        </details>
+        {/foreach} {* Itération sur les tarifs de l'activité *}
+    {/foreach} {* Itération sur les activités *}
 </form>
 
+{* scripts pour cases à cocher *}
+<script src="script.js"></script>
+
 {literal}
 <script type="text/javascript">
-/**
- * Cocher/décocher toutes les cases d'un tableau
- * en fonction de l'état de la première (ligne d'entête)
- * @param evt : événement déclencheur
- */
-function cocherDecocher(evt) {
-  var input = evt.target;
-  console.log("Input = " + input.className);
-  // voir si la case tousCochés est cochée
-  var tousCoches = input.checked;
-  // chercher la table englobante
-  var laTable = input.closest("table");
-  console.log("Table trouvée = " + laTable.id);
-  // et la liste des lignes
-  var rows = laTable.getElementsByTagName("tr");
-  // et modifier les autres cases en fonction de celle-ci
-  for (let i = 1; i < rows.length; ++i) {
-    var input = rows[i].getElementsByTagName("input")[0];
-    input.checked = tousCoches;
-  }
-}
-
-// ouvrir/fermer les détails
-document.querySelector('#open_details').onclick = () => {
-  document.querySelectorAll('details').forEach((e) => {
-    e.setAttribute('open', 'open');
-  });
-};
-document.querySelector('#close_details').onclick = () => {
-  document.querySelectorAll('details').forEach((e) => {
-    e.removeAttribute('open');
-  });
-};
-
-/**
- * Associer un écouteur à la première case à cocher de chaque table
- */
-const lesTables = document.querySelectorAll("table.myList");
-console.log("Associer un écouteur à la première case à cocher de chaque table");
-for (let i = 0; i < lesTables.length; ++i) {
-  // vérifier si c'est l'une des tables qui nous intéresse
-  // l'id est du genre : versements_xx où xx est un entier
-  const id = lesTables[i].id;
-  console.log("id de la table = " + id);
-  const re = /^versements_[0-9]+/;
-  if (re.test(id)) {
-    // chercher le premier élément input
-    const premierInput = lesTables[i].querySelector("input");
-    console.log("input trouvé = " + premierInput.className);
-    // supprimer l'écouteur précédent
-    //premierInput.removeAttribute('onchange'); // marche pas
-    // associer un écouteur à la première case à cocher
-    premierInput.addEventListener('change', cocherDecocher); // ok
-  }
-}
+    // activer l'écouteur sur la première case de chaque table
+//    window.addEventListener("load", activerListener);
 
+    // ouvrir/fermer les détails
+    document.querySelector('#open_details').onclick = () => {
+        document.querySelectorAll('details').forEach((e) => {
+            e.setAttribute('open', 'open');
+        });
+    };
+    document.querySelector('#close_details').onclick = () => {
+        document.querySelectorAll('details').forEach((e) => {
+            e.removeAttribute('open');
+        });
+    };
 </script>
 {/literal}
 
 <!-- footer -->
-{include file="admin/_foot.tpl"}
+{include file="admin/_foot.tpl"}
\ No newline at end of file
diff --git a/www/admin/script.js b/www/admin/script.js
new file mode 100644
index 0000000..f0e9d4a
--- /dev/null
+++ b/www/admin/script.js
@@ -0,0 +1,90 @@
+/**
+ * Fonction appelée quand on (dé)coche la case d'une personne
+ * - (dé)sélectionner toutes les cases à cocher
+ * - faire le total des cases cochées
+ * 
+ * @param id de la case qui a été cochée
+ * @param id de l'élément où afficher le total
+ */
+function cocherDecocherPersonne(idCase, idTotal) {
+    // chercher le fieldset englobant
+    var fieldset = idCase.closest("fieldset");
+    var listeCheck = fieldset.getElementsByTagName("input");
+    var listeMontants = fieldset.querySelectorAll("span.montant");
+    var total = 0;
+    for (var i = 1; i < listeCheck.length; ++i)
+    {
+        listeCheck[i].checked = listeCheck[0].checked;
+        if (listeCheck[i].checked) {
+            total += Number(listeMontants[i-1].textContent);
+        }
+    }
+    // "afficher" le total
+    idTotal.innerHTML =
+        total.toLocaleString('fr-FR', {style: 'currency', currency: 'EUR',
+                                       minimumFractionDigits: 2});
+}
+
+/**
+ * Cocher/décocher toutes les cases d'un tableau
+ * en fonction de l'état de la première (ligne d'entête)
+ * @param evt : événement déclencheur
+* @remarks : est remplacé par la foncion cocherDecocher ci-dessus
+ */
+function cocherDecocher_old(evt) {
+    console.log("this = " + this.className);
+    console.log("currentTarget = " + evt.currentTarget.className);
+    console.log("evt.target = " + evt.target.className);
+    var composed = evt.composedPath();
+    console.log("composedPath = " + composed);
+
+    var firstInput = evt.target;
+    // voir si la case tousCochés est cochée
+    var tousCoches = firstInput.checked;
+    // chercher la table englobante
+    var laTable = firstInput.closest("table");
+    console.log("Table trouvée = " + laTable.id);
+    // et la liste des lignes
+    var rows = laTable.getElementsByTagName("tr");
+    // modifier les autres cases en fonction de celle-ci
+    for (let i = 1; i < rows.length; ++i) {
+        var input = rows[i].getElementsByTagName("input")[0];
+        input.checked = tousCoches;
+    }
+}
+
+/**
+ * Associer un écouteur à la première case à cocher de chaque table
+ * @remarks : n'est plus utile
+ */
+function activerListener() {
+    // parcourir les tables
+    const lesTables = document.querySelectorAll("table.list");
+    for (let i = 0; i < lesTables.length; ++i) {
+	// vérifier si c'est l'une des tables qui nous intéresse
+	// l'id est du genre : versements_xx où xx est un entier
+	const id = lesTables[i].id;
+	const re = /^versements_[0-9]+/;
+	console.log("id = " + id + " => " + re.test(id));
+	if (re.test(id)) {
+	    // chercher le premier élément input
+	    const premierInput = lesTables[i].querySelector("input");
+	    // associer un écouteur à la première case à cocher
+	    premierInput.addEventListener('change', cocherDecocher);
+	}
+    }
+}
+
+/*
+// ouvrir/fermer les détails
+document.querySelector('#open_details').onclick = () => {
+  document.querySelectorAll('details').forEach((e) => {
+    e.setAttribute('open', 'open');
+  });
+};
+document.querySelector('#close_details').onclick = () => {
+  document.querySelectorAll('details').forEach((e) => {
+    e.removeAttribute('open');
+  });
+};
+*/