Gauthier/Site_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Renomme la marque en Gauthier Chombart & Nathan Chauwin et finalise le jeu Memory

Browse Source 
Header, footer, titres et balises meta de toutes les pages actives : remplace NextGN Formation par Gauthier Chombart & Nathan Chauwin. Nouveau pied de page uniforme mentionnant les droits reserves et le statut de formateurs independants (dossier archives/ laisse inchange).

Integre aussi la refonte du jeu Memory (CSS/JS/HUD/leaderboard) et ajoute le rapport de veille Certibiocide semaine 28.
This commit is contained in:
gauthier.chombart
2026-07-14 23:02:09 +02:00
parent 9140d2f468
commit 44be41b2b2
22 changed files with 747 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
exercices/Exo_BioCID.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercices Pratiques BioCID - NextGN Formation</title>
<title>Exercices Pratiques BioCID - Gauthier Chombart & Nathan Chauwin</title>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../header-style.css"/>
<style>
@@ -341,7 +341,7 @@
<body>
<!-- HEADER NAVIGATION -->
<header>
<div class="logo">NextGN Formation</div>
<div class="logo">Gauthier Chombart & Nathan Chauwin</div>
<nav>
<a href="../index.html">Accueil</a>
<a href="../index.html#formations">Exercices</a>
@@ -487,7 +487,7 @@
<footer>
<p><strong>Durée totale estimée :</strong> 30 minutes</p>
<p style="margin-top: 15px;">Pour toute question sur BioCID : <strong>support.biocid@anses.fr</strong></p>
<p style="margin-top: 20px; opacity: 0.7; font-size: 0.9em;">&copy; 2026 NextGN Formation - Exercices BioCID</p>
<p style="margin-top: 20px; opacity: 0.7; font-size: 0.9em;">&copy; 2026 Gauthier Chombart & Nathan Chauwin<br>Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants</p>
<p style="opacity: 0.6; font-size: 0.85em;">Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p>
</footer>
</div>

4
exercices/Exo_FDS.html
View File

@@ -325,7 +325,7 @@
</head>
<body>
<header>
<div class="logo">NextGN Formation</div>
<div class="logo">Gauthier Chombart & Nathan Chauwin</div>
<nav>
<a href="../index.html">Accueil</a>
<a href="../index.html#formations">Exercices</a>
@@ -696,7 +696,7 @@
</div>
<footer>
<p>&copy; 2026 NextGN Formation - Formations Certibiocide & Techniques</p>
<p>&copy; 2026 Gauthier Chombart & Nathan Chauwin<br>Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants</p>
<p style="margin-top: 10px; opacity: 0.6;">Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p>
</footer>
</div>

2
exercices/TP_Nuisibles.html
View File

@@ -633,7 +633,7 @@
<!-- HEADER WITH NAVIGATION -->
<header>
<div class="logo">NextGN Formation</div>
<div class="logo">Gauthier Chombart & Nathan Chauwin</div>
<nav>
<a href="../index.html">Accueil</a>
<a href="../index.html#formations">Exercices</a>

4
exercices/correction-tp-nuisibles.html
View File

