diff --git a/app/static/xsl/actes_princiers.xsl b/app/static/xsl/actes_princiers.xsl
index 24deebe..ea2e14a 100644
--- a/app/static/xsl/actes_princiers.xsl
+++ b/app/static/xsl/actes_princiers.xsl
@@ -10,15 +10,18 @@
         <xsl:apply-templates select="//text/body/div"/>
         <!-- bloc des notes -->
         <div>
-            <!-- notes paléographiques -->
-            <div class="note-global">
-                <xsl:apply-templates select="//text/body/div//note[@type='na']/p"/>
-            </div>
             <!-- notes critiques -->
             <div class="note-global">
-                <xsl:apply-templates select="//text/body/div//note[@type='n1']/p"/>
+                <xsl:apply-templates select="//note[@type='n1']/p"/>
             </div>
         </div>
+        
+        <!-- notes paléographiques -->
+        <div class="footnote">
+            <ol>
+                <xsl:apply-templates select="//text/body/div//note[@type='na']/p"/>
+            </ol>
+        </div>
     </xsl:template>
     <!-- RÈGLES GLOBALES DE MISE EN FORME -->
     <xsl:template match="hi[@rend='sup']">
@@ -358,7 +361,7 @@
         </xsl:choose>
     </xsl:template>
     <!-- APPELS DE NOTE DANS LE TEXTE -->
-    <xsl:template match="note[@type='n1']">
+    <xsl:template match="//note[@type='n1']">
         <!-- notes critiques -->
         <xsl:element name="sup">
             <xsl:element name="a">
@@ -375,14 +378,19 @@
     <xsl:template match="note[@type='na']">
         <!-- notes paléographiques -->
         <xsl:element name="sup">
+            <xsl:attribute name="id">
+                <xsl:text>fnref:</xsl:text>
+                <xsl:number count="//text/body/div//note[@type='na']" level="any" format="a"/>
+            </xsl:attribute>
             <xsl:element name="a">
-                <!-- @href pour lier l'appel à l'id de la note en fonction de son numéro -->
                 <xsl:attribute name="href">
-                    <xsl:text>#</xsl:text>
+                    <xsl:text>#fn:</xsl:text>
                     <xsl:number count="//text/body/div//note[@type='na']" level="any" format="a"/>
                 </xsl:attribute>
-                <!-- numéro de la note -->
-                <xsl:number count="//text/body/div//note[@type='na']" level="any" format="a"/>
+                <xsl:attribute name="rel">
+                    <xsl:text>footnote</xsl:text>
+                </xsl:attribute>
+                <xsl:number count="//text/body/div//note[@type='na']" level="any" format="a"/>                
             </xsl:element>
         </xsl:element>
     </xsl:template>
@@ -438,14 +446,14 @@
         </xsl:element>
     </xsl:template>
     <!-- NOTES CRITIQUES -->
-    <xsl:template match="note[@type='n1']/p">
+    <xsl:template match="//note[@type='n1']/p">
         <xsl:element name="p">
             <!-- @id, cible du @href de l'appel de note dans le texte -->
             <xsl:attribute name="id">
-                <xsl:number count="//text/body/div//note[@type='n1']" level="any" format="1"/>
+                <xsl:number count="//note[@type='n1']" level="any" format="1"/>
             </xsl:attribute>
             <!-- numéro de la note -->
-            <xsl:number count="//text/body/div//note[@type='n1']" level="any" format="1"/>
+            <xsl:number count="//note[@type='n1']" level="any" format="1"/>
             <xsl:text>. </xsl:text>
             <!-- texte de la note -->
             <xsl:apply-templates/>
@@ -453,16 +461,21 @@
     </xsl:template>
     <!-- NOTES PALÉOGRAPHIQUES -->
     <xsl:template match="note[@type='na']/p">
-        <xsl:element name="p">
+        <xsl:element name="li">
             <xsl:attribute name="id">
-                <!-- @id, cible du @href de l'appel de note dans le texte -->
+                <xsl:text>fn:</xsl:text>
                 <xsl:number count="//text/body/div//note[@type='na']" level="any" format="a"/>
             </xsl:attribute>
-            <!-- numéro de la note -->
-            <xsl:number count="//text/body/div//note[@type='na']" level="any" format="a"/>
-            <xsl:text>. </xsl:text>
-            <!-- texte de la note -->
-            <xsl:apply-templates/>
+            <xsl:attribute name="class">
+                <xsl:text>footnote</xsl:text>
+            </xsl:attribute>
+            <xsl:element name="p">
+                <!-- numéro de la note -->
+                <xsl:number count="//text/body/div//note[@type='na']" level="any" format="a"/>
+                <xsl:text>. </xsl:text>
+                <!-- texte de la note -->
+                <xsl:apply-templates/>
+            </xsl:element>
         </xsl:element>
     </xsl:template>
 </xsl:stylesheet>
\ No newline at end of file
diff --git a/app/templates/container.html b/app/templates/container.html
index 8d9f08a..ca152e7 100644
--- a/app/templates/container.html
+++ b/app/templates/container.html
@@ -107,6 +107,7 @@
                 </div>
             </section>
         </footer>
+
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
@@ -114,6 +115,11 @@
     <script>window.jQuery || document.write('<script src="{{url_for('static', filename="js/bootstrap_js_assets/vendor/jquery-slim.min.js")}}"><\/script>')</script>
     <script src="{{url_for('static', filename='js/vendor/popper.min.js')}}"></script>
     <script src="{{url_for('static', filename='js/bootstrap.min.js')}}"></script>
+    <!-- Just to make our placeholder images work. Don't actually copy the next line! 
+    <script src="../static/js/bootstrap_js_assets/vendor/holder.min.js"></script>-->
+
+    <!-- Footnote core JavaScript
+    ================================================== -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js" integrity="sha512-J9QfbPuFlqGD2CYVCa6zn8/7PEgZnGpM5qtFOBZgwujjDnG5w5Fjx46YzqvIh/ORstcj7luStvvIHkisQi5SKw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script type="text/javascript" src="{{url_for('static', filename='js/footnotes_js/bigfoot.js')}}"></script>
 <script type="text/javascript">
@@ -125,7 +131,5 @@
         }
     );
 </script>
-    <!-- Just to make our placeholder images work. Don't actually copy the next line! 
-    <script src="../static/js/bootstrap_js_assets/vendor/holder.min.js"></script>-->
   </body>
 </html>
\ No newline at end of file
diff --git a/app/templates/partials/app_css_links.html b/app/templates/partials/app_css_links.html
index 826f9c2..58a92f4 100644
--- a/app/templates/partials/app_css_links.html
+++ b/app/templates/partials/app_css_links.html
@@ -1,13 +1,11 @@
     <!-- Bootstrap core CSS -->
     <link href="{{url_for('static', filename='css/bootstrap/bootstrap.min.css')}}" rel="stylesheet">
 
-
     <!-- Custom styles for this template -->
     <link href="{{url_for('static', filename='css/carousel.css')}}" rel="stylesheet">
 
-
     <!-- Custom styles for Actes princiers project -->
     <link href="{{url_for('static', filename='css/custom_style_main.css')}}" rel="stylesheet">
 
     <!-- Custom styles for footnotes -->
-    <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='css/footnotes_css/bigfoot-default.css">
\ No newline at end of file
+    <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='css/footnotes_css/bigfoot-default.css')}}">
\ No newline at end of file