html{
  overflow-x: hidden;
}
/*
************************************************
Génériques
************************************************
*/
body {
  font-family: "Archivo", sans-serif;
  color: black;

}

.title {
  margin: 0;
  padding-left: 18px;
  padding-right: 18px;
  z-index: 10;
}

p {
  z-index: 50;
}

/*
************************************************
Header
************************************************
*/

.section--header {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;

}

.header_photo_fact1 {
  display: block;
  width: 100%;
  grid-column: 1/-1;
  grid-row: 1/8;
  z-index: 10;

}

.title--1 {
  grid-column: 1/-1;
  grid-row: 4/5;
  color: #EEAB06;
  text-shadow: -2px -1px 0em white;
  font-family: "Outfit", sans-serif;
  font-size: 45px;
  font-style: none;
  font-weight: 700;
  line-height: 105%;
  z-index: 15;
}

.title--2 {
  grid-column: 1/-1;
  grid-row: 5/6;
  color: white;
  text-shadow: -2px -1px 0em #EEAB06;
  font-family: "Outfit", sans-serif;
  font-size: 33px;
  font-style: normal;
  font-weight: 700;
  line-height: 105%;
  z-index: 15;
}

.header_photo_fact2 {
  width: 170%;
  position: relative;
  left: -100px;
  object-fit: contain;
  object-position: 30% 50%;
  z-index: -10;
  grid-column: 1/-1;
  grid-row: 8/14;
  clip-path: polygon(0% 0%, 100% 0%, 100% 94%, 50% 99%, 0% 96%);

}

.header_deco6 {
  position: absolute;
  width: 150%;
  top: 120px;
  z-index: 999;

}

.header_deco7 {
  position: absolute;
  width: 150%;
  top: 550px;
  left: -50px;
  z-index: 100;

}

.p--intro {
  grid-column: 1/8;
  grid-row: 9/12;
  background-color: transparent;
  z-index: 60;
  color: white;
  font-size: 16px;

}

/*
************************************************
Main
************************************************
*/
.section--main {
  position: relative;
}

.section--rs {

  position: relative;
  padding-top: 100px;
}

.title--reseau {
  grid-column: 1/-1;
  text-align: center;
  grid-row: 1/2;
  font-family: "Archivo", sans-serif;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.05;
  padding-top: 20px;
  padding-bottom: 20px;
  z-index: 50;
  text-transform: uppercase;
  color: #c40818;
}

.title--sectioninsta {
  grid-column: 1/-1;
  font-family: "Archivo", sans-serif;
  font-size: 23px;
  font-style: italic;
  line-height: 1.05;
  background-color: white;
  z-index: 50;
  padding-top: 25px;
  padding-bottom: 25px;
}

