@charset "utf-8";

/*

    ## #####  ##     ##
    ## ##  ## #### ####
    ## #####  ## ### ## --- CSS Document
##  ## ##  ## ##  #  ##
  ##   #####  ##     ##     JB Simon MARTINEZ © 2022 - jb.martinez.free.fr


							--> conception Mobile First : du Mobile vert les grands écrans
*/

/* ***************************************************************************************************
		3 - LAYOUT : DISPOSITION ==> [ Mise en place type : Header, nav, main, footer ]
****************************************************************************************************** */

#group-slider {
  position: relative;
  width: 100%;
  height: auto;
}

#carouselExampleSlidesOnly {
  overflow: hidden;
}

#group-slider::after {
  position: absolute;
  display: none;
  z-index: 2;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-image: url("../img/bande.svg")!important;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
}

#link-niv1 {
  position: relative;
  z-index: 5;
  width: 100%;
  margin: 3rem 0 5rem;
}

#link-niv1 li {
  width: 80px;
  height: 80px;
  margin-right: 1rem;
}

#link-niv1 li a {
  position: relative;
  display: block;
  text-transform: uppercase;
  font-size: 1.6rem;
  text-align: center;
  color: var(--color-3);
  font-family: 'League Gothic', sans-serif;
}

#link-niv1 li a:hover {
  color: var(--color-4);
}

#link-niv1 svg {
  width: 100%;
  height: auto;
}

.link1 {
  padding-left: 0.5rem;
}

#svg-console .st1{
  fill:#FFFFFF;
  stroke:var(--color-3);
  stroke-width:10;
  stroke-miterlimit:10;
}

#svg-console .st2{
  fill: var(--color-3);
  stroke: var(--color-3);
  stroke-width:10;
  stroke-miterlimit:10;
}

#link-niv1 a:hover #svg-console .st1 {
  stroke:var(--color-4);
}

#link-niv1 a:hover #svg-console .st2 {
  fill:var(--color-4);
  stroke:var(--color-4);
}

#svg-vintage .st2{
  fill:#FFFFFF;
  stroke:var(--color-3);
  stroke-width:10;
  stroke-miterlimit:10;
}

#svg-vintage .st3{
  fill:var(--color-3);
}

#link-niv1 a:hover #svg-vintage .st2{
  stroke:var(--color-4);
}

#link-niv1 a:hover #svg-vintage .st3{
  fill:var(--color-4);
}

#svg-societe .st2{
  fill:#FFFFFF;
  stroke:var(--color-3);
  stroke-width:10;
  stroke-miterlimit:10;
}

#svg-societe .st3{
  fill:var(--color-3);
}

#link-niv1 a:hover #svg-societe .st2{
  fill:#FFFFFF;
  stroke:var(--color-4);
  stroke-width:10;
  stroke-miterlimit:10;
}

#link-niv1 a:hover #svg-societe .st3{
  fill:var(--color-4);
}

/* --- CONSOLE --- */

#console {
  position: relative;
  z-index: 5;
  padding: 0;
}

#console ul {
  margin-left: 0;
}

#console li {
  width: calc(50% - 0.5rem);
  padding: 0.5rem;
}

#console li a img {
  border-radius: 30px;
}

#console li a:hover img {
  box-shadow: 0 5px 5px rgba(0,65,255,0.5);
}

#console .arp-console {
  width: 320px;
  height: auto;
  margin-right: 1rem;
  padding: 3px;
  border-radius: 30px;
  background: linear-gradient(120deg, rgba(0,0,0,0) 7%, rgba(0,0,0,1));
}

#console .blanc {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background-color: var(--color-2);
}

#console .blanc img {
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  width: auto;
  height: 100%;
  border-bottom-right-radius: 30px;
}

/*-- VINTAGE --*/

#vintage {
  position: relative;
  padding-top: 5rem;
  width: 100%;
}

#vintage .arp-vintage {
  position: absolute;
  display: inline-block;
  width: 400px;
  height: 400px;
  background-image: url("../img/vintage/vintage.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateX(-2rem) translateY(-8rem);
}

#vintage .img-sonic {
  position: relative;
  display: inline-block;
  padding-top: 10rem;
  width: 50%;
  height: auto;
  -webkit-filter: drop-shadow(-5px 5px 20px var(--color-3));
  filter: drop-shadow(-5px 5px 20px var(--color-3));
}

#vintage .img-tiger {
  position: relative;
  display: inline-block;
  width: 40%;
  height: auto;
  transform: translateX(3rem) translateY(-5rem);
  -webkit-filter: drop-shadow(5px 5px 5px #666666);
  filter: drop-shadow(5px 5px 5px #666666);
}

#vintage ul li {
  width: 33%;
  height: auto;
  margin-right: 2rem;
  margin-bottom: 2rem;
}

#vintage ul li:hover {
  box-shadow: 0 10px 10px rgba(0,65,255,0.5);
}

#vintage ul li:nth-child(1):hover {
  box-shadow:none;
}

#vintage ul li:nth-child(2), #vintage ul li:nth-child(6) {
  margin-left: 0;
}

#vintage ul li:nth-child(10) {
  margin-left: 0;
}

