@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;
}

.box--who {
  border: solid 3px rgba(159, 213, 255, 0.5019607843);
}
.box--who .parag--note {
  color: #E4B203;
  font-family: "Lexend", sans-serif;
  font-weight: 700;
}

.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;
}

.viste--site {
  background-color: #D94179;
  color: #fff;
  padding: 20px;
  font-family: "Lexend", sans-serif;
  font-weight: 700;
  border-radius: 35px;
  text-decoration: none;
  margin-top: 100px;
}
.viste--site:hover {
  background-color: #E4B203;
  color: #0A4DA6;
}

.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;
}

.img--projet-fixe {
  width: 100%;
  height: 260px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 15px;
  display: block;
}

.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-family: "Climate Crisis", sans-serif;
    /* clamp(taille_min, taille_idéale, taille_max) */
    font-size: clamp(1.5rem, 8vw, 7.3rem);
    line-height: 1.1;
    margin-bottom: 28px;
    margin-top: 0px;
    word-break: break-word;
    /* Évite qu'un mot très long ne dépasse */
  }

  h2 {
    font-family: "Climate Crisis", sans-serif;
    font-size: clamp(1.25rem, 4vw, 3rem);
    line-height: 1.2;
    margin-top: 0px;
    margin-bottom: 22px;
  }

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

  p {
    margin-bottom: 27px;
  }

  .margin--bg {
    margin-top: 120px;
  }
  .margin--bg .parag--note {
    color: #E4B203;
    font-family: "Lexend", sans-serif;
    font-weight: 700;
    margin-bottom: 22px;
  }
  .margin--bg .parg--tete {
    margin-bottom: 54px;
  }

  .box--who {
    border: solid 3px rgba(159, 213, 255, 0.5019607843);
  }
  .box--who .parag--note {
    color: #E4B203;
    font-family: "Lexend", sans-serif;
    font-weight: 700;
  }

  .section--fin .parag--note {
    color: rgba(255, 255, 255, 0.5019607843);
    font-family: "Lexend", sans-serif;
    font-weight: 700;
  }
  .section--fin .fin--parg {
    font-size: 27px;
    font-weight: 700;
  }

  .ligne--down {
    border-bottom: solid 1px #9FD5FF;
  }

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

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

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

  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;
  }

  .img--projet-fixe {
    height: 360px;
  }

  .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: 1fr 1fr 1fr 1fr;
    gap: 22px;
    margin: 0px 67px;
    margin-bottom: 67px;
    align-items: start;
  }

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

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

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

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

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

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

  .grid--deuxtrois {
    grid-column: 2/-3;
  }

  .grid--troisdeux {
    grid-column: 3/-2;
  }

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

  .creatif > .grid--first {
    grid-column: 1/3;
    grid-row: 1;
  }
  .creatif > .grid--fin {
    grid-column: 3/5;
    grid-row: 1;
  }

  .section--projet {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: " h1   h1   h1   h1" " h2r  h2r  h2d  h2d " " imgr imgr imgd imgd" " h2s  h2s  h2j  h2j" " imgs imgs imgj imgj";
    -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--titreSara {
    grid-area: h2s;
  }

  .grid--titreJaqui {
    grid-area: h2j;
  }

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

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

  .grid--Sara {
    grid-area: imgs;
  }

  .grid--jaqui {
    grid-area: imgj;
  }

  .image--fresque, .image--travaux {
    width: 100%;
    border-radius: 15px;
    margin-top: 120px;
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
  }

  .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*/