@charset "UTF-8";
/* === Mise en page général === */
html {
  font-family: "Lato", sans-serif;
}

body {
  margin: 0;
  padding: 0;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

a {
  text-decoration: none;
  color: black;
  transition: all 0.3s ease;
}

a:hover {
  color: #F1A027;
}

.container {
  width: 80%;
  margin: 0 auto;
}

.flex {
  display: flex;
}

.flex-container {
  display: flex;
  justify-content: space-between;
}

.flex-container2 {
  display: flex;
  justify-content: center;
}

.align-items {
  align-items: center;
}

.aligner-gauche {
  display: flex;
  justify-content: flex-end;
}

.align-text {
  text-align: center;
}

.relatif {
  position: relative;
}

.flex-direction {
  flex-direction: column;
}


/* menu */
#menu{
  width: 80%;
    margin: 0 auto;
}

.fleche{
  width: 5%;
}
.text-video{
  display: none;
}
.zone{
  padding: 5% 5% 5% 5%;
}

.white{
  color: #FFF;
}

#white:hover{
  color: #FFF;
}

/* Titre  */
h1 {
  font-family: "Hind", sans-serif;
  text-transform: uppercase;
}

h3 {
  color: white;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 4vw;
  padding: 7vw 0 7vw 0;
  z-index: 1;
  text-align: left;
  position: relative;
}

p {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 1.5vw;
  line-height: 2.5vw;
  letter-spacing: 0.05vw;
}

.text-de-fond {
  font-family: "Hind", sans-serif;
}

.bordure-orange {
  background-color: #F1A027;
  height: 0.3vw;
  width: 2vw;
  position: absolute;
  left: 4vw;
}

.bordure-orange2 {
  background-color: #F1A027;
  z-index: 3;
  height: 0.5vw;
  width: 2vw;
  position: absolute;
  top: 42vw;
  right: 2.5vw;
}

.bordure-orange3 {
  background-color: #F1A027;
  height: 0.3vw;
  width: 2vw;
  position: absolute;
  left: 13.5vw;
}

.bordure-orange4 {
  background-color: #F1A027;
  height: 0.3vw;
  width: 2vw;
  position: absolute;
  right: 43.5vw;
}

.bordure-orange5 {
  background-color: #F1A027;
  z-index: 3;
  height: 0.5vw;
  width: 4vw;
  position: absolute;
  right: -1vw;
  top: 42vh;
}

.ombre-bordure-orange5 {
  background-color: #000;
  z-index: 2;
  height: 0.3vw;
  width: 2vw;
  position: absolute;
  right: -1vw;
  top: 43vh;
}

.bordure-orange6 {
  background-color: #F1A027;
  z-index: 3;
  height: 0.5vw;
  width: 4vw;
  position: absolute;
  left: -1vw;
  top: 49vh;
}

.ombre-bordure-orange6 {
  background-color: #000;
  z-index: 2;
  height: 0.3vw;
  width: 2vw;
  position: absolute;
  left: -1vw;
  top: 50vh;
}

.trait-noir {
  background-color: #000;
  width: 0.3vw;
  position: absolute;
  transition: all 0.5s ease-in-out;
  top: 55vw;
}

#trait1 {
  height: 5vw;
  left: 0.5vw;
}

#trait2 {
  height: 10vw;
  left: 5vw;
}

#trait3 {
  height: 15vw;
  left: 9.5vw;
}

#trait4 {
  height: 20vw;
  left: 14vw;
}

#trait5 {
  height: 25vw;
  left: 18.5vw;
}

/* Bouton */
/* === Header === */
nav {
  font-size: 2vw;
  align-items: center;
}
nav ul {
  list-style: none;
}
nav li {
  padding: 0 1vw 0 1vw;
}
nav h3 {
  color: #000;
  font-size: 2vw;
  font-weight: 600;
  padding: 0.4vw;
}
nav .titreorange {
  color: #F1A027;
}

/* === Main === */
#hero {
  padding-top: 7%;
  padding-bottom: 10%;
}
#hero > div {
  width: 70%;
  margin: 0 auto;
  align-items: center;
}
#hero > div h1 {
  font-family: "Anton", sans-serif;
  text-transform: uppercase;
  font-size: 8vw;
  text-align: left;
  margin-bottom: 0;
  margin-top: 0;
  transition: all 1s ease;
}
#hero > div h2 {
  font-family: "Anton", sans-serif;
  text-transform: uppercase;
  font-size: 8vw;
  -webkit-text-stroke: 0.1px #000;
  color: transparent;
  text-align: right;
  margin-top: 0;
  margin-bottom: 3vw;
}
#hero > div img {
  width: 3%;
  padding-top: 0vw;
  padding-bottom: 2vw;
  margin: 0 auto;
  transition: all 1s ease;
}
#hero > div img:hover {
  padding-top: 2vw;
  padding-bottom: 0vw;
}

#qsj {
  background-color: #000;
}
#qsj h4 {
  position: absolute;
  font-size: 16vw;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
  color: transparent;
  text-align: center;
  z-index: 0;
  margin: 0 auto;
  top: 15vw;
}
#qsj h3 {
  padding-bottom: 0;
  margin-bottom: 0;
}
#qsj p {
  color: white;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 1.3vw;
  line-height: 2.5vw;
  z-index: 1;
}
#qsj img {
  z-index: 1;
  position: relative;
  width: 70%;
  margin: 0 auto;
}
#qsj #tableau {
  display: grid;
  align-items: center;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 21vw);
  gap: 1vw;
}
#qsj #tableau #element1 {
  grid-row: 1/2;
  grid-column: 1/2;
}
#qsj #tableau #element2 {
  grid-row: 2/3;
  grid-column: 2/3;
}
#qsj #tableau #element3 {
  grid-row: 1/3;
  grid-column: 3/4;
}

