@font-face {
  font-family: "stravinsky";
  src: url("../typo/Stravinsky-Bold-Trial.woff") format("woff");
}

:root {
  --noir:#1e1e1e;
  --blanc:#EEEEEF;
  --jaune: #FFD627;
  --rouge: #D60000;
}

.souris {
  width: 100px;
  position: absolute;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

body {
  margin: 0;
  background-color: var(--blanc);
  overflow-y: auto;
  overflow-x: hidden;
  direction: ltr;
  scrollbar-width: thin;
}

body::-webkit-scrollbar-thumb {
  border: 1px solid transparent;
  border-radius: 100px;
  background-color: var(--rouge);
  background-clip: content-box;
}

body::-webkit-scrollbar {
  width: 10px;
}

body::-webkit-scrollbar-track {
  background: transparent;
}

.animtexte {
  margin-top: 100px;
  white-space: nowrap;
  overflow: hidden;
}

.animtexte p {
  font-size: 100px;
  text-align: center;
  font-family: 'stravinsky';
  text-transform: uppercase;
  color: var(--noir);
}

.animtexte .p_deux {
  display: inline-block;
  /* Apply animation to this element */
  -webkit-animation: scrolling-left1 40s linear infinite;
  animation: scrolling-left1 40s linear infinite;
}

.animtexte .p_deuxx {
  display: inline-block;
  /* Apply animation to this element */
  -webkit-animation: scrolling-left2 40s linear infinite;
  animation: scrolling-left2 40s linear infinite;
}

.animtexte .p_deuxxx {
  display: inline-block;
  /* Apply animation to this element */
  -webkit-animation: scrolling-left3 40s linear infinite;
  animation: scrolling-left3 40s linear infinite;
}

/* scrolling-left is continuous/repeatly text */
@-webkit-keyframes scrolling-left1 {
  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}
@keyframes scrolling-left1 {
  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}

@-webkit-keyframes scrolling-left2 {
  0% {
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}

@keyframes scrolling-left2 {
  0% {
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}

@-webkit-keyframes scrolling-left3 {
  0% {
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}

@keyframes scrolling-left3 {
  0% {
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}

.p_deux:hover, .p_deuxx:hover, .p_deuxxx:hover {
  color: var(--jaune);
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}

.animtexte2 {
  white-space: nowrap;
  overflow: hidden;
}

.animtexte2 p {
  font-size: 100px;
  text-align: center;
  font-family: 'stravinsky';
  text-transform: uppercase;
  color: var(--noir);
}

.animtexte2 .p_deux {
  display: inline-block;
  /* Apply animation to this element */
  -webkit-animation: scrolling-left1 50s linear infinite;
  animation: scrolling-left1 50s linear infinite;
}

.animtexte2 .p_deuxx {
  display: inline-block;
  /* Apply animation to this element */
  -webkit-animation: scrolling-left2 50s linear infinite;
  animation: scrolling-left2 50s linear infinite;
}

.animtexte2 .p_deuxxx {
  display: inline-block;
  /* Apply animation to this element */
  -webkit-animation: scrolling-left3 50s linear infinite;
  animation: scrolling-left3 50s linear infinite;
}

.animtexte3 {
  white-space: nowrap;
  overflow: hidden;
}

.animtexte3 p {
  font-size: 100px;
  text-align: center;
  font-family: 'stravinsky';
  text-transform: uppercase;
  color: var(--noir);
}

.animtexte3 .p_deux {
  display: inline-block;
  /* Apply animation to this element */
  -webkit-animation: scrolling-left1 30s linear infinite;
  animation: scrolling-left1 30s linear infinite;
}

.animtexte3 .p_deuxx {
  display: inline-block;
  /* Apply animation to this element */
  -webkit-animation: scrolling-left2 30s linear infinite;
  animation: scrolling-left2 30s linear infinite;
}

.animtexte3 .p_deuxxx {
  display: inline-block;
  /* Apply animation to this element */
  -webkit-animation: scrolling-left3 30s linear infinite;
  animation: scrolling-left3 30s linear infinite;
}

p {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  color: var(--noir);
}

.p_un {
  position: absolute;
  right: 0;
  padding-left: 21vw;
  margin-top: 33vh;
  margin-right: 6vw;
  font-size: 15px;
  color: var(--noir);
  border-bottom: solid #4f4f4f 1px;
}

.logo p {
  font-size: 15px;
  color: var(--noir);
  margin-top: -35vh;
  margin-left: -24vw;
}

h1 {
  font-size: 100px;
  font-family: "stravinsky";
  color: var(--jaune);
}

h2 {
  font-size: 20px;
  font-family: "stravinsky";
}

#titre_1 {
  font-size: 70px;
  color: var(--noir);
}

.contenant {
  padding: 0;
  background-color: var(--blanc);
  overflow: hidden;
  height: 120vh;
}

#forme1 {
  width: 100vw;
}

#forme1 img {
  width: 11%;
  margin-left: 45vw;
  margin-top: -3vh;
}

#forme2 {
  width: 100vw;
}

#forme2 img {
  width: 9%;
  margin-left: 0vw;
  margin-top: -8vh;
}