@@ -243,7 +243,7 @@ h1 {
</head>
<body>
<header>
<div class="logo">NextGN Formation</div>
<div class="logo">Gauthier Chombart & Nathan Chauwin</div>
<nav>
<a href="../index.html">Accueil</a>
<a href="../index.html#formations">Exercices</a>
@@ -299,7 +299,7 @@ h1 {
</div>
<footer>
<p>&copy; 2026 NextGN Formation - Formations Certibiocide & Techniques</p>
<p>&copy; 2026 Gauthier Chombart & Nathan Chauwin<br>Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants</p>
<p style="margin-top: 10px; opacity: 0.6;">Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p>
</footer>

86
exercices/memory-pictogrammes/assets/css/hud.css
View File

@@ -7,10 +7,9 @@
============================================ */
.game-hud {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
grid-template-columns: repeat(4, minmax(120px, 1fr));
gap: 16px;
margin-bottom: 32px;
animation: fadeInUp 0.6s ease-out 0.4s both;
flex: 1;
}
.stat-box {
@@ -230,6 +229,41 @@
margin-top: 4px;
}
/* ============================================
PLAYER NAME MODAL
============================================ */
.name-modal-content h2 {
margin-top: 32px;
}
.name-modal-text {
color: var(--text-muted);
font-size: 14px;
line-height: 1.5;
margin-bottom: 24px;
position: relative;
z-index: 1;
}
.name-input {
width: 100%;
padding: 14px 16px;
font-size: 16px;
font-family: 'DM Sans', sans-serif;
border: 2px solid var(--amber-mid);
border-radius: 8px;
background: var(--white);
color: var(--text);
text-align: center;
box-sizing: border-box;
}
.name-input:focus {
outline: none;
border-color: var(--amber-dark);
box-shadow: 0 0 0 3px rgba(186, 117, 23, 0.15);
}
/* ============================================
ACHIEVEMENTS
============================================ */
@@ -289,52 +323,6 @@
min-width: 140px;
}
/* ============================================
PAUSE MODAL
============================================ */
.pause-modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1999;
backdrop-filter: blur(5px);
}
.pause-content {
background: var(--white);
border-radius: 12px;
padding: 40px;
text-align: center;
border: 2px solid var(--amber-mid);
animation: slideUp 0.4s ease-out;
}
.pause-content h2 {
font-family: 'Syne', sans-serif;
font-size: 32px;
color: var(--amber);
margin-bottom: 24px;
}
.pause-content .pause-timer {
font-size: 48px;
font-family: 'Syne', sans-serif;
font-weight: 800;
color: var(--amber-dark);
margin-bottom: 24px;
animation: timerTick 0.5s ease-out;
}
.pause-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
/* ============================================
RESPONSIVE DESIGN
============================================ */

122
exercices/memory-pictogrammes/assets/css/leaderboard.css
View File

