/*Elements commun à tout le site*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh; /*pour que le navigateur utilise 100% de l'écran ---> problème lié au faite que le footer ne restait pas au fond de l'écran dû au manque de contenu. Solution : https://www.30secondsofcode.org/css/s/footer-at-the-bottom/#using-grid*/
  font-family: 'Press Start 2P', cursive; /* font importée depuis les headers depuis Google Fonts*/
  line-height: 1.4;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  background: #111;
}

input, textarea, button {font-family: inherit} /* pour que les boutons utilise aussi la même police que le reste du site ---> problème lié au faite que Chrome applique une font par défaut pour les objets "interactifs". Solution : : https://stackoverflow.com/questions/26140050/why-is-font-family-not-inherited-in-button-tags-automatically*/

h1 {
  font-size: 24px;
  padding-bottom: 30px;
  padding-top: 20px;
}

h2 {
  font-size: 20px;
}

header {
  background: rgba(0, 0, 0, 0.900);
  padding: 10px 0;
  color: #1ae000;
  border-bottom: #096800 3px solid; /*ligne verte sous le header*/
  text-shadow: 0 0 10px rgb(8, 95, 0), 0 0 20px rgb(22, 248, 1);
}

footer {
  margin-top: auto;
  background: rgba(0, 0, 0, 0.950);
  text-align: center;
  padding: 10px;
  border-top: #096800 3px solid;
  color: #1ae000;
  text-shadow: 0 0 10px rgb(22, 248, 1), 0 0 20px rgb(22, 248, 1);
}

main {
  max-width: 900px;
  width: 90%;
  margin: 20px auto;
  text-align: center;
  background: rgba(0, 0, 0, 0.96);
  border: rgba(67, 134, 61, 0.96) 4px solid;
  padding: 20px;
  border-radius: 2px;
  flex: 1; /* pour que le main prenne tout l'espace restant entre header et footer dans tous les cas */
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 10px rgb(143, 218, 136), 0 0 20px rgb(22, 248, 1); /*Effet néon : https://mimo.org/glossary/css/text-shadow et https://blog.dorianguilmain.com/comment-creer-un-effet-neon-en-css/ */
}

button {
  color: white;
  border: rgba(0, 0, 0, 0.164) 1px solid;
  padding: 30px 30px;
  border-radius: 40px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
  text-align: center;
}

#buttonmusic {
  color: rgb(255, 255, 255);
  background-color: #0000004b;
  padding: 30px;
  margin: 10px 0 30px 0;
  max-width: 80%;
  border-radius: 2px;
}


/*Liens du menu et web */
a {
  color: #16c000;
  text-shadow: 0 0 10px rgb(22, 248, 1), 0 0 20px rgb(22, 248, 1);
}

/* Barre de navigation */
nav ul {
  display: flex;
  list-style: none;
  justify-content: center;
  gap: 50px;
  font-size: 25px;
  margin: 0px 0 5px 0;
}

nav li {
  display: inline;
}









/* Acceuil et jeu */
#logo {
    display: block;
    margin: 20px auto;
    max-width: 100%;
    height: auto;
}

#jeu {
  margin: 20px 0 20 0;
  padding: 10px;
}

#jeu p {
  margin-bottom: 10px;
}

#listeEssais{
  text-align: left;
  max-width: 210px; /* pour que la liste soie centré ne soit pas trop large même sur téléphone*/
  margin: 0 auto;
}

#entree {
  width: 200px;
  height: 100px;
  padding: 30px;
  margin: 25px;
  font-size: 40px;
  text-align: center;
  color: #585858;
  background-color: rgba(0, 0, 0, 0.8);
  transition: color 2s ease, text-shadow 2s ease; /* transition pour l'effet d'éteindre l'écran*/
}

#entree:focus { /* lorsque on entre quelque chose dans entree*/
  outline: none; /* aucun contour */
  color: #1ae000;
  text-shadow: 0 0 5px rgb(22, 248, 0.2), 0 0 10px rgb(22, 248, 1);
}

#entree:focus::placeholder { /*couleur texte de fond(::placeholder) lorsque on clique dedans (:focus) : https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::placeholder*/
  color: #1ae000;
  text-shadow: 0 0 10px rgb(22, 248, 1), 0 0 20px rgb(22, 248, 1); 
  transition: color 1s ease, text-shadow 1s ease; /* transition pour donner une impressiond d'écran qui s'allume*/
}

.feedback {
  margin-top: 30px;
  font-weight: bold;
}

#btnenter {
  background-color: rgb(0, 0, 255);
}

#btnrec {
  background-color: rgb(255, 0, 0);
}

