p {
  max-width: 80ch;
  font-size: clamp(1rem, 0.9091rem + 0.4545vw, 1.25rem);
  line-height: 160%;
  margin: clamp(20px, 9.091px + 3.409vw, 50px) 0;
}

img {
  width: 100%;
  max-width: 1000px;
}

body {
  max-width: 1500px;
  margin: 0 auto;
}
body .noScroll {
  overflow: hidden;
}

html {
  scroll-behavior: smooth;
  margin: 0 auto;
}
html.noScroll {
  overflow: hidden;
}

.promo {
  background-color: #0B253D;
  color: #E3E8F4;
  margin: 0 2%;
  font-family: "Work Sans", sans-serif;
}

.promo__conclusion {
  color: #D9B4FF;
  font-weight: bold;
  font-size: clamp(1.3125rem, 1.1761rem + 0.6818vw, 1.6875rem);
  line-height: 120%;
}

.promo__vibe {
  margin: 0 2%;
}
@media (min-width: 1200px) {
  .promo__vibe {
    margin: 0 10%;
  }
}

.promo__reseaux {
  display: flex;
  justify-content: center;
  gap: clamp(1.25rem, -0.5682rem + 9.0909vw, 6.25rem);
  margin: auto 0;
  list-style: none;
  padding: 0;
  height: clamp(4.4375rem, 3.0511rem + 6.9318vw, 8.25rem);
  margin: clamp(40px, 25.455px + 4.545vw, 80px) 0;
}
.promo__reseaux a {
  display: block;
  width: clamp(3.8125rem, 2.4261rem + 6.9318vw, 7.625rem);
  height: clamp(3.8125rem, 2.4261rem + 6.9318vw, 7.625rem);
  border-radius: 50%;
  background-color: #D9B4FF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}
.promo__reseaux a svg {
  width: clamp(1.875rem, 1.1932rem + 3.4091vw, 3.75rem);
  height: clamp(1.875rem, 1.1932rem + 3.4091vw, 3.75rem);
  fill: #0B253D;
}
.promo__reseaux a:hover, .promo__reseaux a:focus {
  width: clamp(4.4375rem, 3.0511rem + 6.9318vw, 8.25rem);
  height: clamp(4.4375rem, 3.0511rem + 6.9318vw, 8.25rem);
  background-color: #e739ed;
}

.promo__ingenieure img {
  max-width: 400px;
  display: flex;
  justify-self: center;
  border-radius: 50%;
  border: 10px dashed #E3E8F4;
  margin: 30px 0 0;
  padding: 0;
  width: 90%;
}
@media (min-width: 768px) {
  .promo__ingenieure {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 1000px;
    margin: 0 auto;
  }
  .promo__ingenieure img {
    grid-row: 1/3;
    grid-column: 3;
    border: 30px dashed #E3E8F4;
    margin: 190px 0;
  }
  .promo__ingenieure div {
    grid-column: 1/3;
    max-width: 55ch;
    margin: 0;
  }
}

@-webkit-keyframes aminprojetBtn {
  0% {
    background-color: #28CCF9;
  }
  50% {
    background-color: #9cdbed;
  }
  100% {
    background-color: #28CCF9;
  }
}

@keyframes aminprojetBtn {
  0% {
    background-color: #28CCF9;
  }
  50% {
    background-color: #9cdbed;
  }
  100% {
    background-color: #28CCF9;
  }
}
.projet__btn {
  background-color: #28CCF9;
  border-radius: 50%;
  width: clamp(3.125rem, 1.9886rem + 5.6818vw, 6.25rem);
  height: clamp(3.125rem, 1.9886rem + 5.6818vw, 6.25rem);
  padding: 5px;
  border: #0a0b0e solid 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}
.projet__btn img {
  width: auto;
  height: clamp(1.875rem, 1.1932rem + 3.4091vw, 3.75rem);
  padding-right: 10%;
}
.projet__btn--next {
  transform: rotate(180deg);
}
.projet__btn:hover, .projet__btn:focus {
  -webkit-animation: infinite 0.3s aminprojetBtn;
          animation: infinite 0.3s aminprojetBtn;
}

@-webkit-keyframes amimlinkprojet {
  0% {
    background-color: #D70F0F;
  }
  50% {
    background-color: #e65b5b;
  }
  100% {
    background-color: #D70F0F;
  }
}

@keyframes amimlinkprojet {
  0% {
    background-color: #D70F0F;
  }
  50% {
    background-color: #e65b5b;
  }
  100% {
    background-color: #D70F0F;
  }
}
.link__projet {
  font-family: "cofo-sans-pixel", sans-serif;
  text-decoration: none;
  text-align: center;
  color: #F6F6F8;
  background-color: #D70F0F;
  padding: clamp(10px, 6.364px + 1.136vw, 20px) clamp(20px, 12.727px + 2.273vw, 40px);
  border-radius: 15px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: auto;
  font-size: clamp(1.25rem, 1.0682rem + 0.9091vw, 1.75rem);
  transition: 0.3s;
  border: #0a0b0e solid 4px;
}
.link__projet:hover, .link__projet:focus {
  -webkit-animation: infinite amimlinkprojet 0.3s;
          animation: infinite amimlinkprojet 0.3s;
}

.projet__commande {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  max-width: 600px;
  gap: 20px;
  margin: 20px auto;
}

.promo__logo {
  font-family: "Karmatic Arcade", sans-serif;
  font-size: clamp(22px, 19.818px + 0.682vw, 28px);
  text-align: center;
}
@media (min-width: 768px) {
  .promo__logo {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}

.promo__header {
  position: -webkit-sticky;
  position: sticky;
  z-index: 100;
  top: 0;
  max-width: 1000px;
  background-color: #0B253D;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: 5px;
}
@media (min-width: 768px) {
  .promo__header {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
  }
}
@media (min-width: 1100px) {
  .promo__header {
    padding: 10px 10%;
  }
}

.promo__main {
  max-width: 1100px;
  margin: 20px auto;
}

.text__revelation {
  max-width: 55ch;
  margin: 20px auto;
  line-height: 180%;
}

.journal {
  margin: 0;
  font-family: "javanese-text", sans-serif;
  background-color: #FAEEE7;
  color: #1D191B;
}

.journal__main {
  max-width: 1000px;
  margin: 0 2%;
}
.journal__main section {
  margin-bottom: 30px;
  border-bottom: 5px solid transparent;
  -o-border-image: linear-gradient(to right, transparent, #B9326C 50%, transparent) 1;
     border-image: linear-gradient(to right, transparent, #B9326C 50%, transparent) 1;
}
.journal__main--credits {
  justify-content: center;
}
@media (min-width: 768px) {
  .journal__main {
    margin: 140px 2% 0;
  }
}
@media (min-width: 1100px) {
  .journal__main {
    margin: 140px auto 0;
  }
}

.journal__header {
  background-color: #B9326C;
  padding: 0 30px;
}
.journal__header h1 {
  margin: 0;
  color: #FAEEE7;
  text-align: center;
  font-family: "sloop-script-one", sans-serif;
  font-size: clamp(2.875rem, 2.0568rem + 4.0909vw, 5.125rem);
}

.onglet {
  background-color: #D9B4FF;
  border-radius: 20px;
  max-width: 600px;
  margin: 50px auto;
  background-image: url("../assets/images/deco-onglet.svg");
  background-repeat: no-repeat;
  background-position-y: top 10px;
  background-position-x: right 10px;
  background-size: auto 20px;
  padding: 10px 10px 10px 10px;
}
.onglet--promo {
  padding: 50px 10px 10px 10px;
}
.onglet--projet {
  max-width: 600px;
  margin: 60px auto 30px;
}
.onglet--reseaux {
  max-width: 1000px;
}
.onglet--merch {
  max-width: 800px;
}
@media (min-width: 900px) {
  .onglet {
    background-size: auto 30px;
  }
  .onglet--promo {
    max-width: 1000px;
    padding: 60px 20px 20px 20px;
  }
}

.onglet__content {
  background-color: #0B253D;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  border-radius: 15px;
}
.onglet__content--promo img {
  border-radius: 15px;
  max-width: 550px;
  align-self: end;
}
.onglet__content--promo h2 {
  font-family: "Karmatic Arcade", sans-serif;
  font-size: clamp(2.75rem, 1.5455rem + 6.0227vw, 6.0625rem);
  line-height: 120%;
  text-align: center;
  margin: 5px 0;
}
.onglet__content--promo h2 span {
  display: block;
}
.onglet__content--projet {
  padding: 10px;
  list-style: none;
  margin: 0;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
.onglet__content--projet p {
  max-width: 45ch;
  justify-self: center;
}
.onglet__content--projet ul {
  height: 200px;
  padding: 0;
}
@media (min-width: 768px) {
  .onglet__content--projet ul {
    height: 220px;
  }
}
@media (min-width: 1100px) {
  .onglet__content--projet h3 {
    margin: 20px 0;
  }
  .onglet__content--projet ul {
    height: 250px;
  }
}
.onglet__content--merch {
  padding: 5px 5px 15px;
}
.onglet__content--merch img {
  border-radius: 15px;
}
@media (min-width: 768px) {
  .onglet__content--merch {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 10px;
  }
  .onglet__content--merch a {
    grid-column: 2;
  }
  .onglet__content--merch img {
    grid-row: 1/3;
  }
  .onglet__content--merch p {
    margin: 20px;
    align-self: center;
    max-width: 30ch;
    justify-self: center;
  }
}
.onglet__content--reseaux {
  padding: 10px;
}
.onglet__content--reseaux p {
  margin: 20px;
}
@media (min-width: 1000px) {
  .onglet__content--reseaux {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .onglet__content--promo {
    flex-direction: row;
    justify-content: space-between;
  }
  .onglet__content--promo h2 {
    text-align: left;
    margin-left: 20px;
  }
  .onglet__content--promo img {
    margin-left: -25%;
  }
}

.projet__el {
  opacity: 0;
  visibility: hidden;
  display: none;
  transition: opacity 0.5s;
}
.projet__el--active {
  opacity: 1;
  display: block;
  visibility: visible;
}

.liste__reseaux {
  list-style: none;
  padding: 0;
}
.liste__reseaux svg {
  fill: #E3E8F4;
  transition: fill 0.3s;
}
.liste__reseaux svg:hover, .liste__reseaux svg:focus {
  fill: #e739ed;
}
.liste__reseaux li {
  justify-self: center;
  text-align: center;
}
@media (min-width: 768px) {
  .liste__reseaux {
    display: flex;
    margin: 20px 10px;
    justify-content: space-between;
  }
}

.title__pixel {
  font-family: "cofo-sans-pixel", sans-serif;
  font-size: clamp(1.75rem, 1.1364rem + 3.0682vw, 3.4375rem);
  margin: clamp(30px, 11.818px + 5.682vw, 80px) 0 clamp(10px, 2.727px + 2.273vw, 30px);
  line-height: 120%;
}
.title__pixel--vibe {
  text-align: left;
}
.title__pixel--vibe span {
  display: block;
}
.title__pixel--suivre {
  text-align: center;
}
.title__pixel--ingenieure {
  justify-self: center;
  text-align: center;
  background-image: url("../assets/images/bule-mobile.svg");
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: 50% 20%;
  color: #0B253D;
  max-width: 18ch;
  padding: clamp(10px, -39.231px + 15.385vw, 30px) clamp(10px, -39.231px + 15.385vw, 30px) clamp(60px, -161.538px + 69.231vw, 150px);
  margin-left: 2%;
  grid-column: 1/3;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
.title__pixel--projet {
  margin: 20px;
  text-align: center;
}
.title__pixel--reseaux {
  margin-top: 10px;
  text-align: center;
}
.title__pixel span {
  display: block;
}
@media (min-width: 450px) {
  .title__pixel--ingenieure {
    padding: 5% 10px 150px;
    margin: 0;
  }
}
@media (min-width: 768px) {
  .title__pixel--revelation {
    text-align: center;
  }
  .title__pixel--revelation span {
    display: block;
  }
  .title__pixel--ingenieure {
    background-image: url("../assets/images/bule.svg");
    background-position: 50% 20%;
    background-size: 100%;
    padding: 5% 10px 5%;
    margin: 0;
  }
}
@media (min-width: 1100px) {
  .title__pixel--ingenieure {
    padding: 5% 10px 150px;
  }
}

.title__journal {
  font-family: "source-serif-pro", serif;
  font-size: clamp(2rem, 1.4091rem + 2.9545vw, 3.625rem);
}
.title__journal--perte {
  font-size: clamp(1.25rem, 1.1364rem + 0.5682vw, 1.5625rem);
  text-align: center;
  margin: 0 auto;
}
.title__journal--credits {
  text-align: center;
}
@media (min-width: 768px) {
  .title__journal {
    text-align: center;
  }
}

.title__onglet {
  font-family: "vinyl", sans-serif;
  color: #0B253D;
  margin: 0 10px 10px;
  font-size: clamp(1.375rem, 1.0795rem + 1.4773vw, 2.1875rem);
}

.burger {
  position: absolute;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  top: 15px;
  left: 10px;
  cursor: pointer;
}
.burger--promo {
  top: 20px;
}
@media (min-width: 768px) {
  .burger {
    display: none;
  }
}
.burger .barre__journal {
  width: 24px;
  height: 4px;
  background-color: #FAEEE7;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.burger .barre__promo {
  width: 24px;
  height: 4px;
  background-color: #E3E8F4;
  transition: all 0.3s ease;
}
.burger:hover .barre__journal, .burger:focus .barre__journal {
  background-color: #79e4c0;
}
.burger:hover .barre__promo, .burger:focus .barre__promo {
  background-color: #D70F0F;
}
.burger.open {
  left: 5px;
}
.burger.open .barre__promo--top {
  transform: rotate(45deg) translateX(12px);
}
.burger.open .barre__promo--middle {
  opacity: 0;
  visibility: hidden;
}
.burger.open .barre__promo--bottom {
  transform: rotate(-45deg) translateX(11px);
}
.burger.open .barre__journal--top {
  transform: rotate(45deg) translateX(12px);
}
.burger.open .barre__journal--middle {
  opacity: 0;
  visibility: hidden;
}
.burger.open .barre__journal--bottom {
  transform: rotate(-45deg) translateX(11px);
}

.jounal__nav {
  position: absolute;
  z-index: 10;
  height: 100vh;
  background-color: #FAEEE7;
  width: 100%;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0.3s ease;
}
.jounal__nav.open {
  transform: translateX(0);
  visibility: visible;
}
.jounal__nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  justify-self: center;
  margin-top: 30px;
}
.jounal__nav .nav__el {
  padding: 5px;
  border: 2px solid #1D191B;
  text-decoration: none;
  color: #1D191B;
  text-align: center;
  width: 100%;
  height: 40px;
  border-radius: 50px;
  transition: all 0.2s ease;
}
.jounal__nav .nav__el a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #1D191B;
  font-size: 14px;
}
.jounal__nav .nav__el--active {
  background-color: #B9326C;
  border: none;
  padding: 7px;
}
.jounal__nav .nav__el--active a {
  color: #FAEEE7;
}
.jounal__nav .nav__el--active:hover a, .jounal__nav .nav__el--active:focus a {
  color: #1D191B;
  transition: color 0.2s ease;
}
.jounal__nav .nav__el:hover, .jounal__nav .nav__el:focus {
  background-color: #B262E0;
  border: none;
  padding: 7px;
}
@media (min-width: 768px) {
  .jounal__nav {
    transform: none;
    visibility: visible;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }
  .jounal__nav ul {
    flex-direction: row;
    width: 100%;
    margin-top: 15px;
    max-width: 600px;
  }
}

.promo__nav {
  display: none;
  height: 100vh;
  background-color: #0B253D;
  width: 100%;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0.3s ease;
}
.promo__nav .nav__el {
  text-decoration: none;
  color: #E3E8F4;
  font-family: "vinyl", sans-serif;
  font-size: 31px;
  transition: 0.3s;
}
.promo__nav .nav__el--active {
  color: #D9B4FF;
}
.promo__nav .nav__el:hover, .promo__nav .nav__el:focus {
  color: #D70F0F;
}
.promo__nav li {
  border-bottom: #E3E8F4 4px solid;
  margin: 15px;
  padding: 15px;
  width: 200px;
  display: flex;
  justify-content: center;
}
.promo__nav ul {
  list-style: none;
  padding: 0;
  justify-self: center;
  gap: 10px;
}
.promo__nav.open {
  transform: translateX(0);
  visibility: visible;
  display: block;
}
@media (min-width: 768px) {
  .promo__nav {
    transform: translateX(0);
    display: block;
    visibility: visible;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
  .promo__nav ul {
    display: flex;
  }
  .promo__nav .nav__el {
    font-size: 18px;
  }
  .promo__nav li {
    padding: 10px;
    margin: 0;
    border: none;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}

.footer__title {
  text-align: center;
  font-size: clamp(1.8125rem, 1.5398rem + 1.3636vw, 2.5625rem);
}
.footer__title--jounal {
  font-family: "sloop-script-one", sans-serif;
  color: #B9326C;
}
.footer__title--promo {
  font-family: "Karmatic Arcade", sans-serif;
  font-size: clamp(22px, 19.818px + 0.682vw, 28px);
}

.footer {
  max-width: 1000px;
  margin: 20px 2% 5px;
}
.footer small {
  display: flex;
  justify-self: center;
}
.footer--promo {
  margin: 100px 2% 5px;
}
@media (min-width: 1100px) {
  .footer {
    margin: 20px auto 5px;
  }
  .footer--promo {
    margin: 100px auto 5px;
  }
}

.credits {
  text-align: center;
  text-decoration: none;
  margin: 30px 0 10px;
  display: flex;
  justify-self: center;
  transition: color;
  color: #1D191B;
}
.credits--promo {
  color: #E3E8F4;
}
.credits:hover, .credits:focus {
  color: #B262E0;
}

.footer__contact {
  font-family: "source-serif-pro", serif;
  text-align: center;
  font-size: clamp(1.4375rem, 1.233rem + 1.0227vw, 2rem);
}

.footer__reseaux {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  max-width: 600px;
  margin: 10px auto;
}
.footer__reseaux li {
  padding: 5px;
  border-radius: 50%;
  width: clamp(1.25rem, 0.7955rem + 2.2727vw, 2.5rem);
  height: clamp(1.25rem, 0.7955rem + 2.2727vw, 2.5rem);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}
.footer__reseaux li:hover, .footer__reseaux li:focus {
  border-color: #B262E0;
}
.footer__reseaux li:hover svg, .footer__reseaux li:focus svg {
  fill: #B262E0;
}
.footer__reseaux svg {
  width: clamp(1rem, 0.6364rem + 1.8182vw, 2rem);
  height: clamp(1rem, 0.6364rem + 1.8182vw, 2rem);
  display: flex;
  justify-self: center;
  align-self: center;
  fill: #1D191B;
  transition: 0.3s;
}
.footer__reseaux--promo li {
  border: 2px solid #E3E8F4;
}
.footer__reseaux--promo li svg {
  fill: #E3E8F4;
}
.footer__reseaux--jounal {
  border: 2px solid #1D191B;
}

.credits__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.credits__list li {
  justify-content: center;
  align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.credits__list a {
  color: #1D191B;
  text-decoration: none;
  transition: color 0.3s ease;
}
.credits__list a:hover, .credits__list a:focus {
  color: #B262E0;
}

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