Harmonise le jeu Memory avec le style ambre du site et corrige le titre

Le jeu utilisait le teal comme couleur dominante (titres, bordures,
boutons, cartes) alors que le reste du site n'emploie le teal que
ponctuellement (état de succès) et repose sur l'ambre comme couleur
principale. Remplace toutes les références teal par l'ambre déjà
défini dans header-style.css, et réaffecte le teal à son rôle habituel
de couleur de succès (paire trouvée), à la place du vert générique
utilisé jusqu'ici.

Renomme aussi le titre en "Memory pictogrammes", augmente la marge
sous le header pour éviter tout chevauchement, et ajoute un paramètre
de version aux feuilles de style du jeu pour éviter les soucis de
cache navigateur lors des prochaines mises à jour.
This commit is contained in:
2026-07-07 17:23:57 +02:00
parent 75c5a1ac84
commit 9140d2f468
5 changed files with 81 additions and 81 deletions

View File

@@ -16,7 +16,7 @@
color: var(--text);
margin: 0 auto 32px;
padding-bottom: 12px;
border-bottom: 3px solid var(--teal-mid);
border-bottom: 3px solid var(--amber-mid);
display: inline-block;
}
@@ -34,7 +34,7 @@
.tab-btn {
padding: 10px 20px;
background: var(--white);
border: 2px solid var(--teal-light);
border: 2px solid var(--amber-light);
border-radius: 8px;
font-family: 'Syne', sans-serif;
font-size: 12px;
@@ -47,13 +47,13 @@
}
.tab-btn:hover {
border-color: var(--teal-mid);
color: var(--teal-mid);
border-color: var(--amber-mid);
color: var(--amber-mid);
}
.tab-btn.active {
background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark));
border-color: var(--teal-dark);
background: linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
border-color: var(--amber-dark);
color: var(--white);
box-shadow: var(--shadow-md);
}
@@ -62,10 +62,10 @@
LEADERBOARD LIST
============================================ */
.leaderboard {
background: linear-gradient(135deg, var(--teal-light), var(--white));
background: linear-gradient(135deg, var(--amber-light), var(--white));
border-radius: 12px;
padding: 24px;
border: 2px solid var(--teal-mid);
border: 2px solid var(--amber-mid);
margin-bottom: 48px;
box-shadow: var(--shadow-sm);
text-align: left;
@@ -86,7 +86,7 @@
padding: 16px;
border-radius: 8px;
transition: all 0.3s ease;
border-left: 4px solid var(--teal-light);
border-left: 4px solid var(--amber-light);
position: relative;
overflow: hidden;
}
@@ -98,14 +98,14 @@
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(29, 158, 117, 0.1), transparent);
background: linear-gradient(90deg, transparent, rgba(186, 117, 23, 0.1), transparent);
transition: left 0.5s ease;
}
.rank-item:hover {
transform: translateX(8px);
box-shadow: 0 4px 12px rgba(15, 110, 86, 0.15);
border-left-color: var(--teal-mid);
box-shadow: 0 4px 12px rgba(186, 117, 23, 0.15);
border-left-color: var(--amber-mid);
}
.rank-item:hover::before {
@@ -116,7 +116,7 @@
.rank-number {
font-weight: 800;
font-size: 18px;
color: var(--teal-mid);
color: var(--amber-mid);
text-align: center;
font-family: 'Syne', sans-serif;
}
@@ -171,7 +171,7 @@
/* Score et difficulté */
.rank-score {
font-weight: 700;
color: var(--teal-dark);
color: var(--amber-dark);
font-size: 18px;
font-family: 'Syne', sans-serif;
min-width: 60px;
@@ -185,8 +185,8 @@
letter-spacing: 0.05em;
padding: 4px 8px;
border-radius: 4px;
background: var(--teal-light);
color: var(--teal-dark);
background: var(--amber-light);
color: var(--amber-dark);
min-width: 60px;
text-align: center;
}
@@ -197,8 +197,8 @@
}
.rank-difficulty.normal {
background: var(--teal-light);
color: var(--teal-dark);
background: var(--amber-light);
color: var(--amber-dark);
}
.rank-difficulty.hard {
@@ -232,17 +232,17 @@
PLAYER STATS SECTION
============================================ */
.player-stats {
background: linear-gradient(135deg, rgba(15, 110, 86, 0.05), transparent);
background: linear-gradient(135deg, rgba(186, 117, 23, 0.05), transparent);
border-radius: 12px;
padding: 24px;
border: 2px solid var(--teal-light);
border: 2px solid var(--amber-light);
}
.player-stats h3 {
font-family: 'Syne', sans-serif;
font-size: 18px;
font-weight: 700;
color: var(--teal);
color: var(--amber);
margin-bottom: 16px;
text-align: center;
}
@@ -255,7 +255,7 @@
.stat-card {
background: var(--white);
border: 2px solid var(--teal-light);
border: 2px solid var(--amber-light);
border-radius: 10px;
padding: 14px 8px;
text-align: center;
@@ -268,7 +268,7 @@
.stat-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--teal-mid);
border-color: var(--amber-mid);
}
.stat-icon {
@@ -288,7 +288,7 @@
.stat-value {
font-size: 20px;
font-weight: 800;
background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark));
background: linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;