info-hug: publie la doc pour le bookmarklet

- Publie la procédure au format PDF pour installer et utiliser le
  bookmarklet pour OpenAthens.
- Commente la partie sur la formation qui n'est pas pertinente pour le
  semestre d'automne 2025-2026.
- Met en évidence les points principaux au sommet de la page.
- Renomme le dossier infos-hug en info-hug.

Co-Authored-by: iGor milhit <igor@milhit.ch>

info-hug/acces-distance.html

@@ -1,6 +1,6 @@
 <!-- HUG, OpenAthens -->
 <article class="cmu-hug-infos">
-  <article class="cmu-hug-infos-item formation">
+  <!-- <article class="cmu-hug-infos-item formation">
     <header>
       <h2 class="o-title--h2">
         <a name="formation"></a>
@@ -33,25 +33,47 @@
           de présentation</a>
       </p>
     </article>
-  </article>
+  </article> -->
   <article class="cmu-hug-infos-item">
     <header>
-      <h2 class="o-title--h2">
-        <a name="openathens"></a>
+      <h2 class="o-title--h2" id="openathens">
         Accès à distance aux ressources de la bibliothèque
         (articles scientifiques)
       </h2>
     </header>
+    <article class="cmu-hug-infos-item quicklist">
+      <ul>
+        <li>
+          OpenAthens est <strong>nécessaire</strong> depuis le réseau des HUG
+          (sauf exceptions).
+        </li>
+        <li>
+          Ce protocole est <strong>utile</strong> depuis chez vous ou en
+          déplacement.
+        </li>
+        <li>
+          ⚠️ <mark><strong>
+            Un <em>bookmarklet</em> facilite l'usage d'OpenAthens.
+          </strong></mark>
+          Ce PDF explique comment faire&nbsp;: 
+          <a href="https://www.unige.ch/biblio/files/6117/5818/0387/bookmarklet.pdf">
+            procédure pour ajouter et utiliser le <em>bookmarklet</em> pour
+            OpenAthens
+          </a>.
+        </li>
+      </ul> 
+    </article>
     <article class="cmu-hug-infos-item">
       <p>
-        L'accès aux ressources électroniques de la bibliothèque se fait au moyen
+        Depuis le réseau des HUG, l'accès aux ressources documentaires sous
+        licence de la Bibliothèque de l'UNIGE se fait au moyen 
         d'<em>OpenAthens</em>. Ce système vous permet de vous connecter avec 
-        votre identifiant institutionnel (SESAME). Vous pouvez le faire selon 3
-        méthodes&nbsp;:
+        votre identifiant institutionnel (SESAME). Vous pouvez le faire selon
+        3 méthodes&nbsp;:
       </p>
       <ol>
         <li>
-          Depuis le site de l'éditeur. Cherchez à vous identifier avec votre
+          Depuis le site de l'éditeur. Cherchez à vous authentifier avec votre
           institution, ou par <em>OpenAthens</em> (<em>log in</em>, <em>sign
             in</em>, etc.). Cherchez votre institution avec
           &laquo;&nbsp;unige&nbsp;&raquo; ou
@@ -72,41 +94,42 @@
         </li>
         <li>
           Au moyen des liens proposés par
-          <a href="https://unige.swisscovery.slsp.ch/discovery/search?vid=41SLSP_UGE:VU1"
-            target="_blank"
+          <a href="https://unige.swisscovery.slsp.ch/discovery/search?vid=41SLSP_UGE:VU1" target="_blank"
             class="cmu-external-link">
             Swisscovery UNIGE
           </a> à la suite d'une recherche.
         </li>
+        <li>
+          Un <em>bookmarklet</em> facillite l'usage d'OpenAthens. Il s'agit d'un
+          signet (ou marque-page, ou encore favori) à ajouter à votre
+          navigateur. Ce PDF explique comment faire&nbsp;:<br>
+          <a href="https://www.unige.ch/biblio/files/6117/5818/0387/bookmarklet.pdf">
+            procédure pour ajouter et utiliser le <em>bookmarklet</em> pour
+            OpenAthens
+          </a>.
+        </li>
       </ol>
     </article>
   </article>
   <article class="cmu-hug-infos-item">
     <header>
-      <h2 class="o-title--h2">
-        <a name="problemes"></a>
+      <h2 class="o-title--h2" id="problemes">
         Vous rencontrez des problèmes&nbsp;?
       </h2>
     </header>
     <article>
-      <ol>
-        <li>
-          Certains éditeurs n'ont pas adaptés leur site à <em>OpenAthens</em>.
-          Lorsqu'ils sont identifiés, la DSI des HUG met en place un
-          contournement pour pouvoir y accéder. N'hésitez pas à nous signaler
-          les sites où vous ne trouvez pas <em>OpenAthens</em>&nbsp;!
-        </li>
-        <li>
-          <a href="https://dynamed.com">Dynamed</a> et <a
-            href="https://uptodate.com">UpToDate</a> doivent pouvoir être
-          consultés rapidement, aussi des contournemets ont été mis en place.
-        </li>
-      </ol>
+      <p>
+        Certains éditeurs n'ont pas adaptés leur site à <em>OpenAthens</em>.
+        Lorsqu'ils sont identifiés, la DSI des HUG met en place un
+        contournement pour pouvoir y accéder. N'hésitez pas à nous signaler
+        les sites où vous ne trouvez pas <em>OpenAthens</em>&nbsp;!
+      </p>
       <p>
         Si vous ne pouvez pas accéder à un article&nbsp;:
       </p>
       <ul>
-        <li>Pensez à la commande d'article (<a href="/biblio/fr/infos/sites/cmu/information-membres-hug/commande-article">procédure</a>).</li>
+        <li>Pensez à la commande d'article (<a
+            href="/biblio/fr/infos/sites/cmu/information-membres-hug/commande-article">procédure</a>).</li>
         <li>
           Ou écrivez à
           <a href="mailto:biblio-cmu@unige.ch">biblio-cmu@unige.ch</a>.
@@ -116,28 +139,39 @@
   </article>
 </article>
 <style>
-.cmu-hug-infos-list {
-  display: flex;
-  flex-direction: row;
-  row-gap: 5px;
-  flex-wrap: wrap;
-  width: 100%;
-  margin-top: 22px;
-}
-.cmu-hug-infos-list dt {
-  flex: 0 0 15%;
-}
-.cmu-hug-infos-list dd {
-  flex: 0 0 85%;
-}
-.formation {
-  font-size: 110%;
-  border: 3px solid #D80669;
-  border-radius: 5px;
-  padding: 0 22px 22px 22px;
-}
-.inscription {
-  text-align: center;
-  font-weight: 900;
-}
+  .cmu-hug-infos-list {
+    display: flex;
+    flex-direction: row;
+    row-gap: 5px;
+    flex-wrap: wrap;
+    width: 100%;
+    margin-top: 22px;
+  }
+
+  .cmu-hug-infos-list dt {
+    flex: 0 0 15%;
+  }
+
+  .cmu-hug-infos-list dd {
+    flex: 0 0 85%;
+  }
+
+  .formation,
+  .quicklist {
+    font-size: 110%;
+    border: 3px solid #D80669;
+    border-radius: 5px;
+    padding: 0 22px;
+    margin: 1em .5em;
+  }
+
+  .inscription {
+    text-align: center;
+    font-weight: 900;
+  }
+
+  mark {
+    background-color: #d80669;
+    color: #fff;
+  }
 </style>