Icône CSS
style_3
/* Reset et configuration de base */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #ffffff;
    color: #222222;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Le footer reste en bas */
}

/* =========================================
   IMAGES (cases des jeux, avatars)
========================================= */
/* J'ai retiré .logo d'ici pour enlever le fond gris */
.game-image,
.avatar {
    overflow: hidden;
    background-color: #f2f2f2; 
    flex-shrink: 0;
}

.game-image img,
.avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================
   LOGO (propre et sans fond)
========================================= */
.logo {
    display: block;
    width: 50px;
    height: 50px;
}

.logo img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* "contain" empêche de rogner l'image */
}

/* =========================================
   HEADER
========================================= */
.main-header {
    display: flex; /* Aligne le logo, le titre et la nav sur une ligne */
    align-items: center; /* Centre les éléments verticalement */
    background-color: #1a1a2e; /* Couleur unie sombre (plus de dégradé) */
    padding: 15px 40px;
    position: sticky; /* Permet au header de rester collé en haut au scroll */
    top: 0;
    z-index: 1000;
}

.logo {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    /* Plus d'animation de survol ou d'ombres complexes */
}

.site-title {
    margin: 0 0 0 20px;
    font-size: 28px;
    font-weight: bold;
    color: #4facfe; /* Couleur unie bleue (plus de texte transparent clipé) */
}

.main-nav {
    margin-left: auto; /* L'astuce magique : pousse la nav tout à droite */
    display: flex;
    gap: 30px; /* Met un écart de 30px entre chaque lien */
}

.main-nav a {
    text-decoration: none; /* Enlève le trait de soulignement par défaut */
    color: #e2e8f0; /* Couleur gris clair */
    font-size: 16px;
    font-weight: bold;
    transition: color 0.2s ease; /* Transition très basique pour le changement de couleur */
}

/* Un effet de survol hyper simple : le texte change juste de couleur */
.main-nav a:hover {
    color: #4facfe; 
}

#stats_link {
    margin-left: 40px;
}

/* =========================================
   FOOTER
========================================= */
.main-footer {
    background: linear-gradient(135deg, #16213e 0%, #1a1a2e 100%);
    padding: 30px 20px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.main-footer a {
    text-decoration: none;
    color: #a0aec0;
    font-size: 16px;
    font-weight: 500;
    display: inline-block;
    transition: color 0.3s ease, transform 0.3s ease;
}

/* Le lien du footer remonte légèrement au survol */
.main-footer a:hover {
    color: #4facfe;
    transform: translateY(-3px);
}

/* =========================================
   CONTENU PRINCIPAL
========================================= */
.main-content {
    flex: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 50px 20px;
    display: flex;
    flex-direction: column;
    gap: 70px;
}

.main-content.mode-jeu {
    gap: 15px; /* Tu peux mettre 0, 10px ou 20px selon ce que tu trouves le plus joli */
    justify-content: center; /* Optionnel : permet de bien centrer ton jeu verticalement s'il reste de la place */
}

/* --- Sections des jeux (Accueil) --- */
.game-section {
    display: flex;
    align-items: center;
    gap: 40px;
    text-decoration: none;
    color: inherit;
    background-color: #bbccff;
    border-radius: 30px;
    padding: 5%;
    transition: transform 0.3s ease;
    scroll-margin-top: 25vh;
}

.game-section.reverse {
    flex-direction: row-reverse; /* Image à droite */
}

.game-image {
    width: 250px;
    height: 250px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #00000000;
}

.game-section:hover {
    transform: scale(1.05);
}

.game-info {
    flex: 1;
}

.game-title {
    margin: 0 0 15px 0;
    font-size: 28px;
}

.game-description {
    margin: 0;
    line-height: 1.6;
    color: #555555;
}

/* =========================================
   PAGE À PROPOS
========================================= */
.about-section h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
}

.about-section p {
    margin: 0 0 15px 0;
    line-height: 1.6;
    color: #555555;
}

.contributor {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}

.contributor h3 {
    margin: 0;
}

.avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Rond comme sur la maquette */
}