button:active { /* effet bouton appuyé */
  transform: scale(0.95) translateY(3px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 3px 5px rgba(0, 0, 0, 0.4);
}







/* FAQ */
.faq-bloc {
  margin-bottom: 15px;
}

.faq-question {
  background-color: #ffffff;
  padding: 15px;
  border-radius: 2px;
  text-align: center;
  color: #000000;
}
.faq-reponse {
  padding: 0 15px;
  background-color: rgba(255, 255, 255, 0.2);
  margin-bottom: 10px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease; /* transition pour l'animation d'ouverture/fermeture */
}

.faq-reponse.active {
  max-height: 500px;
  padding: 15px 10px;
}






/*A propos */
#auteur {
  margin-bottom: 40px;
}
.photo-auteur {
  margin: 0 auto 20px; /* pour centrer l'image et ajouter un espace en dessous */
  display: block;
  width: 150px;
  height: 150px;
  border-radius: 2px;
  border: 2px rgb(190, 190, 190) solid;
}

#contact-form label {
  display: block;
  margin: 15px 5px;
}

#contact-form input, #contact-form textarea {
  width: 100%;
  max-width: 400px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

#contact-form button {
  margin-top: 15px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  padding: 15px;
  display: block; /* pour forcer l'affichage en bloc sinon il se met à coté*/
  margin-left: auto; /* centrer le bouton */
  margin-right: auto;
}

#contact-form button:hover {
  background-color: #555;
}


/* Règle pour que ça soie comptabile sur les écrans de moins de 600px de largeur --> smartphone*/
@media screen and (max-width: 600px) {
  header,
  footer {
    padding: 15px;
  }

  button {
    padding: 30px 30px;
    font-size: 14px;
    display: inline-block; /* inline-block au lieu de block */
    margin: 10px 5px; /* marge réduite sur les côtés */
    width: 40%; /* 40% au lieu de 80% pour tenir côte à côte */
  }

  #entree { /* solution pour que la case d'entree calcule en % et plus en px car trop large sinon*/
    width: 50%;
    padding: 30px auto 30px auto;
    margin: 15px;
  }

  nav ul {
    gap: 20px;
    font-size: 18px;
    margin: 0px; /* détruire les marges car c'est parfait comme ça */
  }  
  
  .crt-overlay { /* pour que le texte de l'effet du CRT soie adapté à l'écran du téléphone */
    font-size: 30px;
  }

}




/* Effet d'écran CRT retro gaming copié de : https://www.reddit.com/r/css/comments/2sxqxh/crt_screen_effect_with_css/?tl=fr qui renvoie vers ou est le code https://codepen.io/lbebber/pen/XJRdrV/*/
/*J'ai copié et supprimer l'effet container + modifié pour que ça soie l'effet de pixel soie fixed quand on scroll */
/* J'ai conservé le reste j'espère vous appréciez ;) */

@keyframes flicker {
  0% { opacity: 0.27861; }
  5% { opacity: 0.34769; }
  10% { opacity: 0.23604; }
  15% { opacity: 0.90626; }
  20% { opacity: 0.18128; }
  25% { opacity: 0.83891; }
  30% { opacity: 0.65583; }
  35% { opacity: 0.67807; }
  40% { opacity: 0.26559; }
  45% { opacity: 0.84693; }
  50% { opacity: 0.96019; }
  55% { opacity: 0.08594; }
  60% { opacity: 0.20313; }
  65% { opacity: 0.71988; }
  70% { opacity: 0.53455; }
  75% { opacity: 0.37288; }
  80% { opacity: 0.71428; }
  85% { opacity: 0.70419; }
  90% { opacity: 0.7003; }
  95% { opacity: 0.36108; }
  100% { opacity: 0.24387; }
}

.crt-container {
  background: #121010;
  width: 100%;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.crt-screen {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  animation: turn-on 4s linear;
  animation-fill-mode: forwards;
  background-image: url('../img/fond.webp'); /* pour que l'effet CRT soie appliqué à l'image de fond */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.crt-container::before {
  content: " ";
  display: block;
  position: fixed; /* fixed pour que les lignes de l'effet reste fixe quand on scroll */
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(18, 16, 16, 0.25) 50%), 
              linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 9998; /* pour que l'effet soie devant tout */
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

.crt-container::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  pointer-events: none;
  animation: flicker 0.15s infinite;
}

@keyframes turn-on {
  0% {
    transform: scale(1, 0.8) translate3d(0, 0, 0);
    filter: brightness(30);
    opacity: 1;
  }
  3.5% {
    transform: scale(1, 0.8) translate3d(0, 100%, 0);
  }
  3.6% {
    transform: scale(1, 0.8) translate3d(0, -100%, 0);
    opacity: 1;
  }
  9% {
    transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
    filter: brightness(30);
    opacity: 0;
  }
  11% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    filter: contrast(0) brightness(0);
    opacity: 0;
  }
  100% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    filter: contrast(1) brightness(1.2) saturate(1.3);
    opacity: 1;
  }
}

@keyframes overlay-anim {
  0%, 20% {
    visibility: hidden;
  }
  21% {
    visibility: visible;
  }
  100% {
    visibility: hidden;
  }
}

.crt-overlay {
  color: #00FF00;
  position: fixed;
  top: 20px;
  left: 20px;
  font-size: 60px;
  visibility: hidden;
  pointer-events: none;
  z-index: 9999;
  text-shadow: 0 0 10px #00FF00;
  animation: overlay-anim 5s linear;
  animation-fill-mode: forwards;
}