/* =========================================
   THÈME : NÉON VOYAGE (NOIR & ROSE)
   STYLE : MODERNE / FUTURISTE
   ========================================= */

   body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #0d0d0d;
    color: #e0e0e0;
    margin: 0;
    padding: 0;
    text-align: center;
    overflow-x: hidden; /* Empêche le scroll horizontal accidentel */
}

/* --- HEADER & NAVIGATION --- */

header {
    background-color: #000000;
    border-bottom: 2px solid #ff007f;
    padding: 20px 0;
    box-shadow: 0 0 15px rgba(255, 0, 127, 0.5);
}

h1 {
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px #ff007f;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin-top: 20px;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    text-transform: uppercase;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

nav a:hover {
    color: #ff007f;
    text-shadow: 0 0 8px #ff007f;
}

/* --- CONTENU PRINCIPAL --- */

main {
    padding: 40px 20px;
    min-height: 500px;
}

h2, h3 {
    color: #ff007f;
    font-weight: 300;
    letter-spacing: 1px;
}

/* --- BOUTONS GÉNÉRAUX --- */

.btn {
    display: inline-block;
    background-color: transparent;
    color: #ff007f;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    border: 2px solid #ff007f;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 0 5px rgba(255, 0, 127, 0.4);
    margin-top: 10px;
}

.btn:hover {
    background-color: #ff007f;
    color: white;
    box-shadow: 0 0 20px rgba(255, 0, 127, 0.8);
    transform: scale(1.05);
    cursor: pointer;
}

/* --- INDICATEURS DE JEU (MOTUS) --- */

.vert { color: #55ff00; font-weight: bold; text-shadow: 0 0 5px #55ff00; }
.rouge { color: #ff3333; font-weight: bold; text-shadow: 0 0 5px #ff3333; }
.jaune { color: #ffff00; font-weight: bold; text-shadow: 0 0 5px #ffff00; }

/* =========================================
   ACCUEIL : RÈGLES DU JEU
   ========================================= */

.explications {
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    display: inline-block;
    max-width: 450px;       /* Version compacte */
    width: 90%;
    padding: 15px;
    margin-top: 30px;
    font-size: 0.9em;
    text-align: center;     /* Texte centré */
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.explications h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1em;
    color: #ff007f;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.explications ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.explications li {
    margin-bottom: 8px;
}

/* =========================================
   ACCUEIL : SÉLECTION DES MODES
   ========================================= */

.choix-mode {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Force la même hauteur */
    gap: 30px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 40px;
    padding-bottom: 40px;
}

.mode-card {
    background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
    border: 1px solid #333;
    border-radius: 15px;
    padding: 30px;
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.mode-card:hover {
    transform: translateY(-10px);
    cursor: default;
}

/* Styles spécifiques cartes */
.mode-card.solo:hover { border-color: #ff007f; box-shadow: 0 0 20px rgba(255, 0, 127, 0.4); }
.mode-card.multi:hover { border-color: #00e5ff; box-shadow: 0 0 20px rgba(0, 229, 255, 0.4); }

.mode-card h3 {
    margin-top: 0;
    font-size: 1.4em;
    text-transform: uppercase;
}

.mode-card.solo h3 { color: #ff007f; text-shadow: 0 0 5px #ff007f; }
.mode-card.multi h3 { color: #00e5ff; text-shadow: 0 0 5px #00e5ff; }

/* Boutons Choix Niveau */
.choix-niveau {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.btn-facile { border-color: #fff; color: #fff; font-size: 0.9em; }
.btn-facile:hover { background-color: #fff; color: #000; box-shadow: 0 0 10px white; }

.btn-difficile { border-color: #ff007f; color: #ff007f; font-size: 0.9em; }
.btn-difficile:hover { background-color: #ff007f; color: #fff; }

.btn-multi { border-color: #00e5ff; color: #00e5ff; width: 100%; box-sizing: border-box; }
.btn-multi:hover { background-color: #00e5ff; color: #000; box-shadow: 0 0 15px #00e5ff; }

/* =========================================
   FORMULAIRES (DESIGN CYBERPUNK)
   ========================================= */

.form-container {
    max-width: 500px;
    margin: 60px auto;
    padding: 40px;
    background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
    border: 1px solid rgba(255, 0, 127, 0.3);
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 0, 127, 0.2);
    position: relative;
    overflow: hidden;
}

.form-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 3px;
    background: linear-gradient(90deg, transparent, #ff007f, transparent);
    box-shadow: 0 0 10px #ff007f;
}

/* Variante Cyan */
.form-container.cyan-theme {
    border-color: rgba(0, 229, 255, 0.3);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 229, 255, 0.2);
}
.cyan-theme::before {
    background: linear-gradient(90deg, transparent, #00e5ff, transparent);
    box-shadow: 0 0 10px #00e5ff;
}

.form-container h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.8em;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.cyan-theme h2 { color: #00e5ff; text-shadow: 0 0 15px rgba(0, 229, 255, 0.6); }

/* Inputs */
.form-group { margin-bottom: 25px; position: relative; }

.form-label {
    display: block;
    color: #888;
    margin-bottom: 8px;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s;
}

.form-input {
    width: 100%;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.05);
    border: none;
    border-bottom: 2px solid #333;
    color: #fff;
    font-family: inherit;
    font-size: 1em;
    border-radius: 5px 5px 0 0;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.form-input:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.1);
    border-bottom-color: #ff007f;
    box-shadow: 0 10px 20px -10px rgba(255, 0, 127, 0.3);
}
.cyan-theme .form-input:focus {
    border-bottom-color: #00e5ff;
    box-shadow: 0 10px 20px -10px rgba(0, 229, 255, 0.3);
}

.form-input:focus + .form-label, .form-group:focus-within .form-label { color: #fff; }

/* Boutons Pleine Largeur (Centrage Fixé) */
.btn-full {
    display: block;
    width: 100%;
    box-sizing: border-box; /* IMPORTANT : Empêche le bouton de dépasser */
    margin-top: 15px;
    padding: 15px;
    font-size: 1.1em;
    letter-spacing: 2px;
    text-align: center;
}

.btn-cyan { color: #00e5ff; border-color: #00e5ff; }
.btn-cyan:hover { background-color: #00e5ff; color: #000; box-shadow: 0 0 25px rgba(0, 229, 255, 0.6); }

.btn-pink { color: #ff007f; border-color: #ff007f; }
.btn-pink:hover { background-color: #ff007f; color: #fff; box-shadow: 0 0 25px rgba(255, 0, 127, 0.6); }

/* --- PAGE CHOIX MULTIJOUEUR (DANS LE FORMULAIRE) --- */

.choix-mode-multi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.choix-mode-multi .mode-card {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 20px;
    min-height: auto;
}

/* Force la suppression du contour/lueur pour le titre "Rejoindre" */
.choix-mode-multi .mode-card h3.title-pink {
    color: #ff007f !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0px !important;
    border: none !important;
    text-transform: uppercase;
    font-weight: bold;
}

/* Carte Rose sans bordure */
.card-pink {
    border: none; 
}
.card-pink:hover {
    box-shadow: 0 0 20px rgba(255, 0, 127, 0.4); 
    border: none;
}

/* Code Input Styling */
.code-input {
    text-transform: uppercase;
    text-align: center;
    font-size: 2em;
}

/* --- MESSAGES & LIENS --- */

.alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 25px;
    font-size: 0.9em;
    text-align: center;
    border-left: 5px solid;
    animation: fadeIn 0.5s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.alert-danger { background-color: rgba(255, 0, 0, 0.1); border-color: #ff3333; color: #ff9999; }
.alert-success { background-color: rgba(0, 255, 0, 0.1); border-color: #00ff99; color: #ccffdd; }

.form-footer {
    text-align: center;
    margin-top: 30px;
    color: #666;
    font-size: 0.85em;
    border-top: 1px solid #333;
    padding-top: 20px;
}

.link-cyan { color: #00e5ff; text-decoration: none; font-weight: bold; transition: 0.3s; }
.link-cyan:hover { text-shadow: 0 0 10px #00e5ff; }

/* =========================================
   PAGE CLASSEMENT & RÈGLES DÉTAILLÉES
   ========================================= */

.scores-title { text-align: center; color: #00e5ff; text-shadow: 0 0 10px #00e5ff; margin-bottom: 30px; }

.container-scores {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    margin-top: 30px;
}

.col-score {
    flex: 1;
    min-width: 300px;
    max-width: 450px;
    background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
    padding: 20px;
    border-radius: 15px;
    border: 1px solid #333;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.col-score h3 { text-align: center; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 2px; }
.theme-facile { border-top: 3px solid #00e5ff; }
.theme-facile h3 { color: #00e5ff; }
.theme-difficile { border-top: 3px solid #ff007f; }
.theme-difficile h3 { color: #ff007f; }

.table-scores { width: 100%; border-collapse: collapse; color: #ddd; }
.table-scores th { text-align: left; padding: 10px; border-bottom: 2px solid #333; color: #888; font-size: 0.9em; }
.table-scores td { padding: 12px 10px; border-bottom: 1px solid #222; }

.rank-1 { color: #ffd700; font-weight: bold; text-shadow: 0 0 5px #ffd700; }
.rank-2 { color: #c0c0c0; font-weight: bold; }
.rank-3 { color: #cd7f32; font-weight: bold; }
.score-cell { color: #00e5ff; font-weight: bold; font-family: monospace; font-size: 1.1em; }
.date-cell { font-size: 0.8em; color: #555; }

/* Règles Déroulantes */
.rules-container { max-width: 600px; margin: 0 auto 30px auto; text-align: left; }
details { background: #111; border: 1px solid #333; border-radius: 8px; padding: 10px 20px; cursor: pointer; transition: 0.3s; }
details:hover { border-color: #00e5ff; }
summary { color: #00e5ff; font-weight: bold; list-style: none; text-align: center; }
summary::after { content: " ▼"; font-size: 0.8em; }
details[open] summary::after { content: " ▲"; }
.rules-content { margin-top: 15px; color: #ccc; font-size: 0.9em; line-height: 1.6; }
.rules-content li { margin-bottom: 5px; padding-left: 10px; border-left: 2px solid #555; }

/* =========================================
   PLATEAU DE JEU & INTERFACE
   ========================================= */

.jeu-plateau { margin: 20px auto; text-align: center; }
.plateau { display: flex; flex-direction: column; gap: 6px; align-items: center; margin: 20px 0; }
.ligne { display: flex; gap: 6px; }

.case {
    width: 45px; height: 45px;
    border: 2px solid #3a3a3c;
    background-color: #121213;
    color: white;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    display: flex; justify-content: center; align-items: center;
}
.case.remplie { border-color: #565758; }

.bien_place { background-color: #52cb15; border-color: #52cb15; }
.mal_place { background-color: #ff9d00; border-color: #ff9d00; }
.absent { background-color: #ff3333; border-color: #ff3333; }

.zone-clavier { margin-top: 15px; }
.debug { border: 1px dashed orange; color: orange; padding: 5px; font-size: 12px; margin-bottom: 10px; }
.erreur { color: #ff3333; font-weight: bold; height: 20px; }
.centre { text-align: center; }
.actions-fin { text-align: center; margin-top: 15px; }

.lien-discret { color: #6a6767; text-decoration: underline; font-size: 0.85rem; cursor: pointer; }
.lien-discret:hover { color: #cdc6c6; }

/* Écran de Fin (Victoire) */
.ecran-fin { text-align: center; margin-top: 30px; color: white; }
.titre-neon { color: #ff007f; text-shadow: 0 0 10px #ff007f, 0 0 20px #ff007f; font-size: 1.8rem; margin-bottom: 10px; text-transform: uppercase; }
.sous-titre { font-size: 1.2rem; margin-bottom: 30px; }

.box-neon-rose {
    border: 2px solid #ff007f;
    border-radius: 15px;
    padding: 30px;
    max-width: 500px;
    margin: 0 auto 30px auto;
    background-color: rgba(13, 13, 13, 0.8);
    box-shadow: 0 0 15px rgba(255, 0, 127, 0.5), inset 0 0 10px rgba(255, 0, 127, 0.2);
}

.box-neon-rose h3.rose { color: #ff007f; margin-bottom: 15px; font-size: 1.4rem; }
.box-neon-rose h3.cyan { color: #00ffff; margin-bottom: 15px; font-size: 1.4rem; }

.lien-cyan { color: #00ffff; font-weight: bold; text-decoration: underline; }
.txt-invite, .txt-joueur { font-size: 1.1rem; color: #ddd; margin-bottom: 25px; }

.btn-neon-action {
    display: inline-block;
    border: 2px solid #00ffff; color: #00ffff;
    padding: 15px 30px; border-radius: 30px;
    text-decoration: none; font-weight: bold; text-transform: uppercase;
    transition: all 0.3s ease; box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}
.btn-neon-action:hover { background-color: #00ffff; color: #0d0d0d; box-shadow: 0 0 20px rgba(0, 255, 255, 0.8); }

.lien-discret-gris { color: #666; text-decoration: underline; font-size: 0.9rem; }
.lien-discret-gris:hover { color: #999; }

/* --- FOOTER --- */
footer {
    background-color: #000000;
    color: #666;
    padding: 15px;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #333;
    font-size: 0.9em;
}

/* Responsive */
@media (max-width: 768px) {
    .choix-mode { flex-direction: column; align-items: center; }
    .mode-card { width: 90%; max-width: 350px; }
}

/* 1. Le texte et le lien "Connectez-vous..." en BLANC */
.txt-invite {
    font-size: 1.1rem;
    color: #ffffff !important; /* Force le texte en blanc */
    margin-bottom: 25px;
}

.txt-invite a {
    color: #ffffff !important; /* Force le lien en blanc */
    font-weight: bold;
    text-decoration: underline;
    text-shadow: none; /* Enlève la lueur colorée pour que ce soit net */
}

/* 2. Le bouton "SAUVEGARDER SCORE" en BLANC */
.btn-neon-action {
    display: inline-block;
    border: 2px solid #ffffff !important; /* Bordure Blanche */
    color: #ffffff !important;            /* Texte Blanc */
    
    padding: 15px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease;
    
    /* Lueur blanche légère */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Au survol du bouton : Il devient tout blanc avec texte noir */
.btn-neon-action:hover {
    background-color: #ffffff !important;
    color: #0d0d0d !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

/* --- LE LIEN "RETOUR ACCUEIL" EN BAS (BLANC) --- */
.pied-fin {
    margin-top: 20px;
    text-align: center;
}

.pied-fin a {
    color: #ffffff !important;  /* Force le BLANC PUR */
    text-decoration: none;      /* Enlève le soulignement */
    font-size: 0.9rem;          /* Taille discrète */
    opacity: 0.7;               /* Un peu transparent pour ne pas voler la vedette */
    transition: opacity 0.3s;
}

/* Au survol, il devient blanc éclatant */
.pied-fin a:hover {
    opacity: 1;                 
    text-decoration: underline;
}

/* --- BOUTON INDICE (ROSE NÉON UNIFORME) --- */
.btn-indice {
    border: 2px solid #ff007f !important;    /* Rose Néon du thème */
    color: #ff007f !important;               /* Rose Néon du thème */
    background-color: transparent;
    
    font-size: 0.9em;
    padding: 8px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 0 5px rgba(255, 0, 127, 0.3); /* Lueur rose */
}

/* Au survol : Il se remplit et brille */
.btn-indice:hover {
    background-color: #ff007f !important;
    color: white !important;
    box-shadow: 0 0 20px rgba(255, 0, 127, 0.8); /* Gros glow rose */
    transform: scale(1.05);
}

/* --- BOÎTE DE MESSAGE INDICE (IA) --- */
.alert-indice {
    /* Fond sombre avec une légère teinte rose néon */
    background-color: rgba(255, 0, 127, 0.1); 
    
    /* Bordure fine Rose Néon */
    border: 1px solid #ff007f;
    
    /* Texte Blanc */
    color: #ffffff;
    
    /* Mise en forme */
    padding: 15px;
    border-radius: 10px;
    margin: 20px auto; /* Centré horizontalement */
    text-align: center;
    
    /* Taille et ombre */
    width: 90%;
    max-width: 500px;
    box-shadow: 0 0 15px rgba(255, 0, 127, 0.2); /* Légère lueur rose */
    
    /* Animation d'apparition douce */
    animation: fadeIn 0.5s ease;
}

/* Petite animation pour que le message n'apparaisse pas brutalement */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- LIEN "RETOUR ACCUEIL" (FORCE EN BLANC) --- */
.form-footer .link-pink {
    color: #ffffff !important;       /* Blanc pur */
    text-shadow: none !important;    /* On enlève la lueur rose */
    font-weight: bold;
    text-decoration: none;
    opacity: 0.7;                    /* Un peu transparent (gris clair) */
    transition: all 0.3s ease;
}

/* Au survol : Devient blanc éclatant */
.form-footer .link-pink:hover {
    color: #ffffff !important;
    opacity: 1;                      /* Blanc à 100% */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Petite lueur blanche */
    text-decoration: underline;
}

/* --- LIEN "ANNULER ET QUITTER" (BLANC) --- */
a[href="index.php?action=reset"] {
    color: #ffffff !important;      /* Force le Blanc pur */
    text-shadow: none !important;   /* Enlève l'effet néon rose */
    font-weight: normal;            /* Texte normal (pas gras) */
    text-decoration: underline;     /* Souligné pour qu'on sache que c'est un lien */
    opacity: 0.7;                   /* Un peu transparent pour être discret */
    font-size: 0.9em;
    transition: opacity 0.3s ease;
}

/* Au survol : Il devient bien blanc et visible */
a[href="index.php?action=reset"]:hover {
    color: #ffffff !important;
    opacity: 1;                     /* Opacité à 100% */
    cursor: pointer;
}

/* =========================================
   ÉCRAN DE FIN / RÉSULTATS DUEL
   ========================================= */

/* Le conteneur principal */
.ecran-fin {
    text-align: center;         /* Centre tout le texte */
    padding: 20px;
    max-width: 600px;           /* Empêche que ça soit trop large sur PC */
    margin: 0 auto;             /* Centre le bloc au milieu de la page */
    animation: fadeIn 0.8s ease; /* Apparition en douceur */
}

/* Le Gros Titre (BRAVO...) */
.ecran-fin h1 {
    font-size: 2.5em;           /* Bien gros */
    margin-bottom: 10px;
    line-height: 1.2;           /* Espacement des lignes */
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* La petite boîte du classement */
.classement-box {
    background-color: #111;     /* Fond presque noir */
    border: 1px solid #333;     /* Bordure discrète */
    border-radius: 15px;        /* Coins arrondis */
    padding: 20px;
    
    max-width: 400px;           /* Largeur contrôlée (le "petit" classement) */
    width: 95%;                 /* S'adapte sur mobile */
    margin: 30px auto;          /* Espace en haut/bas et centré horizontalement */
    
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Ombre portée pour le relief */
}

/* Le titre "Classement" dans la boîte */
.classement-box h3 {
    margin-top: 0;
    font-size: 1rem;
    color: #666;                /* Gris discret */
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 1px solid #222;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* Le tableau à l'intérieur */
.table-mini {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;          /* Texte lisible mais compact */
}

.table-mini th {
    color: #888;
    font-size: 0.8em;
    text-transform: uppercase;
    padding-bottom: 10px;
}

.table-mini td {
    padding: 10px 5px;
    border-bottom: 1px solid #222; /* Lignes de séparation très fines */
    color: #ccc;
}

/* La ligne du joueur actuel (Toi) */
.row-me {
    color: #fff !important;     /* Blanc éclatant */
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.05); /* Fond très légèrement plus clair */
}

/* Responsive pour mobile */
@media screen and (max-width: 480px) {
    .ecran-fin h1 {
        font-size: 1.8em;       /* Titre un peu plus petit sur téléphone */
    }
    .classement-box {
        width: 100%;
        border-left: none;
        border-right: none;
        border-radius: 0;
    }
}

/* =============================================
   RESPONSIVE MOBILE (Écrans < 768px)
   ============================================= */
   @media screen and (max-width: 768px) {

    /* --- 1. HEADER & NAVIGATION --- */
    /* DANS LE BLOC @MEDIA SCREEN AND (MAX-WIDTH: 768px) */

    header {
        flex-direction: column;
        padding: 15px 0;
        gap: 15px;
        width: 100%;      /* Force la largeur exacte */
        max-width: 100vw; /* Sécurité pour ne pas dépasser l'écran */
    }

    nav ul {
        flex-direction: column;
        width: 100%;
        padding: 0 20px; /* AJOUT IMPORTANT : Marge à gauche et droite pour ne pas coller aux bords */
        gap: 10px;
    }

    nav li {
        width: 100%;
    }

    nav a {
        display: block;
        padding: 12px 0;
        font-size: 1.1em;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        /* Le lien prendra la place disponible moins le padding du ul défini au dessus */
    }

    /* --- 2. PAGE D'ACCUEIL (Les Cartes) --- */
    
    /* Le conteneur principal passe en colonne */
    .choix-mode {
        flex-direction: column !important; /* Force l'empilement vertical */
        align-items: center;
        gap: 30px; /* Espace entre la carte Solo et Multi */
        margin-top: 20px;
    }

    /* Les cartes elles-mêmes */
    .mode-card {
        width: 90% !important; /* Prend 90% de la largeur de l'écran */
        max-width: none;       /* Enlève la limite de largeur du PC */
        padding: 20px;
    }

    /* Textes plus lisibles */
    .mode-card h3 {
        font-size: 1.5em;
        margin-bottom: 15px;
    }

    .mode-card p {
        font-size: 1em;
        line-height: 1.4;
    }

    /* --- 3. LES BOUTONS --- */
    .btn {
        padding: 12px 20px; /* Boutons plus "épais" */
        font-size: 1.1em;
    }
    
    /* Pour que "Facile" et "Difficile" soient bien gros */
    .choix-niveau {
        display: flex;
        flex-direction: column; /* Boutons l'un sous l'autre sur très petit écran */
        gap: 10px;
    }
    
    /* Mais si le téléphone est assez large, on les garde côte à côte */
    @media (min-width: 400px) {
        .choix-niveau {
            flex-direction: row;
            justify-content: center;
        }
    }
}

/* À METTRE TOUT EN HAUT DU FICHIER STYLE.CSS */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Empêche le défilement horizontal parasite */
    width: 100%;
}

/* --- CLAVIER RESPONSIVE --- */
/* --- CLAVIER RESPONSIVE (CORRECTION) --- */

.clavier-container {
    width: 100%;            /* Prend toute la largeur disponible sur mobile */
    max-width: 600px;       /* Ne dépasse JAMAIS 600px (taille ordi) */
    margin: 20px auto;      /* Centré */
    position: relative;     /* Important pour le redimensionnement */
    line-height: 0;         /* Supprime les espaces fantômes sous l'image */
}

.clavier-container img {
    width: 100% !important; /* FORCE l'image à s'adapter au conteneur */
    height: auto !important;/* Garde les proportions */
    display: block;
    border-radius: 10px;    /* Petit bonus esthétique */
}

/* --- FORCE LE CLAVIER À RÉTRÉCIR --- */
img[usemap] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    min-width: 0 !important; /* Indispensable pour éviter les bugs flexbox */
}

.clavier-container {
    width: 100% !important;
    max-width: 600px !important; /* Taille max sur PC */
    margin: 0 auto !important;
    overflow: hidden; /* Coupe ce qui dépasse au cas où */
}


/* =========================================
   MENU HAMBURGER (MOBILE ONLY)
   ========================================= */

/* 1. Configuration de base (Invisible sur PC) */
.menu-checkbox {
    display: none; /* La case à cocher est toujours cachée */
}

.menu-icon {
    display: none; /* L'icône ☰ est cachée sur PC */
    font-size: 2em;
    cursor: pointer;
    color: white;
}

/* 2. STYLE RESPONSIVE (< 768px) */
@media screen and (max-width: 768px) {

    /* HEADER : On met le logo à gauche et le burger à droite */
    header {
        flex-direction: row; /* Important : alignement horizontal */
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        flex-wrap: wrap; /* Permet au menu de passer à la ligne */
        position: relative;
    }

    /* L'ICÔNE BURGER : On l'affiche sur mobile */
    .menu-icon {
        display: block;
    }

    /* LE MENU (NAV) : Caché par défaut */
    nav {
        width: 100%;
        display: none; /* CACHÉ ! */
        margin-top: 15px;
    }

    nav ul {
        flex-direction: column;
        width: 100%;
        padding: 0;
        gap: 0;
    }

    nav li {
        width: 100%;
        text-align: center;
        border-top: 1px solid rgba(255,255,255,0.1); /* Petit trait de séparation */
    }

    nav a {
        display: block;
        padding: 15px 0;
    }

    /* --- LA MAGIE : QUAND ON CLIQUE SUR LE BURGER --- */
    /* Si la case est cochée (checked), on affiche le nav qui la suit (~) */
    .menu-checkbox:checked ~ nav {
        display: block; /* AFFICHE ! */
        animation: derouler 0.3s ease; /* Petit effet stylé */
    }
}

/* Petite animation d'apparition */
@keyframes derouler {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   MENU HAMBURGER (MOBILE ONLY)
   ========================================= */

/* Configuration de base (Invisible sur PC) */
.menu-checkbox { display: none; }
.menu-icon { display: none; }

/* STYLE RESPONSIVE (< 768px) */
@media screen and (max-width: 768px) {

    header {
        display: flex;           /* Active le mode flexible */
        flex-wrap: wrap;         /* Permet au menu de passer à la ligne suivante */
        
        /* C'EST ICI LA MAGIE : */
        justify-content: space-between; /* Pousse le 1er élément à gauche et le dernier à droite */
        align-items: center;            /* Aligne verticalement au milieu */
        
        padding: 10px 20px;
        position: relative;
    }

    /* Le Titre (Motus) */
    header h1 {
        margin: 0;        /* Enlève les marges qui pourraient gêner */
        font-size: 1.5em; /* Ajuste la taille si besoin */
        /* Il se mettra naturellement à gauche grâce au space-between */
    }

    /* L'icône Hamburger */
    .menu-icon {
        display: block;   /* On l'affiche */
        font-size: 2em;
        cursor: pointer;
        color: white;
        margin: 0;
        /* Il se mettra naturellement à droite grâce au space-between */
    }

    /* Le Menu Déroulant */
    nav {
        width: 100%;      /* Prend toute la largeur */
        display: none;    /* Caché par défaut */
        margin-top: 15px;
        order: 3;         /* Force le menu à être en 3ème position (en dessous) */
    }

    nav ul {
        flex-direction: column;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    nav li {
        width: 100%;
        text-align: center;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    nav a {
        display: block;
        padding: 15px 0;
    }

    /* Ouverture du menu */
    .menu-checkbox:checked ~ nav {
        display: block;
        animation: derouler 0.3s ease;
    }
}

@keyframes derouler {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.logo-link {
    text-decoration: none; /* Enlève le soulignement */
    color: inherit;        /* Garde la couleur du titre (blanc/néon) */
    cursor: pointer;       /* Affiche la petite main au survol */
}

/* Petit effet au survol (optionnel) */
.logo-link:hover {
    opacity: 0.8;
}

/* =========================================
   PAGE CHOIX MULTIJOUEUR (Mobile)
   ========================================= */

   @media screen and (max-width: 768px) {

    /* 1. Mise en page (Empilement) */
    .choix-mode-multi {
        display: flex;
        flex-direction: column; /* L'un en dessous de l'autre */
        gap: 15px;              /* Espace un peu réduit */
        width: 100%;
        align-items: center;
    }

    .form-container {
        width: 95% !important;
        padding: 15px 10px; /* Marges réduites */
    }

    /* 2. TEXTES PLUS PETITS (Ajustements) */
    
    /* Le grand titre "Mode Multijoueur" */
    .form-container h2 {
        font-size: 1.5em; /* Plus petit (au lieu de 2em) */
        margin-bottom: 10px;
    }

    /* Le petit texte sous le titre */
    .form-container > p {
        font-size: 0.9em;
        margin-bottom: 20px;
    }

    /* Les titres des cartes (A et B) */
    .mode-card h3 {
        font-size: 1.2em; /* Plus discret */
        margin-bottom: 8px;
    }

    /* Le texte dans les cartes */
    .mode-card p {
        font-size: 0.9em; /* Texte compact */
        line-height: 1.3;
        margin-bottom: 15px;
    }

    /* Les boutons */
    .btn-full {
        font-size: 1em !important; /* Texte du bouton normalisé */
        padding: 10px !important;  /* Bouton moins "épais" */
    }

    /* Cartes pleine largeur */
    .choix-mode-multi .mode-card {
        width: 100% !important;
        max-width: none;
        padding: 15px; /* Moins de vide à l'intérieur des cartes */
    }
}

/* =========================================
   BOUTON INDICE MOBILE (Plus petit)
   ========================================= */

   @media screen and (max-width: 768px) {

    .btn-indice {
        font-size: 0.85em !important;  /* Texte plus petit */
        padding: 6px 12px !important;  /* Bouton moins "épais" et moins large */
        min-width: 0 !important;       /* Permet au bouton de rétrécir */
        margin-top: 10px !important;   /* Ajuste un peu l'espacement */
    }
    
}

/* Le conteneur (la ligne de séparation et l'alignement) */
.zone-abandon {
    margin-top: 15px;
    padding-top: 20px;
    text-align: center;
}

/* Le bouton (déjà fait, je le remets pour rappel) */
.btn-abandon {
    display: inline-block;
    color: #888;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.9em;
    transition: all 0.3s;
}

.btn-abandon:hover {
    color: #fff;
}

/* --- Page Abandon --- */

/* Le conteneur principal */
.page-abandon {
    text-align: center;
    padding: 50px 20px;
}

/* Le titre rouge */
.titre-rouge {
    color: #ff4444;
    margin-bottom: 15px;
}

/* Le bloc qui contient le mot */
.bloc-mot {
    margin: 40px 0;
}

/* Le mot secret en effet Néon Bleu */
.mot-neon {
    font-size: 3em;
    color: #00e5ff;
    letter-spacing: 5px;
    text-transform: uppercase;
    text-shadow: 0 0 15px #00e5ff; /* L'effet de lueur */
    margin-top: 10px;
    font-weight: bold;
}

/* =========================================================
   MEDIA QUERIES (ADAPTATION MOBILE & TABLETTE)
   ========================================================= */

   @media screen and (max-width: 768px) {

    /* 1. Ajustement global du corps de page */
    body {
        padding: 0px; /* Moins de marge sur les côtés */
    }

    /* 2. Le Header et le Menu passent en colonne */
    header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    nav ul {
        flex-direction: column; /* Menu vertical */
        padding: 0;
        gap: 10px;
    }

    nav a {
        display: block;
        padding: 10px;
        background: rgba(255, 255, 255, 0.05); /* Fond léger pour mieux cliquer */
        border-radius: 5px;
    }

    /* 3. Le Plateau de Jeu (Le plus important !) */
    .plateau {
        gap: 5px; /* On réduit l'espace entre les cases */
    }

    .case {
        /* On réduit la taille des cases pour que ça rentre */
        width: 38px;  
        height: 38px; 
        font-size: 1.2em; /* Police un peu plus petite */
        line-height: 38px; /* Pour bien centrer le texte verticalement */
        border-width: 1px; /* Bordure plus fine */
    }

    /* Si le mot est très long (> 7 lettres), on réduit encore un peu */
    .ligne {
        justify-content: center; /* On centre bien les lignes */
    }

    /* 4. Les Formulaires (Login, Register) prennent toute la largeur */
    .er, 
    .resultat-container,
    .box-neon-rose {
        width: 100%; 
        max-width: 100%;
        padding: 15px;
        margin: 10px 0;
    }

    /* 5. Le Clavier */
    /* Comme c'est une image, on s'assure qu'elle ne dépasse pas */
    .clavier-container {
        width: 100%;
        overflow-x: auto; /* Permet de scroller horizontalement si l'écran est minuscule */
        padding-bottom: 10px;
    }
    
    #img-clavier {
        max-width: 100%;
        height: auto;
    }

    /* 6. Les Titres et Textes */
    h1, h2 {
        font-size: 1.5em; /* On calme les gros titres */
    }
    
    .titre-neon, .mot-neon {
        font-size: 2em; /* Le mot secret un peu moins gros à la fin */
    }

    /* 7. Tableau des scores */
    table {
        display: block;
        overflow-x: auto; /* Scroll horizontal pour le tableau */
        white-space: nowrap;
    }
}

/* =========================================================
   HEADER & NAVIGATION (TON DESIGN DESKTOP)
   ========================================================= */

   header {
    background-color: #000000;
    border-bottom: 2px solid #ff007f;
        
    /* On force l'alignement centré pour le desktop */
    text-align: center;
    position: relative; /* Important pour le menu mobile */
}

/* Le Logo (qui remplace le H1 dans le code HTML) */
header .logo {
    display: inline-block; /* Pour qu'il soit centré */
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px #ff007f;
    font-size: 2em; /* Taille d'un H1 */
    font-weight: bold;
    text-decoration: none;
}

/* Le Menu sur PC */
header .menu ul {
    list-style-type: none;
    padding: 0;
    margin-top: 20px;
    margin-bottom: 0;
}

header .menu li {
    display: inline;
    margin: 0 15px;
}

header .menu a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    text-transform: uppercase;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

header .menu a:hover {
    color: #ff007f;
    text-shadow: 0 0 8px #ff007f;
}

/* IMPORTANT : On cache les outils du mobile sur PC */
header .menu-btn,
header .menu-icon {
    display: none;
}


/* =========================================================
   RESPONSIVE MOBILE (Mode Hamburger 🍔)
   ========================================================= */

   @media screen and (max-width: 768px) {

    /* C'EST ICI QUE LA MAGIE OPÈRE POUR GAUCHE / DROITE */
    header {
        display: flex; /* On active le mode flexible */
        justify-content: space-between; /* L'un au début (gauche), l'autre à la fin (droite) */
        align-items: center; /* Centrés verticalement */
        padding: 10px 20px; /* Un peu de marge sur les côtés */
        text-align: left; /* On annule le centrage du PC */
    }

    /* Le Logo sur Mobile */
    header .logo {
        font-size: 1.4em; /* Un peu plus petit pour que ça rentre */
        margin: 0;
        /* Le logo se cale automatiquement à gauche grâce au space-between */
    }

    /* Le Burger sur Mobile */
    header .menu-icon {
        display: block; /* On l'affiche */
        cursor: pointer;
        padding: 10px; /* Zone de clic */
        /* Le burger se cale automatiquement à droite grâce au space-between */
    }

    /* Dessin des traits du burger */
    header .menu-icon .navicon {
        background: #fff;
        display: block;
        height: 2px;
        position: relative;
        width: 24px;
    }

    header .menu-icon .navicon:before,
    header .menu-icon .navicon:after {
        background: #fff;
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        transition: all .2s ease-out;
        width: 100%;
    }
    header .menu-icon .navicon:before { top: 6px; }
    header .menu-icon .navicon:after { top: -6px; }


    /* --- Le Menu Déroulant (Caché par défaut) --- */
    header .menu {
        display: none; /* Caché */
        background-color: #000;
        width: 100%;
        position: absolute; /* Sort du flux pour ne pas gêner le logo */
        top: 100%; /* Juste sous la barre */
        left: 0;
        z-index: 1000;
        border-bottom: 2px solid #ff007f;
        box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    }

    header .menu ul {
        display: flex;
        flex-direction: column; /* Vertical */
        margin: 0;
    }

    header .menu li {
        display: block;
        margin: 0;
        border-top: 1px solid #333; /* Séparateurs */
        text-align: center;
    }

    header .menu li a {
        display: block;
        padding: 15px;
    }

    /* Ouverture du menu quand on coche */
    header .menu-btn:checked ~ .menu {
        display: block;
    }

    /* Animation Croix */
    header .menu-btn:checked ~ .menu-icon .navicon { background: transparent; }
    header .menu-btn:checked ~ .menu-icon .navicon:before { transform: rotate(-45deg); top: 0; }
    header .menu-btn:checked ~ .menu-icon .navicon:after { transform: rotate(45deg); top: 0; }
}

/* =========================================================
   FIX CLAVIER GD (Empêche le décalage des clics)
   ========================================================= */

/* 1. Le conteneur autorise le scroll si ça dépasse */
.clavier-container {
    width: 100%;
    overflow-x: auto; /* Scroll horizontal sur mobile */
    text-align: center;
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch; /* Fluidité iPhone */
}

/* 2. L'image doit rester FIGÉE à sa taille réelle */
#img-clavier {
    width: auto !important;       /* Annule le width: 100% */
    max-width: none !important;   /* Annule le responsive global */
    height: auto !important;
    display: inline-block;
    vertical-align: top;
    
    /* On enlève les marges parasites */
    margin: 0 auto; 
    box-shadow: none; 
}

/* =========================================================
   AGRANDISSEMENT DE LA ZONE JEU (POUR LE GROS CLAVIER)
   ========================================================= */

/* Uniquement sur Ordinateur (écran supérieur à 768px) */
@media screen and (min-width: 769px) {

    /* 1. On élargit le conteneur principal du jeu */
    .jeu-plateau, main {
        max-width: 1000px !important; /* Avant c'était sûrement 600px */
        width: 95%; /* Prend presque toute la largeur dispo */
        margin: 0 auto;
    }

    /* 2. On s'assure que le clavier a le droit de prendre toute la place */
    .clavier-container {
        max-width: 1000px !important; 
        width: 100%;
        overflow: visible; /* Plus de scroll barre */
    }

    /* 3. L'image du clavier */
    #img-clavier {
        max-width: 100% !important;
        height: auto;
    }
}

/* Le style des boites (carrés) */

.demo-checkbox {
    display: none;
}

.demo-checkbox:checked ~ .demo-container {
    display: block;
    animation: fadeIn 0.5s; /* Petit bonus : apparition en douceur */
}

/* Bonus : Changer le texte du bouton sans JS */
.btn-demo::after {
    content: "Voir la démo"; /* Texte par défaut */
}

.demo-checkbox:checked + .btn-demo::after {
    content: "Masquer la démo"; /* Texte quand c'est ouvert */
}
/* --- 2. LE STYLE DU BOUTON (LABEL) --- */
.btn-demo {
    display: inline-block;
    background-color: transparent; /* Pas de fond */
    border: none;                  /* Pas de bordure */
    color: #999;                   /* Gris discret */
    font-size: 14px;               /* Taille modérée */
    text-decoration: underline;    /* Souligné pour dire "clique-moi" */
    cursor: pointer;
    margin-bottom: 10px;
    
    /* Transition douce pour le hover */
    transition: color 0.3s;
}
.btn-demo:hover {
    color: #e3e3e3;
}

/* Petite animation d'apparition pour le bloc */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.demo-container {
    display: none;

    border: 1px solid #888; /* Bordure fine grise */
    padding: 5px;          /* Espace à l'intérieur */
    border-radius: 10px;    /* Coins arrondis */
    max-width: 370px;       /* Largeur max */
    text-align: center;     /* Texte centré */
    
    /* GESTION DE L'ESPACE EXTÉRIEUR */
    margin-top: 20px;    /* <--- C'est ici : Espace au-dessus de la bordure */
    margin-bottom: 0px; /* Espace en dessous */
    margin-left: auto;   /* Centrage horizontal */
    margin-right: auto;  /* Centrage horizontal */
}

.demo-row {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin-bottom: 15px;
}

.demo-box {
    width: 40px;
    height: 40px;
    border: 2px solid #555;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
    color: white;
    background-color: transparent; /* Au début c'est vide */
}

/* L'animation : Changement de couleur */
@keyframes revealColor {
    0% { transform: rotateX(0); background-color: transparent; border-color: #555; }
    50% { transform: rotateX(90deg); } /* Effet de flip */
    100% { transform: rotateX(0); color: white; }
}

/* Les 3 états finaux */
.demo-correct {
    animation: revealGreen 2s infinite; /* Ça boucle pour la démo */
    /* astuce: on définit l'animation plus bas */
}

/* On triche un peu : on crée une animation spécifique pour chaque couleur 
   pour que ça soit simple à comprendre */

@keyframes turnGreen {
    0%, 20% { background-color: transparent; border-color: #555; }
    30%, 100% { background-color: #52cb15; border-color: #52cb15; } /* VERT */
}

@keyframes turnYellow {
    0%, 40% { background-color: transparent; border-color: #555; }
    50%, 100% { background-color: #ff9d00; border-color: #ff9d00; } /* JAUNE */
}

@keyframes turnGrey {
    0%, 60% { background-color: transparent; border-color: #555; }
    70%, 100% { background-color: #ff3333; border-color: #ff3333; } /* GRIS */
}

/* Application des animations avec des délais */
.demo-correct {
    animation: turnGreen 4s infinite; /* Durée totale 4s */
}
.demo-present {
    animation: turnYellow 4s infinite;
}
.demo-absent {
    animation: turnGrey 4s infinite;
}

.vert { color: #52cb15; font-weight: bold; }
.jaune { color: #ff9d00; font-weight: bold; }
.gris { color: #ff3333; font-weight: bold; } /* J'ai mis ton rouge ici même si la classe s'appelle 'gris' */