/* @font-face {
    font-family: 'YourFontName'; aka a name to be used later
    src: url('http://domain.example/fonts/font.ttf'); aka *URL to font
} */

@font-face {
  font-family: 'WayneCreton';
  src: url('waynecreton_v8.ttf');
}



body {
  font-family: Roboto;
  font-size: 16px;
  background-color: #900000;
  color: #eaa706;
  image-rendering: pixelated;
}

ul {
  list-style-type: square;
}

a {
  font-family: WayneCreton;
  color: #eaa706;
  text-decoration: none;
  font-size: 20px;
}

.wrap {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 20px;
  Padding-left: 20px;
}




/* NAV */

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.navbar {
  border-top: solid 5px #eaa706;
	background-color: #302626;
	overflow: hidden;
	position: fixed; /* Make it stick/fixed */
  top: -120px; /* Hide the navbar 50 px outside of the top view */
  width: 100%; /* Full width */
  transition: top 0.5s ease; /* Transition effect when sliding down (and up) */
	z-index: 99;
}

/* overflow:hidden when a parent element collapses on itself when using a float on its child */

nav #petitlogo {
  padding-top:4px;
  width: 48px;
}



/* HERO */

.hero {
  background-image: url("gridbg.png");
  background-position: center bottom;
  overflow: hidden;
  background-size: 100% 100%;
  max-height: fit-content;
  background-repeat: no-repeat;
}

.accueil {
  
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
}

.LogoTitre {
  margin-top: 6vh;
  margin-bottom: 5vh;
}

.logotitre-julien {
  display:block;
}

.jeu {
  margin-bottom: 3vh;
  transition: transform .2s;
}

.jeu:hover {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1); 
}

.telechargement {
  margin-bottom: 10vh;
  transition: transform .2s;
}

.telechargement:hover {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1); 
}



/* TEASER */

#Teaser {
  background-image: url("gridbg.png");
  background-position: center bottom;
  transform: scaleY(-1);
  background-size: 100% 100%;
}

.null-transform {
  transform: scaleY(-1);
}

.video-container {
position: relative;
top: 6vh;
overflow: hidden;
width: 100%;
max-height:500px;
padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}


/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border-style: none;
}

.wrap-intro {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 40px;
  Padding-left: 40px;
}



.intro {
  background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(144, 0, 0, 1) 100%), url('bg_pattern.png');
  padding-top: 10vh;
}


.intro h1 {
  font-size: 24px;
}

.intro p {
  font-size: 20px;
  line-height: 1.3;
}

.intro ul{
  padding-left: 5vw;
  padding-top: 2vh;
  margin-bottom: 10vh;
  font-size: 20px;
}

.container-gif-juju {
  position: relative;
}

.gif-juju {
  position: absolute;
  bottom: 10vh;
  right: 7vw;
}


/* STUDIO CORNET */

.studiocornet {
  background-image: url("pano_montagne_x3.png");
  background-position: left center;
  padding: 48px
}

.wrap-photo {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 20px;
  Padding-left: 20px;
}

.studiocornet-logo {
  display: block;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
}

.textePhoto h2, .textePhoto a {
  font-family: WayneCreton;
  font-size: 32px;
}

.textePhoto p {
  font-family: Roboto;
  font-size: 20px;
}

.photosCornet {
  display:flex;
  flex-wrap: wrap;
  justify-content: space-around;
  row-gap: 3vh;
  margin-bottom: 10vh;
}

.container-photo {
  position: relative;
  width: 30%;
}

.avatar {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease-out;
  background-color: #173187d4;
}

.container-photo:hover .overlay {
  opacity: 1;
}

.textePhoto {
  color: #eaa706;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}






/* BANDE SONORE */

#BandeSonore {
  background-image: url("bg_pattern_bleu.png");
  background-size: cover;
  padding: 48px
}

.BandeSonore h1 img {
  display: block;
  margin-bottom: 24px;
  margin-left: auto;
  margin-right: auto;
}

.mince-player {
  display: none;
}

.musique {
  display: flex;
  align-items: center;
}

.container-texte {
  max-width: 35vw;
  position: relative;
  color: #fff;
}

.texteBS {
  font-family: Roboto ;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 20px;
  line-height: 1.3;
  margin-bottom:24px;
}

.pochette {
  margin-right: 24px;
  margin-top: 124px;
}

.chansons {
  margin-left: 24px;
}

.nav-musique {
  margin-top: 12px;
}


/* FAQ */

.FAQ {
  width: 100vw;
  background-image: url("pano_banane.png");
  background-color: #000;
  background-position: top;
  background-size: 3000px;
  image-rendering: pixelated;
}

/* Reset default margins and paddings for all elements */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.FAQ a {
  font-family: Roboto;
  font-size: 16px;
}

/* Style for the main FAQ container */
.faq-container {
  max-width: 800px; /* Limit the width for better readability */
  margin: 0px auto; /* Center the container and add vertical spacing */
  padding: 20px 20px 64px 20px;
  font-family: 'Roboto';
  color: #333; /* Base text color */
}

/* Style for the main title */
.faq-container h1 img {
  display: block;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
}

/* Style for each FAQ item */
.faq-item {
  border-bottom: 1px solid #ddd; /* Light gray border between items */
  overflow: hidden; /* Hide overflowing content */
}