#forme3 {
  width: 100vw;
}

#forme3 img {
  width: 12%;
  margin-left: 76vw;
  margin-top: -5vh;
}

#forme4 {
  width: 100vw;
}

#forme4 img {
  width: 17%;
  margin-left: 79vw;
  margin-top: 81vh;
}

#forme5 {
  width: 100vw;
}

#forme5 img {
  width: 11%;
  margin-left: 5vw;
  margin-top: 75vh;
}

#forme6 {
  width: 100vw;
}

#forme6 img {
  width: 11%;
  margin-left: 10vw;
  margin-top: -5vh;
}

#forme7 {
  width: 100vw;
}

#forme7 img {
  width: 14%;
  margin-left: 85vw;
  margin-top: -9vh;
}

#forme8 {
  width: 100vw;
}

#forme8 img {
  width: 13%;
  margin-left: -2vw;
  margin-top: -2vh;
}

#forme9 {
  width: 100vw;
}

#forme9 img {
  width: 12%;
  margin-left: -5vw;
  margin-top: 68vh;
}

#forme10 {
  width: 100vw;
}

#forme10 img {
  width: 11%;
  margin-left: 92vw;
  margin-top: 64vh;
}

#forme11 {
  width: 100vw;
}

#forme11 img {
  width: 8%;
  margin-left: 39vw;
  margin-top: -4vh;
}

#forme12 {
  width: 100vw;
}

#forme12 img {
  width: 8%;
  margin-left: -2vw;
  margin-top: 39vh;
}

#forme13 {
  width: 100vw;
}

#forme13 img {
  width: 11%;
  margin-left: 93vw;
  margin-top: 16vh;
}

#forme14 {
  width: 100vw;
}

#forme14 img {
  width: 8%;
  margin-left: 43vw;
  margin-top: 82vh;
}

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  position: relative;
  margin: 0;
}

li {
  list-style-type: none;
  position: absolute;
  width: 100vw;
}

.logo {
  width: 100vw;
  height: 100vh;
}

.logo img {
  width: 70vw;
  height: 100vh;
}

.overflow {
  overflow: hidden;
}

.overflow a {
  font-family: 'stravinsky';
  text-decoration: none;
  color: var(--noir);
  border: 1px solid var(--noir);
  border-radius: 11px;
  margin-right: 30px;
  padding: 4px 23px;
}

.overflow a:hover {
  background-color: var(--jaune);
}

.overflow1 a {
  font-size: 16px;
  margin-top: 10px;
  cursor: pointer;
}

.container {
  font-weight: 700;
  color: var(--noir);
  margin-top: 50px;
}

#img_1, .img_2, .img_3, .img_4 {
  width: 97%;
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
}

#img_1:hover {
  -webkit-filter: none;
          filter: none;
}

.col-12 {
  margin-top: 5%;
}

#barre_right_1, #barre_left_1, #barre_right_2, #barre_right_3, #barre_left_3, #barre_left_4, #barre_right_4, #barre_right_5 {
  border-top: solid #4f4f4f 1px;
}

.titre_4 {
  text-align: right;
}

.formulaire {
  font-family: 'Courier Prime', monospace;
  text-align: center;
}

.form-control {
  background-color: var(--jaune);
  border: none;
  text-align: center;
}

.win_2_2 {
  margin: 0;
}

.win_1 {
  background-color: var(--jaune);
}

.win_2 {
  border-right: solid #4f4f4f 1px;
  margin: 0;
  padding: 73px 55px;
}

