texte recouvert par le sticky

index.html

@@ -15,10 +15,9 @@
         <meta property="og:locale" content="fr_FR" />
         <style>
 body {
-    --vph: 100vh;
     display: flex;
     flex-direction: column;
-    min-height: var(--vph);
+    min-height: var(--vph, 100vh);
 }
 
 .material-symbols-outlined {
@@ -28,8 +27,9 @@ body {
 
 @media screen and (min-height: 600px) {
     body {
-        height: var(--vph);
+        height: var(--vph, 100vh);
     }
+
     body > header {
         position: sticky;
         top: 0;
@@ -41,6 +41,7 @@ body {
     
     body > main {
         margin: -5rem;
+        margin-bottom: calc(100vh - 100dvh - 5rem);
         padding: 5rem;
     }
 
@@ -159,13 +160,18 @@ let utterance = null;
 question.onkeydown = function(e) {
     if (e.key === 'Enter' && !e.ctrlKey && !e.shiftKey) {
         e.preventDefault();
+        question.blur();
         e.target.form.requestSubmit();
     }
 };
 
 question.onfocus = function() {
-    window.onresize;
-    question.scrollIntoView({ block: 'start', behavior: 'auto' });
+    window.onresize();
+    formulaire.scrollIntoView({ block: 'end', behavior: 'smooth' });
+};
+
+question.onblur = function() {
+    window.onresize();
 };
 
 formulaire.addEventListener('submit', async (e) => {
@@ -208,7 +214,8 @@ formulaire.addEventListener('submit', async (e) => {
             } else {
                 paragraphe.innerHTML += lettre;
             }
-            paragraphe.scrollIntoView({ block: 'start', behavior: 'auto' });
+            document.scrollingElement.scrollBy({top: window.visualViewport.height, behavior: 'smooth'});
+
         }, t += 100 * Math.random());
     });
     setTimeout(() => {
@@ -216,12 +223,13 @@ formulaire.addEventListener('submit', async (e) => {
         paragraphe.classList.add('reponse');
         paragraphe.innerHTML = 'Voulez-vous que je réponde à une autre question ?';
         conversation.appendChild(paragraphe);
-        paragraphe.scrollIntoView({ block: 'start', behavior: 'auto' });
+        document.scrollingElement.scrollBy({top: window.visualViewport.height, behavior: 'smooth'});
+
         bouton_envoyer.disabled = false;
         bouton_envoyer.setAttribute("aria-busy", false);
         bouton_envoyer.innerHTML = bouton_envoyer_innerHTML;
-        question.focus();
         question.onfocus();
+        question.focus();
     }, t);
 })