diff --git a/view/unicaen-indicateur/indicateur/afficher.phtml b/view/unicaen-indicateur/indicateur/afficher.phtml
index b084b2c73ff6f0a9dd5ab65b126128fe7d5829cc..934484108005e3c21eff3305e73b923adfd53699 100644
--- a/view/unicaen-indicateur/indicateur/afficher.phtml
+++ b/view/unicaen-indicateur/indicateur/afficher.phtml
@@ -33,7 +33,6 @@ use UnicaenIndicateur\Entity\Db\Indicateur;
         </div>
     </div>
 <?php else : ?>
-    <div class="row">
         <?php /** @see IndicateurController::exportAction() */ ?>
         <a href="<?php echo $this->url('indicateur/exporter', ['indicateur' => $indicateur->getId()], [], true); ?>"
            class="btn btn-primary action"
@@ -46,26 +45,23 @@ use UnicaenIndicateur\Entity\Db\Indicateur;
         <a href="<?php echo $this->url('indicateur/rafraichir', ['indicateur' => $indicateur->getId()], [], true); ?>"
            class="btn btn-primary action"
         >
-            <span class="icon icon-synchoniser"></span>
+            <span class="icon icon-refresh"></span>
             Rafraichir l'indicateur
         </a>
 
         <small>dernier rafraichissement le <?php echo ($indicateur->getDernierRafraichissement()?$indicateur->getDernierRafraichissement()->format('d/m/Y à H:i:s'):"---"); ?></small>
-    </div>
 
-    <div role="tabpanel">
-        <ul class="nav nav-tabs" role="tablist">
-            <li>
-                <a href="#indicateur" aria-controls="indicateur" role="tab" data-toggle="tabz">
-                    Indicateur
-                </a>
-            </li>
-            <li class="pull-right">
-                <a href="#mail" aria-controls="mail" role="tab" data-toggle="tabz">
-                    Mail
-                </a>
-            </li>
-        </ul>
+    <div class="nav nav-tabs" id="nav-tab" role="tablist">
+        <button class="nav-link active" id="indicateur-tab"
+                data-bs-toggle="tab" data-bs-target="#indicateur"
+                type="button" role="tab" aria-controls="indicateur" aria-selected="true">
+            Indicateur
+        </button>
+        <button class="nav-link active" id="mail-tab"
+                data-bs-toggle="tab" data-bs-target="#mail"
+                type="button" role="tab" aria-controls="mail" aria-selected="true">
+            Courrier électronique
+        </button>
     </div>
 
     <div class="tab-content">
@@ -106,21 +102,26 @@ use UnicaenIndicateur\Entity\Db\Indicateur;
         });
     } );
 
-    $(function() {
+    $(function () {
         let hash = $(location).attr('hash');
         let name = hash.substr(1);
         if (name === undefined || name === "") name = "indicateur";
 
-        $('a[aria-controls=' + name + ']').tab('show');
-
-        $('.nav-tabs a').click(function (e) {
-            // No e.preventDefault() here
-            $(this).tab('show');
-        });
-
-        $("body").on("modification", function (event) {
-            event.div.modal('hide');
-            window.location.reload();
+        $('button').removeClass('active');
+        $('button#' + name + '-tab').addClass('active');
+        $('div.tab-pane').hide().removeClass('active');
+        $('div#' + name).show().addClass('active');
+
+        //$('#' + name + '-tab').tab("show");
+        $('button.nav-link').click(function (e) {
+            let anchor = $(this).attr('aria-controls');
+            $('div.tab-pane').hide().removeClass('active');
+            $('div#' + anchor).show().addClass('active');
+            $('button').removeClass('active');
+            $('button#' + anchor + '-tab').addClass('active');
+            // console.log(anchor);
+            e.preventDefault(); // >> bloque le scrolling, mais aussi la ré-écriture de l'url "#info" ...
+            history.replaceState(null, null, "#" + anchor);
         });
     });
 </script>
\ No newline at end of file