:root {
      /* Déclaration d'une variable CSS nommée --vert */
      --vert: #00ff00; 
      --noir: black;
      --blanc : white;
      --font : 'Courier New', monospace;
      --rouge : #ff0000;
}

/* =====================================
   Styles généraux et du Body
   ===================================== */
body {
      margin: auto;                  
      height: 100vh;              
      background: var(--noir);          
      color: var(--vert);         
      font-family: var(--font); 
      display: flex;              
      justify-content: center;    
      align-items: center;
      overflow: hidden;
      position: relative;        
}

/* =====================================
   Classes Utilitaires pour JS
   ===================================== */

/* Classe pour masquer un élément */
.hidden {
    display: none !important;
}

/* Classe pour afficher un bloc (utile pour le canvas et le titre) */
.display-block {
    display: block !important;
}


/* =====================================
   Style des étapes de texte (machine à écrire)
   ===================================== */

/* La phrase initiale (Croyez-vous...) */
#text {
      font-size: 1.8em;               
      white-space: nowrap;            
      /* L'animation du curseur est gérée par une classe */               
      text-align: center; /* Assure que le texte est centré dans son conteneur */
      position: relative;
      z-index: 3;
      color: var(--vert);
      text-shadow: 0 0 8px rgba(0, 255, 0, 0.45);
}

/* Le texte "Hello World" de la phase finale */
h1 {
     font-size: 2em;     
     font-weight: 600;          
      white-space: nowrap;            
      /* L'animation du curseur est gérée par une classe */
      text-align: center; /* Assure que le texte est centré dans son conteneur */ 

}

/* Classe pour afficher le curseur clignotant */
.cursor {
    border-right: 2px solid var(--vert);
    animation: blink-cursor 0.75s step-end infinite; /* Animation de clignotement */
}

/* Animation du curseur */
@keyframes blink-cursor {
    from, to { border-color: transparent; }
    50% { border-color: var(--vert); }
}


/* =====================================
   Style de l'effet Matrix
   ===================================== */
#matrix {
      position: absolute;   
      top: 0;               
      left: 0;
      z-index: 1;
      /* Masqué au départ via la classe .hidden dans le HTML */
}

#text-container {
    position: fixed;
    inset: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

/* =====================================
   Style de l'Étape Finale (Hello World et Boutons)
   ===================================== */
#final-stage {
      /* Le JS ajoute/retire la classe .hidden pour l'afficher/masquer */
      display: flex;
      flex-direction: column; /* Texte en haut, boutons en bas */
      align-items: center;    /* Centre le contenu (titre et boutons) */
      position: relative;
      z-index: 10;            /* Assure qu'il est au-dessus du canvas si besoin */
}

/* Conteneur des boutons utilisant Flexbox */
#button-container {
    display: flex;
    justify-content: center; /* Centre les boutons horizontalement */
    gap: 20px; /* Espace entre les boutons */
    margin-top: 40px; /* Espace entre le titre et les boutons */
}

/* Style des boutons */
#button2 {
    padding: 15px 30px;
    font-size: 1.2em;
    color: var(--vert);
    background-color: var(--noir);
    border: 2px solid var(--vert);
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    text-transform: uppercase;
}

#button2:hover {
    background-color: #090; /* Vert légèrement plus foncé */
    color: white;
}





/* Page Règles */

#regles-jeu {
    display: flex;
    flex-direction: column;
    align-items: center; 
    margin-inline: 25%;
}

.bouton-jeu{
    padding: 15px 30px;
    font-size: 1.2em;
    color: var(--vert);
    background-color: var(--noir);
    border: 2px solid var(--vert);
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    text-transform: uppercase;
}

#regles-jeu .regles {
      margin-block: 50px;
      text-align: justify;
}

.bouton-jeu:hover {
    background-color: #090; /* Vert légèrement plus foncé */
    color: white;
}



/* Style dy jeu */
.page-jeu {
    max-width: 800px;
    padding: 40px;
    position: relative;
    z-index: 2;
}

#text-container-jeu {
    position: relative;
    z-index: 2;
}

#text-jeu {
    font-size: 25px;
    white-space: pre-line;
    text-align: center;
}

.page-jeu .bouton-jeu{
    padding: 10px 25px;
    font-size: 18px;
    color: var(--vert);
    background-color: var(--noir);
    border: 2px solid var(--vert);
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    text-transform: uppercase;
}
.page-jeu .bouton-jeu:hover {
    background-color: #090; /* Vert légèrement plus foncé */
    color: white;
}

.p-dialogue{
    color: var(--blanc);
    font-size: 18px;
}
.p-dialogue-neo{
    color: var(--vert);
    font-size: 18px;
}
.action {
    color: var(--vert);
    font-style: italic;
    text-align: center;
    margin: 30px 0;
    opacity: 0.8;
}

input#reponse {
    background: black;
    border: 2px solid var(--vert);
    color: var(--vert);
    font-family: var(--font);
    font-size: 18px;
    padding: 10px;
    margin: 15px 0;
    width: 100%;
}

input#reponse::placeholder {
    color: var(--vert);
}

#feedback {
    margin-top: 15px;
    font-style: italic;
}

.décodage {
    display: flex;
    flex-direction: column;   /* empile verticalement */
    align-items: center;      /* centre horizontalement */
    gap: 20px;                /* espace entre les boutons */
    margin-top: 30px;
}