/* -------------------------------------------- */
/* ---------------- BIG MENU ------------------ */
/* -------------------------------------------- */
/* #big-menu{position:absolute;left:50%;top:50px;z-index:14000;} */

#big-menu {
  position: fixed;
  top: 50% !important; /* position the top  edge of the element at the middle of the parent */
  left: 50%; /* position the left edge of the element at the middle of the parent */
  z-index: 14000;
  transform: translate(-50%, -50%);
}
#btn-menu,
#btn-menu2,
#btn-menu3,
#btn-menu4 {
  display: none;
  border-radius: 6px;
  padding: 15px;
  width: 1135px;
  height: auto;
  background-color: #ffffff;
}
.contentBigMenu {
  width: 100%;
  height: 100%;
}
.gridMenu {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 10px 25px;
}
.linksImage {
  grid-area: 1/1/4/3;}
.linksBigIcones {
  grid-area: 1/3/5/4;}
.linksSmallIcones {
  grid-area: 4/1/5/3;}

#big-menu a {
  text-decoration: none;
  text-transform: uppercase;
  color: #ffffff;
  font-family: "DosisFont";
  line-height: 1.1;
}
#big-menu a:hover {
  text-decoration: underline;
  text-transform: uppercase;
}
.ico-bigMenu {
  display: block;
  width: 72px;
  height: 72px;
  background-image: url(../img/sprite-icones-big-menu_web.webp);
  background-repeat: no-repeat;
}
#bigMenuVTT .depa, #vtt .depa { width: 72px; height: 72px; background-position: 0 -100px;}
#bigMenuVTC .depa, #vtc .depa { width: 72px; height: 72px; background-position: 0 -300px;}
#bigMenuVR .depa, #vr .depa {width: 72px; height: 72px; background-position: 0 -200px;}
#bigMenuVG .depa, #vg .depa { width: 72px; height: 72px; background-position: 0 0;}
.albu {
  width: 72px;
  height: 72px;
  background-position: -100px -200px;
}
.magz {
  width: 72px;
  height: 72px;
  background-position: -100px -0;
}
.actu {
  width: 72px;
  height: 72px;
  background-position: -100px -100px;
}
.loupewhite{
  width: 32px;
  height: 32px;
  background-position: -100px -450px;
}
.infoPra {
  width: 33px;
  height: 33px;
  background-position: -199px 0;
}

.infoPrawhite {
  width: 33px;
  height: 33px;
  background-position: -299px 0;
}
.newslet {
  width: 33px;
  height: 33px;
  background-position: -200px -100px;
}
.espritV {
  width: 33px;
  height: 33px;
  background-position: -200px -250px;
}
.espritVwhite {
  width: 33px;
  height: 33px;
  background-position: -300px -250px;
}
.matos {
  width: 33px;
  height: 33px;
  background-position: -199px -299px;
}
.equipeV {
  width: 33px;
  height: 33px;
  background-position: -199px -399px;
}
a:hover .equipeV{
  width: 33px;
  height: 33px;
  background-position: -249px -399px;
}
.equipeVwhite {
  width: 33px;
  height: 33px;
  background-position: -299px -399px;
}
a:hover .equipeVwhite{
  width: 33px;
  height: 33px;
  background-position: -349px -399px;
}


/* ---------------- linksImage ------------------ */
.linksImage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px 25px;
  /* height: 300px; */
}
.linksImage .fullHeightLeft {
  grid-area: 1/1/4/2;
  background-color: aquamarine;
}
.linksImage .halfHeightTopLeft {
  grid-area: 1/1/3/2;
  background-color: aquamarine;
}
.linksImage .halfHeightBottomLeft {
  grid-area: 3/1/4/2;
  background-color: aquamarine;
}
.linksImage .halfHeightTopRight {
  grid-area: 1/2/3/3;
  background-color: coral;
}
.linksImage .halfHeightBottomRight {
  grid-area: 3/2/4/3;
  background-color: darkmagenta;
}

