style(attestation): improve rendering with almost all nodes

app/assets/stylesheets/attestation.scss

@@ -36,22 +36,40 @@
 
 #attestation {
   @media screen {
-    max-width: 21cm;
+    .a4-container {
-    padding: 17mm;
+      display: flex;
-    margin: 0 auto;
+      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;
+      }
+
+      &:last-of-type {
+        font-size: 8pt;
+      }
+    }
   }
 
-  .notice {
+  h1,
-    font-size: 10pt;
+  h2 {
-    font-style: italic;
+    // 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
-  .left
+    %header.first-header
-    - if @attestation_template.label_logo.present?
+      .left
-      .bloc-marque
+        - if @attestation_template.label_logo.present?
-        = simple_format @attestation_template.label_logo, class: "intitule"
+          = image_tag('centered_marianne.svg', alt: '', class: 'marianne')
-        = image_tag('liberte2.svg', alt: '', class: 'devise')
+          .bloc-marque
+            = simple_format @attestation_template.label_logo, class: "intitule"
+            = image_tag('liberte2.svg', alt: '', class: 'devise')
 
-    %p.issuer
+      .right
-      Service Hébergement et Accès au Logement<br />
+        - if @attestation_template.label_direction.present?
-      Bureau de l'Accès au Logement
+          = simple_format @attestation_template.label_direction, class: "direction"
 
-  .right
+    .main
-    - if @attestation_template.label_direction.present?
+      = sanitize(@body, attributes: %w[class style], tags: Rails.configuration.action_view.sanitized_allowed_tags + %w[header])
-      = simple_format @attestation_template.label_direction, class: "direction"
 
-    %p.date Créteil, le 20 mars 2023
+  - if @attestation_template.footer.present?
-
+    = simple_format @attestation_template.footer, class: "footer"
-.main
-  = sanitize(@body)
-
-- if @attestation_template.footer.present?
-  = simple_format @attestation_template.footer, class: "footer"