.win_2 h4 {
  font-size: 40px;
}

.win_3 {
  border-right: solid #4f4f4f 1px;
  margin: 0;
}

.win_5, .win_6 {
  border-top: solid #4f4f4f 1px;
  margin: 0;
  padding: 34px 0px;
}

#btn_submit {
  font-size: 40px;
}

.alert {
  display: none;
}

#prenom::-webkit-input-placeholder, #nom::-webkit-input-placeholder, #email::-webkit-input-placeholder, #email2::-webkit-input-placeholder {
  color: var(--noir);
  text-align: center;
}

#prenom:-ms-input-placeholder, #nom:-ms-input-placeholder, #email:-ms-input-placeholder, #email2:-ms-input-placeholder {
  color: var(--noir);
  text-align: center;
}

#prenom::-ms-input-placeholder, #nom::-ms-input-placeholder, #email::-ms-input-placeholder, #email2::-ms-input-placeholder {
  color: var(--noir);
  text-align: center;
}

#prenom::placeholder, #nom::placeholder, #email::placeholder, #email2::placeholder {
  color: var(--noir);
  text-align: center;
}

.footer {
  font-family: 'stravinsky';
  padding: 20px;
}

.footer .contact {
  margin-top: 10%;
}

.footer .contact a {
  text-decoration: none;
  color: var(--noir);
  border: 1px solid var(--noir);
  border-radius: 11px;
  padding: 4px 23px;
  margin-top: 10px;
}

.footer .contact .p_footer {
  font-size: 16px;
  font-family: 'stravinsky';
}

.footer .contact p {
  margin-bottom: 10%;
}

.footer a:hover {
  background-color: var(--jaune);
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}

.reseaux {
  margin-top: 7%;
}

.reseaux a {
  text-decoration: none;
  color: var(--noir);
  border: 1px solid var(--noir);
  border-radius: 11px;
  margin-right: 30px;
  padding: 4px 23px;
}

#gototop {
  cursor: pointer;
  background-color: var(--jaune);
  color: var(--noir);
  text-decoration: none;
}

#cookies {
  background-color: var(--jaune);
  border: solid #4f4f4f 1px;
  width: 300px;
  text-align: center;
  position: fixed;
  z-index: 1;
  right: 0;
  bottom: 0;
  padding: 10px;
}

#cookies #btn_cookies {
  border: 1px solid var(--noir);
  border-radius: 15px;
  font-family: 'stravinsky';
}

.carre_jaune_1 {
  position: relative;
}

.carre_jaune_1 .carre_jaune {
  width: 92%;
  height: 92%;
  position: absolute;
  z-index: -1;
  -webkit-transition: all .25s ease-out;
  transition: all .25s ease-out;
  background-color: var(--rouge);
  top: -15px;
  left: 35px;
  opacity: 1;
}

.carre_jaune_3 {
  position: relative;
}

.carre_jaune_3 .carre_jaune {
  width: 92%;
  height: 89%;
  position: absolute;
  z-index: -1;
  -webkit-transition: all .25s ease-out;
  transition: all .25s ease-out;
  background-color: var(--rouge);
  top: -15px;
  left: 35px;
  opacity: 1;
}

.carre_jaune_5 {
  position: relative;
}

.carre_jaune_5 .carre_jaune {
  width: 92%;
  height: 87%;
  position: absolute;
  z-index: -1;
  -webkit-transition: all .25s ease-out;
  transition: all .25s ease-out;
  background-color: var(--rouge);
  top: -15px;
  left: 35px;
  opacity: 1;
}

.img {
  position: relative;
}

.img .carre_jaune {
  width: 94%;
  height: 95%;
  position: absolute;
  z-index: -1;
  -webkit-transition: all .25s ease-out;
  transition: all .25s ease-out;
  background-color: var(--rouge);
  top: -15px;
  left: 35px;
  opacity: 1;
}

.carre_jaune_2 {
  position: relative;
}

.carre_jaune_2 .carre_jaune {
  width: 92%;
  height: 87%;
  position: absolute;
  z-index: -1;
  -webkit-transition: all .25s ease-out;
  transition: all .25s ease-out;
  background-color: var(--jaune);
  top: -15px;
  left: -2px;
  opacity: 1;
}

