:root {
    --form-input-gap:10px;
    --form-fieldset-gap:30px;
}

.appointmentShowcase {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    max-height: 1000px;
    width: 100%;
    background-color: #F5F5F5;
    gap: 10%;
    transition: all ease .1s;
}

.appointmentShowcase .text-div {
    position: relative;
    width: 700px;
    text-align: justify;
    margin-left: 10%;
    z-index: 3;
}

.appointmentShowcase .scroll-down-button {
    position: absolute;
    left: 50%;
    bottom: -25%;
    transform: translateX(-50%); /* Centre horizontalement */
    z-index: 100;
}

.appointmentShowcase .scroll-down-button:hover{
    transform: translate(-50%, 10px);
}

/*Images du showcase*/

.appointmentShowcase .images {
    position: relative;
    display: flex;
    width: 25%;
    min-width: 300px;
    max-width: 400px;
    aspect-ratio: 1/1.6;
    transition: all ease 0.2s;
    margin-right: 10%;
}

.appointmentShowcase .images img {
    width: 49%;
    height: 78.5%;
    border-radius: 5px;
}

.appointmentShowcase .images img:first-of-type {
    position: absolute;
    bottom: 0;
    left: 0;
}

.appointmentShowcase .images img:last-of-type{
    position: absolute;
    top: 0;
    right: 0;
}

.appointmentShowcase .gradient-overlay {
    /* display: none; */
    display: flex;
    position: absolute;
    width: 100%;
    height: 70%;
    background: linear-gradient(to top, #f5f5f5, rgba(255, 255, 255, 0)); 
    z-index: 2;
    bottom: 0;
}

@media (width <= 500px) { /* Mobile */
    .appointmentShowcase .gradient-overlay {
        height: 40%;
        background: linear-gradient(to top, #f5f5f5, rgba(255, 255, 255, 0)); 
    }
  
    .appointmentShowcase { 
      background-image: url("../../../public/assets/prise-RDV.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      justify-content: center; 
      gap: 0;
      height: 100vh;
  }

  .appointmentShowcase .text-div {
      max-width: unset;
      margin: unset !important;
      width: 70% !important;
      background-color: #00000068;
      padding: 20px;
      border-radius: 2px;
  }

  .appointmentShowcase .text-div>* {
      color: #fff;
  }

  .appointmentShowcase .images {
      display: none;
  }

  .appointmentShowcase .images {
      min-width: 200px;
  }

  .appointmentShowcase .text-div {
      min-width: 200px;
  }
}

@media (width <= 640px) { /* Tablette/Mobile */
  .appointmentShowcase { 
      /* background-color: lightblue;  */
      gap: 4%;
      max-height: 600px;
  }

  .appointmentShowcase .text-div {
      margin-left: 2%;
  }

  .appointmentShowcase .images {
      margin-right: 2%;
  }

  .appointmentShowcase .images {
      min-width: 240px;
  }

  .appointmentShowcase .text-div {
      width: 230px;
  }
}

@media (641px <= width <= 768px) { /* Tablette portrait */
  .appointmentShowcase { 
      /* background-color: lightgreen; */
      gap: 5%; 
  }

  .appointmentShowcase .text-div {
      margin-left: 5%;
  }

  .appointmentShowcase .images {
      margin-right: 5%;
  }

  .appointmentShowcase .images {
      min-width: 250px;
  }

  .appointmentShowcase .text-div {
      min-width: 250px;
  }
}
  
@media (769px <= width <= 1024px) { /* Tablette paysage */
  /* .appointmentShowcase { background-color: lightcoral; } */
  
  .appointmentShowcase .text-div {
      margin-left: 8%;
  }

  .appointmentShowcase .images {
      margin-right: 8%;
  }

  .appointmentShowcase .text-div {
      min-width: 300px;
  }

  .appointmentShowcase {
      gap: 5%;
  }
}
  
@media (1025px <= width) { /* PC standard */
  /* .appointmentShowcase { background-color: lightgoldenrodyellow; } */

  .appointmentShowcase .images {
    transform: translateY(2%);
  }
}