@font-face {
  font-family: parade;
  src: url(./font/Hershey-Noailles-parade.otf);
}

@font-face {
  font-family: garabosse-parangon;
  src: url(./font/Garabosse-Parangon.otf);
}

@font-face {
  font-family: garabosse-gaillarde;
  src: url(./font/Garabosse-Gaillard·e.otf);
}

@font-face {
  font-family: garabosse-perle;
  src: url(./font/Garabosse-Perle.otf);
}

:root {
  --blue-main: rgb(95, 93, 255);
  --orange-main: rgb(255, 163, 70);
  font-size: 12pt;
  scroll-behavior: smooth;
}

main {
  display: grid;
  grid-template-columns: subgrid;
  padding-bottom: 2.5em;
}

header {
  display: flex;
  justify-content: space-between;
}

.invisible {
  opacity: 0 !important;
  visibility: hidden;
  transition: opacity 0.2s;
}

#upbutton {
  position: fixed;
  cursor: pointer;
  bottom: 0px;
  right: 0px;
  margin: 0 20px 20px 0;
  color: var(--blue-main);
  opacity: 1;
  transition: opacity 0.2s, visibility 0.2s;
  font-family: parade;
  font-size: 2em;
  -webkit-text-stroke: 0.7pt;
  z-index: 2000;
}

p {
  margin: 0;
}

img {
  max-width: 100%;
}

body {
  background-color: rgb(249, 252, 253);
  max-width: 100%;
  text-align: left;
  margin: 0;
  display: grid;
}

header h1 {
  margin: 0;
  text-wrap: nowrap;
}

.links p {
  font-family: garabosse-perle;
  color: black;
}

.links a {
  color: black;
  text-decoration: none;
}

.links p a:hover {
  font-family: garabosse-perle;
  color: var(--orange-main);
}

.who {
  font-family: garabosse-perle;
  color: var(--blue-main);
  text-align: left;
}

.what {
  font-family: garabosse-gaillarde;
  color: var(--blue-main);
  text-align: right;
}

.about p {
  font-family: garabosse-gaillarde;
}

.about p a {
  font-family: garabosse-perle;
  text-decoration: none;
  color: var(--blue-main);
}

.about p a:hover {
  color: var(--orange-main);
}

.projet {
  display: flex;
  justify-content: space-between;
}

.projet h2 {
  font-family: garabosse-gaillarde;
  color: var(--blue-main);
  text-wrap: nowrap;
}

.projet .titre {
  font-family: garabosse-perle;
}

.text p {
  font-family: garabosse-gaillarde;
}

.legende p {
  font-family: garabosse-parangon;
  color: black;
}

.legende p a {
  font-family: garabosse-perle;
  text-decoration: none;
  color: var(--blue-main);
}

.legende p a:hover {
  color: var(--orange-main);
}

.swiper-button-next,
.swiper-button-prev {
  width: 50% !important;
  height: 100% !important;
  margin-top: 0 !important;
  top: 0 !important;
  opacity: 0 !important;
}

.swiper-button-prev {
  left: 0 !important;
  cursor: w-resize !important;
}

.swiper-button-next {
  right: 0 !important;
  cursor: e-resize !important;
}

/*écran ordinateur*/

@media only screen and (min-width: 950px) {
  body {
    grid-template-columns: repeat(7, 1fr);
    gap: 1em;
    padding: 1em 1em 2em 1em;
  }

  main {
    grid-column: 1/8;
  }

  header {
    padding: 1em 0 3em 0;
    grid-column: 2/8;
  }

  .links img {
    width: 30%;
    z-index: 0;
  }

  .links {
    grid-column: 1/3;
    grid-row: 2/5;
    align-self: flex-end;
    text-align: left;
  }

  .links p {
    font-size: 0.9em;
    line-height: 1.3em;
    margin-top: -0.4em;
  }

  .who {
    grid-column: 2/4;
    font-size: 1.2em;
  }

  .what {
    grid-column: 4/7;
    font-size: 1.2em;
  }

  .about {
    grid-column: 3/8;
    grid-row: 3/7;
    padding: 0.5em 3em 1em 0em;
  }

  .about p {
    line-height: 1.4em;
  }

  .projet {
    grid-column: 1/6;
    padding: 3.5em 0 0 0;
    align-self: flex-end;
  }

  .projet h2 {
    font-size: 1em;
  }

  .slider {
    grid-column: 1/5;
    padding: 0.5em 0em 0.5em 0em;
  }

  .button_slider#prev {
    border: 0;
    background-color: transparent;
    width: 50%;
    cursor: w-resize;
    padding: 0;
  }

  .button_slider#next {
    border: 0;
    background-color: transparent;
    width: 50%;
    top: 0;
    bottom: 0;
    right: 0;
    cursor: e-resize;
  }

  .text {
    grid-column: 5/7;
    padding: 1em 0 0 0;
  }

  .text p {
    font-size: 0.9em;
    line-height: 1.4em;
  }

  .legende {
    grid-column: 7/8;
    padding: 1em 0 2em 0;
    /*align-self: flex-end;*/
  }

  .legende p {
    font-size: 0.8em;
    line-height: 1.3em;
  }
}

