Update main.py

main.py

@@ -216,71 +216,233 @@ def clean_html_content(html_content: str, image_counter: list, images_data: dict
     # Insérer les styles dans une balise <style> dans le corps
     style_tag = soup.new_tag('style')
     style_tag.string = """
-    
-        /* Styles CSS */
-        body {
-            font-family: Arial, Calibri, Verdana, sans-serif;
-            line-height: 1.6;
-            margin: 20px;
-            text-align: left;
-            font-size:14px;
-        }
-        h1 {
-            margin-left: 0px;
-            color: Navy;
-            font-size:24px;
-        }
-        h2 {
-            margin-left: 20px;
-            color: DarkGreen;
-            font-size:20px;
-        }
-        h3 {
-            margin-left: 40px;
-            color: DarkRed;
-            font-size:18px;
-        }
-        h4 {
-            margin-left: 60px;
-            color: DarkSlateGray;
-            font-size:16px;
-        }
-        h5 {
-            margin-left: 80px;
-            color: DarkSlateBlue;
-            font-size:16px;
-        }
-        h6 {
-            margin-left: 100px;
-            color: DarkViolet;
-            font-size:16px;
-        }
-        p {
-            margin-bottom: 15px;
-        }
-        table {
-            margin: 1em 0;
-            border-collapse: collapse;
-            width: 100%;
-            overflow-x: auto;
-            display: block;
-            font-variant-numeric: lining-nums tabular-nums;
-        }
-        table caption {
-            margin-bottom: 0.75em;
-        }
-        th, td {
-            border: 1px solid #000;
-            padding: 0.5em;
-            text-align: left;
-        }
-        tbody tr:nth-child(odd) {
-            background-color: #f2f2f2;
-        }
-        tbody tr:nth-child(even) {
-            background-color: #ffffff;
-        }
-    
+
+/* Variables CSS pour une gestion facile des tailles */
+:root {
+    --font-size-min: 14px;
+    --font-size-base: 1rem; /* 16px par défaut */
+    --font-size-large: 2.5rem; /* Ajustable selon les besoins */
+    --line-height: 1.5;
+    --font-family: Arial, Calibri, Verdana, sans-serif;
+    --text-color: #1a1a1a;
+    --background-color: #fdfdfd;
+    --link-color: #1a1a1a;
+    --heading-color-primary: Navy;
+    --heading-color-secondary: DarkGreen;
+    --heading-color-tertiary: DarkRed;
+    --heading-color-quaternary: DarkSlateGray;
+    --heading-color-quinary: DarkSlateBlue;
+    --heading-color-senary: DarkViolet;
+}
+
+/* Styles de base */
+html {
+    font-family: var(--font-family);
+    font-size: var(--font-size-base);
+    line-height: var(--line-height);
+    color: var(--text-color);
+    background-color: var(--background-color);
+    /* Fluid Typography: Ajuste la taille de la police en fonction de la largeur de la fenêtre */
+    font-size: clamp(var(--font-size-min), 2vw, 2rem);
+}
+
+body {
+    margin: 20px auto;
+    max-width: 36em; /* 36em correspond à environ 576px */
+    padding: 2rem;
+    hyphens: auto;
+    overflow-wrap: break-word;
+    text-rendering: optimizeLegibility;
+    font-kerning: normal;
+    text-align: left;
+}
+
+/* Titres réactifs */
+h1 {
+    margin-left: 0;
+    color: var(--heading-color-primary);
+    font-size: clamp(1.5rem, 5vw, 3rem); /* Entre 24px et 48px */
+}
+
+h2 {
+    margin-left: 1.25rem;
+    color: var(--heading-color-secondary);
+    font-size: clamp(1.25rem, 4vw, 2.5rem); /* Entre 20px et 40px */
+}
+
+h3 {
+    margin-left: 2.5rem;
+    color: var(--heading-color-tertiary);
+    font-size: clamp(1.125rem, 3.5vw, 2.25rem); /* Entre 18px et 36px */
+}
+
+h4, h5, h6 {
+    margin-left: calc(3.75rem + (hN * 1.25rem)); /* Ajustement dynamique */
+    color: var(--heading-color-quaternary);
+    font-size: clamp(1rem, 3vw, 2rem); /* Entre 16px et 32px */
+}
+
+/* Médias responsive */
+@media (max-width: 600px) {
+    html {
+        font-size: clamp(var(--font-size-min), 4vw, 1.5rem); /* Ajuste légèrement pour petits écrans */
+    }
+    body {
+        padding: 1rem;
+    }
+    h1 {
+        font-size: clamp(1.5rem, 6vw, 2.5rem);
+    }
+    h2 {
+        font-size: clamp(1.25rem, 5vw, 2rem);
+    }
+    h3 {
+        font-size: clamp(1.125rem, 4.5vw, 1.75rem);
+    }
+    h4, h5, h6 {
+        font-size: clamp(1rem, 4vw, 1.5rem);
+    }
+}
+
+/* Impression */
+@media print {
+    body {
+        background-color: transparent;
+        color: black;
+        font-size: 12pt;
+    }
+    p, h2, h3 {
+        orphans: 3;
+        widows: 3;
+    }
+    h2, h3, h4 {
+        page-break-after: avoid;
+    }
+}
+
+/* Paragraphes et liens */
+p {
+    margin: 1em 0;
+    font-size: 1rem; /* 16px */
+}
+
+a {
+    color: var(--link-color);
+    text-decoration: none;
+}
+
+a:visited {
+    color: var(--link-color);
+}
+
+a:hover, a:focus {
+    text-decoration: underline; /* Améliore la visibilité au survol */
+}
+
+/* Images réactives */
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+/* Tables réactives */
+table {
+    margin: 1em 0;
+    border-collapse: collapse;
+    width: 100%;
+    overflow-x: auto;
+    display: block;
+    font-variant-numeric: lining-nums tabular-nums;
+}
+
+table caption {
+    margin-bottom: 0.75em;
+}
+
+th, td {
+    border: 1px solid #000;
+    padding: 0.5em;
+    text-align: left;
+}
+
+tbody tr:nth-child(odd) {
+    background-color: #f2f2f2;
+}
+
+tbody tr:nth-child(even) {
+    background-color: #ffffff;
+}
+
+/* Citations */
+blockquote {
+    margin: 1em 0 1em 1.7em;
+    padding-left: 1em;
+    border-left: 2px solid #e6e6e6;
+    color: #606060;
+}
+
+/* Code */
+code {
+    font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
+    font-size: 0.85rem;
+    margin: 0;
+    white-space: pre-wrap;
+}
+
+pre {
+    margin: 1em 0;
+    overflow: auto;
+}
+
+pre code {
+    padding: 0;
+    overflow: visible;
+    overflow-wrap: normal;
+}
+
+.sourceCode {
+    background-color: transparent;
+    overflow: visible;
+}
+
+/* Lignes horizontales */
+hr {
+    background-color: #1a1a1a;
+    border: none;
+    height: 1px;
+    margin: 1em 0;
+}
+
+/* Styles supplémentaires */
+span.smallcaps {
+    font-variant: small-caps;
+}
+
+span.underline {
+    text-decoration: underline;
+}
+
+div.column {
+    display: inline-block;
+    vertical-align: top;
+    width: 50%;
+}
+
+div.hanging-indent {
+    margin-left: 1.5em;
+    text-indent: -1.5em;
+}
+
+ul.task-list {
+    list-style: none;
+}
+
+.display.math {
+    display: block;
+    text-align: center;
+    margin: 0.5rem auto;
+}
+
     """
     if soup.body:
         soup.body.insert(0, style_tag)