/*------------------------------------------variables-----------------------------------
---------------------------------------------------------------------------------------*/
/*------------typographie--------------------*/
:root {
  --font-prime: "Iceberg", sans-serif;
  --font-second: "Audiowide", sans-serif;
  --font-size-prime-desktop: 4vw;
  --font-size-second-desktop: 2.2vw;
  --font-size-third-desktop: 1.9vw;
  --font-size-text-desktop: 1.7vw;
  --font-size-prime-responsive: 5vw;
  --font-size-second-responsive: 4vw;
  --font-size-third-responsive: 3.75vw;
  --font-size-text-responsive: 3.25vw;
}
/*----------------couleur------------------*/
:root{
  --color-prime: #000000;
  --color-second: #D9C339;
  --color-third: #ffffff;
}

/*---------------espacement-----------------*/
:root{
  --margin-prime-desktop: 7.5vw;
  --margin-second-desktop: 4vw;
  --margin-third-desktop: 3vw;
  --margin-fourth-desktop: 1vw;
  --margin-prime-responsive: 17vw;
  --margin-second-responsive: 10vw;
  --margin-third-responsive: 2.19vw;
  --margin-fourth-responsive: 0.69vw;
}

/*-------------------------------------------------------------------------------------
                     Header
-------------------------------------------------------------------------------------*/
   .burger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 5vw;
    height: 5vw;
    position: fixed;
    top: 2.5vw;
    right: 10vw;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 20;
  }
  
  .ligne {
    width: 3vw;
    height: 0.3vw;
    position: fixed;
    transform: translate(-50%, -50%);
    background: var(--color-third);
  }

  .ligne:hover{
    background: var(--color-second);
  }

  .ligne::after,
  .ligne::before {
    content: "";
    display: block;
    width: 100%;
    height: 0.3vw;
    border-radius: 0.5vw;
    background: var(--color-third);
    position: fixed;
  }
  .ligne:hover::after, .ligne:hover::before{
    background: var(--color-second);
  }
  
  .ligne::after {
    top: -1vw;
  }
  
  .ligne::before {
    top: 1vw;
  } 
  @media (max-width: 640px) {
    .burger{
      width: 8vw;
      height: 8vw;
      top: 5.5vw;
    }
    .ligne {
      width: 8vw;
      height: 0.8vw;
    }
    .ligne::after,
  .ligne::before {
    height: 0.8vw;

  }
  .ligne::after {
    top: -2.5vw;
  }
  
  .ligne::before {
    top: 2.5vw;
  } 
  }
  
  /*  animation burger */
  
   .burger.active .ligne::before {
    transition: transform .2s ease-in-out;
    transform: translateY(-1vw) rotate(-45deg)
  }
  
  .burger.active .ligne::after {
    transition: transform .2s ease-in-out;
    transform: translateY(1vw) rotate(45deg)
  }
  
  .burger.active .ligne {
    background: transparent;
  }
  @media (max-width: 640px) {
    .burger.active .ligne::before {
      transform: translateY(-2.5vw) rotate(-45deg)
    }
    
    .burger.active .ligne::after {
      transform: translateY(2.5vw) rotate(45deg)
    }
    
  }

  /*  menu */
  
  nav {
  height: 100%;
  width: 30vw;
  background: var(--color-prime);
  color: var(--color-third);
  position: fixed;
  z-index: 5;
  transition: all .2s ease-in;
  left: -50vw;
  opacity: 0;

  }
  nav ul {
  margin-top: 10vw;
  width: 100%;
  height: 100%;
  list-style-type: none;
  }
  
  nav .items {
  display: flex;
  padding-left: 5vw;
  justify-content: flex-start;
  align-items: center;
  cursor:pointer;
  }
  
  nav .items span {
    position: relative;
    margin: 1vw;
  }
  nav .items span:hover {
    color: var(--color-second);
  }
  
  nav .items span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    background: var(--color-second);
    width: 0%;
    height: 2px;
    transition: width .2s ease-in;
    border-radius: 2px;
  }
  
  nav .items span:hover::after {
    width: 100%;
  }
  
  nav.menu-active {
    left: 0;
    opacity: 1;
  }
  @media (max-width: 640px) {
    nav {
      width: 50%;
    }
    nav ul {
      margin-top: 20vw;
    }
    nav ul li span {
      font-size: 5vw;
    }
  }
  /*-----------logo volkswagen-----------*/
  header div img {
    position: fixed;
    left: 10vw;
    top: 1vw;
  }
  @media (max-width: 640px) {
    header div img {
      
      left: 10vw;
      top: 1vw;
    }
  }
  /*-----------couverture-----------*/

.couverture{
    background-image: url('couverture_gti6.png');
    width: 100%;
    height: 50vw;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    justify-content: flex-end;
  }
  .couverture span{
    justify-content: flex-end;
    margin-left: 10%;
    margin-bottom: 5%;
    width: auto;
    height: auto;
  }
  @media (max-width: 640px) {
    .couverture{
      height: 80vw;
    }
  }

  
