body{
  padding: 0;
  margin: 0;
  font-family: "Lexend", sans-serif;
  min-height: 100vh;
}

.first-page{
  background-image: url('../images/gta6background.png');
  background-size: cover;
  background-position: center;
  min-width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

p{
  margin: 0;
  padding: 0;
}

/* Header secton */

header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  background-color: rgba(96, 37, 102, 0.4);
  backdrop-filter: blur(5px);

  margin-top: 2.2vh;
  margin-left: 5.5%;
  margin-right: 5.5%;

  font-size: 1rem;
  padding: 6px; /******************************************/
}

.left-section-header {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.menu-header-container{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-deroulant{
  position: absolute;
  z-index: 999;
  border-top: 1px solid rgb(177, 151, 252, 0.4);
  background-color: rgba(96, 37, 102, 0.4);
  backdrop-filter: blur(5px);
  display: flex;
  flex-direction: column;
  font-size: 1em;
  color: rgb(177, 151, 252);
  row-gap: 10px;

  padding: 4px;
  top:40px;
  left: -6px;
  right: -160px;
  display: none;
}

.js-menu-deroulant-active{
  display: flex;
}


.accueil-section-menu-deroulant-container:hover,
.map-section-menu-deroulant-container:hover{
  border-bottom: 1px solid rgba(255, 194, 232, 0.7);
  background-color: rgba(255, 194, 232, 0.1);
}
.accueil-section-menu-deroulant-container,
.map-section-menu-deroulant-container{
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  padding:4px;
}

.icon-menu-deroulant{
  margin-right: 4px;
}

.menu-header-svg{
  width: 34px;
  cursor: pointer;
  margin-right: 1em;
}

.title-header-container{
  display: flex;
  flex-direction: column;
  align-items:start;
}

.gta-title-text {
  color: white;
  font-weight: 600;
  margin-bottom: -2.5px;
}

.gta-sub-title-text{
  color: rgb(255, 194, 208);
  font-size: 11px;
  margin-top: -2.5px;
  margin-left: 26px;
}

.gta-title-number{
  color: rgb(255, 212, 168);
}


.header-section-container{
  margin-left: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 30px;
  width: 100%;
}

.section-text{
  color: rgb(255, 194, 232);
  cursor: pointer;
}

.js-selected-text{
  text-decoration: underline;
}

.section-text:hover{
  text-decoration: underline;
}














.right-section-header{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.connexion-container{
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 1rem;
  margin-right: 30px;
}

.connection-text{
  color: white;
  font-size: 0.75em;
  letter-spacing: 0.5px;
  margin-left: 10%;
}


.profile-icon{
  color: rgb(177, 151, 252);
  font-size: 1.4375em;
}


.button-container{
  font-size: 1rem;
}

.button-precommande{
  background-color: rgb(177, 151, 252);
  font-size: 0.6875em;
  letter-spacing: 0.2px;
  color: white;
  border-radius: 3px;
  font-weight: bold;
  padding: 10px;
  border: none;
  cursor: pointer;
}











/* fin header */



/* Commande text section */

.precommande-section{
  display: flex;
  flex-direction: row;
  justify-content: center;
  color: rgb(255, 194, 208);
  font-size: 1vw;
  width: 100%;
  margin: 10px 0px;
}




/* Fin commande text section */


















.main-header-section-container{
  display: grid;
  grid-template-areas:
  "bundle-container icon-container"
  "bundle-container description-container";

  grid-template-columns: 1fr 1fr;
}







.main-header-section-sub-container-left{
  grid-area: bundle-container;
  display: flex;
  flex-direction: row;
  flex: 1;
  justify-content: center; /* POur le moment le align item et justify content pour le bundle je le place */
  align-items: center;
  padding:24px 0px
}

.gtaVI-bundle-image{
  width: 50%; 
  margin-left: 14%; /* enlever aussi quand j aurais la liste defilante de gauche */
}

.main-header-section-sub-container-right{
  grid-area: description-container;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.icons-game-container {
  grid-area: icon-container;
  display: flex;
  align-items: center;
  flex-direction: row;
}

.icon-heart-container{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 6px;
  border: 1px solid rgba(255, 83, 212, 0.6);
  color: rgb(255, 152, 252);
  border-radius: 20px;
  cursor: pointer;

  margin-right: 10px;
}


.icon-heart-container:hover{
  border: 1px solid white;
  background-color: rgba(255, 104, 104, 0.2);
  color: red;
}

.heart-icon{
  font-size: 22px;
}

.icon-sharing-container{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 9.85px 7.85px;
  border: 1px solid rgba(255, 83, 212, 0.6);/*rgba(182, 182, 182, 0.6);*/
  color: rgb(255, 152, 252);/*rgb(87, 87, 87);*/
  border-radius: 20px;
  cursor: pointer;
}











.icon-sharing-container:hover{
  border: 1px solid white;
  background-color: rgba(0, 119, 255, 0.2);
  color: rgb(0, 119, 255);
}

.sharing-icon{
  font-size: 19px;
}

.main-title-container {
  display: flex;
  flex-direction: row;
  justify-content: start;
  
  margin-top: 10px;
  margin-bottom: 10px;

  font-weight: 600;
  font-size: 1.5em;

  color: white;
}

.text-date-sortie-star-container{
  display: flex;
  flex-direction: row;
  margin-bottom: 1.1875em
}

.sortie-text-date{
  color: rgb(218, 218, 218);
  font-size: 0.875em;
}

.date-text {
  color:rgb(255, 152, 252);/*rgb(87, 87, 87);*/
  margin-left: 10px;
  margin-right: 30px;
  font-size: 14px;
}


.star-selected{
  color: rgb(255, 212, 168);
  font-size: 14px;
}

.star-unselected{
  color: rgb(87, 87, 87);
  font-size: 14px;
}

.star-section-container{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.number-person-container{
  display: flex;
  flex-direction: row;
  color: rgb(255, 212, 168);
  margin-left: 12px;
}

.number-person{
  text-decoration:underline;
}

.description-text-container{
  display: flex;
  flex-direction: row;
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(207, 203, 207);
  font-size: 0.875em;
}

.more-detail-text{
  margin-left: 10px;
  color: rgb(255, 194, 208);
  font-size: 1em;
  text-decoration: underline;
  cursor: pointer;
}

.platforme-text-title{
  font-size: 14px;
  color: rgb(218, 218, 218);
  margin-right: 10px;
}

.platforme-text-container{
  margin-top: 19px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.platforme-text{
  font-size: 14px;
  color: rgb(255, 152, 252);
}




/* For ultimate color when selected */ 

.icon-container-ultimate{
  border: 1px solid rgba(255, 226, 83, 0.6);
  color: rgb(252, 180, 109);
}

.utimate-text-color{
  color: rgb(252, 180, 109);
}







.choice-container-platforme {
  display: flex;
  flex-direction: row;
  margin-top: 8px;
}

.ps5-button, .xbox-button{
  color: rgb(218, 218, 218);
  background-color: transparent;
  border: 1px solid rgb(87, 87, 87);
  font-size: 14px;
  padding: 12px;
  border-radius: 20px;
  cursor: pointer;
  margin-right: 8px;
}

.ps5-button:hover, .js-button-active-play {
  border: 1px solid rgb(112, 179, 255);
  color:rgb(112, 179, 255);
  font-weight: bold;
}

.xbox-button:hover, .js-button-active-xbox {
  border: 1px solid rgb(46, 248, 53);
  color:rgb(46, 248, 53);
  font-weight: bold;
}

.text-edition-container {
  margin-top: 4px;
  display: flex;
  flex-direction: row;
}

.edition-text{
  color: rgb(218, 218, 218);
  font-size: 14px;
  margin-right: 9px;
}

.type-edition-text{
  font-size: 14.6px;
  color: rgb(37, 37, 37);
}

.comparateur-text-container{
  display: flex;
  flex-direction: row;
  margin-top: 18px;
}

.comparateur-text{
  color: rgb(218, 218, 218);
  font-size: 14px;
}


.standard-button, .ultimate-button{
  color: rgb(218, 218, 218);
  background-color: transparent;
  border: 1px solid rgb(87, 87, 87);
  font-size: 12px;
  padding: 6px;
  border-radius: 20px;
  cursor: pointer;
}


.standard-button:hover ,.js-standard-button-active {
  border: 1px solid rgb(214, 168, 255);
  color:rgb(214, 168, 255);
  font-weight: bold;
}

.ultimate-button:hover, .js-ultimate-button-active{
  border: 1px solid rgb(255, 212, 168);
  color:rgb(255, 212, 168);
  font-weight: bold;
}

.comparateur-container-main-section {
  width: 100%;
  display: grid;
  grid-template-columns: 170px 170px 170px;
  margin-top: 15px;
  column-gap: 25px;
  row-gap: 14px;
  align-items: flex-start;
}




/* Amazon */

.container-price-amazon{
  display: flex;
  flex-direction: column;
  align-items: start;
  border: 1px solid rgb(255, 153, 0);
  justify-content: center;
  padding:8px;
  border-radius: 8px;
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
}

.container-price-amazon:hover{
  background-color: rgba(255, 153, 0, 0.2);
}

.amazon-logo {
  width: 14px;
  margin-bottom: -2px;
  margin-right: 8px;
}

.title-container-amazon{
  display: flex;
  flex-direction: row;
  margin-bottom: 2px;
}

.text-amazon-title{
  font-size: 14px;
}

.price-container-amazon{
  display: flex;
  flex-direction: row;
  margin-top: 6px;
}




















/* Fnac */

.container-price-fnac{
  display: flex;
  flex-direction: column;
  align-items: start;
  border: 1px solid rgb(235, 179, 0);
  justify-content: center;
  padding:8px;
  border-radius: 8px;
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
}

.container-price-fnac:hover{
  background-color: rgba(235, 179, 0, 0.2);
}

.fnac-logo {
  width: 14px;
  margin-bottom: -2px;
  margin-right: 8px;
}

.title-container-fnac{
  display: flex;
  flex-direction: row;
  margin-bottom: 2px;
}

.text-fnac-title{
  font-size: 14px;
}

.price-container-fnac{
  display: flex;
  flex-direction: row;
  margin-top: 6px;
}

















/* cdiscount */

.container-price-cdiscount{
  display: flex;
  flex-direction: column;
  align-items: start;
  border: 1px solid rgb(55, 50, 255);
  justify-content: center;
  padding:8px;
  border-radius: 8px;
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
}

.container-price-cdiscount:hover{
  background-color: rgba(55, 50, 255, 0.2);
}

.cdiscount-logo {
  width: 14px;
  margin-right: 8px;
}

.title-container-cdiscount{
  display: flex;
  flex-direction: row;
  margin-bottom: 2px;
}

.text-cdiscount-title{
  font-size: 14px;
}

.price-container-cdiscount{
  display: flex;
  flex-direction: row;
  margin-top: 6px;
}































/* Micromania */

.container-price-micromania{
  display: flex;
  flex-direction: column;
  align-items: start;
  border: 1px solid rgb(52, 193, 160);
  justify-content: center;
  padding:8px;
  border-radius: 8px;
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
}

.container-price-micromania:hover{
  background-color: rgba(52, 193, 160, 0.2);
}

.micromania-logo {
  width: 14px;
  margin-bottom: -2px;
  margin-right: 8px;
}

.title-container-micromania{
  display: flex;
  flex-direction: row;
  margin-bottom: 2px;
}

.text-micromania-title{
  font-size: 14px;
}

.price-container-micromania{
  display: flex;
  flex-direction: row;
  margin-top: 6px;
}















/* Cultura */

.container-price-cultura{
  display: flex;
  flex-direction: column;
  align-items: start;
  border: 1px solid rgb(16, 66, 116);
  justify-content: center;
  padding:8px;
  border-radius: 8px;
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
}

.container-price-cultura:hover{
  background-color: rgba(16, 66, 116, 0.2);
}

.cultura-logo {
  width: 14px;
  margin-right: 8px;
}

.title-container-cultura{
  display: flex;
  flex-direction: row;
  margin-bottom: 2px;
}

.text-cultura-title{
  font-size: 14px;
}

.price-container-cultura{
  display: flex;
  flex-direction: row;
  margin-top: 6px;
}






/* Xbox */


.container-price-xbox{
  display: flex;
  flex-direction: column;
  align-items: start;
  border: 1px solid rgb(16, 124, 16);
  justify-content: center;
  padding:8px;
  border-radius: 8px;
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
}

.container-price-xbox:hover{
  background-color: rgba(16, 124, 16, 0.2);
}

.xbox-logo {
  width: 14px;
  margin-bottom: -2px;
  margin-right: 8px;
}

.title-container-xbox{
  display: flex;
  flex-direction: row;
  margin-bottom: 2px;
}

.text-xbox-title{
  font-size: 14px;
}

.price-container-xbox{
  display: flex;
  flex-direction: row;
  margin-top: 6px;
}



















/* boulanger */


.container-price-boulanger{
  display: flex;
  flex-direction: column;
  align-items: start;
  border: 1px solid rgb(255, 102, 0);
  justify-content: center;
  padding:8px;
  border-radius: 8px;
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
}

.container-price-boulanger:hover{
  background-color: rgba(255, 102, 0, 0.2);
}

.boulanger-logo {
  width: 18px;
  margin-top: 2px;
  margin-right: 6px;
}

.title-container-boulanger{
  display: flex;
  flex-direction: row;
  margin-bottom: 2px;
}

.text-boulanger-title{
  font-size: 14px;
}

.price-container-boulanger{
  display: flex;
  flex-direction: row;
  margin-top: 6px;
}























/* carrefour */



.container-price-carrefour{
  display: flex;
  flex-direction: column;
  align-items: start;
  border: solid 1px rgb(255, 0, 0);
  justify-content: center;
  padding:8px;
  border-radius: 8px;
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
}

.container-price-carrefour:hover{
  background-color: rgba(255, 0, 0, 0.2);
}

.carrefour-logo {
  width: 20px;
  margin-bottom: -6px;
  margin-right: 6px;
}

.title-container-carrefour{
  display: flex;
  flex-direction: row;
  margin-bottom: 2px;
}

.text-carrefour-title{
  font-size: 14px;
}

.price-container-carrefour{
  display: flex;
  flex-direction: row;
  margin-top: 6px;
}













.etat-edition-text-container{
  font-size: 10px;
  margin-top: 4px;
}
















.footer-section{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 8px 0px;
}

.button-bande-annonce{
  font-family: "New Amsterdam", sans-serif;
  cursor: pointer;
  color: white;
  padding: 8px;
  background-color: transparent;
  border: 2px solid rgb(177, 151, 252);
  font-weight: bold;
  border-radius: 2px;
  letter-spacing: 1px;
}