/*introduction*/

#inte-page {
  padding: 0 0 0 0;
  width: 100%;
  position: relative;
  
  /*media-query*/
  display: grid;
  grid-template-columns: repeat(40, 2.5vw [col-start]);
  grid-template-rows: repeat(73, 2.5vw [row-start]);
}

#image-titre-projet {
  grid-area: 2 / 10 / span 10 / span 20;
  height: 100%;
  width: 100%;
  object-fit: contain;
}

#titre-projet {
  grid-area: 12 / 8 / span 3 / span 8;
}

/*liste projets*/

.intro-projets-hover {
  height: 25vw;
  z-index: -1;
}

.projet-hover {
  height: 100%;
  width: 100%;
  object-fit: contain;

  opacity: 0;
}

/*commun*/
#makyma-etoile, #kb-etoile, #vurb-etoile, #insight-etoile, #webradio-etoile, #hc-etoile, #iso-etoile, #mariage-etoile, #c19-etoile, #archi-etoile, #laon-etoile {
  transform: translateY(0.3125vw);
  opacity: 0;
}

#makyma-image-etoile, #kb-image-etoile, #vurb-image-etoile, #insight-image-etoile, #webradio-image-etoile, #hc-image-etoile, #iso-image-etoile, #mariage-image-etoile, #c19-image-etoile, #archi-image-etoile, #laon-image-etoile {
  height: 100%;
  width: 100%;
}

/*etoiles*/
#makyma-etoile {
  grid-area: 20 / 9 / span 1 / span 1;
}

#kb-etoile {
  grid-area: 25 / 9 / span 1 / span 1;
}

#vurb-etoile {
  grid-area: 30  / 9 / span 1 / span 1;
}

#insight-etoile {
  grid-area: 35  / 9 / span 1 / span 1;
}

#webradio-etoile {
  grid-area: 40 / 9 / span 1 / span 1;
}

#hc-etoile {
  grid-area: 45 / 9 / span 1 / span 1;
}

#iso-etoile {
  grid-area: 50 / 9 / span 1 / span 1;
}

#mariage-etoile {
  grid-area: 55 / 9 / span 1 / span 1;
}

#c19-etoile {
  grid-area: 60 / 9 / span 1 / span 1;
}

#archi-etoile {
  grid-area: 65 / 9 / span 1 / span 1;
}

#laon-etoile {
  grid-area: 70 / 9 / span 1 / span 1;
}


/*titre*/
#makyma-titre {
  grid-area: 20 / 11 / span 1 / span 4;
}

#kb-titre {
  grid-area: 25 / 11 / span 1 / 19;
}

#vurb-titre {
  grid-area: 30 / 11 / span 1 / 17;
}

#insight-titre {
  grid-area: 35 / 11 / span 1 / span 3;
}

#webradio-titre {
  grid-area: 40 / 11 / span 1 / 17;
}

#hc-titre {
  grid-area: 45 / 11 / span 1 / span 5;
}

#iso-titre {
  grid-area: 50 / 11 / span 1 / span 5;
}

#mariage-titre {
  grid-area: 55 / 11 / span 1 / span 4;
}

#c19-titre {
  grid-area: 60 / 11 / span 1 / span 5;
}

#archi-titre {
  grid-area: 65 / 11 / span 1 / span 6;
}

#laon-titre {
  grid-area: 70 / 11 / span 1 / span 3;
}

/*image projet hover*/

#makyma-projet-hover {
  grid-area: 16 / 18 / span 10 / span 16;
}

#kb-projet-hover {
  grid-area: 21 / 21 / span 10 / span 16;
}

#vurb-projet-hover {
  grid-area: 26 / 19 / span 10 / span 16;
}

#insight-projet-hover {
  grid-area: 31 / 16 / span 10 / span 16;
}

#webradio-projet-hover {
  grid-area: 36 / 19 / span 10 / span 16;
}

#hc-projet-hover {
  grid-area: 41 / 18 / span 10 / span 16;
}

#iso-projet-hover {
  grid-area: 46 / 18 / span 10 / span 16;
}

#mariage-projet-hover {
  grid-area: 51 / 17 / span 10 / span 16;
}

#c19-projet-hover {
  grid-area: 56 / 18 / span 10 / span 16;
}

#archi-projet-hover {
  grid-area: 61 / 19 / span 10 / span 16;
}

#laon-projet-hover {
  grid-area: 66 / 16 / span 10 / span 16;
}




/*sous titre */
#makyma-soustitre {
  grid-area: 21 / 11 / span 1 / span 8;
}

#kb-soustitre {
  grid-area: 26 / 11 / span 1 / span 8;
}

#vurb-soustitre {
  grid-area:  31 / 11 / span 1 / span 8;
}

#insight-soustitre {
  grid-area: 36 / 11 / span 1 / span 8;
}

#webradio-soustitre {
  grid-area: 41 / 11 / span 1 / span 8;
}

#hc-soustitre {
  grid-area: 46 / 11 / span 1 / span 8;
}

#iso-soustitre {
  grid-area: 51 / 11 / span 1 / span 8;
}

#mariage-soustitre {
  grid-area: 56 / 11 / span 1 / span 8;
}

#c19-soustitre {
  grid-area: 61 / 11 / span 1 / span 8;
}

#archi-soustitre {
  grid-area: 66 / 11 / span 1 / span 8;
}


#laon-soustitre {
  grid-area:  71 / 11 / span 1 / span 8;
}