/* =========================================
   PAGE JEU (game1.html)
========================================= */
canvas {
    display: block;
    margin: 0 auto;
    background-color: #e8e8e8;
    border-radius: 12px;
    
    /* EMPÊCHE LE SCROLL ET LE ZOOM SUR LE CANVAS */
    touch-action: none; 
    
    /* EMPÊCHE LA SÉLECTION BLEUE / MENU COPIER-COLLER AU MAINTIEN DU DOIGT */
    user-select: none;
    -webkit-user-select: none; /* Spécifique pour Safari (iPhone) */
    -webkit-touch-callout: none; /* Bloque le menu contextuel iOS */
}

/* =========================================
   MOBILE
========================================= */
/* =========================================
   MOBILE (Correctifs d'affichage)
========================================= */
@media (max-width: 700px) {
    /* --- CORRECTION FOOTER MOBILE (Gère la barre Safari) --- */
    body {
        min-height: 100dvh; 
    }

    html, body {
        overflow-x: hidden; 
    }

    .main-content {
        padding: 20px 0; /* Retire les marges du parent pour éviter les conflits */
        width: 100%;
    }

    .game-section,
    .game-section.reverse {
        flex-direction: column;
        width: 92%; /* Laisse exactement 4% d'espace parfait à gauche et à droite */
        margin: 0 auto 30px auto; /* "auto" centre la section horizontalement */
        padding: 30px 20px; 
        box-sizing: border-box; /* INDISPENSABLE : empêche le padding de faire déborder les 92% */
        text-align: center; 
    }

    .game-image {
        width: 110px; /* Taille réduite */
        height: 110px;
        margin: 0 auto 15px auto;
        aspect-ratio: 1 / 1;
    }

    /* --- CORRECTION STATISTIQUES (Image 2) --- */
    .histogram th {
        font-size: 11px; /* Réduit la police */
        padding-top: 5px;
    }
    

    /* HEADER */
    .main-header { flex-direction: column; padding: 15px; gap: 10px; }
    .site-title { margin: 0; }
    .main-nav { margin-left: 0; flex-wrap: wrap; justify-content: center; gap: 15px; }

    /* CANVAS */
    canvas { max-width: 100%; height: auto; aspect-ratio: 1 / 1; }

    /* --- CORRECTION BONNETEAU (Image 3) --- */
    /* --- CORRECTION BONNETEAU --- */
    #arena {
        width: 100% !important; 
        max-width: 100vw;
        height: 140px !important; /* On réduit drastiquement la hauteur de la div */
        margin: 0 auto !important;
        overflow: hidden; 
    }

    .card {
        width: 70px !important; 
        height: 100px !important;
        top: 20px !important; /* On remonte les cartes pour les centrer dans la nouvelle arène de 140px */
    }

    .about-section {
        padding: 0 20px; /* Redonne de l'espace sur les côtés */
    }
}

/* =========================================
   PAGE JEU (bonneteau.html)
========================================= */

/* Le tapis de jeu */
#arena {
  width: 800px;
  height: 400px;
  background-color: #2c3e50; /* Une couleur de fond pour bien voir la zone */
  margin: 0 auto; /* Pour centrer le tapis sur la page */
  position: relative; /* INDISPENSABLE : c'est le repère (0,0) pour tes cartes */
}

/* Le conteneur principal de la carte */
.card {
  width: 120px;
  height: 180px;
  position: absolute; 
  left: 340px; 
  top: 110px;  
  
  transform-style: preserve-3d;
  
  /* AJOUT : margin-top et box-shadow dans la transition, et le curseur pointer */
  transition: transform 0.5s ease-in-out, left 0.5s ease-in-out, margin-top 0.2s ease, box-shadow 0.2s ease; 
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  #arena.jouable .card:hover {
    margin-top: -15px; 
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); 
  }
}

