emoji en css

index.html

@@ -63,10 +63,22 @@ body > main {
     flex-grow: 2;
 }
 
-.reponse::before {
+.accroche::before {
     content: "😸 ";
 }
 
+.accroche:nth-of-type(10n+1)::before {
+    content: "😹 ";
+}
+
+.accroche:first-of-type::before {
+    content: "🐱 ";
+}
+
+.erreur::before {
+    content: "😿 ";
+}
+
 #bouton_reconnaissance_vocale {
     position: absolute;
     right: 0;
@@ -100,7 +112,7 @@ body > main {
             </nav>
         </header>
         <main class="container" id="conversation">
-            <p>🐱 Posez-moi toutes vos questions !</p>
+            <p class="accroche">Posez-moi toutes vos questions !</p>
         </main>
         <footer class="container">
             <form id="formulaire" action="question.php" method="post" role="group">
@@ -206,7 +218,8 @@ formulaire.addEventListener('submit', async (e) => {
         paragraphe.setAttribute('aria-busy', 'false');
 
         paragraphe = document.createElement('p');
-        paragraphe.innerHTML = "😿 Je ne suis pas disponible pour le moment. Merci de laisser un message !";
+        paragraphe.className = "erreur"
+        paragraphe.innerHTML = "Je ne suis pas disponible pour le moment. Merci de laisser un message !";
         favicon.href = 'cat-tears.svg';
         conversation.appendChild(paragraphe);
         document.scrollingElement.scrollBy({top: window.visualViewport.height, behavior: 'smooth'});
@@ -245,7 +258,8 @@ formulaire.addEventListener('submit', async (e) => {
     });
     setTimeout(() => {
         const paragraphe = document.createElement('p');
-        paragraphe.innerHTML = (nb_reponses % 5 ? '😸' : '😹') + ' Voulez-vous que je réponde à une autre question ?';
+        paragraphe.className = "accroche"
+        paragraphe.innerHTML = 'Voulez-vous que je réponde à une autre question ?';
         favicon.href = (nb_reponses % 5 ? 'cat-troll.svg' : 'cat-lol.svg');
         conversation.appendChild(paragraphe);
         document.scrollingElement.scrollBy({top: window.visualViewport.height, behavior: 'smooth'});