diff --git a/hug-vpn.html b/hug-vpn.html
deleted file mode 100644
index 4038b6f..0000000
--- a/hug-vpn.html
+++ /dev/null
@@ -1,261 +0,0 @@
-<article class="cmu-hug-infos-main">
-  <header>
-    <h1 class="o-title--h1">
-      Informations pour les membres HUG
-    </h1>
-  </header>
-  <!-- HUG, accès à disance -->
-  <article class="cmu-hug-infos-item">
-    <header>
-      <h2 class="o-title--h2">
-        <a name="hug-vpn"></a>
-        Accès à distance (VPN)
-      </h2>
-    </header>
-    <article>
-      <p>
-        Vous êtes <strong>un collaborateur ou une collaboratrice HUG</strong>
-        (sans contrat de travail avec l’Université)&nbsp;:
-      </p>
-      <ul>
-        <li>
-          Pour obtenir un accès VPN, vous devez obtenir un compte informatique à
-          l'UNIGE au moyen du
-          <a href="https://formulaire.unige.ch//outils/limesurvey2/index.php/survey/index/sid/974816/lang/fr"
-             target="_blank"
-             class="cmu-external-link">
-            formulaire suivant
-          </a> (cochez l'option: "une adresse e-mail à l'université").
-        </li>
-        <li>
-          En cas de problème avec un compte informatique, vous pouvez contacter le
-          <a href="http://www.unige.ch/dinf/cad.html">
-            Centre d’accueil des demandes
-          </a> par
-          <a class="obfuscated_link" href="mailto:cad@unige.ch">e-mail</a> ou
-          par téléphone au 022 37<strong>9 70 00</strong>.
-        </li>
-        <li>
-          Si vous utilisez <strong>Windows</strong>, consultez la
-          <a title="Procédure d'installation du client VPN pour Windows"
-             lang="fr"
-             dir="ltr"
-             type="html/text"
-             href="https://plone.unige.ch/distic/pub/logiciels/forticlient/comment-installer-forticlient-windows"
-             hreflang="fr">
-            procédure pour installer le client VPN FortiClient
-          </a>.
-        </li>
-        <li>
-          Si vous utilisez <strong>Mac OS</strong>, consultez la
-          <a title="Procédure pour installer le client VPN sur Mac OS"
-             lang="fr"
-             dir="ltr"
-             type="html/text"
-             href="https://plone.unige.ch/distic/pub/logiciels/forticlient/comment-installer-forticlient-macos"
-             hreflang="fr">
-            procédure pour installer le client VPN FortiClient
-          </a>.
-        </li>
-      </ul>
-    </article>
-  </article>
-  <!-- Commande d'article -->
-  <article class="cmu-hug-infos-item">
-    <a name="commande-article"></a>
-    <header>
-      <h2 class="o-title--h2">
-        Formulaire de commande d'articles à la bibliothèque
-      </h2>
-    </header>
-    <p>
-      Depuis la page d'accueil de
-      <a title="Accès au catalogue Swisscovery"
-         href="https://unige.swisscovery.slsp.ch">
-        Swisscovery UNIGE
-      </a>
-      , le catalogue de la bibliothèque, un
-      <a title="Accès au formulaire de commande d'articles"
-         href="https://unige.swisscovery.slsp.ch/discovery/blankIll?vid=41SLSP_UGE%3AVU1">
-        formulaire de commande
-      </a>
-      permet d'effectuer des commandes d'articles scientifiques
-      <em>gratuitement</em> (voir la marche à suivre plus bas).
-    </p>
-    <p>
-      <strong>Pour bénéficier de la gratuité du service</strong>, il est
-      nécessaire d'être inscrit à la bibliotèque <em>en tant que
-        collaborateur ou collaboratrice HUG ou UNIGE</em>.
-    </p>
-    <article>
-      <h3>
-        Vérifier son appartenance à la communauté HUG ou UNIGE
-      </h3>
-      <p>
-        Pour vérifier son groupe d'appartenance, il faut&nbsp;:
-        <ol>
-          <li>
-            S'identifier sur
-            <a title="Accès au catalogue Swisscovery"
-               href="https://unige.swisscovery.slsp.ch">
-              Swisscovery UNIGE
-            </a>.
-          </li>
-          <li>
-            Accéder à son profil en cliquant sur son nom en haut à droite.
-          </li>
-          <li>
-            Vérifier son groupe d'appartenance (UNIGE-HUG) dans ses informations
-            personnelles (voir la capture d'écran ci-dessous).
-          </li>
-        </ol>
-        <figure class="cmu-hug-infos-figure">
-          <img src="https://www.unige.ch/biblio/files/6616/6987/9987/swisscovery-groupe-unige-hug.png"
-               alt="Capture d'écran des informations personnelles dans l'interface Swisscovery.">
-          <figcaption>
-            Pour afficher ses informations personnelles dans Swisscovery et
-            vérifier son groupe d'appartenance.
-          </figcaption>
-        </figure>
-      </p>
-      <p>
-        Si son groupe d'appartenance n'est pas UNIGE-HUG, il faut ajouter
-        une identité liée à son compte Switch edu-ID&nbsp;:
-        <ol>
-          <li>
-            Se rendre dans son compte Switch edu-ID
-            <a href="https://eduid.ch"
-               title="Page d'acceuil du compte Switch edu-ID"
-               target="_blank"
-               class="cmu-external-link">
-              https://eduid.ch
-            </a>.
-          </li>
-          <li>Accéder à la section &laquo;&nbsp;Identités liées&nbsp;&raquo;.</li>
-          <li>
-            Cliquer sur &laquo;&nbsp;Rajouter une identité
-            organisationnelle&nbsp;&raquo;
-          </li>
-        </ol>
-        <figure class="cmu-hug-infos-figure">
-          <img src="https://www.unige.ch/biblio/files/5516/6988/1893/eduid-identites.png"
-               alt="Capture d'écran de l'ajout d'indentités organisationnelles dans Switch edu-ID.">
-          <figcaption>
-            Pour ajouter une identité organisationnelle à son compte Switch
-            edu-ID.
-          </figcaption>
-        </figure>
-      </p>
-      <p>
-        Si vous n'êtes pas encore inscrit-e à la bibliothèque, veuillez
-        consulter la
-        <a title="Procédure d'inscription à la bibliothèque"
-           lang="fr"
-           dir="ltr"
-           type="html/text"
-           href="https://unige.ch/biblio/fr/services/inscription/"
-           hreflang="fr">
-          la procédure d'inscription
-        </a>.
-      </p>
-    </article>
-    <article>
-      <a name="guide-commande"></a>
-      <header>
-        <h3>
-          Marche à suivre pour la commande d'articles
-        </h3>
-      </header>
-      <article>
-        <p>
-          Le forumlaire est à l'adresse suivante&nbsp;:<br>
-          <a href="https://slsp-unige.primo.exlibrisgroup.com/discovery/blankIll?vid=41SLSP_UGE%3AVU1"
-             title="Lien direct vers le formulaire de commande dans Swisscovery
-             UNIGE">
-            https://slsp-unige.primo.exlibrisgroup.com/discovery/blankIll?vid=41SLSP_UGE%3AVU1
-          </a>.
-        </p>
-        <p>Il est accessible depuis la barre de menu supérieure de
-          Swisscovery UNIGE (entrée &laquo;&nbsp;Prêt / Numérisation entre
-          bibliothèques&nbsp;&raquo;).
-          <figure class="cmu-hug-infos-figure">
-            <img src="https://www.unige.ch/biblio/files/4216/6988/3425/swisscovery-menu-peb.png"
-                 alt="Capture d'écran du lien vers le formulaire de commande
-                 dans le menu supérieur de Swisscovery UNIGE.">
-            <figcaption>
-              Accès au formulaire depuis le menu supérieur de Swisscovery
-              UNIGE. 
-            </figcaption>
-          </figure>
-        </p>
-        <p>
-          Pour commander un article, il faut&nbsp;:
-          <ol>
-            <li>
-              Choisir le formulaire pour &laquo;&nbsp;Article /
-              Chapitre&nbsp;&raquo;.
-            </li>
-            <li>Coller le DOI ou le PMID dans le champ dédié.</li>
-            <li>
-              Cliquer sur &laquo;&nbsp;Remplissage automatique&nbsp;&raquo;.
-            </li>
-            <li>
-              Sélectionner Uni CMU dans le champ &laquo;&nbsp;Bibliothèque de
-              retrait&nbsp;&raquo;. L'article vous sera communiqué par e-mail.
-            </li>
-            <li>Cliquer sur &laquo;&nbsp;Envoyer la commande&nbsp;&raquo;.</li>
-          </ol>
-          <div class="cmu-hug-infos-block-figures">
-            <figure class="cmu-hug-infos-figure">
-              <img src="https://www.unige.ch/biblio/files/3016/6988/4215/formulaire-commande-article-1.png"
-                   alt="Capture d'écran de la partie supérieure du formulaire
-                   avec la sélection du formulaire et le remplissage
-                   automatique du formulaire.">
-              <figcaption>
-                Sélection du formulaire et remplissage automatique sur la base
-                de l'identifiant DOI ou PMID.
-              </figcaption>
-            </figure>
-            <figure class="cmu-hug-infos-figure">
-              <img src="https://www.unige.ch/biblio/files/4316/6988/4241/formulaire-commande-article-2.png"
-                   alt="Capture d'écran de la partie inférieure du formulaire,
-                   avec la sélection de la bibliothèque de retrait et l'envoi.">
-              <figcaption>
-                Sélection de la bibliothèque de retrait et envoi du formulaire.
-              </figcaption>
-            </figure>
-          </div>
-        </p>
-        <p>
-          Pour plus d'information sur les commandes de documents, veuillez
-          consulter la page suivante&nbsp;:
-          <a href="https://www.unige.ch/biblio/fr/services/peb/"
-             title="Page de la bibliothèque sur le demande de documents">
-            https://www.unige.ch/biblio/fr/services/peb/
-          </a>
-        </p>
-      </article>
-    </article>
-  </article>
-<style>
-.cmu-hug-infos-figure {
-  border: 1px solid #d80669;
-  border-radius: 5px;
-  max-width: 90%;
-  margin: 1em auto;
-}
-.cmu-hug-infos-figure img {
-  border-radius: 5px;
-}
-.cmu-hug-infos-figure figcaption {
-  text-align: center;
-  padding: .5em 0;
-}
-.cmu-hug-infos-item ul {
-  padding-left: 40px;
-}
-.cmu-hug-infos-main h1 {
-  margin-top: 0px;
-}
-</style>
-</article>
diff --git a/infos-hug/acces-distance-expanded.html b/infos-hug/acces-distance-expanded.html
new file mode 100644
index 0000000..c7a4a8a
--- /dev/null
+++ b/infos-hug/acces-distance-expanded.html
@@ -0,0 +1,76 @@
+<div id="blockStyle68919MainLayout1Cell11098" class=" ccm-block-styles">
+  <div class="unige-expand">
+    <div class="panel panel-default" style="margin: 0px;">
+      <div class="panel-heading">
+        <h2 class="panel-title o-title--h2 cmu-hug-infos-panel-title">
+          <a class="accordion-toggle collapsed"
+             data-toggle="collapse"
+             href="#panel-68919"
+             name="acces-distance"
+             aria-expanded="false">
+            Accès à distance
+          </a>
+        </h2>
+      </div>
+      <div id="panel-68919"
+           class="panel-collapse collapse"
+           aria-expanded="false"
+           style="height: 622px;">
+        <div class="panel-body">
+          <div class="col-md-12">
+            <article class="cmu-hug-infos-item">
+              <p>
+                L'accès aux ressources électroniques de la bibliothèque est grandement
+                facilité grâce à <em>OpenAthens</em>. Ce système vous permet de vous
+                connecter avec votre identifiant institutionnel (SESAME). Trois
+                méthodes vous permettent d'y accéder&nbsp;:
+              </p>
+              <ol>
+                <li>
+                  Directement par le site de l'éditeur. Selon les éditeurs, vous pouvez
+                  chercher l'institution pour vous identifier avec les termes
+                  &laquo;&nbsp;Université de Genève&nbsp;&raquo;,
+                  &laquo;&nbsp;UNIGE&nbsp;&raquo;, &laquo;&nbsp;Hôpitaux universitaires
+                  de Genève&nbsp;&raquo; ou &laquo;&nbsp;HUG&nbsp;&raquo;. Pour plus de
+                  détail, veuillez consulter la
+                  <a href="https://www.unige.ch/biblio/fr/infos/equipement/internet#openathens"
+                     title="Documentation OpenAthens de l'UNIGE">
+                    marche à suivre
+                  </a>.
+                </li>
+                <li>
+                  À partir du lien direct vers l'éditeur disponible sur la
+                  <a href="https://www.unige.ch/biblio/fr/infos/equipement/internet/openathens/"
+                     title="Page listant les éditeurs accessibles via OpenAthens">
+                    liste des éditeurs accessibles par OpenAthens
+                  </a>.
+                </li>
+                <li>
+                  Au moyen des liens proposés par
+                  <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>
+              </ol>
+            </article>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <style>
+.unige-expand .panel-heading .accordion-toggle.collapsed::after {
+  content: "\e080";
+}
+.unige-expand .panel-heading .accordion-toggle::after {
+  font-family: 'Glyphicons Halflings';
+  content: "\e114";
+  float: right;
+}
+.cmu-hug-infos-panel-title {
+  font-family: thesansosfextrabold;
+}
+  </style>
+</div>
diff --git a/infos-hug/acces-distance.html b/infos-hug/acces-distance.html
new file mode 100644
index 0000000..1add7d3
--- /dev/null
+++ b/infos-hug/acces-distance.html
@@ -0,0 +1,102 @@
+<!-- HUG, OpenAthens -->
+<article class="cmu-hug-infos-item">
+  <header>
+    <h2 class="o-title--h2">
+      <a name="openathens"></a>
+      Accès à distance aux ressources de la bibliothèque
+    </h2>
+  </header>
+  <article class="cmu-hug-infos-item">
+    <p>
+      L'accès aux ressources électroniques de la bibliothèque est grandement
+      facilité grâce à <em>OpenAthens</em>. Ce système vous permet de vous
+      connecter avec votre identifiant institutionnel (SESAME). Trois
+      méthodes vous permettent d'y accéder&nbsp;:
+    </p>
+    <ol>
+      <li>
+        Directement par le site de l'éditeur. Selon les éditeurs, vous pouvez
+        chercher l'institution pour vous identifier avec les termes
+        &laquo;&nbsp;Université de Genève&nbsp;&raquo;,
+        &laquo;&nbsp;UNIGE&nbsp;&raquo;, &laquo;&nbsp;Hôpitaux universitaires
+        de Genève&nbsp;&raquo; ou &laquo;&nbsp;HUG&nbsp;&raquo;. Pour plus de
+        détail, veuillez consulter la
+        <a href="https://www.unige.ch/biblio/fr/infos/equipement/internet#openathens"
+           title="Documentation OpenAthens de l'UNIGE">
+          marche à suivre
+        </a>.
+      </li>
+      <li>
+        À partir du lien direct vers l'éditeur disponible sur la
+        <a href="https://www.unige.ch/biblio/fr/infos/equipement/internet/openathens/"
+           title="Page listant les éditeurs accessibles via OpenAthens">
+          liste des éditeurs accessibles par OpenAthens
+        </a>.
+      </li>
+      <li>
+        Au moyen des liens proposés par
+        <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>
+    </ol>
+  </article>
+</article>
+  <!-- HUG, accès à disance -->
+<article class="cmu-hug-infos-item">
+    <header>
+      <h2 class="o-title--h2">
+        <a name="hug-vpn"></a>
+        Accès à distance (VPN)
+      </h2>
+    </header>
+    <article>
+      <p>
+        Vous êtes <strong>un collaborateur ou une collaboratrice HUG</strong>
+        (sans contrat de travail avec l’Université)&nbsp;:
+      </p>
+      <ul>
+        <li>
+          Pour obtenir un accès VPN, vous devez obtenir un compte informatique à
+          l'UNIGE au moyen du
+          <a href="https://formulaire.unige.ch//outils/limesurvey2/index.php/survey/index/sid/974816/lang/fr"
+             target="_blank"
+             class="cmu-external-link">
+            formulaire suivant
+          </a> (cochez l'option: "une adresse e-mail à l'université").
+        </li>
+        <li>
+          En cas de problème avec un compte informatique, vous pouvez contacter le
+          <a href="http://www.unige.ch/dinf/cad.html">
+            Centre d’accueil des demandes
+          </a> par
+          <a class="obfuscated_link" href="mailto:cad@unige.ch">e-mail</a> ou
+          par téléphone au 022 37<strong>9 70 00</strong>.
+        </li>
+        <li>
+          Si vous utilisez <strong>Windows</strong>, consultez la
+          <a title="Procédure d'installation du client VPN pour Windows"
+             lang="fr"
+             dir="ltr"
+             type="html/text"
+             href="https://plone.unige.ch/distic/pub/logiciels/forticlient/comment-installer-forticlient-windows"
+             hreflang="fr">
+            procédure pour installer le client VPN FortiClient
+          </a>.
+        </li>
+        <li>
+          Si vous utilisez <strong>Mac OS</strong>, consultez la
+          <a title="Procédure pour installer le client VPN sur Mac OS"
+             lang="fr"
+             dir="ltr"
+             type="html/text"
+             href="https://plone.unige.ch/distic/pub/logiciels/forticlient/comment-installer-forticlient-macos"
+             hreflang="fr">
+            procédure pour installer le client VPN FortiClient
+          </a>.
+        </li>
+      </ul>
+    </article>
+  </article>
diff --git a/infos-hug/appartenance.html b/infos-hug/appartenance.html
new file mode 100644
index 0000000..9b1bcab
--- /dev/null
+++ b/infos-hug/appartenance.html
@@ -0,0 +1,72 @@
+<article>
+      <h3>
+        Vérifier son appartenance à la communauté HUG ou UNIGE
+      </h3>
+      <p>
+        Pour vérifier son groupe d'appartenance, il faut&nbsp;:
+        <ol>
+          <li>
+            S'identifier sur
+            <a title="Accès au catalogue Swisscovery"
+               href="https://unige.swisscovery.slsp.ch">
+              Swisscovery UNIGE
+            </a>.
+          </li>
+          <li>
+            Accéder à son profil en cliquant sur son nom en haut à droite.
+          </li>
+          <li>
+            Vérifier son groupe d'appartenance (UNIGE-HUG) dans ses informations
+            personnelles (voir la capture d'écran ci-dessous).
+          </li>
+        </ol>
+        <figure class="cmu-hug-infos-figure">
+          <img src="https://www.unige.ch/biblio/files/6616/6987/9987/swisscovery-groupe-unige-hug.png"
+               alt="Capture d'écran des informations personnelles dans l'interface Swisscovery.">
+          <figcaption>
+            Pour afficher ses informations personnelles dans Swisscovery et
+            vérifier son groupe d'appartenance.
+          </figcaption>
+        </figure>
+      </p>
+      <p>
+        Si son groupe d'appartenance n'est pas UNIGE-HUG, il faut ajouter
+        une identité liée à son compte Switch edu-ID&nbsp;:
+        <ol>
+          <li>
+            Se rendre dans son compte Switch edu-ID
+            <a href="https://eduid.ch"
+               title="Page d'acceuil du compte Switch edu-ID"
+               target="_blank"
+               class="cmu-external-link">
+              https://eduid.ch
+            </a>.
+          </li>
+          <li>Accéder à la section &laquo;&nbsp;Identités liées&nbsp;&raquo;.</li>
+          <li>
+            Cliquer sur &laquo;&nbsp;Rajouter une identité
+            organisationnelle&nbsp;&raquo;
+          </li>
+        </ol>
+        <figure class="cmu-hug-infos-figure">
+          <img src="https://www.unige.ch/biblio/files/5516/6988/1893/eduid-identites.png"
+               alt="Capture d'écran de l'ajout d'indentités organisationnelles dans Switch edu-ID.">
+          <figcaption>
+            Pour ajouter une identité organisationnelle à son compte Switch
+            edu-ID.
+          </figcaption>
+        </figure>
+      </p>
+      <p>
+        Si vous n'êtes pas encore inscrit-e à la bibliothèque, veuillez
+        consulter la
+        <a title="Procédure d'inscription à la bibliothèque"
+           lang="fr"
+           dir="ltr"
+           type="html/text"
+           href="https://unige.ch/biblio/fr/services/inscription/"
+           hreflang="fr">
+          la procédure d'inscription
+        </a>.
+      </p>
+    </article>
diff --git a/infos-hug/commande-article.html b/infos-hug/commande-article.html
new file mode 100644
index 0000000..6e2b597
--- /dev/null
+++ b/infos-hug/commande-article.html
@@ -0,0 +1,130 @@
+<div id="blockStyle68919MainLayout1Cell11098" class=" ccm-block-styles">
+  <div class="unige-expand">
+    <div class="panel panel-default" style="margin: 0px;">
+      <div class="panel-heading">
+        <h2 class="panel-title o-title--h2 cmu-hug-infos-panel-title">
+          <a class="accordion-toggle collapsed"
+             data-toggle="collapse"
+             href="#commande-article"
+             name="commande-article"
+             aria-expanded="false">
+            Commande d'articles
+          </a>
+        </h2>
+      </div>
+      <div id="commande-article" class="panel-collapse collapse" aria-expanded="false" style="height: 622px;">
+        <div class="panel-body">
+          <div class="col-md-12">
+            <article class="cmu-hug-infos-item">
+              <p>
+                <strong>Pour bénéficier de la gratuité du service</strong>, il est
+                nécessaire d'être inscrit à la bibliothèque <em>en tant que
+                  collaborateur ou collaboratrice HUG ou UNIGE</em>. Si besoin, voir la
+                section
+                <a href="#appartenance">
+                  Vérifier son appartenance à la communauté HUG ou UNIGE
+                </a>.
+              </p>
+              <p>
+                Le forumlaire est à l'adresse suivante&nbsp;:<br>
+                <a href="https://slsp-unige.primo.exlibrisgroup.com/discovery/blankIll?vid=41SLSP_UGE%3AVU1"
+                   title="Lien direct vers le formulaire de commande dans Swisscovery
+                   UNIGE">
+                  https://slsp-unige.primo.exlibrisgroup.com/discovery/blankIll?vid=41SLSP_UGE%3AVU1
+                </a>.
+              </p>
+              <p>Il est accessible depuis la barre de menu supérieure de
+                Swisscovery UNIGE (entrée &laquo;&nbsp;Prêt / Numérisation entre
+                bibliothèques&nbsp;&raquo;).
+                <figure class="cmu-hug-infos-figure">
+                  <img src="https://www.unige.ch/biblio/files/4216/6988/3425/swisscovery-menu-peb.png"
+                       alt="Capture d'écran du lien vers le formulaire de commande
+                       dans le menu supérieur de Swisscovery UNIGE.">
+                  <figcaption>
+                    Accès au formulaire depuis le menu supérieur de Swisscovery
+                    UNIGE. 
+                  </figcaption>
+                </figure>
+              </p>
+              <p>
+                Pour commander un article, il faut&nbsp;:
+                <ol>
+                  <li>
+                    Choisir le formulaire pour &laquo;&nbsp;Article /
+                    Chapitre&nbsp;&raquo;.
+                  </li>
+                  <li>Coller le DOI ou le PMID dans le champ dédié.</li>
+                  <li>
+                    Cliquer sur &laquo;&nbsp;Remplissage automatique&nbsp;&raquo;.
+                  </li>
+                  <li>
+                    Sélectionner Uni CMU dans le champ &laquo;&nbsp;Bibliothèque de
+                    retrait&nbsp;&raquo;. L'article vous sera communiqué par e-mail.
+                  </li>
+                  <li>Cliquer sur &laquo;&nbsp;Envoyer la commande&nbsp;&raquo;.</li>
+                </ol>
+                <div class="cmu-hug-infos-block-figures">
+                  <figure class="cmu-hug-infos-figure">
+                    <img src="https://www.unige.ch/biblio/files/3016/6988/4215/formulaire-commande-article-1.png"
+                         alt="Capture d'écran de la partie supérieure du formulaire
+                         avec la sélection du formulaire et le remplissage
+                         automatique du formulaire.">
+                    <figcaption>
+                      Sélection du formulaire et remplissage automatique sur la base
+                      de l'identifiant DOI ou PMID.
+                    </figcaption>
+                  </figure>
+                  <figure class="cmu-hug-infos-figure">
+                    <img src="https://www.unige.ch/biblio/files/4316/6988/4241/formulaire-commande-article-2.png"
+                         alt="Capture d'écran de la partie inférieure du formulaire,
+                         avec la sélection de la bibliothèque de retrait et l'envoi.">
+                    <figcaption>
+                      Sélection de la bibliothèque de retrait et envoi du formulaire.
+                    </figcaption>
+                  </figure>
+                </div>
+              </p>
+              <p>
+                Pour plus d'information sur les commandes de documents, veuillez
+                consulter la page suivante&nbsp;:
+                <a href="https://www.unige.ch/biblio/fr/services/peb/"
+                   title="Page de la bibliothèque sur le demande de documents">
+                  https://www.unige.ch/biblio/fr/services/peb/
+                </a>
+              </p>
+            </article>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <style>
+.unige-expand .panel-heading .accordion-toggle.collapsed::after {
+  content: "\e080";
+}
+.unige-expand .panel-heading .accordion-toggle::after {
+  font-family: 'Glyphicons Halflings';
+  content: "\e114";
+  float: right;
+}
+.cmu-hug-infos-panel-title {
+  font-family: thesansosfextrabold;
+}
+.cmu-hug-infos-figure {
+  border: 1px solid #d80669;
+  border-radius: 5px;
+  max-width: 90%;
+  margin: 1em auto;
+}
+.cmu-hug-infos-figure img {
+  border-radius: 5px;
+}
+.cmu-hug-infos-figure figcaption {
+  text-align: center;
+  padding: .5em 0;
+}
+.cmu-hug-infos-item ul {
+  padding-left: 40px;
+}
+  </style>
+</div>
diff --git a/infos-hug/html-vanilla.html b/infos-hug/html-vanilla.html
new file mode 100644
index 0000000..8d79882
--- /dev/null
+++ b/infos-hug/html-vanilla.html
@@ -0,0 +1,96 @@
+<article class="cmu-hug-infos-item">
+  <p>
+    <strong>Pour bénéficier de la gratuité du service</strong>, il est
+    nécessaire d'être inscrit à la bibliothèque <em>en tant que
+      collaborateur ou collaboratrice HUG ou UNIGE</em>. Si besoin, voir la
+    section
+    <a href="#appartenance">
+      Vérifier son appartenance à la communauté HUG ou UNIGE
+    </a>.
+  </p>
+  <p>
+    Le forumlaire est à l'adresse suivante&nbsp;:<br>
+    <a href="https://slsp-unige.primo.exlibrisgroup.com/discovery/blankIll?vid=41SLSP_UGE%3AVU1"
+       title="Lien direct vers le formulaire de commande dans Swisscovery
+       UNIGE">
+      https://slsp-unige.primo.exlibrisgroup.com/discovery/blankIll?vid=41SLSP_UGE%3AVU1
+    </a>.
+  </p>
+  <p>Il est accessible depuis la barre de menu supérieure de
+    Swisscovery UNIGE (entrée &laquo;&nbsp;Prêt / Numérisation entre
+    bibliothèques&nbsp;&raquo;).
+    <figure class="cmu-hug-infos-figure">
+      <img src="https://www.unige.ch/biblio/files/4216/6988/3425/swisscovery-menu-peb.png"
+           alt="Capture d'écran du lien vers le formulaire de commande
+           dans le menu supérieur de Swisscovery UNIGE.">
+      <figcaption>
+        Accès au formulaire depuis le menu supérieur de Swisscovery
+        UNIGE. 
+      </figcaption>
+    </figure>
+  </p>
+  <p>
+    Pour commander un article, il faut&nbsp;:
+    <ol>
+      <li>
+        Choisir le formulaire pour &laquo;&nbsp;Article /
+        Chapitre&nbsp;&raquo;.
+      </li>
+      <li>Coller le DOI ou le PMID dans le champ dédié.</li>
+      <li>
+        Cliquer sur &laquo;&nbsp;Remplissage automatique&nbsp;&raquo;.
+      </li>
+      <li>
+        Sélectionner Uni CMU dans le champ &laquo;&nbsp;Bibliothèque de
+        retrait&nbsp;&raquo;. L'article vous sera communiqué par e-mail.
+      </li>
+      <li>Cliquer sur &laquo;&nbsp;Envoyer la commande&nbsp;&raquo;.</li>
+    </ol>
+    <div class="cmu-hug-infos-block-figures">
+      <figure class="cmu-hug-infos-figure">
+        <img src="https://www.unige.ch/biblio/files/3016/6988/4215/formulaire-commande-article-1.png"
+             alt="Capture d'écran de la partie supérieure du formulaire
+             avec la sélection du formulaire et le remplissage
+             automatique du formulaire.">
+        <figcaption>
+          Sélection du formulaire et remplissage automatique sur la base
+          de l'identifiant DOI ou PMID.
+        </figcaption>
+      </figure>
+      <figure class="cmu-hug-infos-figure">
+        <img src="https://www.unige.ch/biblio/files/4316/6988/4241/formulaire-commande-article-2.png"
+             alt="Capture d'écran de la partie inférieure du formulaire,
+             avec la sélection de la bibliothèque de retrait et l'envoi.">
+        <figcaption>
+          Sélection de la bibliothèque de retrait et envoi du formulaire.
+        </figcaption>
+      </figure>
+    </div>
+  </p>
+  <p>
+    Pour plus d'information sur les commandes de documents, veuillez
+    consulter la page suivante&nbsp;:
+    <a href="https://www.unige.ch/biblio/fr/services/peb/"
+       title="Page de la bibliothèque sur le demande de documents">
+      https://www.unige.ch/biblio/fr/services/peb/
+    </a>
+  </p>
+  <style>
+.cmu-hug-infos-figure {
+  border: 1px solid #d80669;
+  border-radius: 5px;
+  max-width: 90%;
+  margin: 1em auto;
+}
+.cmu-hug-infos-figure img {
+  border-radius: 5px;
+}
+.cmu-hug-infos-figure figcaption {
+  text-align: center;
+  padding: .5em 0;
+}
+.cmu-hug-infos-item ul {
+  padding-left: 40px;
+}
+  </style>
+</article>