/*-------------------------------------------------------------------------------------
                     Body global
-------------------------------------------------------------------------------------*/
/* --------------------transition scroll------------------------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.section {
  opacity: 0;
  transform: translateY(2vw);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.section.activeClass {
  opacity: 1;
  transform: translateY(0);
}
/*--------------------btn-----------------------------------*/
button{
  width: 15vw;
  height: 4.5vw;
  transition: border-color 0.3s ease, color 0.3s ease
}
button:hover{
  color: var(--color-second);
  border-color: var(--color-second);
}
@media (max-width: 640px) {
  button{
    width: 27.5vw;
    height: 8vw;
  }
}

/* ----------------------typographie--------------------------- */
h1{
  font-size: var(--font-size-prime-desktop);
  margin-top: var(--margin-prime-desktop);
  /* margin-left: 20vw; */
}
h2{
  font-size: var(--font-size-second-desktop);
  /* margin-left: 20vw; */
}
h3{
  font-size: var(--font-size-third-desktop);
}
p{
  font-size: var(--font-size-text-desktop);
  margin: 2vw;
}

@media (max-width: 640px) {
  h1{
    font-size: var(--font-size-prime-responsive);
    margin-top: var(--margin-prime-responsive);
    /* margin-left: 20vw; */
  }
  h2{
    font-size: var(--font-size-second-responsive);
    /* margin-left: 20vw; */
  }
  h3{
    font-size: var(--font-size-third-responsive);
  }
  p{
    font-size: var(--font-size-text-responsive);
    margin: 2vw;
  }
}

/*-------------------------------------------------------------------------------------
                     section découverte
-------------------------------------------------------------------------------------*/
video{
  margin: 2vw;
}
.Presentation{
  margin-left: 0;
}
/*-------------------------------------------------------------------------------------
                     section fiche technique
-------------------------------------------------------------------------------------*/
/* animation lorsque la souris survol le h2 */
#underline .items:hover{
  color: var(--color-second);
}
#underline .items {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor:pointer;
  }
  
  #underline .items h2 {
    position: relative;
    margin: 0;
  }
  
  #underline .items h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    background: var(--color-second);
    width: 0%;
    height: 2px;
    transition: width .2s ease-in;
    border-radius: 2px;
  }
  
  #underline .items h2:hover::after {
    width: 100%;
  }

  /*---------------- liste-style li ------------------ */
  #listStyle ul li{
    list-style-type: disc;
    font-size: var(--font-size-text-desktop);
    margin: var(--margin-third-desktop);
  }

  @media (max-width: 640px) {
    #listStyle ul li{
      font-size: var(--font-size-text-responsive);
    }
  }
  /* conteneur liste caractéristique et équimement */
  #listStyle{
    margin-left: 10vw;
  }
  /*----------------losrque le h2 est choisi----------------*/
  #underline h2.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--color-second);
    border-radius: 2px;
}
#underline h2.active{
  color: var(--color-second);
}
/* ----------------h2 souligné par défaut------------------------- */
.character-title.active{
  color: var(--color-second);
}


/*-------------------------------------------------------------------------------------
                     section galerie
-------------------------------------------------------------------------------------*/

.carousel-container {
  position: relative;
  width: 80vw;
  height: 50vw;
  overflow: hidden;
  border: 0.5vw solid var(--color-third);
  box-sizing: border-box;
  margin-left: 10vw;
}

.carousel {
  display: flex;

  width: calc(80vw * 6); /* 6 images */
  transition: transform 0.5s ease-in-out;
}

.carousel img {
  width: 80vw;
  height: 50vw;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 20vw; /*car sinon les images vont se supperposée*/
}

button#prev,
button#next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 5.2vw;
  height: 16vw;
  color: var(--color-third);
  background-color: var(--color-second);
  border: 0.1vw var(--color-third) solid;
  font-size: 5vw;
  cursor: pointer;
  opacity: 0.7;
  z-index: 10;
}

#prev {
  left: 1vw;
}


#next {
  right: 1vw;
}


.dots {
  position: absolute;
  bottom: 1vw;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.7vw;
}

.dot {
  width: 1.7vw;
  height: 1.7vw;
  border: 0.3vw var(--color-third) solid;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.dot.active {
  background-color: var(--color-second);
}


/*-------------------------------------------------------------------------------------
                     section avis client
-------------------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------------------
                     section prix et contact
-------------------------------------------------------------------------------------*/
.price p{
  margin: 0;
}
.btn-price{
  height: 3vw;
  width: 20vw;
  font-size: 1.5vw;
}
@media (max-width: 640px){
  .btn-price{
    height: 7.5vw;
    width: 50vw;
    font-size: 3.5vw;
  }
}
.container-price.active{
  height: auto;
}

.contact h3{
  margin-left: 5vw;
}
.contact p{
  margin: 0.9vw;
}
/*-------------------------------------------------------------------------------------
                     footer
-------------------------------------------------------------------------------------*/
footer{
  background-image: url('footer_gti6.jpg');
  width: 100%;
  height: auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  justify-content: flex-end;
}
footer main span ul{
  margin: 1vw;
  list-style-type: disc;
  font-size: var(--font-size-text-desktop);
}
@media (max-width: 640px){
  footer main span ul{
    margin: 2vw;
    font-size: var(--font-size-text-responsive);
  }
  footer main span p{
    margin: 0;
  
  }
}
/*----------------effet lorsque la souris survol le texte----------------*/

  
  footer main span ul li a:hover {
    text-decoration: underline;
  }
  footer main span p a:hover {
    text-decoration: underline;
  }