/*introduction*/

#intro {
  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(72, 2.5vw [row-start]);
}

#prenom-titre {
  grid-area: 14 / 7 / span 3 / span 8;
  color: #ffffff;
}

#nom-titre {
  grid-area: 18 / 7 / span 6 / span 34;
  color: #ffffff;
}

#img-titre {
  grid-area: 2 / 16 / span 15 / span 10;
  height: 100%;
  width: 100%;
  object-fit: contain;
}

#lien-portfolio {
  color: #ffffff;
}

#intitulé-projet-titre {
  grid-area: 3 / 31 / span 1 / span 6;
}

#texte-projet-titre {
  grid-area: 4 / 31 / span 2 / span 6;
}

#image-projet-titre {
  grid-area: 5 / 35 / span 10 / span 6;
  object-fit: contain;
}

#ovale-projets {
  height: 100%;
  width: 17vw;
}

#image-contact-titre {
  grid-area: 5 / 3 / span 4 / span 5;
  object-fit: contain;
}

#demi-cercle-titre {
  height: 100%;
  width: 100%;
}

#intitulé-contact-titre {
  grid-area: 9 / 3 / span 1 / span 5;
}

#section-about {
  grid-area: 23 / 12 / 26 / span 4;
}

#texte-section-about {
  grid-area: 23 / 16 / span 3 / 33;
}

#lien-savoir-plus {
  grid-area: 25 / 16 / span 1 / 33;
}

/*étoiles titre*/

#contact-etoile, #savoirplus-etoile {
  padding-top: 1.15vw;
  padding-left: 0.625vw;
}

#contact-etoile {
  grid-area: 9 / 2 / span 1 / span 1;
}

#savoirplus-etoile {
  grid-area: 25 / 15 / span 1 / span 1;
}

#projet-etoile {
  transform: translate(-0.315vw, 0.315vw);
  grid-area: 4 / 30 / span 1 / span 1;
}

#vurb-etoile {
  grid-area: 40 / 2 / span 1 / span 1;
}

#makyma-etoile {
  grid-area: 39 / 30 / span 1 / span 1;
  transform: translate(-0.315vw, -0.315vw);
}

#hc-etoile {
  grid-area: 45 / 28 / span 1 / span 1;
  transform: translate(-0.315vw, -0.625vw);
}

#mariage-etoile {
  grid-area: 52 / 7 / span 1 / span 1;
}

#kb-etoile {
  grid-area: 67 / 19 / span 1 / span 1;
  transform: translate(-0.315vw, -0.625vw);
}

#contact-image-etoile, #projet-image-etoile, #savoirplus-image-etoile, #vurb-image-etoile, #makyma-image-etoile, #hc-image-etoile, #mariage-image-etoile, #kb-image-etoile {
  opacity: 0;
}

#contact-image-etoile, #savoirplus-image-etoile {
  height: 1.275em;
  width: 1.275em;
}

#projet-image-etoile, #vurb-image-etoile, #makyma-image-etoile, #hc-image-etoile, #mariage-image-etoile, #kb-image-etoile {
  height: 2.5vw;
  width: 2.5vw;
}

/*présentation des projets*/

#vues-urb-image, #makyma-image, #hc-image, #mariage-image, #kb-image {
  object-fit: contain;
}

#vues-urb-image {
  grid-area: 30 / 7 / span 11 / span 8;
}

#makyma-image {
  grid-area: 31 / 31 / span 7 / span 8;
}

#hc-image {
  grid-area: 39 / 18 / 52 / 27;
}

#mariage-image {
  grid-area: 57 / 7 / span 7 / span 8;
}

#kb-image {
  grid-area: 60 / 26 / span 8 / 39;
}

#vues-urbaines-image-titre, #makyma-image-titre, #hc-image-titre, #mariage-image-titre, #kb-image-titre {
  height: 100%;
  width: 100%;
}

#vues-urb-title {
  grid-area: 39 / 3 / 44 / span 8;
}

#makyma-title {
  grid-area: 38 / 31 / span 3 / span 8;
}

#hc-title {
  grid-area: 46 / 28 / 51 / span 8;
}

#mariage-title {
  grid-area: 53 / 7 / span 5 / span 8;
}

#kb-title {
  grid-area: 66 / 20 / span 5 / span 10;
}

#intitulé-vues-urb-titre, #intitulé-makyma-titre, #intitulé-hc-titre, #intitulé-mariage-titre, #intitulé-kb-titre {
  opacity: 0;
}

#intitulé-vues-urb-titre {
  grid-area: 44 / 3 / span 1 / span 5;
}

#intitulé-makyma-titre {
  grid-area: 41 / 31 / span 1 / span 8;
}

#intitulé-hc-titre {
  grid-area: 51 / 28 / span 1 / span 5;
}

#intitulé-mariage-titre {
  grid-area: 55 / 7 / span 1 / span 5;
}

#intitulé-kb-titre {
  grid-area: 71 / 20 / span 1 / span 5;
}