/* La classe que le JS va ajouter pour retourner la carte */
.card.flipped {
  transform: rotateY(180deg);
}

/* Propriétés communes aux deux faces */
.card-face {
  width: 100%;
  height: 100%;
  position: absolute; /* Superpose les deux faces exactement au même endroit */
  backface-visibility: hidden; /* Cache le dos de la face quand elle est retournée */
  background-size: cover; /* Ajuste l'image Figma pile à la taille de la div */
  background-position: center;
  border-radius: 10px; /* Des bords arrondis, c'est plus joli */
}

/* Le dos de la carte (visible par défaut) */
.card-back {
  background-image: url('../assets/pngegg.png');
  background-color: #e74c3c; /* Couleur rouge de secours si l'image ne charge pas */
}

/* La figure (ex: la Reine), cachée par défaut */
.card-front {
  background-color: #ecf0f1; /* Couleur de secours */
  transform: rotateY(180deg); /* Elle est à l'envers dès le départ */
}

#level {
    text-align: center;  
}

/* Pour centrer le bouton */
.conteneur {
  display: flex;
  justify-content: center;
  margin: 20px; /* Un peu d'espace autour */
}

/* Le style simple et propre du bouton */
#bouton-play {
  background-color: #007bff; /* Bleu classique */
  color: white; /* Texte en blanc */
  border: none; /* Enlève la bordure par défaut */
  padding: 12px 30px; /* Espace à l'intérieur du bouton */
  font-size: 18px; /* Taille du texte */
  font-weight: bold;
  border-radius: 8px; /* Coins légèrement arrondis */
  cursor: pointer; /* Curseur en forme de main */
  transition: background-color 0.2s; /* Transition douce */
}

/* Effet au survol */
#bouton-play:hover {
  background-color: #0056b3; /* Bleu plus foncé */
}

/* Le style quand le bouton est désactivé */
#bouton-play:disabled {
  background-color: #cccccc; /* Gris */
  color: #666666;
  cursor: not-allowed; /* Curseur interdit */
}


/* 1. LE CONTENEUR (Celui qui dicte la taille globale fixe) */
/*stats page ===============================*/


.histogram {
    width: 80%;
    height: 400px;
    margin: 50px auto;         /* Centre le tableau horizontalement */
    border-collapse: collapse; /* Enlève les espaces invisibles entre les cases */
    table-layout: fixed;       /* Force toutes les colonnes à avoir la même largeur */
    border-left: 3px solid #222222; /* L'Axe Y (ligne verticale noire) */
}

/* 2. LES CASES (Pleines ou Vides) */
.histogram td {
    padding: 0;   /* Retire les marges internes pour que la couleur remplisse tout */
    border: none; /* Pas de quadrillage au milieu du graphique */
    height: 40px;
}

.filled {
    background-color: rgb(23, 81, 174);
}

/* 3. L'AXE X ET LA LÉGENDE DU BAS */
.histogram th {
    border-top: 3px solid #222222; /* L'Axe X (ligne horizontale noire) */
    padding-top: 10px;
    vertical-align: top;
    font-weight: bold;
    height: 40px;
}

/* Espacement et alignement des titres des tableaux */
.chart-wrapper {
    margin-bottom: 80px;
    text-align: center;
}

.chart-wrapper h3 {
    font-size: 22px;
    color: #1a1a2e; /* Rappel de la couleur de ton header */
    margin-bottom: -10px; /* Rapproche légèrement le titre de l'axe Y */
}

/* 2. LE TABLEAU (Il se plie aux dimensions du conteneur) */
/* =========================================
   BOUTON RESET STATS
========================================= */
.reset-container {
    display: flex;
    justify-content: center;
    margin: 40px 0 60px 0; /* Espace au-dessus et en dessous */
}

#reset-stats-btn {
    background-color: #e74c3c; /* Un rouge élégant */
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3);
}