.carre_jaune_4 {
  position: relative;
}

.carre_jaune_4 .carre_jaune {
  width: 92%;
  height: 87%;
  position: absolute;
  z-index: -1;
  -webkit-transition: all .25s ease-out;
  transition: all .25s ease-out;
  background-color: var(--jaune);
  top: -15px;
  left: -2px;
  opacity: 1;
}

.carre_jaune_6 {
  position: relative;
}

.carre_jaune_6 .carre_jaune {
  width: 92%;
  height: 97%;
  position: absolute;
  z-index: -1;
  -webkit-transition: all .25s ease-out;
  transition: all .25s ease-out;
  background-color: var(--jaune);
  top: -15px;
  left: -2px;
  opacity: 1;
}

.img_left {
  position: relative;
}

.img_left .carre_jaune {
  width: 92%;
  height: 98%;
  position: absolute;
  z-index: -1;
  -webkit-transition: all .25s ease-out;
  transition: all .25s ease-out;
  background-color: var(--jaune);
  top: -15px;
  left: -2px;
  opacity: 1;
}

@media only screen and (max-width: 1000px) {
  .win_2 h4 {
    font-size: 25px;
  }
  .win_2 {
    border: none;
    padding: 21px 34px;
  }
  .win_2_2 {
    border-top: solid #4f4f4f 1px;
  }
  .img_left {
    width: 100%;
  }
  .animtexte p, .animtexte2 p, .animtexte3 p {
    font-size: 40px;
  }
  .carre_jaune_3 .carre_jaune, .carre_jaune_5 .carre_jaune {
    width: 89%;
  }
  .carre_jaune_2 .carre_jaune {
    width: 91%;
    height: 84%;
  }
  .gototop {
    text-align: left !important;
  }
  #forme1 img {
    visibility: hidden;
  }
  #forme2 {
    width: 100vw;
  }
  #forme2 img {
    width: 15%;
    margin-left: 0vw;
    margin-top: -2vh;
  }
  #forme3 {
    width: 100vw;
  }
  #forme3 img {
    width: 28%;
    margin-left: 52vw;
    margin-top: -2vh;
  }
  #forme4 {
    width: 100vw;
  }
  #forme4 img {
    width: 31%;
    margin-left: 61vw;
    margin-top: 91vh;
  }
  #forme5 {
    width: 100vw;
  }
  #forme5 img {
    width: 22%;
    margin-left: 12vw;
    margin-top: 89vh;
  }
  #forme6 {
    width: 100vw;
  }
  #forme6 img {
    width: 23%;
    margin-left: 18vw;
    margin-top: -2vh;
  }
  #forme7 {
    width: 100vw;
  }
  #forme7 img {
    width: 34%;
    margin-left: 73vw;
    margin-top: -5vh;
  }
  #forme8 {
    width: 100vw;
  }
  #forme8 img {
    width: 26%;
    margin-left: -5vw;
    margin-top: -1vh;
  }
  #forme9 {
    width: 100vw;
  }
  #forme9 img {
    width: 24%;
    margin-left: -8vw;
    margin-top: 86vh;
  }
  #forme10 {
    width: 100vw;
  }
  #forme10 img {
    width: 16%;
    margin-left: 86vw;
    margin-top: 85vh;
  }
  #forme11 img {
    visibility: hidden;
  }
  #forme12 {
    width: 100vw;
  }
  #forme12 img {
    width: 20%;
    margin-left: -4vw;
    margin-top: 70vh;
  }
  #forme13 {
    width: 100vw;
  }
  #forme13 img {
    width: 24%;
    margin-left: 93vw;
    margin-top: 16vh;
  }
  #forme14 img {
    width: 24%;
    margin-left: 36vw;
    margin-top: 80vh;
  }
  .logo p {
    margin-top: -44vh;
    margin-left: 0vw;
  }
  .p_un {
    margin-top: 12vh;
  }
  #titre_1 {
    font-size: 40px;
  }
  .contact {
    text-align: center;
  }
  .contact a {
    font-size: 18px;
  }
  .reseaux {
    text-align: center;
  }
  .reseaux a {
    font-size: 11px;
    margin-right: 0px;
    padding: 2px 6px;
  }
  .text-end {
    text-align: left !important;
  }
}
/*# sourceMappingURL=style.css.map */