From 07afa36207797098534ec3be2c13f04a0814d906 Mon Sep 17 00:00:00 2001
From: sebvtl728 <sebavtl.arinfo@gmail.com>
Date: Thu, 21 May 2026 22:44:44 +0200
Subject: [PATCH] style: add validation and signature section to triptyque
 layout

---
 .vscode/settings.json                    |   3 +
 grille_triptyque_breakout_mercredi1.html | 726 +++++++++++++++++++----
 2 files changed, 614 insertions(+), 115 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/grille_triptyque_breakout_mercredi1.html b/grille_triptyque_breakout_mercredi1.html
index 7282ae2..94f909e 100644
--- a/grille_triptyque_breakout_mercredi1.html
+++ b/grille_triptyque_breakout_mercredi1.html
@@ -5,10 +5,10 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Triptyque Breakout - Mercredi</title>
-  
+
   <!-- Tabler Icons CSS CDN -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
-  
+
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');
 
@@ -18,41 +18,41 @@
       --primary: hsl(var(--primary-hsl));
       --primary-light: hsl(247, 85%, 96%);
       --primary-dark: hsl(247, 80%, 35%);
-      
+
       /* Neutral colors - Clean & Premium Cool Grays */
       --bg-primary: #f8fafc;
       --bg-secondary: #ffffff;
       --bg-tertiary: #f1f5f9;
-      
+
       --color-text-primary: #0f172a;
       --color-text-secondary: #475569;
       --color-text-tertiary: #94a3b8;
-      
+
       --color-border-primary: #f1f5f9;
       --color-border-secondary: #e2e8f0;
       --color-border-tertiary: #e2e8f0;
-      
+
       --border-radius-sm: 8px;
       --border-radius-md: 14px;
       --border-radius-lg: 18px;
       --border-radius-xl: 24px;
-      
+
       --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
       --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
       --shadow-lg: 0 12px 20px -3px rgba(0, 0, 0, 0.05), 0 4px 8px -4px rgba(0, 0, 0, 0.05);
-      
+
       /* Column Theme: Dimension 1 (Contenu - Violet) */
       --color-p-bg: hsl(250, 75%, 97%);
       --color-p-border: hsl(250, 70%, 92%);
       --color-p-accent: hsl(250, 70%, 58%);
       --color-p-dark: hsl(250, 80%, 25%);
-      
+
       /* Column Theme: Dimension 2 (Méthode - Teal) */
       --color-t-bg: hsl(162, 55%, 96%);
       --color-t-border: hsl(162, 50%, 88%);
       --color-t-accent: hsl(162, 75%, 34%);
       --color-t-dark: hsl(162, 80%, 18%);
-      
+
       /* Column Theme: Dimension 3 (Posture - Amber) */
       --color-a-bg: hsl(36, 85%, 96%);
       --color-a-border: hsl(36, 80%, 88%);
@@ -74,7 +74,7 @@
       min-height: 100vh;
       display: flex;
       flex-direction: column;
-      background-image: 
+      background-image:
         radial-gradient(at 0% 0%, hsla(247, 80%, 62%, 0.04) 0px, transparent 50%),
         radial-gradient(at 100% 0%, hsla(162, 75%, 34%, 0.02) 0px, transparent 50%),
         radial-gradient(at 50% 100%, hsla(36, 90%, 45%, 0.03) 0px, transparent 50%);
@@ -153,7 +153,7 @@
       border-color: var(--color-text-secondary);
       transform: scale(1.05);
     }
-    
+
     .theme-btn:active {
       transform: scale(0.95);
     }
@@ -193,7 +193,7 @@
       line-height: 1.1;
       text-align: center;
     }
-    
+
 
 
     .timer-controls {
@@ -216,7 +216,7 @@
       transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
       box-shadow: var(--shadow-sm);
     }
-    
+
 
 
     .tcbtn:hover {
@@ -226,15 +226,23 @@
       transform: translateY(-2px);
       box-shadow: 0 4px 8px rgba(117, 95, 236, 0.25);
     }
-    
+
     .tcbtn:active {
       transform: translateY(0);
     }
 
     @keyframes pulse-timer {
-      0% { box-shadow: 0 0 0 0 hsla(247, 80%, 62%, 0.4); }
-      70% { box-shadow: 0 0 0 10px hsla(247, 80%, 62%, 0); }
-      100% { box-shadow: 0 0 0 0 hsla(247, 80%, 62%, 0); }
+      0% {
+        box-shadow: 0 0 0 0 hsla(247, 80%, 62%, 0.4);
+      }
+
+      70% {
+        box-shadow: 0 0 0 10px hsla(247, 80%, 62%, 0);
+      }
+
+      100% {
+        box-shadow: 0 0 0 0 hsla(247, 80%, 62%, 0);
+      }
     }
 
     .timer-pill.ticking {
@@ -321,9 +329,17 @@
       flex-shrink: 0;
     }
 