#reset-stats-btn:hover {
    background-color: #c0392b; /* Rouge plus foncé au survol */
    transform: translateY(-2px); /* Léger soulèvement */
}

#reset-stats-btn:active {
    transform: translateY(0); /* S'enfonce au clic */
}

/* =========================================
   PAGE JEU (game2.html - Dexterity)
========================================= */
#game-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Caché par défaut : le JS l'affiche pendant la partie */
#restart_button {
    display: none;
    padding: 10px 24px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    background-color: #4facfe;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#restart_button:hover {
    background-color: #33d031;
}

/* =========================================

   PAGE REVIEWS (reviews.html)

========================================= */

.review-card {

    background-color: #bbccff;

    border-radius: 30px;

    padding: 40px;

}

 

.review-title {

    margin: 0 0 25px 0;

    font-size: 28px;

    color: #1a1a2e;

}

 

.review-label {

    display: block;

    margin-bottom: 10px;

    font-weight: 600;

    color: #1a1a2e;

}

 

/* --- Étoiles du formulaire --- */

.star-row {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 25px;

}

 

.star-rating {

    display: flex;

    gap: 4px;

}

 

.star {

    background: none;

    border: none;

    padding: 0;

    font-size: 44px;

    line-height: 1;

    color: #ffffff;           /* étoile vide */

    cursor: pointer;

    transition: color 0.2s ease, transform 0.2s ease;

}

 

.star.active {

    color: #1751ae;           /* étoile pleine (bleu des histogrammes) */

}

 

.star:hover {

    transform: scale(1.2);

}

 

.rating-value {

    font-weight: 600;

    color: #1a1a2e;

}

 

/* --- Commentaire --- */

#comment {

    display: block;

    width: 100%;

    padding: 15px;

    font-family: inherit;

    font-size: 16px;

    color: #222222;

    background-color: #ffffff;

    border: 2px solid transparent;

    border-radius: 15px;

    resize: vertical;

    transition: border-color 0.3s ease;

}

 

#comment:focus {

    outline: none;

    border-color: #1751ae;

}

 

.char-count {

    display: block;

    margin: 6px 0 25px 0;

    text-align: right;

    font-size: 14px;

    color: #555555;

}

 

/* Bouton : même dégradé que le header, texte cyan au survol */

.review-submit {

    padding: 14px 36px;

    font-family: inherit;

    font-size: 16px;

    font-weight: 700;

    color: #e2e8f0;

    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);

    border: none;

    border-radius: 15px;

    cursor: pointer;

    transition: color 0.3s ease, transform 0.3s ease;

}

 

.review-submit:hover {

    color: #4facfe;

    transform: translateY(-2px);

}

 

.form-message {

    margin: 15px 0 0 0;

    font-weight: 600;

    color: #1751ae;

}

 

.form-message.error {

    color: #c0392b;

}

 

/* --- Liste des avis --- */

.reviews-header {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 25px;

}

 

.reviews-header .review-title {

    margin: 0;

}

 

.reviews-summary {

    font-weight: 700;

    color: #1751ae;

}

 

.reviews-list {

    display: flex;

    flex-direction: column;

    gap: 20px;

}

 

.review-item {

    background-color: #bbccff;

    border-radius: 30px;

    padding: 25px 30px;

    transition: transform 0.3s ease;

}

 

.review-item:hover {

    transform: scale(1.02);

}

 

.review-item-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 10px;

}

 

.review-item-stars {

    font-size: 24px;

    color: #1751ae;

    letter-spacing: 2px;

}

 

.review-item-date {

    font-size: 14px;

    color: #555555;

}

 

.review-item-text {

    margin: 0;

    line-height: 1.6;

    color: #222222;

    white-space: pre-wrap;

    overflow-wrap: anywhere;

}

 

.no-review {

    text-align: center;

    color: #555555;

}

 

@media (max-width: 700px) {

    .review-card {

        padding: 25px;

    }

 

    .star {

        font-size: 36px;

    }

}