style(attestation): improve rendering with almost all nodes

app/assets/stylesheets/attestation.scss

@@ -36,22 +36,40 @@
 
 #attestation {
   @media screen {
+    .a4-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between; // This will push the footer down
       max-width: 21cm;
+      height: 29.7cm;
       padding: 17mm;
       margin: 0 auto;
+      background: #FFFFFF;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); // Optional: for better visualization
+    }
   }
 
   font-family: Marianne;
 
-  .header {
+  header {
     display: flex;
     justify-content: space-between;
+
+    p {
+      margin: 0;
+    }
   }
 
   .right {
     text-align: right;
   }
 
+  .french-state-layout & {
+    .right {
+      margin-top: 5.25mm;
+    }
+  }
+
   .bloc-marque {
     margin-bottom: 14mm;
   }
@@ -65,6 +83,7 @@
     font-size: 12pt;
     font-weight: bold;
     margin: 0 0 1mm;
+    line-height: 12pt;
   }
 
   .devise {
@@ -72,36 +91,54 @@
     margin: 0;
   }
 
-  .issuer {
-    font-size: 10pt;
-    margin: 0 0 14mm; // pas sur, pour mettre une marge si issuer plus bas que date
-  }
-
   .direction {
-    font-size: 12pt;
+    margin: 5.25mm 0 23.3mm;
+    line-height: 14pt;
     font-weight: bold;
-    margin: 0 0 23.3mm;
   }
 
-  .date {
+  .body-start {
-    font-size: 8pt;
+    margin-top: 30mm;
-    margin: 0 0 14mm;
-  }
-
-  .title {
-    font-size: 12pt;
-    font-weight: bold;
-    text-align: center;
-    margin: 0 0 12.6mm;
   }
 
   .main {
     font-size: 10pt;
+
+    .header {
+      &:first-of-type {
+        font-size: 10pt;
       }
 
-  .notice {
+      &:last-of-type {
-    font-size: 10pt;
+        font-size: 8pt;
-    font-style: italic;
+      }
+    }
+  }
+
+  h1,
+  h2 {
+    // both titles have the same size
+    font-size: 12pt;
+    font-weight: bold;
+  }
+
+  h1 {
+    margin: 14mm 0 8mm;
+  }
+
+  h2 {
+    margin: 0;
+    line-height: 6pt;
+  }
+
+  h3 {
+    font-size: 8pt;
+    font-weight: normal;
+    line-height: 3pt;
+  }
+
+  li p {
+    margin: 0.25rem 0;
   }
 
   .footer {

app/models/attestation_template.rb

@@ -107,6 +107,10 @@ class AttestationTemplate < ApplicationRecord
     self.json_body = JSON.parse(json)
   end
 
+  def french_state_layout?
+    label_logo.present?
+  end
+
   private
 
   def signature_to_render(groupe_instructeur)

app/views/administrateurs/attestation_template_v2s/show.html.haml

@@ -1,23 +1,19 @@
-= image_tag('centered_marianne.svg', alt: '', class: 'marianne')
+.a4-container{ class: class_names("french-state-layout": @attestation_template.french_state_layout?) }
-.header
+  .content
+    %header.first-header
       .left
         - if @attestation_template.label_logo.present?
+          = image_tag('centered_marianne.svg', alt: '', class: 'marianne')
           .bloc-marque
             = simple_format @attestation_template.label_logo, class: "intitule"
             = image_tag('liberte2.svg', alt: '', class: 'devise')
 
-    %p.issuer
-      Service Hébergement et Accès au Logement<br />
-      Bureau de l'Accès au Logement
-
       .right
         - if @attestation_template.label_direction.present?
           = simple_format @attestation_template.label_direction, class: "direction"
 
-    %p.date Créteil, le 20 mars 2023
-
     .main
-  = sanitize(@body)
+      = sanitize(@body, attributes: %w[class style], tags: Rails.configuration.action_view.sanitized_allowed_tags + %w[header])
 
   - if @attestation_template.footer.present?
     = simple_format @attestation_template.footer, class: "footer"