html: finalize ressources transversales BD

- Standardize styling and spacing.
- Rename file to something more accurate.
- Delete unnecessary HTML structure.

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

ressources-transversales-bd-html

@@ -5,13 +5,11 @@
       <a title="Accès à PubMed"
          lang="en"
          hreflang="English"
-         href="https://pubmed.ncbi.nlm.nih.gov/?otool=ichbfmglib"></a>
+         href="https://pubmed.ncbi.nlm.nih.gov/?otool=ichbfmglib">
-        <img class="img-responsive"
+        <img class="img-responsive mc-bd-logo"
              lang="en"
              src="/biblio/index.php/download_file/view_inline/8526/"
-             alt="Logo de PubMed"
+             alt="Logo de PubMed">
-             longdesc="Acc%C3%A8s%20%C3%A0%20PubMed"
-             width="100">
         <h3 class="o-title--h3">
           Pubmed
         </h3>
@@ -49,10 +47,9 @@
          lang="en"
          href="https://www.embase.com"
          hreflang="English">
-        <img class="img-responsive"
+        <img class="img-responsive mc-bd-logo"
              src="/biblio/index.php/download_file/view_inline/6074/"
-             alt="Logo de Embase"
+             alt="Logo de Embase">
-             width="100">
         <h3 class="o-title--h3">
           Embase
         </h3>
@@ -67,27 +64,33 @@
       </p>
     </article>
       <footer>
-        <a title="Accès à Embase"
+        <ul>
-           lang="en"
+          <li>
-           href="https://www.embase.com"
+            <a title="Accès à Embase"
-           hreflang="English">
+                 lang="en"
-          Accès à Embase (abonnement).
+                 href="https://www.embase.com"
-        </a>
+                 hreflang="English">
+              Accès à Embase (abonnement)
+            </a>.
+          </li>
+        </ul>
       </footer>
   </article>
   <!-- Cochrane Library -->
   <article class="mc-bd-item">
-    <a title="Accès à la Cochrane Library" lang="en"
+    <header>
-       href="https://www.cochranelibrary.com/" hreflang="English">
+      <a title="Accès à la Cochrane Library"
-      <header>
+         lang="en"
-        <img class="img-responsive" style="margin: 2em 0 1em 0;"
+         hreflang="English"
+         href="https://www.cochranelibrary.com/">
+        <img class="img-responsive mc-bd-logo"
              src="/biblio/index.php/download_file/view_inline/8544/"
-             alt="cochrane-library-logo-vector.svg" width="100">
+             alt="Logo de la Cochrane Library">
         <h3 class="o-title--h3">
           Cochrane Library
         </h3>
-      </header>
+      </a>
-    </a>
+    </header>
     <article>
       <p>
         Ensemble de bases de données produites par la collaboration
@@ -95,26 +98,36 @@
         méta-analyses, et des essais cliniques.
       </p>
     </article>
-    <a title="Accès à la Cochrane Library" lang="en"
+    <footer>
-       href="https://www.cochranelibrary.com/" hreflang="English">
+      <ul>
-      <footer>
+        <li>
-        Accès à la Cochrane Library (abonnement)
+          <a title="Accès à la Cochrane Library"
-      </footer>
+             lang="en"
-    </a>
+             href="https://www.cochranelibrary.com/" hreflang="English">
+            Accès à la Cochrane Library (abonnement)
+          </a>.
+        </li>
+      </ul>
+    </footer>
   </article>
   <!-- Dynamed -->
   <article class="mc-bd-item">
-    <a title="Accès au site web de Dynamed" lang="en" dir="ltr" type="html/text"
+    <header>
-       href="https://www.dynamed.org" hreflang="English" rel="nofollow">
+      <a title="Accès au site web de Dynamed"
-      <header>
+         lang="en"
-        <img class="img-responsive" style="margin: 2em 0 1em 0;"
+         dir="ltr"
+         type="html/text"
+         href="https://www.dynamed.org"
+         hreflang="English"
+         rel="nofollow">
+        <img class="img-responsive mc-bd-logo"
              src="/biblio/index.php/download_file/view_inline/8900/"
-             alt="Logo de Dynamed" width="100">
+             alt="Logo de Dynamed">
         <h3 class="o-title--h3">
           Dynamed
         </h3>
