:root {
  --text-color: var(--zinc-900);
  --background-color: var(--zinc-100);

  --nav-text-color: var(--zinc-200);
  --nav-background-color: var(--zinc-950);
  --nav-text-color-hover: white;
  --nav-background-color-hover: var(--zinc-700);
  --nav-text-color-current: var(--zinc-100);
  --nav-background-color-current: var(--zinc-800);
}

#arret-du-tabac {
  color: var(--text-color);
  background-color: var(--background-color);

  h1 {
    text-transform: uppercase;
    margin: 0 auto;
    padding: var(--gap) 0;
  }

  h2 {
    text-transform: capitalize;
  }

  p {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-serif) !important;
  }

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

  section {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;

    padding: var(--gap);
    min-height: calc(100vh - var(--nav-height));

    article {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
    }

    .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-900);
      text-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
      position: absolute;
      bottom: 0;
    }

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

    .mdi-36px {
      font-size: 36px;
      height: 36px;
      line-height: 36px;
      vertical-align: middle;
    }
  }

  /* === #service-card01 ==================================================== */

  #service-card01 {
    padding: var(--gap-x2) var(--gap) !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/arret-du-tabac/card01.webp");
    }

    .buttons {
      justify-content: center !important;
    }

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

  /* === #service-card02 / #service-card03 ================================== */

  #service-card02,
  #service-card03,
  #service-card05,
  #service-card06,
  #service-card08 {
    padding: var(--gap-x2) var(--gap) !important;
    justify-content: center !important;

    article {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      gap: var(--gap);

      content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: center;
        gap: var(--gap);

        > div {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          gap: var(--gap);

          flex: 1 1 260px;
          text-align: left;
        }
      }
    }
  }

  #service-card03 {
    background-color: var(--zinc-200);
    color: var(--zinc-900);
  }

  /* === #service-card04 ======================================================== */

  #service-card04 {
    background-color: var(--zinc-100);
    padding: var(--gap-x2) var(--gap) !important;

    article {
      flex: 1 1;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      align-content: center;
      gap: var(--gap);

      content {
        flex: 1 1;
        gap: var(--gap);
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        justify-content: center;
        align-content: stretch;

        .card-text {
          flex: 2 1 200px;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
          gap: var(--gap);

          > div {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            background-color: rgba(255, 255, 255, 0.25);
            gap: var(--gap);

            > div {
              flex: 1 1 240px;
              display: flex;
              flex-direction: column;
              flex-wrap: nowrap;
              border-radius: 4px;
              border: none;
              box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            }
          }
        }

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

  /* === #service-card05 ======================================================== */

  #service-card05 {
    background-color: var(--zinc-200);
    color: var(--zinc-900);

    content > div {
      flex-direction: column !important;
      justify-content: space-between !important;
      border: none;
    }
  }

  /* === #service-card06 ======================================================== */

  #service-card06 {
    background-color: var(--zinc-100);
    color: var(--zinc-900);
    padding: var(--gap-x2) var(--gap) !important;

    content > div {
      flex-direction: row !important;
      justify-content: space-between !important;
      border: none;

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

  /* === #service-card07 ======================================================== */

  #service-card07 {
    background-color: var(--zinc-200);
    padding: var(--gap-x2) var(--gap) !important;

    article {
      flex: 1 1;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      align-content: center;
      gap: var(--gap);

      content {
        flex: 1 1;
        gap: var(--gap);
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        justify-content: center;
        align-content: stretch;

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

        .card-text {
          flex: 2 1 200px;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
          gap: var(--gap);

          > div {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: var(--gap);

            > div {
              flex: 1 1 240px;
              display: flex;
              flex-direction: column;
              flex-wrap: nowrap;
              border-radius: 4px;
              border: none;
            }
          }
        }
      }
    }
  }

  /* === #service-card08 ======================================================== */

  #service-card08 {
    background-color: var(--zinc-100);
    padding: var(--gap-x2) var(--gap) !important;
  }

  /* === #service-card09 ======================================================== */

  #service-card09 {
    background-color: var(--zinc-900);
    color: var(--zinc-100) !important;
    padding: var(--gap-x2) var(--gap) !important;

    .bg-image {
      background-image: url("/pages/services/arret-du-tabac/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);
    }
    .icon-button:hover {
      color: var(--zinc-050);
    }

    h3 {
      line-height: 200%;

      big1 {
        border-radius: 6px;
        background-color: var(--darker-50);
        padding: 10px 20px;
        box-shadow: var(--box-shadow-SL);
      }
    }

    article {
      flex: 1 1;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      align-content: center;
      gap: var(--gap);

      content {
        flex: 1 1;
        gap: var(--gap);
        flex-direction: row !important;
        align-items: stretch !important;

        > div {
          display: flex;
          flex-direction: column !important;
          justify-content: space-between !important;
          gap: var(--gap);
          border: none;

          h3 {
            line-height: 200%;
          }

          p {
            text-align: center;
          }

          > div {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: center;
            gap: var(--gap);
            text-align: center;

            > div {
              flex: 1 1 200px;
              padding: var(--gap) 0;
            }
          }
        }
      }
    }
  }

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

#booking {
  background-color: var(--zinc-800);
  min-height: calc(100vh - var(--nav-height)) !important;
}