-    .ch-icon-p { color: var(--color-p-accent); }
-    .ch-icon-t { color: var(--color-t-accent); }
-    .ch-icon-a { color: var(--color-a-accent); }
+    .ch-icon-p {
+      color: var(--color-p-accent);
+    }
+
+    .ch-icon-t {
+      color: var(--color-t-accent);
+    }
+
+    .ch-icon-a {
+      color: var(--color-a-accent);
+    }
 
     .ch-texts {
       display: flex;
@@ -338,9 +354,17 @@
       text-transform: uppercase;
     }
 
-    .ch-num-p { color: var(--color-p-accent); }
-    .ch-num-t { color: var(--color-t-accent); }
-    .ch-num-a { color: var(--color-a-accent); }
+    .ch-num-p {
+      color: var(--color-p-accent);
+    }
+
+    .ch-num-t {
+      color: var(--color-t-accent);
+    }
+
+    .ch-num-a {
+      color: var(--color-a-accent);
+    }
 
     .ch-name {
       font-size: 1rem;
@@ -348,9 +372,17 @@
       letter-spacing: -0.01em;
     }
 
-    .ch-name-p { color: var(--color-p-dark); }
-    .ch-name-t { color: var(--color-t-dark); }
-    .ch-name-a { color: var(--color-a-dark); }
+    .ch-name-p {
+      color: var(--color-p-dark);
+    }
+
+    .ch-name-t {
+      color: var(--color-t-dark);
+    }
+
+    .ch-name-a {
+      color: var(--color-a-dark);
+    }
 
     .ch-q {
       font-size: 0.8rem;
@@ -359,9 +391,17 @@
       opacity: 0.9;
     }
 
-    .ch-q-p { color: var(--color-p-accent); }
-    .ch-q-t { color: var(--color-t-accent); }
-    .ch-q-a { color: var(--color-a-accent); }
+    .ch-q-p {
+      color: var(--color-p-accent);
+    }
+
+    .ch-q-t {
+      color: var(--color-t-accent);
+    }
+
+    .ch-q-a {
+      color: var(--color-a-accent);
+    }
 
     /* Sequence Rows */
     .seq-row {
@@ -429,7 +469,7 @@
       transition: all 0.25s ease;
       position: relative;
     }
-    
+
     .cell::before {
       content: '';
       position: absolute;
@@ -472,19 +512,28 @@
     }
 
     /* Column themes for cells */
-    .seq-row .cell:nth-child(2)::before { background: var(--color-p-accent); }
+    .seq-row .cell:nth-child(2)::before {
+      background: var(--color-p-accent);
+    }
+
     .seq-row .cell:nth-child(2):focus-within {
       border-color: var(--color-p-accent);
       box-shadow: 0 0 0 3px hsla(250, 70%, 58%, 0.15), var(--shadow-lg);
     }
 
-    .seq-row .cell:nth-child(3)::before { background: var(--color-t-accent); }
+    .seq-row .cell:nth-child(3)::before {
+      background: var(--color-t-accent);
+    }
+
     .seq-row .cell:nth-child(3):focus-within {
       border-color: var(--color-t-accent);
       box-shadow: 0 0 0 3px hsla(162, 75%, 34%, 0.15), var(--shadow-lg);
     }
 
-    .seq-row .cell:nth-child(4)::before { background: var(--color-a-accent); }
+    .seq-row .cell:nth-child(4)::before {
+      background: var(--color-a-accent);
+    }
+
     .seq-row .cell:nth-child(4):focus-within {
       border-color: var(--color-a-accent);
       box-shadow: 0 0 0 3px hsla(36, 90%, 45%, 0.15), var(--shadow-lg);
@@ -540,12 +589,12 @@
       position: relative;
       transition: all 0.2s ease;
     }
-    
+
     .db-col:focus-within {
       border-color: var(--primary);
       box-shadow: var(--shadow-md);
     }
-    
+
     .db-col::before {
       content: '';
       position: absolute;
@@ -556,9 +605,21 @@
       border-radius: 3px 3px 0 0;
     }
 
