/* ------------------------------
Styles Globaux
------------------------------ */
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
margin: 0;
padding: 0 20px;
box-sizing: border-box;
}

/* ------------------------------
    Styles du Header
    ------------------------------ */
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.header .header-left,
.header .header-center,
.header .header-right {
flex: 1;
}
.header .header-left {
text-align: left;
font-size: 28px;
font-weight: bold;
}
.header .header-center {
text-align: center;
font-size: 20px;
}
.header .header-right {
text-align: right;
font-size: 20px;
}

/* ------------------------------
    Conteneur Principal
    ------------------------------ */
.container {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.left-column {
flex: 0 0 45%;
max-width: 600px;
display: flex;
flex-direction: column;
align-items: center;
margin-right: 20px;

}
.right-column {
flex: 0 0 55%;
max-width: 600px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
font-size: 22px;
font-weight: bold;
margin-left: 20px;
box-sizing: border-box;
}

/* Responsive : Colonnes empilées sur petits écrans */
@media (max-width: 600px) {
.header .header-center,
.header .header-right {
    display: none !important;
}
.container {
    flex-direction: column;
    align-items: center;
}
.left-column, .right-column {
    flex: 0 0 100%;
    max-width: 400px;
}
.right-column {
    margin-top: 20px;
}
}

/* ------------------------------
    Styles du Formulaire de Chat
    ------------------------------ */
#chat-form {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
width: 100%;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
box-sizing: border-box;
}
#chat-form textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
text-align: left;
overflow: hidden;
transition: height 0.2s ease-in-out;
font-family: Arial, sans-serif;
resize: vertical;
box-sizing: border-box;
}
#chat-form button[type="submit"] {
background-color: #CC9922;
color: #fff;
border: 2px solid #CC9922;
border-radius: 20px;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}
#chat-form button[type="submit"]:hover {
background-color: #fff;
color: #CC9922;
}

/* ------------------------------
    Styles de la Réponse (Chat)
    ------------------------------ */
#response {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
width: 100%;
padding: 20px;
font-weight: normal;
font-size: 22px;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
box-sizing: border-box;
}
#response-content {
width: 100%;
text-align: left;
}
#copy-button {
background-color: #CC9922;
color: #fff;
border: 2px solid #CC9922;
border-radius: 20px;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
margin-top: 15px;
display: none;
}
#copy-button:hover {
background-color: #fff;
color: #CC9922;
}

.word-box .letter:hover {
background-color: rgba(204, 153, 34, 0.2); /* Léger fond doré */
cursor: pointer;
}

/* ------------------------------
    Styles pour la Coloration dans les Word-Boxes
    ------------------------------ */
.word-box .letter,
#word-box-correction .letter {
cursor: pointer;
padding: 0 2px;
}
/* Forcer la couleur grise par défaut (pour le texte du côté droit) */
#default-right-text, #default-right-text * {
color: rgb(168,168,167) !important;
}

.letter {
    display: inline-block;
    margin-right: 2px;
  }

  #square4 .word-box .letter {
    text-transform: lowercase;
    font-weight: normal;
}

/* ------------------------------
    Square 5 et Square 6
    ------------------------------ */
#square5, #square6 {
    background-color: #CC9922;
  }

/* ------------------------------
    Boutons et Liens
    ------------------------------ */
#correct-word-button {
background-color: #CC9922;
color: #fff;
border: 2px solid #CC9922;
border-radius: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#correct-word-button:hover {
background-color: #fff;
color: #CC9922;
}

.small-button {
background-color: #fff;
color: #CC9922;
border: 2px solid #CC9922;
border-radius: 16px;
padding: 8px 8px;
cursor: pointer;
font-size: 16px;
word-wrap:normal;
margin:2px;
transition: background-color 0.3s, color 0.3s;
}
#select-container .small-button {
    font-size: 20px; /* Ajustez la taille selon vos besoins */
  }
.small-button:hover {
background-color: #CC9922;
color: #fff;
}
.question-container {
display: flex;
align-items: center;
gap: 10px;
}
.correct-color-link {
color: #CC9922;
font-weight: bold;
text-decoration: underline;
}
.correct-color-link:hover {
color: #a67300;
}

/* ------------------------------
    Conteneurs Spécifiques et Mise en Page
    ------------------------------ */
.stack-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.title-centered {
text-align: center;
font-size: 18px;
}
.bordered-box {
border: 2px solid #CC9922;
padding: 15px;
border-radius: 8px;
text-align: center;
background-color: #fff;
width: 100%;
max-width: 400px;
box-sizing: border-box;
}
.word-box {
border: 2px solid #CC9922;
padding: 10px;
font-size: 24px;
text-align: center;
background-color: #fff;
width: fit-content;
margin: auto;
user-select: text;
-webkit-user-select: text;
box-sizing: border-box;
}
.step-title {
color: #000;
font-weight: bold;
}

/* ------------------------------
    Bouton de Validation de Mot
    ------------------------------ */
#validate-word-button {
background-color: #CC9922;
color: #fff;
border: 2px solid #CC9922;
border-radius: 20px;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
}
#validate-word-button:hover {
background-color: #fff;
color: #CC9922;
}

/* ------------------------------
    Options de Couleur
    ------------------------------ */
.color-choice {
display: flex;
align-items: center;
gap: 10px;
margin: 5px 0;
}
.color-square {
width: 50px;
height: 50px;
cursor: pointer;
}
.color-choice span {
font-size: 18px;
color: #333;
font-weight: normal;
}

/* ------------------------------
    Square 7 : Boîte de Correction en Bas
    ------------------------------ */
.special-box {
width: 100%;
box-sizing: border-box;
text-align: center;
padding: 15px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
font-size: 12px;
font-weight: normal;
border-top: 1px solid #ccc;
margin-top: 100px;
}

/* ------------------------------
    Styles du Formulaire de Correction (Square 8)
    ------------------------------ */
#square8 input {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;
box-sizing: border-box;
}
#square8 button {
background-color: #CC9922;
color: #fff;
border: 2px solid #CC9922;
border-radius: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#square8 button:hover {
background-color: #fff;
color: #CC9922;
}

/* ------------------------------
    Mise en Page des Extra Squares
    ------------------------------ */
#extra-squares {
width: 100%;
margin-top: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.extra-square {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
padding: 10px;
margin-bottom: 10px;
display: none; /* affichage contrôlé via JS */
font-size: 16px;
box-sizing: border-box;
}

/* ------------------------------
    Positionnement de Square 6
    ------------------------------ */
/* Square 6 doit apparaître en haut de toutes les boîtes (au-dessus) */
#square6 {
position: relative;
z-index: 1000;   /* Toujours au-dessus des autres */
order: -1;       /* Dans le flex container, le place en premier */
}

/* ------------------------------
    Classe Utilitaire pour Masquer un Élément
    ------------------------------ */
.hidden {
display: none !important;
}