@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;700;900&display=swap');

* {
  margin: 0;
  font-family: "Figtree", sans-serif;
  scroll-behavior: smooth;
}

body {
  min-width: fit-content;
}

/* Remet le style des boutons à zéro */
button {
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
}

input {
  padding: 0;
  margin: 0;
  border: none;
}

fieldset {
  border: none;
}

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

a:hover {
  text-decoration: underline;
}

ul {
  padding-left: 0;
}

nav {
  position: fixed;
  z-index: 10;
  background-color: white;
  width: 100%;
}

:root {
  --lightblue: #A9E2F3;
  --blue: #08ADDD;
}

.home {
  height: 100vh;
}

.book__broche,
.book__kindle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.button {
  font-family: "Figtree", sans-serif;
  font-size: 24px;
  border: 1px solid #000;
  background-size: 0%;
  background: #fff;
}

.book__choosed {
  border: 3px solid #000;
  font-weight: 700;
}

.form__input {
  padding: 1em;
  border: 3px solid #000;
  background: #FFF;
  flex-shrink: 0;
}

.form__btn {
  position: relative;
  overflow: hidden;
  border: 3px solid #000;
  color: #000;
  font-weight: 700;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  font-size: 24px;
  line-height: 15px;
  padding: 20px 40px 20px;
  text-decoration: none;
  cursor: pointer;
  background: #fff;
}

.form__btn:hover {
  color: white;
}

.form__btn span:first-child {
  position: relative;
  display: block;
  transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1);
  z-index: 10;
}

.form__btn:after {
  content: "";
  position: absolute;
  bottom: -50%;
  left: 0;
  width: 200%;
  height: 100%;
  background-color: black;
  transform-origin: bottom center;
  transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
  transform: scaleY(0);
  z-index: 9;
}

.form__btn:hover:after {
  transform-origin: bottom center;
  transform: scaleY(2);
}

.quantity,
.price {
  display: flex;
  gap: 10px;
}

.quantity span:first-child {
  font-weight: 700;
}

.price span:first-child {
  font-weight: 700;
}

.form__btn:disabled {
  cursor: default;
  display: none;
}

.form {
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  padding: 20px;
}

