gauthier.chombart
9140d2f468
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.
380 lines
8.4 KiB
CSS
380 lines
8.4 KiB
CSS
/* ============================================
|
|
MEMORY PICTOGRAMMES - CSS PRINCIPAL
|
|
NextGN Formation - Gamified Design
|
|
============================================ */
|
|
|
|
:root {
|
|
/* Gamification Colors */
|
|
--success: var(--teal-mid);
|
|
--warning: #FF9800;
|
|
--info: #2196F3;
|
|
--accent: #FFD700;
|
|
|
|
/* Shadows (alignées sur le langage visuel du site) */
|
|
--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 12px 32px rgba(0, 0, 0, 0.1);
|
|
--shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* ============================================
|
|
MAIN LAYOUT
|
|
============================================ */
|
|
main {
|
|
margin-top: 70px;
|
|
padding: 96px 40px 40px;
|
|
min-height: calc(100vh - 70px);
|
|
}
|
|
|
|
.game-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* ============================================
|
|
INTRO SECTION
|
|
============================================ */
|
|
.intro-section {
|
|
margin-bottom: 48px;
|
|
animation: fadeIn 0.6s ease-out;
|
|
text-align: center;
|
|
}
|
|
|
|
.intro-section h1 {
|
|
font-family: 'Syne', sans-serif;
|
|
font-size: clamp(28px, 5vw, 44px);
|
|
font-weight: 800;
|
|
color: var(--amber);
|
|
margin-bottom: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.intro-section .subtitle {
|
|
font-size: 18px;
|
|
color: var(--text-muted);
|
|
text-align: center;
|
|
margin-bottom: 24px;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.intro-box {
|
|
background: linear-gradient(135deg, var(--amber-light), var(--white));
|
|
border-left: 4px solid var(--amber-mid);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
font-size: 0.95em;
|
|
color: var(--text-muted);
|
|
line-height: 1.6;
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ============================================
|
|
GAME SECTION / PANEL
|
|
============================================ */
|
|
.game-section {
|
|
margin-bottom: 80px;
|
|
animation: fadeInUp 0.6s ease-out 0.3s both;
|
|
}
|
|
|
|
.game-panel {
|
|
background: var(--white);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
padding: clamp(20px, 4vw, 40px);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
/* ============================================
|
|
DIFFICULTY SELECTOR
|
|
============================================ */
|
|
.difficulty-selector {
|
|
margin-bottom: 32px;
|
|
text-align: center;
|
|
}
|
|
|
|
.difficulty-selector label {
|
|
display: block;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--text-muted);
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.btn-group {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
gap: 12px;
|
|
max-width: 520px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.btn-difficulty {
|
|
background: var(--amber-light);
|
|
background: linear-gradient(135deg, rgba(250, 238, 218, 0.5), transparent);
|
|
border: 2px solid transparent;
|
|
border-radius: 12px;
|
|
padding: 14px 12px;
|
|
font-family: 'Syne', sans-serif;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.btn-difficulty:hover {
|
|
border-color: var(--amber-mid);
|
|
transform: translateY(-3px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.btn-difficulty.active {
|
|
background: linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
|
|
border-color: var(--amber-dark);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.btn-difficulty.active .btn-label,
|
|
.btn-difficulty.active .btn-desc {
|
|
color: var(--white);
|
|
}
|
|
|
|
.btn-icon {
|
|
font-size: 20px;
|
|
line-height: 1;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.btn-label {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: var(--amber);
|
|
}
|
|
|
|
.btn-desc {
|
|
font-size: 11px;
|
|
font-family: 'DM Sans', sans-serif;
|
|
color: var(--text-muted);
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* ============================================
|
|
GAME GRID & CARDS
|
|
============================================ */
|
|
.game-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(clamp(70px, 15vw, 140px), 1fr));
|
|
gap: clamp(12px, 2vw, 20px);
|
|
max-width: 900px;
|
|
margin: 0 auto 32px;
|
|
padding: 20px;
|
|
background: linear-gradient(135deg, rgba(250, 238, 218, 0.4), transparent);
|
|
border-radius: 12px;
|
|
border: 1px solid var(--amber-light);
|
|
}
|
|
|
|
/* MEMORY CARD STYLES */
|
|
.memory-card {
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
cursor: pointer;
|
|
perspective: 1000px;
|
|
transform-style: preserve-3d;
|
|
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Card Front (Couverture) */
|
|
.card-face {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
backface-visibility: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 12px;
|
|
font-weight: bold;
|
|
font-family: 'Syne', sans-serif;
|
|
font-size: clamp(32px, 8vw, 56px);
|
|
}
|
|
|
|
.card-face.front {
|
|
background:
|
|
radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.6), transparent 60%),
|
|
linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
|
|
border: 2px solid var(--amber-dark);
|
|
color: var(--white);
|
|
box-shadow: var(--shadow-sm);
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.card-face.back {
|
|
transform: rotateY(180deg);
|
|
background: linear-gradient(135deg, var(--white), var(--amber-light));
|
|
border: 2px solid var(--amber-mid);
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding: 8px;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.card-face.back img {
|
|
max-width: 70%;
|
|
max-height: 60%;
|
|
object-fit: contain;
|
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
|
|
}
|
|
|
|
.card-face.back span {
|
|
font-size: clamp(10px, 2vw, 13px);
|
|
text-align: center;
|
|
font-weight: 500;
|
|
line-height: 1.2;
|
|
color: var(--text);
|
|
font-family: 'DM Sans', sans-serif;
|
|
}
|
|
|
|
/* Card States */
|
|
.memory-card:hover:not(.matched):not(.disabled) {
|
|
transform: translateY(-8px) scale(1.05);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.memory-card.flipped .card-face.front {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.memory-card.flipped .card-face.back {
|
|
transform: rotateY(0deg);
|
|
}
|
|
|
|
.memory-card.matched {
|
|
animation: matchSuccess 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
cursor: default;
|
|
}
|
|
|
|
.memory-card.matched .card-face.front {
|
|
background: linear-gradient(135deg, var(--success), var(--success));
|
|
border-color: var(--success);
|
|
color: var(--white);
|
|
}
|
|
|
|
.memory-card.matched .card-face.back {
|
|
background: linear-gradient(135deg, var(--white), rgba(29, 158, 117, 0.2));
|
|
border-color: var(--success);
|
|
}
|
|
|
|
.memory-card.error {
|
|
animation: cardShake 0.4s ease-in-out;
|
|
}
|
|
|
|
.memory-card.disabled {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ============================================
|
|
FOOTER
|
|
============================================ */
|
|
footer {
|
|
background: var(--text);
|
|
color: var(--white);
|
|
padding: 40px;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
margin-top: 80px;
|
|
}
|
|
|
|
/* ============================================
|
|
BUTTONS (métriques héritées du style général du site)
|
|
============================================ */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
|
|
color: var(--white);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--white);
|
|
border: 2px solid var(--amber-mid);
|
|
color: var(--amber-mid);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--amber-light);
|
|
border-color: var(--amber-dark);
|
|
}
|
|
|
|
/* ============================================
|
|
RESPONSIVE DESIGN
|
|
============================================ */
|
|
@media (max-width: 768px) {
|
|
main {
|
|
padding: 56px 20px 20px;
|
|
}
|
|
|
|
.intro-section h1 {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.game-grid {
|
|
gap: 12px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.game-controls {
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.game-controls .btn {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
footer {
|
|
padding: 24px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
main {
|
|
padding: 40px 16px 16px;
|
|
}
|
|
|
|
.intro-section h1 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.difficulty-selector label {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.btn-group {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.game-hud {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 12px;
|
|
}
|
|
}
|