/*----------------------------------------------------------------*/
/*                      SECTION : HERO                            */
/*----------------------------------------------------------------*/
.hero__overlay {
  transform: translate(-50%, 55%);

  /* AJOUT */
  padding-block: 6rem;
}

@media (min-width: 450px) {
  .hero__overlay {
    bottom: 8%;
  }
}

@media (min-width: 1024px) {
  .hero__overlay {
    bottom: 29%;
    /* AJOUT */
    padding-block: 4rem;
  }
}

/*----------------------------------------------------------------*/
/*                      SECTION : REJOINDRE TEC 31                */
/*----------------------------------------------------------------*/*
.section-rejoindre-tec31.section__padding {
    padding-top: 1rem;
}

.section-rejoindre-tec31 .cartes-container {
  display: grid;
  gap: 1rem;
  padding-block: 2rem;
}

.section-rejoindre-tec31 .section__carte {
  background-color: var(--gris-clair);
}

.section__titre-carte {
  padding-bottom: 1rem;
}

.section-rejoindre-tec31-bienvenue {
  font-weight: 700;
  text-align: center;
}

.section-rejoindre-tec31 .section__image-container {
  aspect-ratio: auto;
  max-width: 30rem;
  height: 100%;
  max-height: 40rem;
  overflow: hidden;
}

.section-rejoindre-tec31 .action-btn {
  justify-self: center;
  align-self: center;
  margin: 0;
}

.section-rejoindre-tec31__paragraphe-reduction-impots {
  max-width: 994px;
  margin: 2rem auto;
  font-weight: 700;
  color: var(--secondaire);
}

.section-rejoindre-tec31 .liste {
  margin-left: 1.5rem;
}

.section-rejoindre-tec31 .liste li {
  list-style-type: disc;
}

.email-tec31 {
  text-decoration: underline;
  font-weight: 700;
  color: var(--focale);
  transition: all 0.3s ease-in-out;
}

.section-rejoindre-tec31 .section__image-container {
  position: relative;
}

.section-rejoindre-tec31 .section__image-container figcaption {
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  background-color: var(--primaire);
  width: 100%;
  text-align: right;
  font-size: 1rem;
  color: #111111;
  padding: 0.5rem;
}

@media (min-width: 450px) {
    .section-rejoindre-tec31.section__padding {
        padding-top: 7.5rem;
    }
    .section-rejoindre-tec31 .section__image-container img {
        object-position: 50% 16%;
    }

}

@media (min-width: 900px) {
  .section-rejoindre-tec31 .cartes-container {
    grid-template-columns: repeat(2, 1fr);
    max-width: 994px;
    margin: auto;
  }

  .section-rejoindre-tec31__devenir-benevole {
    grid-template-areas: "photo texte";
  }

  .section-rejoindre-tec31__devenir-benevole .section__image-container {
    grid-area: photo;
  }

  .section-rejoindre-tec31__devenir-benevole .section__carte {
    grid-area: texte;
  }
}

@media (min-width:1024px){
     .section-rejoindre-tec31.section__padding {
        padding-top: 4rem;
    }
}

/*----------------------------------------------------------------*/
/*             SECTION : AIDER LES JEUNES MINEUR.E.S ISOLÉ.E.S    */
/*----------------------------------------------------------------*/
.section-aider-jeunes {
  background-color: var(--gris-clair);
}

.section-aider-jeunes__cartes-container .action-btn {
  max-width: 22rem;
}

.section-aider-jeunes__cartes-container {
  display: grid;
  gap: 1rem;
  padding-block: 2rem;
}

.section-aider-jeunes__carte {
  background-color: var(--primaire);
  max-width: 24rem;
}

.section-aider-jeunes__image-carte {
  height: 15rem;
}

.section-aider-jeunes__image-carte img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.section-aider-jeunes__carte.carte-repas .section-aider-jeunes__image-carte,
.section-aider-jeunes__carte.carte-logement .section-aider-jeunes__image-carte {
  align-self: center;
  justify-self: center;
}

.section-aider-jeunes__carte.carte-repas .section-aider-jeunes__image-carte {
  width: 12rem;
}

.section-aider-jeunes__carte.carte-logement .section-aider-jeunes__image-carte {
  width: 8rem;
}

/* IBAN */
 .section-aider-jeunes__iban {
    display: flex;
    font-weight: 700;
    max-width: fit-content;
    margin: auto;
    flex-direction: column;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
    border-radius: 0.4rem;
}

.section-aider-jeunes__iban-description, 
.section-aider-jeunes__iban-numero {
    padding: 1rem;
    text-align: center;
}

.section-aider-jeunes__iban-description {
    background-color: var(--secondaire);
    color: var(--primaire);
    border-top-left-radius: 0.4rem;
    border-top-right-radius: 0.4rem;
}

.section-aider-jeunes__iban-numero {
    background-color: var(--primaire);
    color: var(--secondaire);
    border-bottom-left-radius: 0.4rem;
    border-bottom-right-radius: 0.4rem;
}


@media (min-width: 756px) {
    .section-aider-jeunes__iban {
        flex-direction: row;
    }
    .section-aider-jeunes__iban-description {
        border-top-left-radius: 0.4rem;
        border-bottom-left-radius: 0.4rem;
        border-top-right-radius: 0;
    }
    .section-aider-jeunes__iban-numero {
        border-top-right-radius: 0.4rem;
        border-bottom-right-radius: 0.4rem;
        border-bottom-left-radius: 0;
    } 
}

@media (min-width: 900px) {
    .section-aider-jeunes__cartes-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .section-aider-jeunes__carte {
        grid-template-rows: 3rem auto 3rem;
    }

    .section__titre-carte {
        padding-bottom: 0;
    }

    .section-aider-jeunes__carte .action-btn {
        justify-self: center;
        align-self: stretch; 
        margin-block: 0;
        display: flex;
        align-items: center;
        justify-content: center;        
    }
}

@media (min-width: 1210px) {
    .section-aider-jeunes__carte {
        grid-template-rows: 3rem auto auto;
    }
}

/*----------------------------------------------------------------*/
/*                  SECTION : COLLECTE                            */
/*----------------------------------------------------------------*/
.section-collecte .section__image-container {
    background-color: var(--secondaire);
}

.section-collecte .section__image-container img {
  object-fit: contain;
}

.section-collecte h3 {
    font-size: 1rem;
    color: var(--secondaire);
    text-align: center;
    padding-top: 2rem; 
    padding-bottom: 1rem; 
}

.section-collecte p,
.section-collecte li  {
    padding-block: 0.5rem;
}

.section-collecte ul {
    padding-inline: 1rem;
}

.adresse-mail {
    text-decoration: underline;
    font-weight: 700;
    color: var(--focale);
    transition: all 0.3s ease-in-out;
}

.section-collecte__collecte-ponctuelle .action-btn {
    display: block;
    margin-top: 1rem;
}