/* ------------ CONFIG GLOBALE DES SECTIONS ------------ */
.section {
  padding-block: 2.5rem;
}

.section h2 {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: var(--secondaire);
  position: relative;
  margin-bottom: 2rem;
  letter-spacing: 1px;
  font-weight: 700;
  text-shadow: 1px 0 var(--secondaire);
}

.section h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;
  width: 6rem;
  height: 2px;
  background: var(--secondaire);
}

.section__content {
  /* border: 1px solid purple; */
  display: grid;
  gap: 1rem;
}

.section__image-container {
  width: 100%;
  aspect-ratio: 16/9;
  margin: auto;
  border-radius: 0.4rem;
  -webkit-box-shadow:
    0px 10px 13px -12px #000000,
    0px 0px 10px 4px rgba(204, 204, 204, 0);
  box-shadow:
    0px 10px 13px -12px #000000,
    0px 0px 10px 4px rgba(204, 204, 204, 0);
}

.section__image-container img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0.4rem;
  object-fit: cover;
}

.section__description {
  display: flex;
  flex-direction: column;
  margin: auto;
  /* border: 1px solid blue; */
}

.section__description p {
  padding-block: 0.5rem;
}

.section .action-btn {
  margin: auto;
  width: 100%;
}

.section__padding {
  /* border: 1px solid red; */
  padding-top: 6.5rem; /*PADDING EXCEPTIONNEL */
}

/* CARTE */

.section__carte {
  display: grid;
  gap: 1rem;
  padding: 3rem 1.5rem;
  border-radius: 0.4rem;
  margin-inline: auto;
  max-width: 30rem;
}

.section__titre-carte {
  text-align: center;
  color: var(--secondaire);
  font-size: 1rem;
  padding-bottom: 2rem;
  letter-spacing: 1px;
}

.section__description-carte p {
  padding-block: 0.5rem;
}

.section__carte .action-btn {
  display: block;
  width: 100%;
  margin-block: 1rem;
}


/* ------------- MEDIA QUERY GLOBALE DES SECTIONS ------- */
@media (min-width: 450px) {
  .section__padding {
    padding-top: 8.5rem; /*PADDING - EXCEPTIONNEL*/
  }
}

@media (min-width: 800px) {
  .section {
    padding-block: 4rem;
  }

  .section__image-container {
    height: 28rem;
    overflow: hidden;
  }

  .section .action-btn {
    margin-left: 0;
  }

  .section__padding {
    padding-top: 8.5rem; 
  } 
}

@media (min-width: 1024px) {
  .section h2 {
    font-size: 1.2rem;
  }
  .section__content {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .section__image-container {
    height: 100%;
  }
  .section__padding {
    padding-top: 4rem; /*PADDING - EXCEPTIONNEL*/
  }
}