.fieldset {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.submit-button {
  display: block;
  margin-top: 24px;
}

.facturation {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.form__h2 {
  margin-bottom: 24px;
}

.form__input {
  margin-bottom: 20px;
}

.express-btn {
  font-size: 20px;
  padding: 15px 35px 15px;
  margin-bottom: 24px;
  /* width: 250px; */
  height: 60px;
  border: 3px solid black;
  background-color: #FFF;
}

.express-btn:hover {
  background-color: #000;
  color: #FFF;
}

.span-btn {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.center-button {
  display: flex;
  justify-content: center;
}

.validation__grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 275px 80px;
}

.validation {
  display: block;
  margin: auto;
  max-width: 600px;
}

.progress-bar {
  display: flex;
  justify-content: center;
  align-items: center;
}

.square {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  width: 70vh;
  max-width: 75vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.checkout-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  width: 100%;
  position: relative;
  cursor: default;
}

.checkout-progress::before {
  content: "";
  height: 0.3em;
  background-color: var(--lightblue);
  position: absolute;
  left: var(--padding);
  right: var(--padding);
  width: 100%;
}

.checkout-progress__bar {
  content: "";
  height: 0.3em;
  border-radius: 0 0 0.15em 0.15em;
  background-color: var(--blue);
  max-width: 100%;
  position: absolute;
  left: 0;
}

.width50 {
  width: 50%;
}

.width100 {
  width: 100%;
}

.checkout-progress>.on-page {
  background-color: white !important;
  box-shadow: inset 0px 0px 0px 3px var(--blue);
}

.checkout-progress>.node {
  background-color: var(--lightblue);
  height: 2em;
  width: 2em;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.checkout-progress>.node>.text {
  font-weight: 200;
  text-align: center;
  position: absolute;
  top: 2.5em;
}

.node.done {
  background-color: var(--blue);
}

.on-page svg>path {
  stroke: var(--blue);
}

.footer {
  position: relative;
  border-top: solid 1px black;
  padding: 20px 0px 0px;
  margin: 20px 20px 0px;
}

.footer ul {
  list-style: none;
  padding: 0;
}

.section-bag {
  height: 60vh;
}

.shadow-pop-br {
  -webkit-box-shadow: 1px 1px #410416, 2px 2px #410416, 3px 3px #410416, 4px 4px #E2098B, 5px 5px #E2098B, 6px 6px #E2098B, 7px 7px #08ADDD, 8px 8px #08ADDD, 9px 9px #08ADDD;
  box-shadow: 1px 1px #410416, 2px 2px #410416, 3px 3px #410416, 4px 4px #E2098B, 5px 5px #E2098B, 6px 6px #E2098B, 7px 7px #08ADDD, 8px 8px #08ADDD, 9px 9px #08ADDD;
  animation: shadow-pop-br-after 300ms cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}

.book__title a {
  color: #E2098B;
}

.shadow-pop-br:hover {
  -webkit-animation: shadow-pop-br 300ms cubic-bezier(0.470, 0.000, 0.745, 0.715) reverse both;
  animation: shadow-pop-br 300ms cubic-bezier(0.470, 0.000, 0.745, 0.715) reverse both;
  cursor: pointer;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-1-5 12:58:19
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shadow-pop-br
 * ----------------------------------------
 */
@-webkit-keyframes shadow-pop-br {
  0% {
    -webkit-box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
    /* transform-box: translateX(0) translateY(0); */
  }

  100% {
    -webkit-box-shadow: 1px 1px #410416, 2px 2px #410416, 3px 3px #410416, 4px 4px #E2098B, 5px 5px #E2098B, 6px 6px #E2098B, 7px 7px #08ADDD, 8px 8px #08ADDD, 9px 9px #08ADDD;
    box-shadow: 1px 1px #410416, 2px 2px #410416, 3px 3px #410416, 4px 4px #E2098B, 5px 5px #E2098B, 6px 6px #E2098B, 7px 7px #08ADDD, 8px 8px #08ADDD, 9px 9px #08ADDD;
    -webkit-transform: translateX(-9px) translateY(-9px);
    transform: translateX(-9px) translateY(-9px);
    /* transform-box: translateX(-9px) translateY(-9px); */
  }
}

@keyframes shadow-pop-br {
  0% {
    -webkit-box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
    /* transform-box: translateX(0) translateY(0); */
  }

  100% {
    -webkit-box-shadow: 1px 1px #410416, 2px 2px #410416, 3px 3px #410416, 4px 4px #E2098B, 5px 5px #E2098B, 6px 6px #E2098B, 7px 7px #08ADDD, 8px 8px #08ADDD, 9px 9px #08ADDD;
    box-shadow: 1px 1px #410416, 2px 2px #410416, 3px 3px #410416, 4px 4px #E2098B, 5px 5px #E2098B, 6px 6px #E2098B, 7px 7px #08ADDD, 8px 8px #08ADDD, 9px 9px #08ADDD;
    -webkit-transform: translateX(-9px) translateY(-9px);
    transform: translateX(-9px) translateY(-9px);
    /* transform-box: translateX(-9px) translateY(-9px); */
  }
}

@keyframes shadow-pop-br-after {
  0% {
    -webkit-box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
    transform-box: translateX(0) translateY(0);
  }

  100% {
    -webkit-box-shadow: 1px 1px #410416, 2px 2px #410416, 3px 3px #410416, 4px 4px #E2098B, 5px 5px #E2098B, 6px 6px #E2098B, 7px 7px #08ADDD, 8px 8px #08ADDD, 9px 9px #08ADDD;
    box-shadow: 1px 1px #410416, 2px 2px #410416, 3px 3px #410416, 4px 4px #E2098B, 5px 5px #E2098B, 6px 6px #E2098B, 7px 7px #08ADDD, 8px 8px #08ADDD, 9px 9px #08ADDD;
    -webkit-transform: translateX(-9px) translateY(-9px);
    transform: translateX(-9px) translateY(-9px);
    /* transform-box: translateX(-9px) translateY(-9px); */
  }
}

.book__cover a:first-child {
  scroll-behavior: smooth;
}

.form,
.section-checkout {
  margin-top: 25px;
  height: 100vh;
}

.progress-bar {
  margin-top: 25px;
}

.credits__links {
  list-style: none;
}

.credits__links li,
.credits__links {
  margin-bottom: 10px;
}

.gift,
.book__gift label:last-child {
  cursor: pointer;
}

@media (max-width: 400px) {
  .book-cover {
    width: 20rem;
  }
}

@media (max-height: 700px) {
  .about-book {
    margin-top: 400px;
  }
}

@media (max-width: 499px) {
  .form-flex {
    display: flex;
    flex-direction: column;
  }

  .form-flex__el {
    display: flex;
    flex-direction: column;
  }

  .checkout-progress01 svg,
  .checkout-progress02 svg,
  .checkout-progress03 svg {
    width: 20rem;
    height: auto;
    margin-top: 50px;
  }
}

@media (min-width: 500px) {
  .form-flex {
    display: flex;
    flex: 1;
    gap: 24px;
    flex-direction: row;
  }

  .form-flex__el {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .facturation {
    justify-content: flex-start;
  }

  .checkout-progress01 svg,
  .checkout-progress02 svg,
  .checkout-progress03 svg {
    width: 30rem;
    height: auto;
    margin-top: 50px;
  }
}

@media (max-width: 800px) {
  .credits {
    padding-top: 100px;
  }

  .home {
    padding-top: 100px;
  }

  .nav {
    padding-top: 24px;
    padding-bottom: 24px;
    padding-left: 24px;
  }

  .nav__el {
    font-weight: 900;
    line-height: 110%;
  }

  .nav__el--big {
    font-size: 20px;
  }

  .nav__el--small {
    font-size: 14px;
  }

  .about-book {
    margin-top: 400px;
  }

  .about-book__h2,
  .about-author__h2,
  .validation__h2,
  .credits__h2 {
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 27px;
    margin-left: 20px;
    margin-right: 20px;
  }

  .about-book__p,
  .about-author__p,
  .validation__p,
  .credits__links {
    font-size: 18px;
    line-height: 140%;
    margin-left: 20px;
    margin-right: 20px;
  }

  .about-book__img,
  .about-author__img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
  }

  .book__infos p {
    font-size: 11px;
    text-align: center;
  }

  .book {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 50px 140px 100px 60px 100px;
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    grid-template-areas:
      "book__cover"
      "book__infos"
      "book__title"
      "book__version"
      "book__gift"
      "book__checkout";
  }

  .book__cover {
    grid-area: book__cover;
    margin-left: auto;
    margin-right: auto;
  }

  .book__infos {
    grid-area: book__infos;
    font-size: 11px;
  }

  .book__title {
    grid-area: book__title;
    display: block;
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
    margin-left: 40px;
    margin-right: 40px;
  }

  .book__title h1,
  .checkout__book-title h1 {
    font-size: 27px;
    font-weight: 900;
    line-height: 110%;
  }

  .book__title p,
  .checkout__book-title p {
    font-size: 20px;
  }

  .book__version {
    grid-area: book__version;
    display: flex;
    justify-content: center;
    gap: 11px;
    align-items: center;
  }

  .book__version>.button {
    width: 130px;
    height: 70px;
  }

  .book__gift {
    grid-area: book__gift;
    margin-left: 40px;
    margin-right: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .book__gift>label {
    padding-left: 11px;
  }

  .book__checkout {
    grid-area: book__checkout;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .section-bag {
    height: 90vh;
    padding-top: 100px;
    padding-bottom: 40px;
  }

  .bag {
    display: grid;
    grid-template-columns: 368px;
    grid-template-rows: 500px 360px;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-auto-flow: row;
    grid-template-areas:
      "bag__book"
      "checkout";
    margin-left: auto;
    margin-right: auto;
    width: 370px;
  }

  .bag__book {
    grid-area: bag__book;
    display: block;
    margin: auto;
  }

  .bag__book img {
    width: 300px;
    height: auto;
  }

  .checkout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 100px) 60px 100px;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "checkout__book-title"
      "checkout__infos"
      "checkout__gift"
      "checkout__button";
    grid-area: checkout;
  }

  .checkout__book-title {
    text-align: center;
    grid-area: checkout__book-title;
  }

  .checkout__infos {
    grid-area: checkout__infos;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }

  .checkout__gift {
    display: block;
    grid-area: checkout__gift;
    margin-top: auto;
    margin-bottom: auto;
  }

  .checkout__button {
    grid-area: checkout__button;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .quantity__buttons {
    display: flex;
    gap: 40px;
    flex-direction: row;
    margin-left: 170px;
  }

  .footer__flex ul:first-child {
    height: 50px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex-wrap: nowrap;
  }

  .validation,
  .credits {
    height: 80vh;
  }

  .validation__content {
    margin-top: 50px;
  }
}

@media (min-width: 801px) {
  .credits {
    padding-top: 100px;
  }

  .validation,
  .credits {
    height: 80vh;
  }

  .validation__content {
    margin-top: 50px;
  }

  .nav {
    padding-top: 24px;
    padding-bottom: 24px;
    padding-left: 24px;
  }

  .nav__el {
    font-weight: 900;
    line-height: 140%;
  }

  .nav__el--big {
    font-size: 34px;
  }

  .nav__el--small {
    font-size: 17px;
  }

  .home {
    padding-top: 200px;
    width: 800px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .book {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: 365px 400px;
    grid-template-rows: 180px 80px 20px 80px 90px;
    gap: 22px 22px;
    align-items: center;
    grid-template-areas:
      "book__cover book__title"
      "book__cover book__version"
      "book__cover book__gift"
      "book__cover book__checkout"
      "book__cover book__infos";
  }

  .book__cover {
    display: flex;
    grid-area: book__cover;
    flex-direction: row;
    justify-content: flex-end;
  }

  .book__title {
    grid-area: book__title;
  }

  .book__title h1 {
    font-size: 43px;
    font-weight: 900;
  }

  .book__title p {
    font-size: 32px;
  }

  .book__version {
    grid-area: book__version;
    gap: 14px;
    display: flex;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  .book__version>.button {
    width: 180px;
    height: 70px;
  }

  .book__gift {
    grid-area: book__gift;
  }

  .book__checkout {
    grid-area: book__checkout;
    display: block;
    margin-top: auto;
    margin-bottom: auto;
  }

  .book__infos {
    grid-area: book__infos;
    font-size: 14px;
    display: block;
    margin-top: auto;
    margin-bottom: auto;
  }

  .about-book,
  .about-author,
  .credits {
    margin-top: 150px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 818px;
  }

  .about-book__h2,
  .about-author__h2,
  .validation__h2,
  .credits__h2 {
    font-size: 43px;
    font-weight: 900;
    /* margin-left: 306px; */
    padding-bottom: 24px;
  }

  .about-book__p,
  .validation__p,
  .credits__links {
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-size: 24px;
    line-height: 140%;
    width: 736px;
  }

  .about-author__img,
  .about-book__img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .section-bag {
    width: 645px;
    padding-top: 200px;
    display: block;
    margin: auto;
  }

  .bag {
    display: grid;
    grid-template-columns: 270px 350px;
    grid-template-rows: 200px 1fr;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 22px 22px;
    grid-auto-flow: row;
    grid-template-areas:
      "bag__book checkout";
  }


  .bag__book {
    grid-area: bag__book;
    display: block;
    margin: auto;
  }

  .bag__book img {
    width: 265px;
  }

  .checkout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 115px 115px 95px 65px;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "checkout__book-title"
      "checkout__infos"
      "checkout__gift"
      "checkout__button";
    grid-area: checkout;
  }

  .checkout__book-title {
    grid-area: checkout__book-title;
    font-weight: 900;
  }

  .checkout__book-title h1 {
    font-weight: 900;
  }

  .checkout__infos {
    display: flex;
    font-size: 18px;
    grid-area: checkout__infos;
    flex-direction: column;
    justify-content: space-evenly;
  }


  .checkout__gift {
    grid-area: checkout__gift;
  }

  .checkout__button {
    grid-area: checkout__button;
  }

  .form,
  .section-checkout {
    margin-top: 50px;
    height: 100vh;
  }

  .progress-bar {
    margin-top: 50px;
  }

  .footer__flex ul:first-child {
    height: 50px;
    display: flex;
    flex-direction: row;
    gap: 40px;
    justify-content: center;
    align-items: center;
  }
}

@media (min-width: 1200px) {
  .home {
    width: 950px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .book {
    grid-template-columns: 365px 560px;
  }
}