diff --git a/public/styles/styleAccueil.css b/public/styles/styleAccueil.css
index c1b8103..0770632 100644
--- a/public/styles/styleAccueil.css
+++ b/public/styles/styleAccueil.css
@@ -5,7 +5,7 @@
 /* Citation du jour */
 
 .citation-du-jour {
-    width: 96.5vw;  
+    width: 96.66vw;  
     padding: 0;
     margin-left: 1.25vw;
     overflow: hidden;
diff --git a/public/styles/styleQuiz.css b/public/styles/styleQuiz.css
index 85e277a..8b837e3 100644
--- a/public/styles/styleQuiz.css
+++ b/public/styles/styleQuiz.css
@@ -14,10 +14,6 @@ body.dark-mode .answer {
     color: var(--main-dark-text-color);
 }
 
-body.dark-mode .answer:hover {
-    background: #1b0048;
-}
-
 body.dark-mode .submit-button {
     text-align: center;
     margin-top: 80px;
@@ -51,10 +47,6 @@ body.light-mode .answer {
     color: var(--main-light-text-color);
 }
 
-body.light-mode .answer:hover {
-    background: #7c7c7c;
-}
-
 /* ====== ECRAN DEFAUT ====== */
 
 h1, h2, p {
@@ -90,6 +82,11 @@ h1, h2, p {
     cursor: pointer;
 }
 
+.answer:hover {
+    transform: scale(1.1);
+    transition: transform 0.3s ease-in-out;
+}
+
 #timer{
     width: 20vw;
     display: block;
diff --git a/public/styles/styleQuote.css b/public/styles/styleQuote.css
index b058faf..cdb801c 100644
--- a/public/styles/styleQuote.css
+++ b/public/styles/styleQuote.css
@@ -4,80 +4,60 @@
 
 body.dark-mode .card {
     background-color: var(--main-dark-other-color);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
-
-body.dark-mode .card-content {
-    color: var(--main-dark-text-color);
-}
-
-
-body.dark-mode .likes {
-    font-size: 20px;
+body.dark-mode .card-content,
+body.dark-mode .likes,
+body.dark-mode .like-icon,
+body.dark-mode .share-icon,
+body.dark-mode .likeLien {
     color: var(--main-dark-text-color);
 }
 
-body.dark-mode .like-icon {
-    color: var(--main-dark-text-color);
-    cursor: pointer;
-}
-
+body.dark-mode .like-icon,
 body.dark-mode .share-icon {
-    color: var(--main-dark-text-color);
     cursor: pointer;
 }
 
-body.dark-mode .commentaire{
-    background-color:  var(--main-dark-other-color);
-}
-
-body.dark-mode .likeLien{
-    color: var(--main-dark-text-color);
+body.dark-mode .commentaire {
+    background-color: var(--main-dark-other-color);
 }
 
 /* ====== LIGHT MODE ====== */
 
 body.light-mode .card {
     background-color: var(--main-light-other-color);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
-body.light-mode .card-content {
-    color: var(--main-light-text-color);
-}
-
-
-body.light-mode .likes {
-    font-size: 20px;
-    color: var(--main-light-text-color);
-}
-
-body.light-mode .like-icon {
+body.light-mode .card-content,
+body.light-mode .likes,
+body.light-mode .like-icon,
+body.light-mode .share-icon,
+body.light-mode .likeLien {
     color: var(--main-light-text-color);
-    cursor: pointer;
 }
 
+body.light-mode .like-icon,
 body.light-mode .share-icon {
-    color: var(--main-light-text-color);
     cursor: pointer;
 }
 
-body.light-mode .commentaire{
+body.light-mode .commentaire {
     background-color: var(--main-light-other-color);
 }
 
-body.light-mode .likeLien{
-    color: var(--main-light-text-color);
-}
-
-body.light-mode .like-icon-none img{
+body.light-mode .like-icon-none img {
     filter: invert(100%);
 }
 
 /* ====== DEFAULT ====== */
 
-.central_container{
+.central_container {
     display: flex;
     justify-content: space-around;
+    padding: 2vh;
 }
 
 .card {
@@ -87,9 +67,10 @@ body.light-mode .like-icon-none img{
     height: 70vh;
     display: flex;
     flex-direction: column;
+    overflow: hidden;
 }
 
-.commentaire{
+.commentaire {
     margin-top: 5vh;
     border-radius: 15px;
     width: 25vw;
@@ -97,7 +78,7 @@ body.light-mode .like-icon-none img{
     display: flex;
     padding: 1vh;
     flex-direction: column;
-    flex-wrap: nowrap;
+    overflow: hidden;
 }
 
 .infoQuote {
@@ -105,6 +86,7 @@ body.light-mode .like-icon-none img{
     font-size: 25px;
     line-height: 40px;
 }
+
 .card-image {
     border-radius: 10px;
     width: 20vw;
@@ -119,17 +101,18 @@ body.light-mode .like-icon-none img{
     font-style: italic;
 }
 
-.comAdd{
-    width : 21vw;
-    height : 5vh;
+.comAdd {
+    width: 21vw;
+    height: 5vh;
     padding-left: 1vh;
     border: none;
     border-radius: 20px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.btn{
-    width : 5vh;
-    height : 5vh;
+.btn {
+    width: 5vh;
+    height: 5vh;
     padding-left: 1vh;
     border: none;
     border-radius: 50px;
@@ -137,14 +120,16 @@ body.light-mode .like-icon-none img{
     background-image: url(../images/icons8-envoyer-24.png);
     background-repeat: no-repeat;
     background-position: center;
+    cursor: pointer;
 }
 
-.formulaire{
-    display : flex;
+.formulaire {
+    display: flex;
     flex-direction: row;
+    align-items: center;
 }
 
-.comment_section{
+.comment_section {
     margin-top: 2vh;
     display: flex;
     flex-direction: column;
@@ -153,25 +138,25 @@ body.light-mode .like-icon-none img{
 }
 
 .comment_section::-webkit-scrollbar {
-    width: 8px; /* Largeur de la scrollbar */
+    width: 8px;
 }
-  
+
 .comment_section::-webkit-scrollbar-track {
-    background: #f1f1f1; /* Couleur de fond */
-    border-radius: 8px; /* Arrondi pour modernité */
+    background: #f1f1f1;
+    border-radius: 8px;
 }
-  
+
 .comment_section::-webkit-scrollbar-thumb {
-    background-color: #888; /* Couleur du "curseur" */
-    border-radius: 8px; /* Arrondi du curseur */
-    border: 2px solid #f1f1f1; /* Petit espace autour pour l'effet moderne */
+    background-color: #888;
+    border-radius: 8px;
+    border: 2px solid #f1f1f1;
 }
-  
-  .comment_section::-webkit-scrollbar-thumb:hover {
-    background-color: #555; /* Couleur au survol */
+
+.comment_section::-webkit-scrollbar-thumb:hover {
+    background-color: #555;
 }
 
-.com{
+.com {
     background-color: #fff;
     color: black;
     display: flex;
@@ -179,67 +164,63 @@ body.light-mode .like-icon-none img{
     flex-direction: column;
     margin-bottom: 1vh;
     border-radius: 20px;
-    padding : 2%;
+    padding: 2%;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.date{
+.date {
     margin-bottom: 0.5vh;
     font-size: small;
+    color: #888;
 }
 
-.icons{
+.icons {
     margin: 2vh;
+    display: flex;
+    justify-content: space-around;
 }
 
-.like-icon{
+.like-icon,
+.like-icon-none {
     height: 5vh;
     margin-bottom: 2vh;
 }
 
-.like-icon img{
+.like-icon img,
+.like-icon-none img {
     height: 5vh;
     width: 5vh;
 }
 
-.like-icon-none img{
-    height: 5vh;
-    width: 5vh;
-}
-
-.like-icon-none{
-    height: 5vh;
-    margin-bottom: 2vh;
-}
-
-.share-icon{
+.share-icon {
     font-size: 50px;
 }
 
-.part1{
+.part1,
+.part2 {
     display: flex;
 }
 
-.part2{
-    display: flex;
+.part2 {
     justify-content: space-between;
 }
 
-.likes{
-    align-self: self-end;
+.likes {
+    align-self: flex-end;
     padding: 2vh;
 }
 
-.infoQuote{
+.infoQuote {
     margin-bottom: 2vh;
     height: 31vh;
 }
 
-.userName{
+.userName {
     font-size: large;
     display: inline-block;
 }
 
-.infCom{
+.infCom {
     display: flex;
     justify-content: space-between;
     margin-bottom: -5px;
@@ -254,47 +235,38 @@ body.light-mode .like-icon-none img{
     border: #000 solid 1.5px;
 }
 
-.imgIcones{
+.imgIcones {
     display: flex;
     align-items: center;
 }
 
-.comAdd :focus {
+.comAdd:focus {
     outline: none;
-    box-shadow: none;
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
 }
 
-.likeLien{
+.likeLien {
     text-decoration: none;
 }
 
-.card-content{
+.card-content {
     margin-left: 20px;
     flex: 1;
 }
 
-.like-icon-none{
-    height: 5vh;
-    margin-bottom: 2vh;
-}
-
-.like-icon-none img{
-    height: 5vh;
-}
-
-@media (max-width: 834px) or (max-aspect-ratio : 1/1){
-    .central_container{
+@media (max-width: 834px), (max-aspect-ratio: 1/1) {
+    .central_container {
         flex-direction: column;
     }
 
     .card {
-        margin : auto;
+        margin: auto;
         margin-bottom: 1vh;
         width: 85vw;
         height: 50vh;
     }
 
-    .commentaire{
+    .commentaire {
         margin-top: 1vh;
         margin: auto;
         width: 83vw;
@@ -302,7 +274,6 @@ body.light-mode .like-icon-none img{
     }
 
     .infoQuote {
-        list-style: none;
         font-size: 20px;
         line-height: 30px;
     }
@@ -316,58 +287,47 @@ body.light-mode .like-icon-none img{
         font-size: 25px;
     }
 
-    .btn{
-        width : 5vh;
-        height : 5vh;
+    .btn {
+        width: 5vh;
+        height: 5vh;
     }
-    
-    .com{
-        display: flex;
-        flex-direction: column;
+
+    .com {
         margin-top: 0.5vh;
         margin-bottom: 0.5vh;
-        padding : 2vh;
+        padding: 2vh;
     }
-    
-    .icons{
+
+    .icons {
         margin: 2vh;
     }
 
-    .like-icon{
+    .like-icon,
+    .like-icon-none {
         height: 3vh;
     }
-    
-    .like-icon img{
-        height: 3vh;
-        width: 5vh;
-    }
-    
-    .like-icon-none img{
+
+    .like-icon img,
+    .like-icon-none img {
         height: 3vh;
         width: 3vh;
     }
-    
-    .like-icon-none{
-        height: 3vh;
-    }    
-    
-    .share-icon{
+
+    .share-icon {
         font-size: 35px;
     }
 
-    .likes{
-        align-self: self-end;
+    .likes {
         padding: 2vh;
     }
-    
-    .infoQuote{
+
+    .infoQuote {
         margin: 2vh;
         height: 21vh;
     }
 
-    #content{
+    #content {
         width: 75vw;
         height: 5vw;
     }
-    
-}
\ No newline at end of file
+}
diff --git a/public/styles/styleQuoteLittle.css b/public/styles/styleQuoteLittle.css
index 14ad6d6..e285d3f 100644
--- a/public/styles/styleQuoteLittle.css
+++ b/public/styles/styleQuoteLittle.css
@@ -41,7 +41,7 @@ a.link-citation:hover {
 
 a.link-citation {
     text-decoration: none;
-    width: 47.5%;
+    width: 47.5vw;
     height: 100%;
     transition: transform 0.3s ease;
 }
diff --git a/vue/templates/bandeau.html.twig b/vue/templates/bandeau.html.twig
index 25268b8..72b8f7a 100644
--- a/vue/templates/bandeau.html.twig
+++ b/vue/templates/bandeau.html.twig
@@ -6,7 +6,7 @@
  
     </div>
     <div class="logo">
-        <a href="{{ racine }}/"><img src="{{ racine }}/images/WIKIFANTASY.png" alt="Logo" onmousedown="return false"></a>
+            <a href="{{ racine }}/"><img src="{{ racine }}/images/WIKIFANTASY.png" alt="Logo" onmousedown="return false"></a>
     </div>
 
     <div class="user">