.reseaudata {
  background-color: #d3d3d3;
  border: 3px black solid;
  border-radius: 20px;
  margin: 0 auto;
  margin-left: 18px;
  margin-right: 18px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.reseaudata--insta {
  grid-column: 1/8;
}

.title--sectionfb {
  grid-column: 5/-1;
  font-family: "Archivo", sans-serif;
  font-size: 23px;
  font-style: italic;
  line-height: 1.05;
  background-color: white;
  z-index: 50;
  padding-top: 25px;
  padding-bottom: 25px;
}

.reseaudata--fb {
  grid-column: 3/-1;
}

.title--sectiontw {
  grid-column: 2/-1;
  font-family: "Archivo", sans-serif;
  font-size: 23px;
  font-style: italic;
  line-height: 1.05;
  background-color: white;
  z-index: 50;
  padding-top: 25px;
  padding-bottom: 25px;
}

.reseaudata--tw {
  grid-column: 1/8;
}

.title--sectiontktk {
  grid-column: 4/-1;
  font-family: "Archivo", sans-serif;
  font-size: 23px;
  font-style: italic;
  line-height: 1.05;
  background-color: white;
  z-index: 50;
  padding-top: 25px;
  padding-bottom: 25px;
}

.reseaudata--tktk {
  grid-column: 2/-1;
}

.reseaudata--yt {
  grid-column: 1/-1;
}

.title--sectionyt {
  grid-column: 3/-1;
  font-family: "Archivo", sans-serif;
  font-size: 23px;
  font-style: italic;
  line-height: 1.05;
  background-color: white;
  z-index: 50;
  padding-top: 25px;
  padding-bottom: 25px;
}

.gridrow {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(20, auto);
  column-gap: 9px;
  padding-left: 0px;
  padding-right: 0px;
}

/*
************************************************
Agences
************************************************
*/

.section--agences {
  background-color: #d3d3d3;
  display: grid;
  padding-top: 150px;
  clip-path: polygon(0% 1%, 30% 3%, 50% 2.5%, 100% 0%, 100% 100%, 0% 100%);
  position: relative;

}

.figure--deco8 {
  position: absolute;
  width: 100%;

  z-index: 100;
}

.p--texte {
  background-color: #d3d3d3;
  padding:24px 20%;
}


.section--texte1 {
  grid-column: 1/-1;
  grid-row: 2/4;
}

.bouton {
  border-radius: 8px;
  border: none;
  width: 90px;
  height: 33px;
  cursor: pointer;
  transition: all 0.5s;
}

.bouton:hover {
  background-color: lightgray;
}

.section--boutons {
  grid-column: 1/-1;
}

.bouton--redbull {
  background: url('../assets/images/page_fact/redbull_logo.svg');
  background-size: 70% 70%;
  background-position: center;
  background-repeat: no-repeat;
  grid-column: 2/4;
  background-color: white;
  margin-bottom: 9px;
  margin-top: 8px;
}

.bouton--saalbach {
  background: url('../assets/images/page_fact/saalbach_logo.avif');
  background-size: 60% 60%;
  background-position: center;
  background-repeat: no-repeat;
  grid-column: 4/7;
  background-color: white;
  margin-bottom: 9px;
  margin-top: 8px;
}

.bouton--canyon {
  background: url('../assets/images/page_fact/canyon_logo.avif');
  background-size: 75% 45%;
  background-position: center;
  background-repeat: no-repeat;
  grid-column: 7/9;
  background-color: white;
  margin-bottom: 9px;
  margin-top: 8px;
}

.bouton--merco {
  background: url('../assets/images/page_fact/mercedesbenz_logo.avif');
  background-size: 57% 90%;
  background-position: center;
  background-repeat: no-repeat;
  grid-column: 3/5;
  background-color: white;
  margin-bottom: 9px;
}

.bouton--sick {
  background: url('../assets/images/page_fact/sick_logo.avif');
  background-size: 60% 60%;
  background-position: center;
  background-repeat: no-repeat;
  grid-column: 6/8;
  background-color: white;
  margin-bottom: 9px;
}

.bouton--samsung {
  background: url('../assets/images/page_fact/samsung_logo.avif');
  background-size: 60% 40%;
  background-position: center;
  background-repeat: no-repeat;
  grid-column: 2/4;
  background-color: white;
  margin-bottom: 31px;
}

.bouton--poc {
  background: url('../assets/images/page_fact/poc_logo.png');
  background-size: 60% 50%;
  background-position: center;
  background-repeat: no-repeat;
  grid-column: 4/7;
  background-color: white;
  margin-bottom: 31px;
}

.bouton--conti {
  background: url('../assets/images/page_fact/continental_logo.png');
  background-size: 70% 40%;
  background-position: center;
  background-repeat: no-repeat;
  grid-column: 7/9;
  background-color: white;
  margin-bottom: 31px;
}

.gridrow2 {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(20, auto);
  column-gap: 9px;
  padding-left: 0px;
  padding-right: 0px;
}

.figure--large1 {
  width: 130%;
  grid-column: 5/-1;
  grid-row: 1/6;
  position: relative;
  left: -70px;
  z-index: 5;
}

.section--texte2 {
  grid-column: 1/7;
  grid-row: 3/7;
  background-color: #d3d3d3;
  z-index: 10;
}

.section--texte3 {
  grid-column: 4/-1;
  grid-row: 8/10;
  background-color: #d3d3d3;
  z-index: 10;
}

.figure--large2 {
  width: 120%;
  grid-column: 1/7;
  position: relative;
  left: -15px;
  grid-row: 9/-1;
  top: 75px;
}

/*
************************************************
FOOTER
************************************************
*/

.section--footer {
  background-image: url(../assets/images/page_fact/footer.png);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%;
  background-position-y: 0px;
  background-color: #d3d3d3;
}

.footerNav__p {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 400;
  font-family: "Outfit", sans-serif;
  text-align: center;
  padding-top: 40px;
  margin-bottom: 50px;
  background-color: #EEAB06;
}

@media screen and (min-width: 580px) {
  p {
    font-size: 16px;
  }

  .reseaudata__el {
    font-size: 16px;
    padding: 10px;
  }

  .title--reseau {
    font-size: 51px;
  }

  .title--1 {
    font-size: 75px;
    top: 120px;
  }

  .title--2 {
    font-size: 51px;
    top: 180px;
  }

  .p--intro {
    grid-column: 2/7;
  }

  .bouton {
    border-radius: 11px;
    width: 130px;
    height: 52px;
  }

  .header_photo_fact2 {
    width: 150%;
    left: -50px;
  }
}

@media screen and (min-width: 780px) {
  .header_photo_fact2 {
    width: 150%;
    left: -300px;

  }

  p {
    font-size: 20px;
  }

  .reseaudata__el {
    font-size: 20px;
  }

  .title--1 {
    font-size: 75px;
    top: 120px;
  }

  .title--2 {
    top: 210px;
  }

  .figure__large1 {
    width: 250%;
    left: -1000px;

  }

  .p--intro {

    grid-column: 2/5;
  }

  .bouton {
    border-radius: 11px;
    width: 210px;
    height: 75px;
  }

  .figure--large2 {
    top: -15px;
  }
}

@media screen and (min-width: 1250px) {
  body {
    max-width: 1920px;
  }

  .title--1 {
    font-size: 95px;
    top: 200px;
  }

  .title--2 {
    font-size: 61px;
    top: 300px;
  }

  .header_photo_fact2 {
    width: 150%;
    left: -50px;
  }

  .title--reseau {
    padding-bottom: 108px;
  }

  .title--sectioninsta {
    grid-column: 3/-1;
  }

  .reseaudata--insta {
    grid-column: 1/7;
    margin-bottom: 58px;
  }

  .title--sectionfb {
    grid-column: 5/-1;
  }

  .reseaudata--fb {
    grid-column: 4/-1;
    margin-bottom: 58px;
  }

  .title--sectiontw {
    grid-column: 2/-1;

  }

  .reseaudata--tw {
    grid-column: 1/7;
    margin-bottom: 58px;
  }

  .title--sectiontktk {
    grid-column: 6/-1;
  }

  .reseaudata--tktk {
    grid-column: 5/-1;
    margin-bottom: 58px;
  }

  .reseaudata--yt {
    grid-column: 1/-5;
    margin-bottom: 58px;
  }

  .title--sectionyt {
    grid-column: 3/-1;
  }

  .section--texte1 {
    padding-bottom: 90px;
    padding-left: 13%;
    padding-right: 13%;
  }

  .bouton:hover {
    background-color: lightgray;
  }

  .bouton--redbull {
    margin-bottom: 27px;
  }

  .bouton--saalbach {
    margin-bottom: 27px;
  }

  .bouton--canyon {
    margin-bottom: 27px;
  }

  .bouton--merco {
    margin-bottom: 27px;
  }

  .bouton--sick {
    margin-bottom: 27px;
  }

  .bouton--samsung {
    margin-bottom: 108px;
  }

  .bouton--poc {
    margin-bottom: 108px;
  }

  .bouton--conti {
    margin-bottom: 108px;
  }

  .section--texte2 {
    grid-column: 2/6;
    grid-row: 3/6;
    background-color: #d3d3d3;
    z-index: 10;
  }

  .section--texte3 {
    grid-column: 5/-2;
    grid-row: 8/10;
    background-color: #d3d3d3;
    z-index: 10;
    padding-top: 84px;
  }

  .figure__large1 {
    width: 125%;
    left: -300px;
    top: 600px;
  }

  .figure--large2 {
    top: -15px;
    width: 110%;
  }

  .p--intro {
    grid-column: 3/6;
    padding-top: 150px;
    padding-bottom: 100px;
  }

}