amélioration générale des styles

assets/css/styles.css

@@ -1,5 +1,5 @@
 /**
- * Styles pour MH Wilds - Partage de Quêtes à Couronnes
+ * Styles améliorés pour MH Wilds - Partage de Quêtes à Couronnes
  */
 
  :root {
@@ -10,6 +10,7 @@
     --mh-light-bg: #4a463f;
     --mh-accent: #e0b968; /* Or des couronnes */
     --mh-accent-hover: #c9a65a;
+    --mh-accent-light: rgba(224, 185, 104, 0.15); /* Version transparente pour fonds subtils */
     --mh-primary: #5a90b1; /* Bleu similaire au thème MH */
     --mh-danger: #e05e4e; /* Rouge pour les alertes */
     --mh-success: #6bc46f; /* Vert pour les succès */
@@ -24,6 +25,7 @@ body {
     display: flex;
     flex-direction: column;
     min-height: 100vh;
+    line-height: 1.6;
 }
 
 .container {
@@ -33,6 +35,17 @@ body {
 /* En-tête et pied de page */
 header, footer {
     background-color: var(--mh-dark-bg);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+header {
+    border-bottom: 2px solid var(--mh-accent);
+    margin-bottom: 2rem;
+}
+
+footer {
+    border-top: 2px solid var(--mh-accent);
+    margin-top: 2rem;
 }
 
 header .btn-outline-light:hover {
@@ -44,6 +57,7 @@ header .btn-outline-light:hover {
 footer a {
     color: var(--mh-accent);
     text-decoration: none;
+    transition: color 0.2s ease;
 }
 
 footer a:hover {
@@ -55,17 +69,38 @@ footer a:hover {
 .card {
     background-color: var(--mh-dark-bg);
     border: none;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-    transition: transform 0.2s ease-in-out;
+    transition: all 0.3s ease-in-out;
     height: 100%;
+    overflow: hidden;
+    border-radius: 8px;
 }
 
 .monster-card {
     cursor: pointer;
+    position: relative;
 }
 
 .monster-card:hover {
     transform: translateY(-5px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
+}
+
+.monster-card:after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: var(--mh-accent);
+    transform: scaleX(0);
+    transition: transform 0.3s ease;
+    transform-origin: center;
+}
+
+.monster-card:hover:after {
+    transform: scaleX(1);
 }
 
 .card-img-container {
@@ -74,6 +109,7 @@ footer a:hover {
     height: 0;
     padding-bottom: 100%;
     background-color: var(--mh-dark);
+    border-bottom: 2px solid rgba(224, 185, 104, 0.3);
 }
 
 .card-img-top {
@@ -83,49 +119,64 @@ footer a:hover {
     width: 100%;
     height: 100%;
     object-fit: cover;
-    transition: transform 0.3s ease;
+    transition: transform 0.5s ease, filter 0.5s ease;
 }
 
 .monster-card:hover .card-img-top {
     transform: scale(1.05);
+    filter: brightness(1.1);
 }
 
 .card-title {
     color: var(--mh-accent);
     font-weight: 600;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+    margin-bottom: 0.75rem;
+    font-size: 1.1rem;
 }
 
 .card-body {
     background-color: var(--mh-dark-bg);
+    padding: 1rem;
 }
 
 .card-header {
     background-color: var(--mh-accent);
     color: var(--mh-dark);
     font-weight: bold;
+    border-bottom: none;
 }
 
 /* Badges de couronnes */
 .crown-badge {
-    display: inline-block;
+    display: inline-flex;
-    padding: 0.25rem 0.5rem;
+    align-items: center;
+    padding: 0.25rem 0.6rem;
     margin-right: 0.5rem;
     border-radius: 0.25rem;
-    font-weight: bold;
+    font-weight: 500;
+    font-size: 0.9rem;
+    transition: all 0.2s ease;
+    border: 1px solid transparent;
+    /* Remplacer les fonds jaunes qui ne correspondent pas au thème */
+    background-color: rgba(224, 185, 104, 0.15);
+    color: var(--mh-accent);
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
 }
 
 .small-crown {
-    background-color: #ffe066;
+    border-color: rgba(224, 185, 104, 0.3);
-    color: #5c4d00;
 }
 
 .large-crown {
-    background-color: #ffd700;
+    border-color: rgba(224, 185, 104, 0.5);
-    color: #5c4d00;
+    background-color: rgba(224, 185, 104, 0.25);
 }
 
 .crown-icon {
-    margin-right: 0.25rem;
+    margin-right: 0.35rem;
+    display: inline-block;
+    transform: translateY(-1px);
 }
 
 /* Boutons et éléments interactifs */
@@ -133,32 +184,42 @@ footer a:hover {
     background-color: var(--mh-accent);
     border-color: var(--mh-accent);
     color: var(--mh-dark);
+    font-weight: 500;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
-.btn-primary:hover {
+.btn-primary:hover, .btn-primary:focus {
     background-color: var(--mh-accent-hover);
     border-color: var(--mh-accent-hover);
     color: var(--mh-dark);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 }
 
 .btn-outline-primary {
     border-color: var(--mh-accent);
     color: var(--mh-accent);
+    transition: all 0.2s ease;
+    font-weight: 500;
 }
 
-.btn-outline-primary:hover {
+/* Correction du problème de bordure bleue au survol */
+.btn-outline-primary:hover, .btn-outline-primary:focus {
     background-color: var(--mh-accent);
+    border-color: var(--mh-accent);
     color: var(--mh-dark);
 }
 
 .btn-outline-accent {
     border-color: var(--mh-accent);
     color: var(--mh-accent);
+    transition: all 0.2s ease;
 }
 
 .btn-outline-accent:hover,
 .btn-check:checked + .btn-outline-accent {
     background-color: var(--mh-accent);
+    border-color: var(--mh-accent);
     color: var(--mh-dark);
 }
 
@@ -167,34 +228,45 @@ footer a:hover {
     border-color: var(--mh-danger);
 }
 
+.btn-danger:hover, .btn-danger:focus {
+    background-color: #c95343;
+    border-color: #c95343;
+}
+
 /* Modales */
 .modal-content {
     background-color: var(--mh-dark-bg);
     color: var(--mh-light);
     border: none;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
 }
 
 .modal-header {
-    border-bottom-color: var(--mh-dark);
+    border-bottom-color: rgba(224, 185, 104, 0.2);
+    padding: 1rem 1.5rem;
 }
 
 .modal-footer {
-    border-top-color: var(--mh-dark);
+    border-top-color: rgba(224, 185, 104, 0.2);
+    padding: 1rem 1.5rem;
 }
 
 .modal-title {
     color: var(--mh-accent);
+    font-weight: 600;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
 }
 
 /* Formulaires */
 .form-control, .form-select, .input-group-text {
     background-color: var(--mh-light-bg);
-    border-color: var(--mh-dark);
+    border-color: rgba(0, 0, 0, 0.2);
     color: var(--mh-light);
+    transition: all 0.2s ease;
 }
 
 .form-control:focus, .form-select:focus {
-    background-color: var(--mh-light-bg);
+    background-color: rgba(90, 86, 79, 0.8);
     color: var(--mh-light);
     border-color: var(--mh-accent);
     box-shadow: 0 0 0 0.25rem rgba(224, 185, 104, 0.25);
@@ -215,18 +287,21 @@ footer a:hover {
     background-color: var(--mh-light-bg);
     color: var(--mh-light);
     border-color: var(--mh-alert);
+    border-left: 4px solid var(--mh-alert);
 }
 
 .alert-success {
-    background-color: var(--mh-success);
+    background-color: rgba(107, 196, 111, 0.2);
-    color: var(--mh-dark);
+    color: #a9e0ac;
     border-color: var(--mh-success);
+    border-left: 4px solid var(--mh-success);
 }
 
 .alert-danger {
-    background-color: var(--mh-danger);
+    background-color: rgba(224, 94, 78, 0.2);
-    color: var(--mh-dark);
+    color: #f5b3a9;
     border-color: var(--mh-danger);
+    border-left: 4px solid var(--mh-danger);
 }
 
 .empty-message {
@@ -235,6 +310,7 @@ footer a:hover {
     background-color: var(--mh-dark-bg);
     border-radius: 0.375rem;
     margin: 1rem 0;
+    border: 1px dashed rgba(224, 185, 104, 0.3);
 }
 
 /* Animation de fondu */
@@ -250,24 +326,44 @@ footer a:hover {
 /* Styles pour les quêtes */
 .quest-card {
     position: relative;
-    transition: transform 0.2s ease;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    border-left: 3px solid var(--mh-accent);
+    background-color: rgba(58, 54, 47, 0.8);
 }
 
 .quest-card:hover {
     transform: translateY(-3px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+/* Amélioration de la lisibilité du nom du joueur et de son ID */
+.quest-card p {
+    color: var(--mh-light);
+    background-color: rgba(0, 0, 0, 0.15);
+    padding: 0.5rem;
+    border-radius: 4px;
+    margin: 0.75rem 0;
+    font-size: 0.95rem;
+}
+
+.quest-card p strong {
+    color: var(--mh-accent);
+    font-weight: 600;
 }
 
 .quest-date {
     font-size: 0.85rem;
-    color: #aaa;
+    color: rgba(245, 240, 230, 0.6);
     margin-bottom: 0.5rem;
+    font-style: italic;
 }
 
 /* Styles d'administration */
 .list-group-item {
     background-color: var(--mh-dark-bg);
     color: var(--mh-light);
-    border-color: var(--mh-dark);
+    border-color: rgba(0, 0, 0, 0.2);
+    transition: all 0.2s ease;
 }
 
 .list-group-item:hover {
@@ -278,6 +374,7 @@ footer a:hover {
     background-color: var(--mh-accent);
     border-color: var(--mh-accent);
     color: var(--mh-dark);
+    font-weight: 500;
 }
 
 .table {
@@ -296,19 +393,60 @@ footer a:hover {
     font-weight: 500;
 }
 
-/* Page tutoriel */
+/* Page tutoriel - Amélioration de la lisibilité du texte */
+.tutorial-content {
+    line-height: 1.7;
+    letter-spacing: 0.01em;
+}
+
 .tutorial-content h3 {
     color: var(--mh-accent);
-    margin-top: 1.5rem;
+    margin-top: 1.8rem;
+    font-weight: 600;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+    padding-bottom: 0.5rem;
+    border-bottom: 2px solid rgba(224, 185, 104, 0.3);
 }
 
 .tutorial-content h4 {
-    color: var(--mh-primary);
+    color: #8ab5d0; /* Couleur plus claire dérivée de --mh-primary */
-    margin-top: 1.25rem;
+    margin-top: 1.5rem;
+    font-weight: 500;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+}
+
+.tutorial-content p, .tutorial-content li {
+    color: rgba(245, 240, 230, 0.9); /* Version légèrement atténuée de --mh-light */
+    margin-bottom: 1rem;
 }
 
 .tutorial-content ul {
     margin-bottom: 1.5rem;
+    padding-left: 1.5rem;
+}
+
+.tutorial-content ul li {
+    margin-bottom: 0.5rem;
+    position: relative;
+}
+
+.tutorial-content ul li::before {
+    content: '•';
+    color: var(--mh-accent);
+    font-weight: bold;
+    display: inline-block;
+    width: 1em;
+    margin-left: -1em;
+}
+
+.tutorial-content hr {
+    border-color: rgba(224, 185, 104, 0.2);
+    margin: 2rem 0;
+}
+
+.tutorial-content .alert {
+    background-color: rgba(90, 144, 177, 0.15);
+    border-left: 4px solid var(--mh-primary);
 }
 
 /* Styles de responsive */
@@ -325,4 +463,62 @@ footer a:hover {
         padding: 0.15rem 0.3rem;
         font-size: 0.85rem;
     }
+
+    .tutorial-content h3 {
+        font-size: 1.4rem;
+    }
+
+    .tutorial-content h4 {
+        font-size: 1.2rem;
+    }
+}
+
+/* Monster search in add quest modal */
+.monster-search-container {
+    position: relative;
+    margin-bottom: 1rem;
+}
+
+.monster-search-results {
+    position: absolute;
+    width: 100%;
+    max-height: 250px;
+    overflow-y: auto;
+    background-color: var(--mh-light-bg);
+    border: 1px solid var(--mh-accent);
+    border-radius: 0.375rem;
+    z-index: 1050;
+    margin-top: 2px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+.monster-search-item {
+    padding: 10px 14px;
+    cursor: pointer;
+    border-bottom: 1px solid rgba(224, 185, 104, 0.2);
+    color: var(--mh-light);
+    transition: all 0.2s ease;
+}
+
+.monster-search-item:hover,
+.monster-search-item.active {
+    background-color: rgba(224, 185, 104, 0.15);
+    color: var(--mh-accent);
+}
+
+.monster-search-item:last-child {
+    border-bottom: none;
+}
+
+.selected-monster {
+    font-weight: bold;
+    color: var(--mh-accent);
+}
+
+.monster-search-no-results {
+    padding: 12px;
+    text-align: center;
+    color: var(--mh-light);
+    font-style: italic;
+    background-color: rgba(0, 0, 0, 0.2);
 }