.linksImage a {
  display: block;
  height: 100%;
  padding: 8px;
  font-size: 1.5rem;
  box-sizing: border-box;
  outline: 3px solid transparent;
  outline-offset: -3px;
  text-align: center;
}
#bigMenuVTT .linksImage a:hover { outline-color: var(--bs-vtt-secondary);}
#bigMenuVTC .linksImage a:hover { outline-color: var(--bs-vtc-secondary);}
#bigMenuVR .linksImage a:hover  { outline-color: var(--bs-vr-secondary);}
#bigMenuVG .linksImage a:hover  { outline-color: var(--bs-vg-secondary);}

.linksImage_content{display: flex; height: 100%; justify-content: center; align-items: center;}
.linksImage p {
  margin: 0;
  font-weight: bold;
  text-shadow: #000 0 0 10px;
}
.linksImage p span {
  font-weight: normal;
    display: block;
  font-size: 1.1rem;
}

#bigMenuVTT .linksImage .fra {background: url(../img/bg-menu-vtt-fra.jpg) no-repeat 50% 50%;}
#bigMenuVTT .linksImage .mon {background: url(../img/bg-menu-vtt-mon.jpg) no-repeat 50% 70%;  }
#bigMenuVTT .linksImage .elec  {background: url(../img/bg-menu-vtt-elec.jpg)  no-repeat 50% 20%;  }
/* #bigMenuVTT .linksImage .elec2 {background: url(../img/bg-menu-vtt-elec.jpg)  no-repeat 50% 20%;  } */
#bigMenuVTT .linksImage .inspi {background: url(../img/bg-menu-vtt-inspi.jpg) no-repeat 50% 50%;  }

#bigMenuVTC .linksImage .fra {background: url(../img/bg-menu-vtc-fra.jpg) no-repeat 50% 30% / cover;}
#bigMenuVTC .linksImage .mon {background: url(../img/bg-menu-vtc-mon.jpg)  no-repeat 50% 50% / cover;  }
#bigMenuVTC .linksImage .elec  {background: url(../img/bg-menu-vtc-elec2.jpg) no-repeat 50% 75% / cover;  }
/* #bigMenuVTC .linksImage .elec2 {background: url(../img/bg-menu-vtc-elec2.jpg) no-repeat 50% 80%;  } */
#bigMenuVTC .linksImage .inspi {background: url(../img/bg-menu-vtc-inspi.jpg)  no-repeat 50% 80% / cover; }

#bigMenuVR  .linksImage .fra {background: url(../img/bg-menu-vr-fra.jpg) no-repeat 100% 0% / cover;}
#bigMenuVR  .linksImage .mon {background: url(../img/bg-menu-vr-mon.jpg) no-repeat 0% 50% / cover;}
#bigMenuVR  .linksImage .inspi {background: url(../img/bg-menu-vr-inspi.jpg) no-repeat 30% 95% / cover;  }

#bigMenuVG  .linksImage .fra {background: url(../img/bg-menu-vg-fra.jpg) no-repeat 50% 50% / cover;}
#bigMenuVG  .linksImage .mon {background: url(../img/bg-menu-vg-mon.jpg)  no-repeat 50% 50% / cover;  }
#bigMenuVG  .linksImage .inspi {background: url(../img/bg-menu-vg-inspi.jpg)  no-repeat 50% 0% / cover; }

