/*----------------------------------------------------------------*/
/*                     SECTION - 1 :  HERO                        */
/*----------------------------------------------------------------*/
.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 518%;
}

@media (min-width: 330px) {
  .hero__image img {
    object-position: 50% 286%;
  }
}

@media (min-width: 350px) {
  .hero__image img {
    object-position: 50% 200%;
  }
}

@media (min-width: 370px) {
  .hero__image img {
    object-position: 50% 140%;
  }
}

@media (min-width: 400px) {
  .hero__image img {
    object-position: 50% 98%;
  }
}

@media (min-width: 445px) {
  .hero__image img {
    object-position: 50% 90%;
  }
}

@media (min-width: 460px) {
  .hero__image img {
    object-position: 50% 50%;
  }
}

@media (min-width: 1014px) {
  .hero__image img {
    object-position: 50% 45%;
  }
}

@media (min-width: 1024px) {
  .hero__overlay {
    width: 60%;
    left: 33%;
  }
}

@media (min-width: 1175px) {
  .hero__overlay {
    width: 50%;
    left: 27%;
  }
}

@media (min-width: 1400px) {
  .hero__image img {
    object-position: 50% 55%;
  }
}

/*----------------------------------------------------------------*/
/*                     MODIFICATION DU PADDING SPECIAL            */
/*----------------------------------------------------------------*/
.section-notre-mission.section__padding {
  padding-top: 9rem; /*PADDING EXCEPTIONNEL */
}

@media (min-width: 1024px) {
  .section-notre-mission.section__padding {
    padding-top: 4rem; /*PADDING - EXCEPTIONNEL*/
  }
}

/*----------------------------------------------------------------*/
/*                      SECTION - 2 : NOTRE MISSION               */
/*----------------------------------------------------------------*/
@media (min-width: 1024px) {
  .section-notre-mission .section__content {
    grid-template-areas: "texte image";
  }

  .section-notre-mission .section__image-container {
    grid-area: image;
  }

  .section-notre-mission .section__description {
    grid-area: texte;
  }
}

/*----------------------------------------------------------------*/
/*                      SECTION - 3 : NOTRE REPONSE               */
/*----------------------------------------------------------------*/
.section-notre-reponse {
  background-color: var(--gris-clair);
}

@media (min-width: 1024px) {
  .section-notre-reponse .section__content {
    grid-template-areas: "image texte";
  }

  .section-notre-reponse .section__image-container {
    grid-area: image;
  }

  .section-notre-reponse .section__description {
    grid-area: texte;
  }
}

/*----------------------------------------------------------------*/
/*                      SECTION - 4 : MISSIONS BENEVOLES          */
/*----------------------------------------------------------------*/
.section-missions-benevoles {
  background: linear-gradient(
    to bottom,
    var(--primaire),
    var(--primaire) 40%,
    var(--gris-clair) 50%,
    var(--gris-clair) 100%
  );
}
.section-missions-benevoles__cartes-container {
  display: grid;
  gap: 1rem;
}

.section-missions-benevoles__cartes-container.container-1 {
  padding-block: 1rem;
}

/* ========== CARTE PICTOGRAMME ========= */
.section-missions-benevoles__carte.pictogramme {
  grid-template-rows: 2rem 5rem auto;
  background-color: var(--gris-clair);
}

.section-missions-benevoles__carte.pictogramme
  .section-missions-benevoles__image-carte {
  justify-self: center;
  align-self: center;
}

.section-missions-benevoles__carte.pictogramme img {
  width: 5rem;
  height: auto;
}

/* ========== CARTE PHOTO ========= */
.section-missions-benevoles__carte.photo {
  grid-template-rows: 2rem 16rem auto 5rem;
  background-color: var(--primaire);
}

.section-missions-benevoles__carte.photo
  .section-missions-benevoles__image-carte
  img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.4rem;
}

.section-missions-benevoles__carte.photo .action-btn {
  justify-self: center;
  align-self: center;
  margin: 0;
}

@media (min-width: 800px) {
  .section-missions-benevoles__cartes-container.container-1 {
    grid-template-areas:
      "carte-1  carte-2"
      "carte-3 carte-3";
  }

  .section-missions-benevoles__carte {
    margin-block: 0;
  }

  .section-missions-benevoles__cartes-container.container-1 .carte-1 {
    grid-area: carte-1;
  }

  .section-missions-benevoles__cartes-container.container-1 .carte-2 {
    grid-area: carte-2;
  }

  .section-missions-benevoles__cartes-container.container-1 .carte-3 {
    grid-area: carte-3;
  }

  .section-missions-benevoles__cartes-container.container-2 {
    grid-template-areas: "carte-1  carte-2";
  }

  .section-missions-benevoles__cartes-container.container-2
    .section-missions-benevoles__carte {
    margin: 0;
  }

  .section-missions-benevoles__cartes-container.container-2 .carte-1 {
    grid-area: carte-1;
    justify-self: right;
  }

  .section-missions-benevoles__cartes-container.container-2 .carte-2 {
    grid-area: carte-2;
    justify-self: left;
  }
}

@media (min-width: 940px) {
  .section-missions-benevoles__cartes-container.container-1 {
    grid-template-areas: "carte-1  carte-2 carte-3";
  }
}

/*----------------------------------------------------------------*/
/*                 SECTION - 5 : SUCCESSION ABRI COLLECTIFS       */
/*----------------------------------------------------------------*/
.section-succession-abris-collectifs .section__image-container {
  max-height: 24rem;
}

.section-succession-abris-collectifs .section__image-container img {
  object-position: 50% 20%;
}

.section-succession-abris-collectifs__actions {
  padding-block: 1rem;
}

.section-succession-abris-collectifs__actions .action-btn {
  margin: 0;
  max-width: 25rem;
}

@media (min-width: 750px) {
  .section-succession-abris-collectifs__actions {
    flex-direction: row;
    justify-content: center;
    gap: 3rem;
  }
}

@media (min-width: 1024px) {
  .section-succession-abris-collectifs .section__content {
    grid-template-areas:
      "description description"
      "image image"
      "btn btn";
  }

  .section-succession-abris-collectifs .section__description {
    grid-area: description;
  }

  .section-succession-abris-collectifs .section__image-container {
    grid-area: image;
  }

  .section-succession-abris-collectifs__actions {
    grid-area: btn;
  }

  .section-succession-abris-collectifs .section__description {
    display: grid;
    gap: 1rem;
    grid-template-areas: "description-1 description-2";
  }

  .section-succession-abris-collectifs .description-1 {
    grid-area: description-1;
  }
  .section-succession-abris-collectifs .description-2 {
    grid-area: description-2;
  }

  .section-succession-abris-collectifs__description {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 1rem;
  }
}