gauthier.chombart
cf69373417
L'animation d'entrée (translation + rebond infini du badge) pouvait faire chevaucher le header. Remplacée par une simple apparition sans déplacement vertical, avec plus de marge sous le header. Aligne aussi les rayons d'angle, les ombres et les boutons du jeu sur le langage visuel déjà utilisé ailleurs sur le site (cartes à 12px de rayon, ombres neutres, titre de section souligné, style de bouton partagé depuis header-style.css).
395 lines
8.7 KiB
CSS
395 lines
8.7 KiB
CSS
/* ============================================
|
|
MEMORY PICTOGRAMMES - CSS PRINCIPAL
|
|
NextGN Formation - Gamified Design
|
|
============================================ */
|
|
|
|
:root {
|
|
/* Gamification Colors */
|
|
--success: #4CAF50;
|
|
--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: 64px 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-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--teal-light), var(--white));
|
|
border: 2px solid var(--teal-mid);
|
|
font-size: 30px;
|
|
margin-bottom: 16px;
|
|
box-shadow: var(--shadow-sm);
|
|
animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
.intro-section h1 {
|
|
font-family: 'Syne', sans-serif;
|
|
font-size: clamp(28px, 5vw, 44px);
|
|
font-weight: 800;
|
|
color: var(--teal);
|
|
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(--teal-light), var(--white));
|
|
border-left: 4px solid var(--teal-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(--teal-light);
|
|
background: linear-gradient(135deg, rgba(225, 245, 238, 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(--teal-mid);
|
|
transform: translateY(-3px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.btn-difficulty.active {
|
|
background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark));
|
|
border-color: var(--teal-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(--teal);
|
|
}
|
|
|
|
.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(225, 245, 238, 0.4), transparent);
|
|
border-radius: 12px;
|
|
border: 1px solid var(--teal-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(--teal-mid), var(--teal-dark));
|
|
border: 2px solid var(--teal-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(--teal-light));
|
|
border: 2px solid var(--teal-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(76, 175, 80, 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(--teal-mid), var(--teal-dark));
|
|
color: var(--white);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--white);
|
|
border: 2px solid var(--teal-mid);
|
|
color: var(--teal-mid);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--teal-light);
|
|
border-color: var(--teal-dark);
|
|
}
|
|
|
|
/* ============================================
|
|
RESPONSIVE DESIGN
|
|
============================================ */
|
|
@media (max-width: 768px) {
|
|
main {
|
|
padding: 32px 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: 24px 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;
|
|
}
|
|
}
|