#libre-sans-cigarette {
  color: var(--gray-100);
  padding: 0;

  > section {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    min-height: calc(100vh - 50px);

    > article {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;

      > h1 {
        text-align: center;
        margin: 0 auto;
        padding: 2rem 0;
      }
    }
  }

  h3 {
    font-size: 1.2rem !important;
  }

  .card-text {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
  }

  .card-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    mask-size: contain;
    mask-position: right;
    mask-repeat: no-repeat;
  }

  .bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    filter: brightness(0.5);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }

  .buttons {
    justify-content: center !important;
    padding: 20px 0;
  }

  .icon-button {
    width: 50px !important;
    height: 50px !important;
    padding: 7px;
    margin: var(--gap-x2) 0 0 0;
    user-select: none;
    cursor: pointer;
    color: var(--zinc-200);
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  }

  .icon-button:hover {
    color: var(--zinc-050);
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
  }

  .fa {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 28px;
    line-height: 28px;
    width: 32px;
    height: 32px;
    vertical-align: middle;
  }
}

/* === #section-01 ==================================================== */

#section-01 {
  justify-content: flex-end !important;

  background-image: url(card01.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--zinc-100);

  .bg-image {
    background-image: url("/pages/services/libre-sans-cigarette/card01.webp");
  }

  .icon-button {
    color: var(--zinc-200) !important;
  }
  .icon-button:hover {
    color: var(--zinc-050) !important;
  }
}

/* === #section-02 / #section-03 ================================== */

#section-02,
#section-03,
#section-05,
#section-06,
#section-08 {
  padding: 0;

  > article {
    gap: 20px;

    > div {
      flex-wrap: wrap;
      align-items: stretch;
      justify-content: center;
      gap: 20px;

      > div {
        flex: 1 1 190px;

        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        text-align: left;
      }
    }
  }
}

#section-02,
#section-03,
#section-08  {
  pp {
    margin-top: 0.2rem;
  }
}

#section-02 {
  background-color: var(--zinc-100);
  color: var(--zinc-900);
  min-height: fit-content !important;
}

#section-03 {
  background-color: var(--zinc-200);
  color: var(--zinc-900);
  min-height: fit-content !important;
}

/* === #section-04 ======================================================== */

#section-04 {
  background-color: var(--zinc-100);
  color: var(--zinc-900);
  min-height: fit-content !important;

  > article {
    flex: 1 1;

    > div {
      flex: 1 1;
      gap: 20px;

      .card-text {
        flex: 3 1;

        > div {
          flex-direction: column;
          flex-wrap: wrap;
          align-items: stretch;
          justify-content: center;

          > div {
            flex-direction: row;
            flex-wrap: wrap;
            margin: 0;
            gap: 20px;

            > pp {
              flex: 1 1 260px;
            }
          }
        }
      }

      .card-image {
        flex: 1 1 150px;
        background-image: url("/pages/services/libre-sans-cigarette/card04.webp");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: var(--card-border-radius);
      }
    }
  }
}

/* === #section-05 ======================================================== */

#section-05 {
  background-color: var(--zinc-200);
  color: var(--zinc-900);
  min-height: fit-content !important;

  > article {
    > div {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: stretch;
      justify-content: center;
      gap: 20px;

      > pp {
        flex: 1 1 195px;
      }
    }

  }
}

/* === #section-06 ======================================================== */

#section-06 {
  background-color: var(--zinc-100);
  color: var(--zinc-900);
  min-height: fit-content !important;

  > article {
    > div {
      flex: 1 1;
      display: flex;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      align-items: stretch !important;
      justify-content: center;
      align-content: stretch;
      gap: 20px;

      > div {
        flex: 1 1 235px;
        flex-direction: row !important;
        justify-content: space-between !important;
        border: none;
        gap: 10px;

        .number {
          flex: 0 0 auto;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-size: 32px;
          width: 40px;
          max-width: 40px;
          height: 40px;
          margin-top: 0.2rem;
          color: var(--zinc-900);
          font-weight: bold;
          background-color: var(--zinc-900);
          color: var(--zinc-100);
        }
      }
    }
  }
}

/* === #section-07 ======================================================== */

#section-07 {
  background-color: var(--zinc-200);
  color: var(--zinc-900);
  min-height: fit-content !important;

  > article {
    flex: 1 1;

    > div {
      flex: 1 1;
      gap: 20px;

      .card-image {
        flex: 1 1 150px;
        background-image: url("/pages/services/libre-sans-cigarette/card07.webp");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: var(--card-border-radius);
      }

      .card-text {
        flex: 3 1;

        > div {
          flex-direction: column !important;
          flex-wrap: wrap;
          align-items: stretch;
          justify-content: center;
          gap: 20px;

          > div {
            flex-direction: row !important;
            flex-wrap: wrap;
            margin: 0;
            gap: 20px;

            > pp {
              flex: 1 1 230px;
            }
          }
        }
      }
    }
  }
}

/* === #section-08 ======================================================== */

#section-08 {
  background-color: var(--zinc-100);
  color: var(--zinc-900);
  min-height: fit-content !important;
}

/* === #section-09 ======================================================== */

#section-09 {
  background-color: var(--zinc-900);
  color: var(--zinc-100) !important;

  .bg-image {
    background-image: url("/pages/services/libre-sans-cigarette/card09.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0.5);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }

  .icon-button {
    color: var(--zinc-200) !important;
  }
  .icon-button:hover {
    color: var(--zinc-050) !important;
  }

  > article {
    flex: 1 1;
    justify-content: flex-end !important;

    > div {
      > div {
        flex-direction: column !important;
        justify-content: space-between !important;
        gap: 20px;

        > div {
          flex-wrap: wrap;
          align-items: flex-start;
          justify-content: center;

          > div {
            flex: 1 1 200px;
            flex-direction: column;
            gap: 1rem;

            > p {
              text-align: center;
              justify-content: center;
              align-items: center;
              width: calc(100% - 40px);
            }
          }
        }
      }
    }
  }
}

@media screen and (width < 600px) {
  #section-04 .card-image {
    aspect-ratio: 1 / 1;
  }
}