/* Style for the question buttons */
.faq-question {
  background-color: #ecf0f1; /* Light gray background */
  width: 100%;
  padding: 20px;
  text-align: left;
  font-size: 18px;
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease; /* Smooth background transition on hover */
}

/* Hover effect for question buttons */
.faq-question:hover {
  background-color: #d0d7de; /* Slightly darker gray on hover */
}

/* Style for the arrow icon */
.faq-question .arrow {
  position: absolute;
  right: 20px;
  transition: transform 0.3s ease; /* Smooth rotation transition */
}

/* Rotate the arrow when the question is active (expanded) */
.faq-question.active .arrow {
  transform: rotate(180deg); /* Rotate arrow 180 degrees */
}

/* Style for the answer sections */
.faq-answer {
  max-height: 0; /* Initially hide the answer */
  overflow: hidden;
  transition: max-height 0.3s ease; /* Smooth transition for expanding */
  background-color: #fff; /* White background for answers */
}

/* Style for the answer text */
.faq-answer p {
  padding: 20px;
  font-size: 16px;
  line-height: 1.5; /* Increase line height for better readability */
  color: #555; /* Slightly lighter text color for answers */
}

.faq-answer ul {
  list-style-type: square;
  padding-left: 65px;
  margin-left:0px;
  font-size: 16px;
  line-height: 1.5; /* Increase line height for better readability */
  color: #555; /* Slightly lighter text color for answers */
}



/* CONTACT */

.contact {
  background-image: url("bg_pattern.png");
  padding-top: 5vh;
  padding-bottom: 5vh;
}

.mail-contact {
  display:flex;
  justify-content: center;
  align-items: center;
}


/* FOOTER */

footer {
  background-color: #302626;
  border-bottom: solid 5px #eaa706;
}

footer .nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0px 20px;
  padding-top: 12px;
  padding-bottom: 8px;
}






/* RESPONSIVE */

@media all and (min-width:2970px) {
  .container-texte {
    max-width: 11vw;
  }

  .texteBS {
  top: 0;
  left: -3vw;

}
}

@media all and (min-width:2000px) and (max-width:2970px){
  .container-texte {
    max-width: 15vw;
  }
}

@media all and (min-width:2000px) and (max-width:2310px){
  .container-texte {
    max-width: 20vw;
  }
}

@media all and (min-width: 1730px) and (max-width:2000px) {
.container-texte {
  max-width: 24vw;
}
}

@media all and (min-width: 1375px) and (max-width:1730px) {
.container-texte {
  max-width: 28vw;
}
}

@media all and (max-width: 960px) {



.musique {
  flex-direction: column;
}

.container-texte {
  max-width: 100%;
}

.liste-chansons-player {
  display:none;
}

.mince-player {
  display: flex;
}

.pochette {
  margin-bottom:24px;
}

.chansons {
  margin-left: 0px;
}

}

@media all and (max-width: 860px) {
  .textePhoto h2, .textePhoto a {
  font-size: 24px;
}

.textePhoto p {
  font-family: Roboto;
  font-size: 20px;
}
}




/* below a size of 720px, we want this style to be applied */
@media all and (max-width: 765px) {


.navbar {
  display: none;
}

.gif-juju {
  display: none;
}

.container-photo {

  width: 40%;
}

.pochette {
  margin-top:24px;
}

.pochette img {
  max-width:100%;
}

.texteBS {
  position : relative;
  font-size: 20px;
  line-height: 1.3;
}

}


@media all and (max-width: 650px) {

.logotitre-julien  {
  max-width: 100%;
  margin-top: 5vh;
}

.jeu:hover {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: none; 
}

.telechargement:hover {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: none; 
}



/* STUDIO CORNET */

.studiocornet {
  background-image: url("pano_montagne_large_x3.png");
  background-position: left;
  background-size: cover;
  padding: 48px
}

  .textePhoto h2, .textePhoto a {
  font-size: 20px;
}

.textePhoto p {
  font-family: Roboto;
  font-size: 16px;
}

.photosCornet {
  display:flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-around;
  row-gap: 3vh;
  margin-bottom: 10vh;
}

.container-photo {
  position: relative;
  width: 50%;
}

.avatar {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 16%;
  bottom: 0;
  left: 45vw;
  right: 0;
  height: 50%;
  width: 100%;
  opacity: 1;
  transition: 0s ease;
  background-color: #3026268a;
  border-radius: 25px;
}

.container-photo:hover .overlay {
  opacity: 1;
}

.textePhoto {
  color: #eaa706;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: left;
}






.BandeSonore h1 img{
  max-width: 100%;
}

.texteBS {
  position : relative;

}


/* FAQUE */

.faq-answer ul {
  padding-left: 45px;
  margin-left: 24px;
  margin-right: 4px;
  font-size: 10px;
}




.contact img {
  max-width: 100%;
}


footer img {
width: 30vw;
}

}




@media all and (max-width: 510px) {

.faq-answer ul {
  padding-left:3vw;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 45vw;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 1;
  transition: 0s ease;
  background-color: #3026268a;
  border-radius: 25px;
}

  .textePhoto h2, .textePhoto a {
  font-size: 5vw;
  
}

.textePhoto p {
  font-family: Roboto;
  font-size: 3.5vw;
  
}

}

@media all and (max-width: 410px) {
  .textePhoto h2, .textePhoto a {
  font-size: 4vw;
  
}

.textePhoto p {
  font-family: Roboto;
  font-size: 2.5vw;
  
}

.FAQ img {
  max-width: 100%;
}

}