/* écran tablette */

@media only screen and (min-width: 768px) and (max-width: 950px) {
  body {
    grid-template-columns: repeat(7, 1fr);
    gap: 1em;
    padding: 1em 1em 2em 1em;
  }

  main {
    grid-column: 1/8;
  }

  header {
    padding: 1em 0 3em 0;
    grid-column: 2/8;
  }

  .links img {
    width: 40%;
    z-index: 0;
  }

  .links {
    grid-column: 1/3;
    grid-row: 2/5;
    align-self: flex-end;
    text-align: left;
  }

  .links p {
    font-size: 0.9em;
    line-height: 1.4em;
    margin-top: -0.4em;
  }

  .email-link {
    font-size: 0.9em;
    line-height: 1.4em;
  }

  .email-link:hover {
    -webkit-text-stroke: 0.6pt;
  }

  .who {
    grid-column: 2/4;
    font-size: 1.2em;
  }

  .what {
    grid-column: 4/7;
    font-size: 1.2em;
  }

  .about {
    grid-column: 3/8;
    grid-row: 3/8;
    padding: 0.5em 0em 1em 0em;
  }

  .about p {
    line-height: 1.4em;
  }

  .projet {
    grid-column: 1/6;
    padding: 3.5em 0 0 0;
    align-self: flex-end;
  }

  .projet h2 {
    font-size: 1em;
  }

  .slider {
    grid-column: 1/8;
    padding: 0.3em 0em 0.3em 0em;
  }

  .button_slider#next {
    border: 0;
    background-color: transparent;
    width: 50%;
    top: 0;
    bottom: 0;
    right: 0;
    cursor: e-resize;
  }

  .text {
    grid-column: 1/7;
    padding: 1em 0 0 0;
  }

  .text p {
    font-size: 0.9em;
    line-height: 1.4em;
  }

  .legende {
    grid-column: 7/8;
    padding: 0.5em 0 2em 0;
    /*align-self: flex-end;*/
  }

  .legende p {
    font-size: 0.8em;
    line-height: 1.3em;
  }
}

/*petite taille écran*/

@media only screen and (max-width: 768px) {
  body {
    grid-template-columns: repeat(3, 1fr);
    /* gap: 1em; */
    padding: 1em 1em 1em 1em;
  }

  main,
  header {
    grid-column: 1/4;
  }

  header {
    padding: 0 0 2em 0;
  }

  .slider {
    grid-column: 1/4;
  }

  .links {
    grid-column: 1/4;
    grid-row: 2/4;
    align-self: flex-end;
    text-align: left;
    padding: 0 0 2em 0;
  }

  .links img {
    width: 18%;
  }

  .links p {
    font-size: 0.9em;
    line-height: 1.4em;
    margin-top: -0.4em;
  }

  .who {
    grid-column: 1/3;
    font-size: 0.9em;
  }

  .what {
    grid-column: 3/4;
    font-size: 0.9em;
    text-align: right;
  }

  .about {
    grid-column: 1/4;
    grid-row: 4/9;
    padding: 0em 0em 2.5em 0em;
  }

  .about p {
    font-size: 0.9em;
    line-height: 1.3em;
  }

  #about {
    grid-column: 1/4;
    display: flex;
    align-items: center;
  }

  .projet {
    grid-column: 1/4;
    padding: 0 0 0.5em 0;
  }

  .projet h2 {
    font-size: 0.8em;
  }

  .disparition {
    display: none;
  }

  .images {
    grid-column: 1/4;
  }

  .text {
    grid-column: 1/4;
    padding: 0.3em 0em 0em 0em;
  }

  .text p {
    font-size: 0.8em;
    line-height: 1.3em;
  }

  .legende {
    padding: 0.4em 0em 2em 0em;
    grid-column: 1/3;
  }

  .legende p {
    font-size: 0.7em;
    line-height: 1.2em;
  }
}