#crea {
  padding-bottom: 8vw;
}
#crea .text-de-fond {
  padding-top: 8vw;
  text-align: center;
  z-index: -1;
  text-transform: uppercase;
  margin: 0 auto;
  position: absolute;
  font-size: 13vw;
}
#crea h6 {
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.3);
  color: transparent;
}
#crea h5 {
  color: rgba(0, 0, 0, 0.3);
}
#crea h3 {
  color: #000;
  margin-bottom: 0;
  padding-bottom: 0;
}
#crea img {
  margin-bottom: 5vw;
}
#crea div > div .bloc-image-crea {
  z-index: 1;
  width: 70%;
  margin: 0 auto;
  margin-top: 10%;
}
#crea .img-crea {
  position: relative;
  width: 55.5vw;
  height: 27.6vw;
}
#crea .bloc-noir {
  background-color: rgba(0, 0, 0, 0.8);
  height: 27.6vw;
  width: 49vw;
  -webkit-text-stroke: 0.5px rgb(255, 255, 255);
  position: absolute;
  z-index: 2;
  left: 25vw;
  text-align: center;
  transition: all 0.5s ease-in-out;
}
#crea .bloc-noir #titre-bloc-noir {
  font-size: 4.5vw;
  font-family: "Anton", sans-serif;
  margin: 13vw 0 0 0;
  color: transparent;
  text-transform: capitalize;
}
#crea .bloc-noir:hover {
  background-color: rgba(0, 0, 0, 0);
  color: transparent;
  -webkit-text-stroke: 0.5px transparent;
}

#contact {
  background-color: #000;
  padding-bottom: 5vw;
}
#contact p {
  font-size: 2vw;
  margin: 0 auto;
  text-transform: uppercase;
  margin-top: 1vw;
}
#contact a {
  color: white;
  transition: all 0.5s ease-in-out;
}
#contact a:hover {
  color: #F1A027;
}
#contact h3 {
  padding-bottom: 0;
  margin-bottom: 0;
}

#site {
  background-image: url("../img/photo-site-web.jpg");
  background-size: cover;
}

.contenu {
  margin-top: 10vh;
  margin-bottom: 15vh;
}
.contenu h3 {
  color: #000;
  padding: 0;
}
.contenu a {
  color: #F1A027;
}
.contenu a:hover {
  color: #000;
}

.contenu-dark {
  background-color: #000;
  padding-top: 10vh;
  padding-bottom: 15vh;
}
.contenu-dark h3 {
  color: #FFF;
  padding: 0;
}

.texte-crea {
  margin-right: 1vw;
}

.titre-real {
  background-color: rgba(0, 0, 0, 0.75);
  -webkit-text-stroke: 1px #fff;
  color: transparent;
  margin: 0;
  padding-top: 15%;
  padding-bottom: 15%;
  font-size: 8vw;
}

.vidéo2-real {
  width: 95%;
}

.vidéo3-real {
  width: 100%;
}

#video {
  background-image: url("../img/vidéo.jpg");
  background-size: cover;
}

#code {
  background-image: url("../img/code.jpg");
  background-size: cover;
}

#logo {
  background-image: url("../img/logo.jpg");
  background-size: cover;
}

#affiche {
  background-image: url("../img/affiche.jpg");
  background-size: cover;
}

/* === Footer === */
footer {
  background-color: #000;
  color: rgb(153, 153, 153);
  text-align: center;
}
footer p {
  margin: 0 auto;
  font-size: 1.5vw;
}
footer a {
  color: rgb(153, 153, 153);
}

@media (max-width: 768px) {
  p {
    font-size: 12px;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    line-height: 4vh;
    letter-spacing: 0.05vw;
  }
  h3 {
    font-family: "Lato", sans-serif;
    font-size: 20px;
  }
  nav h3 {
    font-family: "Lato", sans-serif;
    font-size: 10px;
  }
  nav a {
    font-size: 10px;
  }
  .block-textvideo {
    display: flex;
    flex-direction: row;
    text-align: left;
  }
  .block-textvideo .vidéo2-real {
    width: 75vw;
  }
  .block-textvideo h3 {
    text-align: left;
    font-size: 24px;
  }
  .block-textvideo2 {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
  }
  .block-textvideo2 .vidéo2-real {
    width: 75vw;
  }
  .block-textvideo2 h3 {
    text-align: center;
    font-size: 24px;
  }
  #qsj p {
    font-size: 2.5vw;
    line-height: 3.5vw;
  }
  #qsj #tableau #element1 {
    grid-row: 1/2;
    grid-column: 1/3;
  }
  #qsj #tableau #element2 {
    grid-row: 2/3;
    grid-column: 1/3;
  }
  .contenu {
    margin-top: 5vh;
    margin-bottom: 5vh;
  }
  #crea .bloc-noir #titre-bloc-noir {
    margin: 10vw 0 0 0;
  }

  #qsj #tableau{
    gap:10vh;
  }
  #qsj h3{
    padding-bottom: 2vh;
  }

  #qsj h4{
    display: none;
  }
  .bordure-orange2{
    display: none;
  }
  #qsj img{
    width: 100%;
  }

  .titre-real{
    -webkit-text-stroke: 0px #fff; 
    color: white;
  }
  #crea .bloc-noir #titre-bloc-noir{
    -webkit-text-stroke: 0px #fff; 
    color: white;
  }
  #crea .text-de-fond{
    display: none;
  }

}/*# sourceMappingURL=style.css.map */