-      </header>
+      </a>
-    </a>
+    </header>
     <article>
       <p>
         Dynamed est un outil d'aide à la décision destiné aux corps médical par un
@@ -124,7 +137,8 @@
         suivre un sujet particulier afin d'être notifié lorsqu'il est mis à jour. Des
         fiches sur les médicaments permettent de vérifier leurs usages ainsi que les
         interactions entre différentes molécules. Des calculateurs interactifs et des
-        arbres de décisions sont également disponibles.</p>
+        arbres de décisions sont également disponibles.
+      </p>
       <p>
         Des applications pour téléphones mobiles facilitent la consultation de
         Dynamed là où c'est le plus utile.
@@ -133,37 +147,44 @@
     <footer>
       <ul>
         <li>
-          <a title="Marche à suivre pour Dynamed" lang="en"
+          <a title="Marche à suivre pour Dynamed"
-             dir="ltr" type="html/text"
+             lang="en"
+             dir="ltr"
+             type="html/text"
              href="{CCM:BASE_URL}/fr/disciplines/medecine-clinique/ressources-documentaires/transversales/procedure-dynamed"
-             hreflang="English" rel="nofollow">
+             hreflang="English"
+             rel="nofollow">
             Marche à suivre pour l'accès et l'installation de l'application mobile
-          </a>
+          </a>.
         </li>
         <li>
           <a title="Accès au site web de Dynamed"
-             lang="en" dir="ltr" type="html/text"
+             lang="en"
-             href="https://www.dynamed.org" hreflang="English" rel="nofollow">
+             dir="ltr"
+             type="html/text"
+             href="https://www.dynamed.org"
+             hreflang="English" rel="nofollow">
             Accès à Dynamed (abonnement)
-          </a>
+          </a>.
         </li>
       </ul>
     </footer>
   </article>
   <!-- UpToDate -->
   <article class="mc-bd-item">
-    <a title="Accès à UpToDate" lang="en"
+    <header>
-       href="https://www.uptodate.com" hreflang="English">
+      <a title="Accès à UpToDate"
-      <header>
+         lang="en"
-        <img class="img-responsive" style="margin: 2em 0 1em 0;"
+         href="https://www.uptodate.com"
+         hreflang="English">
+        <img class="img-responsive mc-bd-logo"
              src="/biblio/index.php/download_file/view_inline/8545/"
-             alt="UptoDate-logo-transparent.png"
+             alt="Logo de UptoDate">
-             width="100" height="29">
         <h3 class="o-title--h3">
           UptoDate
         </h3>
-      </header>
+      </a>
-    </a>
+    </header>
     <article>
       <p>Ressource rédigée par des médecins et fondée sur des données probantes (EBM).
         Des médecins, des éditeurs et des pairs examinateurs utilisent un processus
@@ -178,17 +199,20 @@
     <footer>
       <ul>
         <li>
-          <a title="Vidéo expliquant comment créer son compte" lang="en"
+          <a title="Vidéo expliquant comment créer son compte"
+             lang="en"
              href="http://vid.uptodate.com/watch/5TwtDspFFQEgQdqmgMEjXR?"
              hreflang="English">
             Comment créer son compte (vidéo de 53 sec., en anglais)
-          </a>
+          </a>.
         </li>
         <li>
-          <a title="Accès à UpToDate" lang="en"
+          <a title="Accès à UpToDate"
-             href="https://www.uptodate.com" hreflang="English">
+             lang="en"
+             href="https://www.uptodate.com"
+             hreflang="English">
             Accès à UpToDate (abonnement)
-          </a>
+          </a>.
         </li>
       </ul>
     </footer>
@@ -197,8 +221,16 @@
 .mc-bd-main {
   font-size: large;
 }
-.mc-bd-item header {
+.mc-bd-item:not(:last-of-type) {
+  margin-bottom: 3em;
+}
+.mc-bd-item > header > a {
   display: flex;
+  align-items: center;
+  gap: 1em;
+}
+.mc-bd-logo {
+  width: 100px;
 }
 </style>
 </article>

ressources-transversales-structure.html

@@ -1,7 +0,0 @@
-<article class="mc-transversales">
-  <article class="mc-transversales-bd"><a name=""></a>
-    <header></header>
-    <article></article>
-    <footer></footer> 
-  </article>
-</article>