Update templates/philosophie.html

templates/philosophie.html

@@ -74,6 +74,7 @@
 
     button {
       display: block;
+      box-sizing: border-box;
       width: 100%;
       padding: 16px;
       background-color: var(--primary-color);
@@ -95,6 +96,20 @@
       background-color: #9ca3af;
       cursor: not-allowed;
     }
+    
+    /* Style pour le bouton de téléchargement */
+    .download-container {
+        margin-top: 15px;
+    }
+    .secondary-button {
+        background-color: #f3f4f6; /* Gris clair */
+        color: #374151; /* Texte foncé */
+        border: 1px solid #d1d5db; /* Bordure subtile */
+    }
+    .secondary-button:hover:not(:disabled) {
+        background-color: #e5e7eb; /* Gris plus foncé au survol */
+        border-color: #9ca3af;
+    }
 
     .loader {
       display: block;
@@ -124,12 +139,12 @@
       font-size: 20px;
       color: #1a2a4c;
       background-color: #fdfaf4;
-      line-height: 2; /* Augmenté pour la lisibilité de Kalam */
+      line-height: 2;
       background-image: linear-gradient(transparent 97%, #d8e2ee 98%);
-      background-size: 100% 40px; /* Adapté à la nouvelle line-height */
+      background-size: 100% 40px;
       border-left: 3px solid #ffaaab;
       padding-left: 4em;
-      margin: 40px -40px -40px -40px; /* Correspond au padding du container */
+      margin: 40px -40px -40px -40px;
       padding-top: 30px;
       padding-bottom: 40px;
       padding-right: 30px;
@@ -145,28 +160,6 @@
     .dissertation-paper .transition { margin-top: 2em; margin-bottom: 2em; font-style: italic; color: #4a6a9c; }
     .dissertation-paper, .dissertation-paper * { box-sizing: border-box; }
     
-    .pdf-button-container {
-      display: flex;
-      justify-content: flex-end;
-      margin-bottom: 2em;
-      padding-right: 1em; /* Petit décalage pour ne pas coller au bord */
-    }
-    
-    .pdf-button {
-      font-family: 'Lato', sans-serif;
-      font-size: 14px;
-      font-weight: 600;
-      padding: 10px 20px;
-      width: auto;
-      background-color: #e9ecef;
-      color: var(--text-color);
-      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-    }
-    .pdf-button:hover:not(:disabled) {
-      background-color: #ced4da;
-      transform: translateY(-1px);
-    }
-
     .avoid-page-break { page-break-inside: avoid; break-inside: avoid; }
   </style>
 </head>
@@ -182,18 +175,17 @@
       </button>
     </form>
 
+    <!-- NOUVEL EMPLACEMENT DU BOUTON PDF -->
+    <div v-if="dissertation" class="download-container" data-html2canvas-ignore="true">
+      <button class="secondary-button" @click="generatePDF">Télécharger la dissertation en PDF</button>
+    </div>
+
     <div v-if="isLoading" class="loader"></div>
     <p v-if="errorMessage" class="error">[[ errorMessage ]]</p>
 
     <div v-if="dissertation" id="dissertation-content" class="dissertation-paper">
       
       <h2>Sujet : [[ dissertation.sujet ]]</h2>
-
-      <!-- Bouton PDF déplacé en haut -->
-      <div class="pdf-button-container" data-html2canvas-ignore="true">
-        <button class="pdf-button" @click="generatePDF">Télécharger en PDF</button>
-      </div>
-
       <p class="prof">Prof : [[ dissertation.prof ]]</p>
 
       <h3>Introduction</h3>
@@ -267,14 +259,14 @@
             window.scrollTo(0, 0);
 
             const options = {
-              margin: [15, 15, 15, 15], // Marges augmentées pour un meilleur rendu A4
+              margin: [15, 15, 15, 15],
               filename: 'dissertation-philosophie.pdf',
               image: { type: 'jpeg', quality: 0.98 },
               html2canvas: {
                 scale: 2,
                 useCORS: true,
                 logging: true,
-                backgroundColor: null, // Transparent pour garder le fond du papier
+                backgroundColor: null,
               },
               jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
             };