@media only screen and (max-width: 1200px) {

    #bigMenuVTT  .linksImage .fra    {background-position: 100% 70%;}
    #bigMenuVTT  .linksImage .mon    {background-position: 100% 62%;}
    #bigMenuVTT  .linksImage .inspi  {background-position: 100% 35%;}
    #bigMenuVTT  .linksImage .elec   {background-position: 50% 20%; }
        
    #bigMenuVTC  .linksImage .fra    {background-position: 100% 60%;}
    #bigMenuVTC  .linksImage .mon    {background-position: 100% 70%;}
    #bigMenuVTC  .linksImage .inspi  {background-position: 100% 80%;}
    #bigMenuVTC  .linksImage .elec   {background-position: 50% 75%; }

    #bigMenuVR  .linksImage .fra    {background-position: 100% 70%;}
    #bigMenuVR  .linksImage .mon    {background-position: 100% 70%;}
    #bigMenuVR  .linksImage .inspi  {background-position: 100% 95%;}

    #bigMenuVG  .linksImage .fra    {background-position: 50% 90%;}
    #bigMenuVG  .linksImage .mon    {background-position: 50% 100%;}
    #bigMenuVG  .linksImage .inspi  {background-position: 50% 90%;}


}

.elec-icon{vertical-align: middle;}

/* ---------------- linksBigIcones ------------------ */
.linksBigIcones {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.linksBigIcones a {
  display: block;
  border: #ffffff solid 3px;
  /* height: 90px; */
  padding: 8px;
  font-size: 1.1rem;
}
#bigMenuVTT .linksBigIcones a {background-color: var(--bs-vtt-primary);}
#bigMenuVTC .linksBigIcones a {background-color: var(--bs-vtc-primary);}
#bigMenuVR .linksBigIcones a {background-color: var(--bs-vr-primary);}
#bigMenuVG .linksBigIcones a {background-color: var(--bs-vg-primary);}

#bigMenuVTT .linksBigIcones a { border-color: var(--bs-vtt-primary);}
#bigMenuVTC .linksBigIcones a { border-color: var(--bs-vtc-primary);}
#bigMenuVR .linksBigIcones a  { border-color: var(--bs-vr-primary);}
#bigMenuVG .linksBigIcones a  { border-color: var(--bs-vg-primary);}
  /* border: #ffffff solid 3px; */

#bigMenuVTT .linksBigIcones a:hover { border: var(--bs-vtt-secondary) solid 3px;}
#bigMenuVTC .linksBigIcones a:hover { border: var(--bs-vtc-secondary) solid 3px;}
#bigMenuVR .linksBigIcones a:hover  { border: var(--bs-vr-secondary) solid 3px;}
#bigMenuVG .linksBigIcones a:hover  { border: var(--bs-vg-secondary) solid 3px;}

.linksBigIcones_content {
  display: flex;
  height: 100%;
  align-items: center;
  gap: 10px;
}

.linksBigIcones_content p {
  margin: 0;
}

.linksBigIcones_content p span {
  display: block;
}

/* ---------------- linksSmallIcones ------------------ */
.linksSmallIcones {
  display: flex;
  justify-content: space-between;
  /* width: 100%; */
}
#big-menu .linksSmallIcones a {
  color: #000;
  font-size: 0.9rem;
}
.linksSmallIcones span {
  display: block;
}
.linksSmallIcones_content {
  display: flex;
  height: 100%;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 0;
}

@media only screen and (max-width: 1200px) {
  #big-menu {
    top: 50px !important;
    transform: translate(-50%, 0);
  }
  .gridMenu {
    display: flex;
    flex-direction: column;
    grid-gap: auto;
    gap: 10px;
  }
  #btn-menu,
  #btn-menu2,
  #btn-menu3,
  #btn-menu4 {
    width: 85vw;
    max-width: 367px;
    max-height: 88vh;
    overflow-x: scroll;
  }
  .linksImage,
  .linksBigIcones,
  .linksSmallIcones {
    grid-area: auto;
  }
  .linksSmallIcones {
    padding: 10px 20px 50px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
  }
  .linksImage {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .linksImage .fullHeightLeft,
  .linksImage .halfHeightTopLeft,
  .linksImage .halfHeightBottomLeft,
  .linksImage .halfHeightTopRight,
  .linksImage .halfHeightBottomRight {
    grid-area: auto;
    height: 94px;
  }
}