/*--- SOCIETE --*/

#societe {
  position: relative;
  margin-top: 3rem;
  margin-bottom: 0;
  width: 100%;
  height: auto;
}

#societe ul::after {
  position: absolute;
  z-index: -1;
  display: block;
  top: 2rem;
  right: 0%;
  content: "";
  width: 500px;
  height: 500px;
}

#societe ul li {
  width: 120px;
  height: auto;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}
#societe ul li:hover {
  box-shadow: 0 5px 5px rgba(0,65,255,0.5);
}

/* SMALL SCREEN : smartphone à partir de 576px */
@media (min-width: 576px) {

  #vintage ul li {
    width: 20%;
  }

}

/* VERY LARGE SCREEN : affichage pour les écrans Xlarges (desktop) à partir de 992px */
@media (min-width: 992px) {

  /*-- ICON --*/
  #link-niv1 {
    margin: 3rem 0;
  }

  #link-niv1 li {
    width: 80px;
    height: 80px;
  }

  /*-- CONSOLE --*/

  #console {
    padding: 3rem 0 3rem 6.25rem;
  }

  #console ul {
    margin-left: 2rem;
  }

  #console li {
    width: calc(200px - 0.5rem);
    padding: 0.5rem;
  }

  #console .arp-console {
    width: 220px;
  }

  /*-- VINTAGE --*/

  #vintage {
    padding-top: 8rem;
  }

  #vintage ul li {
    width: 100px;
    height: 100px;
    margin-right: 1rem;
    margin-bottom: 1rem;
  }

  #vintage ul li:nth-child(2), #vintage ul li:nth-child(6) {
    margin-left: 422px;
  }

  #vintage ul li:nth-child(10) {
    margin-left: 7.2rem;
  }

  #vintage .arp-vintage {
    width: 350px;
    height: 350px;
    transform: translateX(2rem) translateY(-8rem);
  }

  #vintage .img-sonic {
    padding-top: 6rem;
  }

  #vintage .img-tiger {
    transform: translateX(3rem) translateY(-5rem);
  }

    /*-- SOCIETE --*/

	#societe {
	  margin-top: 8rem;
	  margin-bottom: 5rem;
	}

  #societe ul {
    padding-left: 8rem;
    padding-right: 30%;
  }

    #societe ul li {
      width: 120px;
    }

    #societe ul::after {
      right: 0%;
    }

    #group-slider::after {
      display: block;
    }

    #societe ul::after {
  	  background-image: url("../img/siciete/jeu-echecs.png")!important;
  	  background-repeat: no-repeat;
  	  background-size: 500px;
    }

}


/* VERY LARGE SCREEN : affichage pour les écrans Xlarges (desktop) à partir de 1200px */
@media (min-width: 1200px) {

  /*-- ICON --*/
  #link-niv1 li {
    width: 80px;
    height: 80px;
  }

  /*-- CONSOLE --*/

  #console {
    padding: 3rem 4.6rem;
  }

  #console ul {
    margin-left: 2rem;
  }

  #console li {
    width: calc(257px - 0.5rem);
    padding: 0.5rem;
  }

  #console .arp-console {
    width: 320px;
  }

  /*-- VINTAGE --*/

  #vintage ul li {
    width: 120px;
    height: 120px;
    margin-right: 2rem;
    margin-bottom: 2rem;
  }

  #vintage ul li:nth-child(2), #vintage ul li:nth-child(6) {
    margin-left: 422px;
  }

  #vintage ul li:nth-child(10) {
    margin-left: 7.2rem;
  }

  #vintage .arp-vintage {
    width: 400px;
    height: 400px;
    transform: translateX(-2rem) translateY(-8rem);
  }

  #vintage .img-sonic {
    padding-top: 10rem;
  }

  #vintage .img-tiger {
    transform: translateX(3rem) translateY(-5rem);
  }

    /*-- SOCIETE --*/

    #societe ul {
      padding-left: 8rem;
      padding-right: 30%;
    }

    #societe ul li {
      width: 120px;
    }

    #societe ul::after {
      right: 0%;
    }

}

/* VERY LARGE SCREEN : affichage pour les écrans Xlarges (desktop) à partir de 1400px */
@media (min-width: 1400px) {

  /*-- ICON --*/
  #link-niv1 li {
      width: 120px;
      height: 120px;
  }

  /*-- CONSOLE --*/

  #console {
    padding: 3rem 0;
  }

  #console ul {
    margin-left: 0;
  }

  #console li {
    width: calc(350px - 0.5rem);
    padding: 0.5rem;
  }

  #console .arp-console {
    width: 400px;
  }

  /*-- VINTAGE --*/

  #vintage ul li {
    width: 180px;
    height: 180px;
  }

  #vintage ul li:nth-child(10) {
    margin-left: 0;
  }

  #vintage .arp-vintage {
    width: 500px;
    height: 500px;
    transform: translateX(-10rem) translateY(-8rem);
  }

    /*-- SOCIETE --*/

    #societe ul {
      padding-left: 0.5rem;
      padding-right: 15%;
    }

    #societe ul li {
      width: 180px;
    }

    #societe ul::after {
      right: 10%;
    }

}