@charset "utf-8";
/* CSS Document */

/* ==========================================================================
   Style commun - Jeu de la lettre manquante (CP)
   ========================================================================== */

/* Mode Pleine Page */
body.jeu-pleine-page {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f4f4f4;
}

body.jeu-pleine-page .cadre-jeu {
  padding: 35px 25px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

/* Conteneur principal */
.jeu-container-cp { 
  text-align: center; 
  font-family: Arial, sans-serif; 
  padding: 15px;
  box-sizing: border-box;
  margin-top: 30px;
  background-color: #FC3;
  font-size: 1.4rem; 
  font-weight: bold; 
  margin-bottom: 20px; 
  max-width: 100%;
  overflow-x: hidden;
}

.jeu-container-cp .cadre-jeu {
  border: 2px dashed #000;
  padding: 25px 15px;
  border-radius: 8px;
  display: inline-block;
  margin: 0 auto;
  min-width: 280px;
  max-width: 100%;
  box-sizing: border-box;
  background-color: #ffd8b5;
}

/* Zone du mot à deviner */
.jeu-container-cp .mot-container { 
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 25px; 
}

.jeu-container-cp .case-lettre { 
  display: inline-block !important; 
  vertical-align: middle; 
  width: 48px; 
  height: 48px; 
  line-height: 44px; 
  border: 2px solid #000; 
  border-radius: 4px; 
  font-size: 1.8rem; 
  font-weight: bold; 
  text-transform: uppercase; 
  box-sizing: border-box; 
  background: #fff; 
  margin: 0; 
  text-align: center; 
}

.jeu-container-cp .case-vide { 
  border-style: dashed; 
  background-color: #fafafa; 
}

.jeu-container-cp .case-correct { 
  border-color: #2e7d32; 
  background-color: #e8f5e9; 
  color: #2e7d32; 
}

.jeu-container-cp .case-erreur { 
  border-color: #c62828; 
  background-color: #ffebee; 
  color: #c62828; 
}

/* Zone des propositions de lettres */
.jeu-container-cp .choix-container { 
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 20px; 
}

.jeu-container-cp .bouton-lettre { 
  display: inline-block !important; 
  vertical-align: middle; 
  width: 48px; 
  height: 48px; 
  line-height: 44px; 
  border: 2px solid #000; 
  border-radius: 4px; 
  background: #fff; 
  color: #000; 
  font-size: 1.6rem; 
  font-weight: bold; 
  cursor: pointer; 
  margin: 0; 
  padding: 0; 
}

.jeu-container-cp .bouton-lettre:active { 
  background: #000; 
  color: #fff; 
}

/* Zone des messages */
.jeu-container-cp .message { 
  min-height: 2rem; 
  font-size: 1.3rem; 
  font-weight: bold; 
  margin-top: 10px; 
}

/* Boutons d'action */
.jeu-container-cp .actions-container { 
  margin-top: 20px; 
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.jeu-container-cp .btn-action { 
  display: inline-block; 
  padding: 10px 16px; 
  font-size: 1rem; 
  font-weight: bold; 
  border: 2px solid #000; 
  background: #fff; 
  color: #000; 
  cursor: pointer; 
  border-radius: 4px; 
  margin: 0; 
}

.jeu-container-cp .btn-action:active { 
  background: #000; 
  color: #fff; 
}

/* ==========================================================================
   Adaptation Mobile (Écrans < 500px)
   ========================================================================== */
@media (max-width: 500px) {
  /* On enlève les marges globales pour maximiser l'espace disponible */
  .jeu-container-cp {
    padding: 10px 2px;
  }

  /* On réduit le padding interne du cadre au strict minimum */
  .jeu-container-cp .cadre-jeu {
    padding: 15px 2px;
    min-width: auto;
  }

  /* On resserre juste l'espace ENTRE les lettres sans toucher aux lettres */
  .jeu-container-cp .mot-container,
  .jeu-container-cp .choix-container {
    gap: 2px;
  }

  /* TAILLE D'ORIGINE CONSERVÉE */
  .jeu-container-cp .case-lettre,
  .jeu-container-cp .bouton-lettre {
    width: 48px;
    height: 48px;
    line-height: 44px;
    font-size: 1.8rem;
  }
}

/* Barre de navigation Série 1 CP */
.nav-serie-cp {
  background-color: #f4f4f6;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 15px;
  margin: 10px auto;
  text-align: center;
  font-family: Arial, sans-serif;
  max-width: 800px;
}

.titre-nav-serie {
  display: block;
  font-weight: bold;
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
}

.liste-mots-cp {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.liste-mots-cp li {
  margin: 0;
}

.liste-mots-cp a {
  display: inline-block;
  padding: 6px 12px;
  background-color: #ffffff;
  color: #2c3e50;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
}

/* Effet au survol */
.liste-mots-cp a:hover {
  background-color: #ff9800; /* Orange Halloween */
  color: #ffffff;
  border-color: #e68a00;
}

/* Bouton du mot de la page actuelle */
.liste-mots-cp a.actif {
  background-color: #d35400; /* Orange foncé/marron */
  color: #ffffff;
  border-color: #a04000;
  cursor: default;
}