-    .db-col:nth-child(1)::before { background: #10b981; } /* success green */
-    .db-col:nth-child(2)::before { background: #3b82f6; } /* debug blue */
-    .db-col:nth-child(3)::before { background: #f59e0b; } /* attention orange */
+    .db-col:nth-child(1)::before {
+      background: #10b981;
+    }
+
+    /* success green */
+    .db-col:nth-child(2)::before {
+      background: #3b82f6;
+    }
+
+    /* debug blue */
+    .db-col:nth-child(3)::before {
+      background: #f59e0b;
+    }
+
+    /* attention orange */
 
     .db-col-label {
       font-size: 0.8rem;
@@ -589,6 +650,255 @@
       font-style: italic;
     }
 
+    /* Signature Section Styles */
+    .signature-block {
+      background: var(--bg-secondary);
+      border: 1px solid var(--color-border-secondary);
+      border-radius: var(--border-radius-lg);
+      padding: 24px;
+      box-shadow: var(--shadow-sm);
+      margin-bottom: 2rem;
+      transition: box-shadow 0.2s ease;
+    }
+
+    .signature-block:hover {
+      box-shadow: var(--shadow-md);
+    }
+
+    .signature-grid {
+      display: grid;
+      grid-template-columns: 1.5fr 1fr;
+      gap: 24px;
+    }
+
+    .signature-col {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .signature-label {
+      font-size: 0.75rem;
+      font-weight: 800;
+      letter-spacing: .05em;
+      text-transform: uppercase;
+      color: var(--color-text-secondary);
+    }
+
+    .signature-pad-wrapper {
+      border: 1px solid var(--color-border-secondary);
+      border-radius: var(--border-radius-md);
+      background: var(--bg-primary);
+      padding: 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      transition: all 0.25s ease;
+    }
+
+    .signature-pad-wrapper:focus-within {
+      border-color: var(--primary);
+      box-shadow: 0 0 0 3px hsla(247, 80%, 62%, 0.12);
+    }
+
+    .signature-pad {
+      width: 100%;
+      height: 180px;
+      background: #ffffff;
+      border-radius: var(--border-radius-sm);
+      border: 1px dashed var(--color-border-secondary);
+      cursor: crosshair;
+      touch-action: none;
+    }
+
+    .signature-pad-controls {
+      display: flex;
+      gap: 10px;
+      justify-content: flex-end;
+    }
+
+    .signature-btn {
+      font-family: 'Nunito', sans-serif;
+      font-size: 0.75rem;
+      font-weight: 700;
+      letter-spacing: .03em;
+      text-transform: uppercase;
+      background: var(--bg-secondary);
+      border: 1px solid var(--color-border-secondary);
+      color: var(--color-text-secondary);
+      border-radius: 8px;
+      padding: 8px 14px;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: var(--shadow-sm);
+    }
+
+    .signature-btn:hover {
+      background: var(--bg-tertiary);
+      color: var(--color-text-primary);
+      transform: translateY(-1px);
+    }
+
+    .signature-btn.clear:hover {
+      background: #fee2e2;
+      color: #ef4444;
+      border-color: #fca5a5;
+      box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
+    }
+
+    .signature-btn.save {
+      background: var(--primary);
+      border-color: var(--primary);
+      color: white;
+    }
+
+    .signature-btn.save:hover {
+      background: var(--primary-dark);
+      border-color: var(--primary-dark);
+      box-shadow: 0 4px 8px rgba(117, 95, 236, 0.25);
+    }
+
+    .date-col {
+      justify-content: space-between;
+    }
+
+    .signature-info-box {
+      background: var(--primary-light);
+      border: 1px solid var(--color-border-secondary);
+      border-radius: var(--border-radius-md);
+      padding: 16px;
+      display: flex;
+      gap: 12px;
+      align-items: flex-start;
+    }
+
+    .signature-info-box i {
+      color: var(--primary);
+      font-size: 1.25rem;
+      flex-shrink: 0;
+      margin-top: 2px;
+    }
+
+    .signature-info-box p {
+      font-size: 0.8rem;
+      color: var(--color-text-secondary);
+      line-height: 1.5;
+    }
+
+    /* Responsive CSS Overrides for Signature */
+    @media (max-width: 860px) {
+      .signature-grid {
+        grid-template-columns: 1fr;
+        gap: 16px;
+      }
+
+      .date-col {
+        gap: 16px;
+      }
+    }
+
+    /* Print Styles for Signature */
+    @media print {
+      .signature-pad-controls {
+        display: none !important;
+      }
+
+      .signature-pad {
+        border: 1px solid #94a3b8 !important;
+        background: white !important;
+      }
+
+      .signature-block {
+        page-break-inside: avoid;
+        border: 1px solid #94a3b8 !important;
+        background: white !important;
+        box-shadow: none !important;
+      }
+
+      .signature-info-box {
+        border: 1px solid #94a3b8 !important;
+        background: white !important;
+      }
+    }
+
+    /* Identity input cards */
+    .identity-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 16px;
+      margin-bottom: 2rem;
+    }
+
+    .id-field {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      background: var(--bg-secondary);
+      border: 1px solid var(--color-border-secondary);
+      border-radius: var(--border-radius-md);
+      padding: 10px 14px;
+      box-shadow: var(--shadow-sm);
+      transition: all 0.25s ease;
+    }
+
+    .id-field:focus-within {
+      border-color: var(--primary);
+      box-shadow: 0 0 0 3px hsla(247, 80%, 62%, 0.12), var(--shadow-md);
+    }
+
+    .field-label {
+      font-size: 0.65rem;
+      font-weight: 800;
+      letter-spacing: .1em;
+      text-transform: uppercase;
+      color: var(--color-text-secondary);
+    }
+
+    .field-line {
+      border: none;
+      background: transparent;
+      font-family: 'DM Sans', sans-serif;
+      font-size: 0.9rem;
+      color: var(--color-text-primary);
+      padding: 2px 0 0 0;
+      width: 100%;
+      outline: none;
+    }
+
+    .field-line::placeholder {
+      color: var(--color-text-tertiary);
+      opacity: 0.7;
+    }
+
+    /* Section Headers */
+      .section-title {
+        font-size: 0.85rem;
+        font-weight: 800;
+        letter-spacing: .08em;
+        text-transform: uppercase;
+        color: var(--primary);
+        margin: 2.5rem 0 1.5rem 0;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+
+      .section-title i {
+        font-size: 1.2rem;
+      }
+
+      .section-title::after {
+        content: "";
+        flex: 1;
+        height: 1px;
+        background: var(--color-border-secondary);
+        opacity: 0.8;
+      }
+
+
     /* Footer styles */
     .sep {
       border: none;
@@ -662,7 +972,7 @@
       color: var(--color-text-primary);
       transform: translateY(-2px);
     }
-    
+
     .fbtn:active {
       transform: translateY(0);
     }
@@ -685,9 +995,11 @@
       .col-headers {
         grid-template-columns: 1fr 1fr 1fr;
       }
+
       .ch-empty {
         display: none;
       }
+
       .seq-row {
         grid-template-columns: 1fr;
         gap: 14px;
@@ -697,6 +1009,7 @@
         padding: 20px;
         box-shadow: var(--shadow-sm);
       }
+
       .seq-label-cell {
         border: none;
         padding: 0 0 14px 0;
@@ -705,6 +1018,7 @@
         border-radius: 0;
         background: transparent;
       }
+
       .seq-row .cell {
         box-shadow: none;
       }
@@ -716,35 +1030,35 @@
         align-items: flex-start;
         gap: 1.25rem;
       }
-      
+
       .header-right {
         width: 100%;
         justify-content: space-between;
       }
-      
+
       .col-headers {
         display: none;
       }
-      
+
       .debrief-body {
         grid-template-columns: 1fr;
         gap: 14px;
       }
-      
+
       .foot-note {
         max-width: 100%;
       }
-      
+
       .footer-row {
         flex-direction: column;
         align-items: flex-start;
         gap: 1.25rem;
       }
-      
+
       .foot-btns {
         width: 100%;
       }
-      
+
       .fbtn {
         flex: 1;
         justify-content: center;
@@ -759,66 +1073,70 @@
         -webkit-print-color-adjust: exact;
         print-color-adjust: exact;
       }
-      
 
-      
+
+
       .wrap {
         max-width: 100% !important;
         padding: 0 !important;
       }
-      
-      .theme-btn, .timer-pill, .timer-controls, .foot-btns, hr.sep {
+
+      .theme-btn,
+      .timer-pill,
+      .timer-controls,
+      .foot-btns,
+      hr.sep {
         display: none !important;
       }
-      
+
       .doc-header {
         border-bottom: 2px solid #000;
         padding-bottom: 10px;
         margin-bottom: 15px;
       }
-      
+
       .col-headers {
         display: grid !important;
         grid-template-columns: 160px 1fr 1fr 1fr !important;
         gap: 8px !important;
       }
-      
+
       .ch-empty {
         display: block !important;
       }
-      
+
       .seq-row {
         display: grid !important;
         grid-template-columns: 160px 1fr 1fr 1fr !important;
         gap: 8px !important;
         page-break-inside: avoid;
       }
-      
+
       .cell {
         border: 1px solid #64748b !important;
         background: white !important;
         box-shadow: none !important;
       }
-      
+
       .cell::before {
         display: none !important;
       }
-      
+
       .cell textarea {
         background: white !important;
         resize: none;
       }
-      
+
       .debrief-box {
         page-break-inside: avoid;
         border: 1px solid #64748b !important;
       }
-      
+
       .debrief-body {
         grid-template-columns: 1fr 1fr 1fr !important;
         gap: 8px !important;
       }
-      
+
       .db-col {
         border: 1px solid #64748b !important;
         background: white !important;
@@ -831,7 +1149,8 @@
 <body>
   <div class="wrap">
     <!-- Accessibility Title -->
-    <h2 class="sr-only">Grille triptyque Contenu–Méthode–Posture pour l'atelier breakout rooms du Mercredi 1, avec 3 séquences UF1 et UF2 à analyser en sous-groupes</h2>
+    <h2 class="sr-only">Grille triptyque Contenu–Méthode–Posture pour l'atelier breakout rooms du Mercredi 1, avec 3
+      séquences UF1 et UF2 à analyser en sous-groupes</h2>
 
     <!-- Elegant Header Dashboard style -->
     <div class="doc-header">
@@ -841,7 +1160,7 @@
       </div>
       <div class="header-right">
 
-        
+
         <!-- Timer widget -->
         <div class="timer-pill" id="timer-widget">
           <div class="timer-texts">
@@ -866,13 +1185,15 @@
     <!-- Interactive Instruction bar -->
     <div class="consigne-bar">
       <i class="ti ti-clipboard-text" aria-hidden="true"></i>
-      <p><strong>Consigne (10 min par groupe) :</strong> Pour la séquence qui vous est assignée, identifiez les 3 dimensions du triptyque. Notez vos réponses dans la grille. Lors de la restitution en plénière, chaque groupe présentera ses 3 dimensions en 5 min.</p>
+      <p><strong>Consigne (10 min par groupe) :</strong> Pour la séquence qui vous est assignée, identifiez les 3
+        dimensions du triptyque. Notez vos réponses dans la grille. Lors de la restitution en plénière, chaque groupe
+        présentera ses 3 dimensions en 5 min.</p>
     </div>
 
     <!-- Table Columns Header -->
     <div class="col-headers">
       <div class="ch-empty"></div>
-      
+
       <!-- Contenu (Purple Header) -->
       <div class="col-head ch-purple">
         <i class="ti ti-file-text ch-icon ch-icon-p" aria-hidden="true"></i>
@@ -882,7 +1203,7 @@
           <div class="ch-q ch-q-p">Quoi transmettre ?</div>
         </div>
       </div>
-      
+
       <!-- Méthode (Teal Header) -->
       <div class="col-head ch-teal">
         <i class="ti ti-tools ch-icon ch-icon-t" aria-hidden="true"></i>
@@ -892,7 +1213,7 @@
           <div class="ch-q ch-q-t">Comment l'animer ?</div>
         </div>
       </div>
-      
+
       <!-- Posture (Amber Header) -->
       <div class="col-head ch-amber">
         <i class="ti ti-user-check ch-icon ch-icon-a" aria-hidden="true"></i>
@@ -913,15 +1234,18 @@
       </div>
       <div class="cell">
         <div class="cell-eg">Ex. : panorama IA, distinctions IA faible/forte, mise en contexte professionnel…</div>
-        <textarea rows="4" placeholder="Ce que l'apprenant doit retenir de cette séquence…" aria-label="Contenu séquence 1.1"></textarea>
+        <textarea rows="4" placeholder="Ce que l'apprenant doit retenir de cette séquence…"
+          aria-label="Contenu séquence 1.1"></textarea>
       </div>
       <div class="cell">
         <div class="cell-eg">Ex. : présentation + échanges, classe inversée possible…</div>
-        <textarea rows="4" placeholder="La méthode choisie dans le scénario — et pourquoi ça marche…" aria-label="Méthode séquence 1.1"></textarea>
+        <textarea rows="4" placeholder="La méthode choisie dans le scénario — et pourquoi ça marche…"
+          aria-label="Méthode séquence 1.1"></textarea>
       </div>
       <div class="cell">
         <div class="cell-eg">Ex. : expert qui contextualise, facilitateur qui interroge…</div>
-        <textarea rows="4" placeholder="Quelle posture colle le mieux à cette séquence et pourquoi…" aria-label="Posture séquence 1.1"></textarea>
+        <textarea rows="4" placeholder="Quelle posture colle le mieux à cette séquence et pourquoi…"
+          aria-label="Posture séquence 1.1"></textarea>
       </div>
     </div>
 
@@ -934,15 +1258,18 @@
       </div>
       <div class="cell">
         <div class="cell-eg">Ex. : tâches délégables à l'IA, bonnes/mauvaises pratiques, point légal…</div>
-        <textarea rows="4" placeholder="Ce que l'apprenant doit retenir de cette séquence…" aria-label="Contenu séquence 1.5"></textarea>
+        <textarea rows="4" placeholder="Ce que l'apprenant doit retenir de cette séquence…"
+          aria-label="Contenu séquence 1.5"></textarea>
       </div>
       <div class="cell">
         <div class="cell-eg">Ex. : travaux de réflexion collective, études de cas…</div>
-        <textarea rows="4" placeholder="La méthode choisie dans le scénario — et pourquoi ça marche…" aria-label="Méthode séquence 1.5"></textarea>
+        <textarea rows="4" placeholder="La méthode choisie dans le scénario — et pourquoi ça marche…"
+          aria-label="Méthode séquence 1.5"></textarea>
       </div>
       <div class="cell">
         <div class="cell-eg">Ex. : facilitateur de débat, neutre sur les cas légaux…</div>
-        <textarea rows="4" placeholder="Quelle posture colle le mieux à cette séquence et pourquoi…" aria-label="Posture séquence 1.5"></textarea>
+        <textarea rows="4" placeholder="Quelle posture colle le mieux à cette séquence et pourquoi…"
+          aria-label="Posture séquence 1.5"></textarea>
       </div>
     </div>
 
@@ -955,15 +1282,18 @@
       </div>
       <div class="cell">
         <div class="cell-eg">Ex. : structure ROCCO, bonnes pratiques, logique d'un prompt pertinent…</div>
-        <textarea rows="4" placeholder="Ce que l'apprenant doit retenir de cette séquence…" aria-label="Contenu séquence UF2 prompt"></textarea>
+        <textarea rows="4" placeholder="Ce que l'apprenant doit retenir de cette séquence…"
+          aria-label="Contenu séquence UF2 prompt"></textarea>
       </div>
       <div class="cell">
         <div class="cell-eg">Ex. : démo live, co-construction, ne pas donner de recettes…</div>
-        <textarea rows="4" placeholder="La méthode choisie dans le scénario — et pourquoi ça marche…" aria-label="Méthode séquence UF2 prompt"></textarea>
+        <textarea rows="4" placeholder="La méthode choisie dans le scénario — et pourquoi ça marche…"
+          aria-label="Méthode séquence UF2 prompt"></textarea>
       </div>
       <div class="cell">
         <div class="cell-eg">Ex. : praticien qui montre son raisonnement, pair en exploration…</div>
-        <textarea rows="4" placeholder="Quelle posture colle le mieux à cette séquence et pourquoi…" aria-label="Posture séquence UF2 prompt"></textarea>
+        <textarea rows="4" placeholder="Quelle posture colle le mieux à cette séquence et pourquoi…"
+          aria-label="Posture séquence UF2 prompt"></textarea>
       </div>
     </div>
 
@@ -978,71 +1308,237 @@
       <div class="debrief-body">
         <div class="db-col">
           <div class="db-col-label">Points forts identifiés</div>
-          <textarea rows="4" placeholder="Ce que les groupes ont bien vu…" aria-label="Points forts plénière"></textarea>
+          <textarea rows="4" placeholder="Ce que les groupes ont bien vu…"
+            aria-label="Points forts plénière"></textarea>
         </div>
         <div class="db-col">
           <div class="db-col-label">Zones de flou à clarifier</div>
-          <textarea rows="4" placeholder="Ce qui nécessite un recadrage ou un approfondissement…" aria-label="Zones de flou plénière"></textarea>
+          <textarea rows="4" placeholder="Ce qui nécessite un recadrage ou un approfondissement…"
+            aria-label="Zones de flou plénière"></textarea>
         </div>
         <div class="db-col">
           <div class="db-col-label">Point posture à insister</div>
-          <textarea rows="4" placeholder="La dimension souvent sous-estimée à mettre en lumière…" aria-label="Point posture plénière"></textarea>
+          <textarea rows="4" placeholder="La dimension souvent sous-estimée à mettre en lumière…"
+            aria-label="Point posture plénière"></textarea>
         </div>
       </div>
     </div>
 
+    <!-- PART 5 -->
+    <div class="section-title">
+      <i class="ti ti-edit" aria-hidden="true"></i>Validation & Signature
+    </div>
+
+    <div class="signature-block">
+      <div class="signature-grid">
+        <div class="signature-col">
+          <div class="signature-label">Signature</div>
+          <div class="signature-pad-wrapper">
+            <canvas class="signature-pad" id="signature-pad"></canvas>
+            <div class="signature-pad-controls">
+              <button type="button" class="signature-btn clear" onclick="clearSignature()">
+                <i class="ti ti-trash" aria-hidden="true"></i> Effacer
+              </button>
+              <button type="button" class="signature-btn save" onclick="saveSignature()">
+                <i class="ti ti-circle-check" aria-hidden="true"></i> Enregistrer
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div class="signature-col date-col">
+          <div class="id-field">
+            <span class="field-label">Date de signature</span>
+            <input type="text" class="field-line" placeholder="__/__/____" id="signature-date" />
+          </div>
+          <div class="signature-info-box">
+            <i class="ti ti-info-circle" aria-hidden="true"></i>
+            <p>Cette signature atteste que vous avez complété cette fiche sur la méthode / Posture.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const canvas = document.getElementById('signature-pad');
+        const ctx = canvas.getContext('2d');
+        let isDrawing = false;
+        let lastX = 0;
+        let lastY = 0;
+        let ratio = Math.max(window.devicePixelRatio || 1, 1);
+
+        // Fonction optimisée pour le redimensionnement du canvas
+        function resizeCanvas() {
+          const rect = canvas.getBoundingClientRect();
+          canvas.width = rect.width * ratio;
+          canvas.height = rect.height * ratio;
+          canvas.style.width = rect.width + 'px';
+          canvas.style.height = rect.height + 'px';
+          ctx.scale(ratio, ratio);
+          ctx.lineWidth = 2;
+          ctx.lineCap = 'round';
+          ctx.strokeStyle = '#0f172a';
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+        }
+
+        // Initialisation du canvas
+        function initCanvas() {
+          // Utilisation de ResizeObserver pour une meilleure gestion du redimensionnement
+          const resizeObserver = new ResizeObserver(() => {
+            resizeCanvas();
+            // Recharger la signature après redimensionnement
+            const savedSignature = localStorage.getItem('signatureData');
+            if (savedSignature) {
+              const img = new Image();
+              img.onload = function () {
+                ctx.drawImage(img, 0, 0, canvas.width / ratio, canvas.height / ratio);
+              };
+              img.src = savedSignature;
+            }
+          });
+
+          resizeObserver.observe(canvas);
+          resizeCanvas();
+        }
+
+        // Fonctions de dessin optimisées
+        function startDrawing(e) {
+          isDrawing = true;
+          const rect = canvas.getBoundingClientRect();
+          lastX = (e.clientX || e.touches[0].clientX) - rect.left;
+          lastY = (e.clientY || e.touches[0].clientY) - rect.top;
+        }
+
+        function draw(e) {
+          if (!isDrawing) return;
+          const rect = canvas.getBoundingClientRect();
+          const currentX = (e.clientX || e.touches[0].clientX) - rect.left;
+          const currentY = (e.clientY || e.touches[0].clientY) - rect.top;
+
+          ctx.beginPath();
+          ctx.moveTo(lastX, lastY);
+          ctx.lineTo(currentX, currentY);
+          ctx.stroke();
+          [lastX, lastY] = [currentX, currentY];
+        }
+
+        function stopDrawing() {
+          isDrawing = false;
+        }
+
+        // Gestion des événements avec optimisation
+        canvas.addEventListener('mousedown', startDrawing);
+        canvas.addEventListener('mousemove', draw);
+        canvas.addEventListener('mouseup', stopDrawing);
+        canvas.addEventListener('mouseout', stopDrawing);
+
+        canvas.addEventListener('touchstart', function (e) {
+          e.preventDefault();
+          startDrawing(e);
+        }, { passive: false });
+
+        canvas.addEventListener('touchmove', function (e) {
+          e.preventDefault();
+          draw(e);
+        }, { passive: false });
+
+        canvas.addEventListener('touchend', stopDrawing);
+
+        // Fonctions de gestion de la signature
+        window.clearSignature = function () {
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+          localStorage.removeItem('signatureData');
+        };
+
+        window.saveSignature = function () {
+          const signatureData = canvas.toDataURL('image/png');
+          localStorage.setItem('signatureData', signatureData);
+          return signatureData;
+        };
+
+        // Chargement de la signature sauvegardée
+        const savedSignature = localStorage.getItem('signatureData');
+        if (savedSignature) {
+          const img = new Image();
+          img.onload = function () {
+            ctx.drawImage(img, 0, 0, canvas.width / ratio, canvas.height / ratio);
+          };
+          img.src = savedSignature;
+        }
+
+        // Gestion de la date de signature
+        const signatureDate = document.getElementById('signature-date');
+        const savedDate = localStorage.getItem('signatureDate');
+        if (savedDate) signatureDate.value = savedDate;
+
+        signatureDate.addEventListener('input', () => {
+          localStorage.setItem('signatureDate', signatureDate.value);
+        });
+
+        // Initialisation finale
+        initCanvas();
+      });
+    </script>
+
+
     <!-- Footer Area with instructions & CTAs -->
     <div class="footer-row">
-      <div class="foot-note">Durée totale activité : 10 min breakout + 15 min restitution (5 min / groupe). Le minuteur compte le temps de travail en sous-groupe.</div>
+      <div class="foot-note">Durée totale activité : 10 min breakout + 15 min restitution (5 min / groupe). Le minuteur
+        compte le temps de travail en sous-groupe.</div>
       <div class="foot-btns">
-        <button class="fbtn fbtn-reset" onclick="clearAll()"><i class="ti ti-eraser" aria-hidden="true"></i>Effacer tout</button>
-        <button class="fbtn fbtn-print" onclick="window.print()"><i class="ti ti-printer" aria-hidden="true"></i>Imprimer la grille</button>
+        <button class="fbtn fbtn-reset" onclick="clearAll()"><i class="ti ti-eraser" aria-hidden="true"></i>Effacer
+          tout</button>
+        <button class="fbtn fbtn-print" onclick="window.print()"><i class="ti ti-printer"
+            aria-hidden="true"></i>Imprimer la grille</button>
       </div>
     </div>
 
   </div>
 
+
+
   <script>
     // Timer Logic
     let secs = 600, interval = null;
-    
-    function fmt(s) { 
-      const m = Math.floor(s / 60), ss = s % 60; 
-      return String(m).padStart(2, '0') + ':' + String(ss).padStart(2, '0'); 
+
+    function fmt(s) {
+      const m = Math.floor(s / 60), ss = s % 60;
+      return String(m).padStart(2, '0') + ':' + String(ss).padStart(2, '0');
     }
-    
-    function render() { 
-      document.getElementById('timer-display').textContent = fmt(secs); 
+
+    function render() {
+      document.getElementById('timer-display').textContent = fmt(secs);
     }
-    
-    function startTimer() { 
-      if (interval) return; 
+
+    function startTimer() {
+      if (interval) return;
       document.getElementById('timer-widget').classList.add('ticking');
-      interval = setInterval(() => { 
-        if (secs <= 0) { 
-          clearInterval(interval); 
-          interval = null; 
+      interval = setInterval(() => {
+        if (secs <= 0) {
+          clearInterval(interval);
+          interval = null;
           document.getElementById('timer-widget').classList.remove('ticking');
-          document.getElementById('timer-display').textContent = 'Temps !'; 
-          return; 
-        } 
-        secs--; 
-        render(); 
-      }, 1000); 
+          document.getElementById('timer-display').textContent = 'Temps !';
+          return;
+        }
+        secs--;
+        render();
+      }, 1000);
     }
-    
-    function pauseTimer() { 
-      clearInterval(interval); 
-      interval = null; 
+
+    function pauseTimer() {
+      clearInterval(interval);
+      interval = null;
       document.getElementById('timer-widget').classList.remove('ticking');
     }
-    
-    function resetTimer() { 
-      clearInterval(interval); 
-      interval = null; 
-      secs = 600; 
+
+    function resetTimer() {
+      clearInterval(interval);
+      interval = null;
+      secs = 600;
       document.getElementById('timer-widget').classList.remove('ticking');
-      render(); 
+      render();
     }
 
     // LocalStorage Auto-save & Load Logic
@@ -1051,15 +1547,15 @@
       // Load saved values
       const savedVal = localStorage.getItem(`textarea_triptyque_${index}`);
       if (savedVal) t.value = savedVal;
-      
+
       // Auto-save on input
       t.addEventListener('input', () => {
         localStorage.setItem(`textarea_triptyque_${index}`, t.value);
       });
     });
 
-    function clearAll() { 
-      if (!confirm('Effacer toutes les saisies de la grille ?')) return; 
+    function clearAll() {
+      if (!confirm('Effacer toutes les saisies de la grille ?')) return;
       textareas.forEach((t, index) => {
         t.value = '';
         localStorage.removeItem(`textarea_triptyque_${index}`);