@@ -2,19 +2,22 @@
LEADERBOARD & PLAYER STATS
============================================ */
.leaderboard-section {
margin-top: 80px;
.leaderboard-panel {
animation: fadeInUp 0.6s ease-out 0.6s both;
text-align: center;
}
.leaderboard-section h2 {
.stats-panel {
animation: fadeInUp 0.6s ease-out 0.6s both;
}
.leaderboard-panel h2 {
font-family: 'Syne', sans-serif;
font-size: clamp(24px, 5vw, 32px);
font-size: clamp(20px, 4vw, 26px);
font-weight: 800;
letter-spacing: -0.5px;
color: var(--text);
margin: 0 auto 32px;
margin: 0 auto 24px;
padding-bottom: 12px;
border-bottom: 3px solid var(--amber-mid);
display: inline-block;
@@ -78,12 +81,11 @@
}
.rank-item {
display: grid;
grid-template-columns: 50px 1fr auto auto;
align-items: center;
gap: 16px;
display: flex;
flex-direction: column;
gap: 8px;
background: var(--white);
padding: 16px;
padding: 14px;
border-radius: 8px;
transition: all 0.3s ease;
border-left: 4px solid var(--amber-light);
@@ -91,6 +93,13 @@
overflow: hidden;
}
.rank-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.rank-item::before {
content: '';
position: absolute;
@@ -121,30 +130,16 @@
font-family: 'Syne', sans-serif;
}
.rank-number.medal-1 {
font-size: 24px;
}
.rank-number.medal-1::before {
content: '🥇';
display: block;
}
.rank-number.medal-2::before {
content: '🥈';
display: block;
font-size: 20px;
}
.rank-number.medal-3::before {
content: '🥉';
display: block;
font-size: 20px;
.rank-number.medal-1,
.rank-number.medal-2,
.rank-number.medal-3 {
font-size: 22px;
}
/* Infos joueur */
.rank-info {
flex: 1;
min-width: 0;
}
.player-name {
@@ -152,13 +147,16 @@
color: var(--text);
margin-bottom: 4px;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rank-meta {
font-size: 12px;
font-size: 11px;
color: var(--text-muted);
display: flex;
gap: 12px;
gap: 10px;
flex-wrap: wrap;
}
@@ -172,38 +170,10 @@
.rank-score {
font-weight: 700;
color: var(--amber-dark);
font-size: 18px;
font-size: 16px;
font-family: 'Syne', sans-serif;
min-width: 60px;
text-align: right;
}
.rank-difficulty {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 4px 8px;
border-radius: 4px;
background: var(--amber-light);
color: var(--amber-dark);
min-width: 60px;
text-align: center;
}
.rank-difficulty.easy {
background: #C8E6C9;
color: #2E7D32;
}
.rank-difficulty.normal {
background: var(--amber-light);
color: var(--amber-dark);
}
.rank-difficulty.hard {
background: #FFCCBC;
color: #D84315;
flex-shrink: 0;
}
/* Message si pas de scores */
@@ -249,7 +219,7 @@
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
@@ -329,28 +299,19 @@
RESPONSIVE DESIGN
============================================ */
@media (max-width: 768px) {
.leaderboard-section h2 {
.leaderboard-panel h2 {
font-size: 24px;
}
.tabs {
gap: 6px;
}
.tab-btn {
padding: 8px 16px;
font-size: 11px;
}
.rank-item {
grid-template-columns: 40px 1fr auto;
gap: 12px;
}
.rank-difficulty {
display: none;
}
.rank-number {
font-size: 16px;
}
@@ -402,17 +363,10 @@
}
.rank-item {
grid-template-columns: 40px 1fr;
gap: 10px;
gap: 8px;
padding: 12px;
}
.rank-score {
grid-column: 1 / -1;
text-align: left;
margin-top: 8px;
}
.rank-number {
font-size: 14px;
}

86
exercices/memory-pictogrammes/assets/css/memory-game.css
View File

@@ -26,7 +26,7 @@ main {
}
.game-container {
max-width: 1200px;
max-width: 1440px;
margin: 0 auto;
}
@@ -70,11 +70,50 @@ main {
text-align: center;
}
/* ============================================
TOP BAR (niveau + stats en temps réel)
============================================ */
.game-top-bar {
max-width: 1440px;
margin: 0 auto 32px;
background: var(--white);
border: 1px solid var(--border);
border-radius: 12px;
padding: 24px clamp(20px, 3vw, 36px);
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(20px, 3vw, 40px);
animation: fadeInUp 0.6s ease-out 0.2s both;
}
/* ============================================
GAME LAYOUT (classement / jeu / stats)
============================================ */
.game-layout {
display: grid;
grid-template-columns: minmax(0, 320px) minmax(0, 760px) minmax(0, 320px);
grid-template-areas: "leaderboard game stats";
justify-content: center;
align-items: start;
gap: 32px;
margin-bottom: 80px;
}
.leaderboard-panel {
grid-area: leaderboard;
}
.stats-panel {
grid-area: stats;
}
/* ============================================
GAME SECTION / PANEL
============================================ */
.game-section {
margin-bottom: 80px;
grid-area: game;
animation: fadeInUp 0.6s ease-out 0.3s both;
}
@@ -82,7 +121,7 @@ main {
background: var(--white);
border: 1px solid var(--border);
border-radius: 12px;
padding: clamp(20px, 4vw, 40px);
padding: clamp(20px, 4vw, 32px);
box-shadow: var(--shadow-sm);
}
@@ -90,8 +129,8 @@ main {
DIFFICULTY SELECTOR
============================================ */
.difficulty-selector {
margin-bottom: 32px;
text-align: center;
text-align: left;
flex-shrink: 0;
}
.difficulty-selector label {
@@ -106,10 +145,8 @@ main {
.btn-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
grid-template-columns: repeat(3, minmax(100px, 1fr));
gap: 12px;
max-width: 520px;
margin: 0 auto;
}
.btn-difficulty {
@@ -168,9 +205,8 @@ main {
============================================ */
.game-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(clamp(70px, 15vw, 140px), 1fr));
gap: clamp(12px, 2vw, 20px);
max-width: 900px;
grid-template-columns: repeat(auto-fit, minmax(clamp(70px, 15vw, 110px), 1fr));
gap: clamp(10px, 2vw, 16px);
margin: 0 auto 32px;
padding: 20px;
background: linear-gradient(135deg, rgba(250, 238, 218, 0.4), transparent);
@@ -325,6 +361,34 @@ footer {
/* ============================================
RESPONSIVE DESIGN
============================================ */
@media (max-width: 1100px) {
.game-layout {
grid-template-columns: 1fr;
grid-template-areas:
"game"
"leaderboard"
"stats";
gap: 40px;
}
}
@media (max-width: 900px) {
.game-top-bar {
flex-direction: column;
align-items: stretch;
gap: 24px;
}
.difficulty-selector {
text-align: center;
}
.btn-group {
max-width: 520px;
margin: 0 auto;
}
}
@media (max-width: 768px) {
main {
padding: 56px 20px 20px;

2
exercices/memory-pictogrammes/assets/js/game-state.js
View File

@@ -175,7 +175,6 @@ class GameSessionState {
this.moves = 0;
this.score = 0;
this.matched = 0;
this.isPaused = false;
this.gameActive = false;
}
@@ -190,7 +189,6 @@ class GameSessionState {
this.score = 0;
this.matched = 0;
this.gameActive = true;
this.isPaused = false;
}
/**

11
exercices/memory-pictogrammes/assets/js/leaderboard.js
View File

@@ -192,17 +192,18 @@ class LeaderboardManager {
const medal = index < 3 ? `class="rank-number medal-${index + 1}"` : 'class="rank-number"';
rankItem.innerHTML = `
<div ${medal}>${rankNumber}</div>
<div class="rank-top">
<div ${medal}>${rankNumber}</div>
<div class="rank-score">${formatNumber(score.score)}</div>
</div>
<div class="rank-info">
<div class="player-name">${this.escapeHTML(score.playerName)}</div>
<div class="rank-meta">
<span>⏱ ${formatTime(score.timeSeconds)}</span>
<span>🎯 ${score.moves} mouvements</span>
${score.isPerfect ? '<span>✨ Parfait</span>' : ''}
<span>🎯 ${score.moves}</span>
${score.isPerfect ? '<span>✨</span>' : ''}
</div>
</div>
<div class="rank-score">${formatNumber(score.score)}</div>
<div class="rank-difficulty ${score.difficulty}">${DIFFICULTY_MODES[score.difficulty].name}</div>
`;
leaderboardList.appendChild(rankItem);

77
exercices/memory-pictogrammes/assets/js/memory-game.js
View File

@@ -14,7 +14,6 @@ class MemoryGameEngine {
moves: 0,
score: 0,
isProcessing: false,
isPaused: false,
gameStarted: false
};
this.startTime = null;
@@ -128,8 +127,7 @@ class MemoryGameEngine {
if (this.gameState.flipped.length === 2) return;
if (this.cards[cardIndex].isMatched) return;
if (this.gameState.flipped.includes(cardIndex)) return;
if (this.gameState.isPaused) return;
// Retourner la carte
this.flipCard(cardIndex);
this.gameState.flipped.push(cardIndex);
@@ -260,9 +258,7 @@ class MemoryGameEngine {
this.startTime = Date.now();
this.timerInterval = setInterval(() => {
if (!this.gameState.isPaused) {
this.updateTimer();
}
this.updateTimer();
}, 100);
this.analytics.trackGameStart(this.difficulty);
@@ -429,7 +425,6 @@ class MemoryGameEngine {
moves: 0,
score: 0,
isProcessing: false,
isPaused: false,
gameStarted: false
};
@@ -444,34 +439,13 @@ class MemoryGameEngine {
document.getElementById('timer-display').style.animation = '';
}
/**
* Pause/Reprise
*/
togglePause() {
if (!this.gameState.gameStarted) return;
this.gameState.isPaused = !this.gameState.isPaused;
const pauseBtn = document.getElementById('pause-btn');
if (this.gameState.isPaused) {
pauseBtn.textContent = '▶ Reprendre';
pauseBtn.classList.add('paused');
} else {
pauseBtn.textContent = '⏸ Pause';
pauseBtn.classList.remove('paused');
}
}
/**
* Setup event listeners
*/
setupEventListeners() {
// Bouton restart
document.getElementById('restart-btn').addEventListener('click', () => this.restart());
// Bouton pause
document.getElementById('pause-btn').addEventListener('click', () => this.togglePause());
// Sélecteur de difficulté
document.querySelectorAll('.btn-difficulty').forEach(btn => {
btn.addEventListener('click', () => {
@@ -512,14 +486,51 @@ class MemoryGameEngine {
// ============================================
let game;
/**
* Demander le nom du joueur à la première partie
*/
function setupPlayerNameModal(onReady) {
const nameConfirmed = localStorage.getItem('nextgn_name_confirmed') === 'true';
if (nameConfirmed) {
onReady();
return;
}
const modal = document.getElementById('player-name-modal');
const input = document.getElementById('player-name-input');
const confirmBtn = document.getElementById('player-name-confirm');
modal.classList.remove('hidden');
input.focus();
const confirmName = () => {
const name = input.value.trim();
localStorage.setItem('nextgn_playerName', name || getPlayerName());
localStorage.setItem('nextgn_name_confirmed', 'true');
modal.classList.add('hidden');
onReady();
};
confirmBtn.addEventListener('click', confirmName, { once: true });
input.addEventListener('keydown', (e) => {
if (e.key === 'Enter') confirmName();
}, { once: true });
}
document.addEventListener('DOMContentLoaded', () => {
// Initialiser le jeu
game = new MemoryGameEngine('normal');
// Afficher le leaderboard initial
LeaderboardManager.updateDisplay('all');
LeaderboardManager.updatePlayerStats();
setupPlayerNameModal(() => {
LeaderboardManager.updateDisplay('all');
LeaderboardManager.updatePlayerStats();
});
// Initialiser le jeu
game = new MemoryGameEngine('normal');
// Scroll progress
window.addEventListener('scroll', () => {
game.updateHUD();

10
exercices/memory-pictogrammes/assets/js/utils.js
View File

@@ -18,8 +18,8 @@ const PICTOGRAMMES = [
id: 2,
nom: "Exclamation",
filename: "nocif_irritant_ozone.jpg",
texte: "Je nuis gravement à la santé",
danger: "Danger pour la santé",
texte: "J'altère la santé ou la couche d'ozone",
danger: "Danger pour la santé/Environnement",
couleur: "teal"
},
{
@@ -72,10 +72,10 @@ const PICTOGRAMMES = [
},
{
id: 9,
nom: "Santé/Environnement",
nom: "Santé (CMR)",
filename: "cmr.jpg",
texte: "J'altère la santé ou la couche d'ozone",
danger: "Danger pour la santé/Environnement",
texte: "Je nuis gravement à la santé",
danger: "Danger pour la santé",
couleur: "teal"
}
];

238
exercices/memory-pictogrammes/memory.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memory Pictogrammes GHS - NextGN Formation</title>
<title>Memory Pictogrammes GHS - Gauthier Chombart & Nathan Chauwin</title>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">
<!-- Styles -->
@@ -14,9 +14,9 @@
<link rel="stylesheet" href="assets/css/leaderboard.css?v=3">
</head>
<body>
<!-- HEADER NextGN Formation -->
<!-- HEADER Gauthier Chombart & Nathan Chauwin -->
<header>
<div class="logo">NextGN Formation</div>
<div class="logo">Gauthier Chombart & Nathan Chauwin</div>
<nav>
<a href="../../index.html">Accueil</a>
<a href="../../index.html#formations">Exercices</a>
@@ -47,119 +47,147 @@
</div>
</section>
<!-- GAME SECTION -->
<section class="game-section">
<div class="game-panel">
<!-- DIFFICULTY SELECTOR -->
<div class="difficulty-selector">
<label>Choisir le niveau</label>
<div class="btn-group">
<button class="btn btn-difficulty" data-difficulty="easy">
<span class="btn-icon">🌱</span>
<span class="btn-label">Facile</span>
<span class="btn-desc">4 paires</span>
</button>
<button class="btn btn-difficulty active" data-difficulty="normal">
<span class="btn-icon">🎯</span>
<span class="btn-label">Normal</span>
<span class="btn-desc">9 paires</span>
</button>
<button class="btn btn-difficulty" data-difficulty="hard">
<span class="btn-icon">🔥</span>
<span class="btn-label">Difficile</span>
<span class="btn-desc">2 min chrono</span>
</button>
</div>
</div>
<!-- HUD (Stats en temps réel) -->
<div class="game-hud">
<div class="stat-box">
<div class="label">🏆 Score</div>
<div class="value" id="score-display">0</div>
</div>
<div class="stat-box">
<div class="label">👆 Mouvements</div>
<div class="value" id="moves-display">0</div>
</div>
<div class="stat-box">
<div class="label">⏱ Temps</div>
<div class="value" id="timer-display">00:00</div>
</div>
<div class="stat-box">
<div class="label">🧩 Paires</div>
<div class="value" id="pairs-display">0/9</div>
</div>
</div>
<!-- PROGRESS BAR -->
<div class="progress-container">
<div class="game-progress-fill" id="progress-bar"></div>
</div>
<!-- GAME GRID -->
<div class="game-grid" id="game-grid">
<!-- Cartes générées par JS -->
</div>
<!-- CONTROLS -->
<div class="game-controls">
<button class="btn btn-primary" id="restart-btn">
🔄 Recommencer
<!-- TOP BAR (niveau + stats en temps réel) -->
<div class="game-top-bar">
<!-- DIFFICULTY SELECTOR -->
<div class="difficulty-selector">
<label>Choisir le niveau</label>
<div class="btn-group">
<button class="btn btn-difficulty" data-difficulty="easy">
<span class="btn-icon">🌱</span>
<span class="btn-label">Facile</span>
<span class="btn-desc">4 paires</span>
</button>
<button class="btn btn-secondary" id="pause-btn">
⏸ Pause
<button class="btn btn-difficulty active" data-difficulty="normal">
<span class="btn-icon">🎯</span>
<span class="btn-label">Normal</span>
<span class="btn-desc">9 paires</span>
</button>
<button class="btn btn-difficulty" data-difficulty="hard">
<span class="btn-icon">🔥</span>
<span class="btn-label">Difficile</span>
<span class="btn-desc">2 min chrono</span>
</button>
</div>
</div>
</section>
<!-- LEADERBOARD SECTION -->
<section class="leaderboard-section">
<h2>🏆 Classement</h2>
<div class="tabs">
<button class="tab-btn active" data-filter="all">Tous</button>
<button class="tab-btn" data-filter="easy">Facile</button>
<button class="tab-btn" data-filter="normal">Normal</button>
<button class="tab-btn" data-filter="hard">Difficile</button>
</div>
<div class="leaderboard">
<div class="leaderboard-list" id="leaderboard-list">
<!-- Rempli par JS -->
<!-- HUD (Stats en temps réel) -->
<div class="game-hud">
<div class="stat-box">
<div class="label">🏆 Score</div>
<div class="value" id="score-display">0</div>
</div>
<div class="stat-box">
<div class="label">👆 Mouvements</div>
<div class="value" id="moves-display">0</div>
</div>
<div class="stat-box">
<div class="label">⏱ Temps</div>
<div class="value" id="timer-display">00:00</div>
</div>
<div class="stat-box">
<div class="label">🧩 Paires</div>
<div class="value" id="pairs-display">0/9</div>
</div>
</div>
</div>
<!-- PLAYER STATS -->
<div class="player-stats">
<h3>Vos statistiques</h3>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-icon">🎮</div>
<div class="stat-label">Jeux joués</div>
<div class="stat-value" id="total-games">0</div>
</div>
<div class="stat-card">
<div class="stat-icon">⭐</div>
<div class="stat-label">Meilleur score</div>
<div class="stat-value" id="best-score">0</div>
</div>
<div class="stat-card">
<div class="stat-icon">⚡</div>
<div class="stat-label">Temps record</div>
<div class="stat-value" id="best-time">--</div>
</div>
<div class="stat-card">
<div class="stat-icon">🏅</div>
<div class="stat-label">Taux de réussite</div>
<div class="stat-value" id="win-rate">0%</div>
<!-- GAME LAYOUT (classement / jeu / statistiques) -->
<div class="game-layout">
<!-- LEADERBOARD PANEL (gauche) -->
<aside class="leaderboard-panel">
<h2>🏆 Classement</h2>
<div class="tabs">
<button class="tab-btn active" data-filter="all">Tous</button>
<button class="tab-btn" data-filter="easy">Facile</button>
<button class="tab-btn" data-filter="normal">Normal</button>
<button class="tab-btn" data-filter="hard">Difficile</button>
</div>
<div class="leaderboard">
<div class="leaderboard-list" id="leaderboard-list">
<!-- Rempli par JS -->
</div>
</div>
</div>
</section>
</aside>
<!-- GAME SECTION (centre) -->
<section class="game-section">
<div class="game-panel">
<!-- PROGRESS BAR -->
<div class="progress-container">
<div class="game-progress-fill" id="progress-bar"></div>
</div>
<!-- GAME GRID -->
<div class="game-grid" id="game-grid">
<!-- Cartes générées par JS -->
</div>
<!-- CONTROLS -->
<div class="game-controls">
<button class="btn btn-primary" id="restart-btn">
🔄 Recommencer
</button>
</div>
</div>
</section>
<!-- PLAYER STATS PANEL (droite) -->
<aside class="stats-panel">
<div class="player-stats">
<h3>Vos statistiques</h3>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-icon">🎮</div>
<div class="stat-label">Jeux joués</div>
<div class="stat-value" id="total-games">0</div>
</div>
<div class="stat-card">
<div class="stat-icon">⭐</div>
<div class="stat-label">Meilleur score</div>
<div class="stat-value" id="best-score">0</div>
</div>
<div class="stat-card">
<div class="stat-icon">⚡</div>
<div class="stat-label">Temps record</div>
<div class="stat-value" id="best-time">--</div>
</div>
<div class="stat-card">
<div class="stat-icon">🏅</div>
<div class="stat-label">Taux de réussite</div>
<div class="stat-value" id="win-rate">0%</div>
</div>
</div>
</div>
</aside>
</div>
</main>
<!-- PLAYER NAME MODAL (1ère partie) -->
<div class="victory-modal hidden" id="player-name-modal">
<div class="modal-content name-modal-content">
<h2>Bienvenue ! 👋</h2>
<p class="name-modal-text">
Entrez votre nom ou un pseudo pour apparaître dans le classement général.
</p>
<input
type="text"
id="player-name-input"
class="name-input"
maxlength="20"
placeholder="Votre nom ou pseudo"
autocomplete="off"
>
<div class="modal-actions">
<button class="btn btn-primary" id="player-name-confirm">
🎮 Commencer à jouer
</button>
</div>
</div>
</div>
<!-- VICTORY MODAL -->
<div class="victory-modal hidden" id="victory-modal">
<div class="modal-content">
@@ -201,7 +229,7 @@
<!-- FOOTER -->
<footer>
<p>&copy; 2024 NextGN Formation - Memory Pictogrammes GHS</p>
<p>&copy; 2026 Gauthier Chombart & Nathan Chauwin<br>Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants</p>
<p style="margin-top: 10px; opacity: 0.6;">Tous droits réservés - Formateurs indépendants</p>
</footer>