@charset "UTF-8";
.climate-crisis {
  font-family: "Climate Crisis", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "YEAR" 1979;
}

.lexend {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

body {
  background-color: #0A4DA6;
  font-family: "Lexend", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  margin: 0px;
  overflow-x: hidden;
}

h1 {
  font-family: "Climate Crisis", sans-serif;
  font-size: 31px;
  margin-bottom: 28px;
  margin-top: 0px;
}

p {
  margin: 0px;
  margin-bottom: 20px;
}

.parag--nom {
  font-family: "Climate Crisis", sans-serif;
  font-size: 16px;
  margin: 0px;
}

.parag--note {
  font-size: 18px;
}

.ritme--vertical {
  height: 15.2em;
}

h2 {
  font-family: "Climate Crisis", sans-serif;
  font-size: 20px;
  margin-top: 0px;
  margin-bottom: 22px;
}

img {
  width: 100%;
}

.image--main {
  width: 100%;
  position: relative;
  transform: translateX(4vw);
}

.transforme {
  transform: scaleX(-1);
}

.image--flou {
  position: absolute;
  width: 20em;
  height: 31em;
  background-image: url("../assets/images/flou_beau.webp");
  background-size: cover;
  transform: scaleX(-1);
  z-index: -1;
  margin: 3.5em -20px;
}

.image--yeux {
  width: 100%;
  position: relative;
  margin: 0em 0px -44px 1em;
}

.fond {
  background: linear-gradient(to bottom right, #CA6F98, #D94179);
  padding: 1em;
  border-radius: 15px;
  box-shadow: 3px 10px 5px #111230;
}

.parag--bleu {
  background: #9FD5FF;
  padding: 1em;
  border-radius: 15px;
  color: #111230;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0px 20px;
  margin-bottom: 44px;
}

.grid > * {
  grid-column: 1/-1;
}

.grid--trier, .grid--undeux, .grid--fin, .grid--first, .grid--firstdeux {
  grid-column: 1/-1;
}

.box--who {
  background-color: rgba(10, 77, 166, 0.5);
  padding: 1em;
  border-radius: 15px;
  margin-bottom: 20px;
}

.vidéo--projet {
  width: 100%;
  overflow-x: hidden;
  vertical-align: middle;
  cursor: none;
  border-radius: 15px;
}
.vidéo--projet.video--dataplay {
  box-shadow: 3px 10px 5px #111230;
}
.vidéo--projet.video--rux {
  box-shadow: -3px -10px 5px #111230;
}

.cordonée {
  margin-left: 20px;
  margin-right: 20px;
  font-size: 10px;
}

.video--mobile {
  display: none;
}

.video--desktop {
  display: block;
}

.logo--container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1em;
  overflow-x: auto;
}
.logo--container .logo {
  width: 205px;
}

.cordonee--lien {
  text-decoration: none;
  color: #fff;
  display: flex;
  margin-bottom: 20px;
}

@keyframes anim {
  from {
    filter: saturate(0) contrast(4) brightness(0.1) blur(3px);
    opacity: 0;
    scale: 0.95;
    translate: 0 1rem;
  }
}
p, h1, h2 {
  animation: anim ease-in both;
  animation-timeline: view();
  animation-range: 0vh 20vh;
}

@media (min-width: 734px) {
  body {
    font-size: 18px;
  }

  h1 {
    font-size: 69px;
  }

  .parag--note {
    font-size: 22px;
  }

  h2 {
    font-family: "Climate Crisis", sans-serif;
    font-size: 35px;
    margin-top: 0px;
    margin-bottom: 22px;
  }

  .image--flou {
    position: absolute;
    width: 31em;
    height: 41em;
    margin: 3.5em -28px;
  }

  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 38%;
    gap: 10px;
    margin: 0px 28px;
    margin-bottom: 44px;
  }

  .grid > * {
    grid-column: 1/-1;
  }

  .grid--second {
    grid-column-end: -2;
  }

  .grid--trier {
    grid-column: 2/-1;
  }

  .video--mobile {
    display: block;
  }

  .video--desktop {
    display: none;
  }
}
@media (max-width: 1000px) {
  #sun,
#moon,
#moon--data {
    display: none;
  }
}
@media (min-width: 1000px) {
  body {
    font-size: 22px;
  }

  h1 {
    font-size: 117px;
    margin-bottom: 43px;
  }

  .titre--page {
    margin-top: 85px;
  }

  p {
    margin-bottom: 27px;
  }

  .parag--nom {
    font-size: 22px;
  }

  .parag--note {
    font-size: 25px;
  }

  .ritme--vertical {
    height: 7.5em;
  }

  h2 {
    font-size: 48px;
    margin-bottom: 27px;
  }

  img {
    width: 100vw;
  }

  a {
    transition: color 0.3s ease, opacity 0.3s ease;
  }

  a:hover {
    cursor: pointer;
    opacity: 0.7;
    filter: drop-shadow(0 0 5px #9FD5FF);
  }

  .vidéo--projet.video--dataplay {
    box-shadow: 3px 10px 5px #111230;
  }
  .vidéo--projet.video--rux {
    box-shadow: 3px 10px 5px #111230;
  }

  .vidéo--projet:hover.video--dataplay {
    box-shadow: none;
    cursor: pointer;
  }
  .vidéo--projet:hover.video--rux {
    box-shadow: none;
    cursor: pointer;
  }

  .text--cliquer {
    display: inline-block;
  }
  .text--cliquer::after {
    content: "Cliquez ici pour voir plus";
    position: absolute;
    top: 300px;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #0A4DA6;
    font-size: 22px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    text-align: center;
  }
  .text--cliquer:hover::after {
    opacity: 1;
  }
  .text--cliquer .text--cliquer {
    display: block;
    width: 100%;
  }

  .image--flou {
    position: absolute;
    width: 31em;
    height: 47em;
    margin: 3.5em -67px;
  }

  .image--yeux {
    position: absolute;
    right: 0px;
    max-height: 550px;
    width: auto;
  }

  .box--who {
    margin-bottom: 27px;
  }

  .cordonée {
    margin-left: 67px;
    margin-right: 67px;
    margin-top: 105px;
    font-size: 22px;
  }
  .cordonée .cordonee--lien {
    margin-bottom: 27px;
  }

  .ajust--footer {
    display: flex;
    flex-direction: row;
  }

  .copyright {
    margin-top: 183px;
  }

  .grid {
    display: grid;
    grid-template-columns: 27em 9em 1fr;
    gap: 22px;
    margin: 0px 67px;
    margin-bottom: 67px;
    align-items: start;
  }

  .grid--trier {
    grid-column: 2/-2;
  }

  .grid--undeux {
    grid-column: 2/-1;
  }

  .grid--fin {
    grid-column: 3/-1;
  }

  .grid--first {
    grid-column: 1/-3;
  }

  .grid--firstdeux {
    grid-column: 1/-2;
  }

  .section--projet {
    display: grid;
    grid-template-columns: 27em 9em 1fr;
    grid-template-areas: " h1 h1 h1" " h2r h2d h2d " " imgr imgd imgd";
    -moz-column-gap: 1em;
         column-gap: 1em;
    row-gap: 1em;
  }

  .gird--titreReve {
    grid-area: h1;
  }

  .grid--titreRux {
    grid-area: h2r;
  }

  .grid--titreData {
    grid-area: h2d;
  }

  .grid--rux {
    grid-area: imgr;
  }

  .grid--data {
    grid-area: imgd;
  }

  .image--fresque {
    width: 100%;
  }

  .image--travaux {
    width: 100%;
  }

  #sun, #moon, #moon--data {
    position: fixed;
    top: -10vh;
    right: -10vw;
    z-index: -2;
    pointer-events: none;
    transition: top 0.5s ease-out, right 0.5s ease-out;
  }

  .sun-svg {
    width: 50em;
  }

  .moon-svg {
    width: 40em;
  }

  .Conception {
    grid-template-areas: "t1 . ." "p1 . ." "p2 . ." "p3 p3 ." "p4 img1 img1" "p5 img1 img1" "p6 img1 img1";
  }

  .conspt {
    grid-area: t1;
  }

  .parag1 {
    grid-area: p1;
  }

  .parag2 {
    grid-area: p2;
  }

  .parag3 {
    grid-area: p3;
  }

  .parag4 {
    grid-area: p4;
  }

  .parag5 {
    grid-area: p5;
  }

  .parag6 {
    grid-area: p6;
  }

  .image1 {
    grid-area: img1;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .creatif, .présentation {
    grid-template-areas: "T1 img img" "P1 img img" "P2 img img";
  }

  .crea {
    grid-area: T1;
  }

  .parag--bleu--1 {
    grid-area: P1;
  }

  .parag--bleu--2 {
    grid-area: P2;
  }

  .image--fresque--1 {
    grid-area: img;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.fab-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: fixed;
  bottom: 35px;
  right: 35px;
  z-index: 10;
  overflow: hidden;
}
.fab-container:hover {
  height: 100%;
}
.fab-container:hover .sub-button:nth-child(2) {
  transform: translateY(-120px);
  opacity: 1;
  visibility: visible;
}
.fab-container:hover .sub-button:nth-child(3) {
  transform: translateY(-180px);
  opacity: 1;
  visibility: visible;
}
.fab-container:hover .sub-button:nth-child(4) {
  transform: translateY(-240px);
  opacity: 1;
  visibility: visible;
}
.fab-container:hover .sub-button:nth-child(5) {
  transform: translateY(-300px);
  opacity: 1;
  visibility: visible;
}
.fab-container .fab {
  position: relative;
  height: 69px;
  width: 69px;
  margin: 20px;
  background: linear-gradient(to bottom right, #fff, #E4B203);
  box-shadow: 10px 10px 10px #111230;
  border-radius: 50%;
  z-index: 10;
}
.fab-container .sub-button {
  font-family: "Climate Crisis", sans-serif;
  position: absolute;
  display: flex;
  opacity: 0;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  visibility: hidden;
  transition: all 0.3s ease;
}
.fab-container .sub-button:hover {
  cursor: pointer;
}
.fab-container .sub-button .material-icons {
  color: white;
  padding-top: 10px;
}
.fab-container .sub-button a {
  text-decoration: none;
}

@media (min-width: 1000px) {
  .fab-container {
    overflow: hidden;
    flex-direction: row-reverse;
    justify-content: left;
    position: fixed;
    top: 0;
    left: 0;
    bottom: auto;
    right: 100px;
    width: 100vw;
    padding: 10px 67px;
    background: #E4B203;
    box-shadow: 3px 10px 5px #111230;
    height: auto;
    z-index: 10;
  }
  .fab-container:hover {
    height: auto;
  }
  .fab-container:hover .sub-button:nth-child(2) {
    transform: none;
    opacity: 1;
  }
  .fab-container:hover .sub-button:nth-child(3) {
    transform: none;
    opacity: 1;
  }
  .fab-container:hover .sub-button:nth-child(4) {
    transform: none;
    opacity: 1;
  }
  .fab-container:hover .sub-button:nth-child(5) {
    transform: none;
    opacity: 1;
  }
  .fab-container .sub-button {
    transform: none;
    transition: none;
    opacity: 1;
    position: static;
    visibility: visible;
  }
  .fab-container .fab {
    display: none;
  }
  .fab-container .sub-button {
    position: static;
    opacity: 1;
    margin: 0 15px;
  }
  .fab-container .sub-button a {
    color: white;
    font-size: 22px;
  }
  .fab-container .sub-button a:hover {
    color: #ffcc00;
  }
}

/*# sourceMappingURL=app.css.map*/