/* Hero Section */
.section-hero {
  margin-top: var(--navbar-height);
  height: calc(100svh - var(--navbar-height));
  gap: var(--s32px_2rem);
  padding: var(--s64px_4rem) var(--s96px_6rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--neutral-100);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)),
    url(../medias/images/hero/hero.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero-header {
  place-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--s32px_2rem);
}

.hero-title {
  font: var(--f-display-h3);
  text-align: center;
  color: var(--white);
  text-shadow: 2px 2px 18px rgba(0, 0, 0, 0.2);
}
.hero-subtitle {
  font: var(--f-text-xl);
  text-align: center;
  color: var(--white);
  max-width: 40ch;
  text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2);
}
.hero-img {
  background-image: url(../medias/images/hero/hero.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  border-radius: var(--br24px_1-5rem);
  max-width: 1200px;
}

/* === MAGAZINE === */

.section-magazine {
  gap: var(--s32px_2rem);
  padding: var(--s64px_4rem) var(--s96px_6rem);
  display: flex;
  flex-direction: column;
  place-items: center;
  justify-content: center;
  background-color: var(--neutral-100);
}

.magazine-wrapper {
  display: flex;
  flex-direction: row;
  gap: var(--s32px_2rem);
}

.magazine-left {
  display: flex;
  flex-direction: column;
}

.magazine-right {
  display: flex;
  flex-direction: column;
  gap: var(--s32px_2rem);
}

.magazine-item {
  width: 100%;
  height: 400px;
}
.magazine-item-img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.magazine-text {
  font: var(--f-text-l);
  color: var(--black);
  max-width: 45ch;
}

/* About section */
.section-about {
  gap: var(--s32px_2rem);
  padding: var(--s64px_4rem) var(--s96px_6rem);
  display: flex;
  flex-direction: column;
  place-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--neutral-100);
}

.about-wrapper {
  display: flex;
  flex-direction: row;
  gap: var(--s64px_4rem);
  width: 100%;
  max-width: 1600px;
}
.about-left {
  width: 100%;
}
.about-img {
  background-image: url(../medias/images/about/photo-groupe.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  object-fit: contain;
  width: auto;
  height: 100%;
  border-radius: var(--br24px_1-5rem);
}

.about-right {
  display: flex;
  flex-direction: column;
  gap: var(--s32px_2rem);
}
.about-text {
  font: var(--f-text-l);
  color: var(--black);
  max-width: 100ch;
  text-align: justify;
}

/* About section */
.section-activities {
  gap: var(--s32px_2rem);
  padding: var(--s64px_4rem) var(--s96px_6rem);
  display: flex;
  flex-direction: column;
  place-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--neutral-100);
}
.activities-wrapper {
  width: 100%;
  max-width: 952px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  grid-gap: var(--s32px_2rem);
}
.activities-item {
  background-color: var(--white);
  padding: var(--s24px_1-5rem);
  border-radius: var(--br14px_0-875rem);
  gap: var(--s8px_0-5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: var(--t400);
}
.activities-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-l);
  transition: var(--t400);
}
.activities-item-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s8px_0-5rem);
}

.activities-item-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--s10px_0-625rem);
  border-radius: var(--brMax);
  background-color: var(--primary-500);
  color: var(--black);
}
.activities-item-icon {
  width: 28px;
  height: 28px;
}

.activities-item-title {
  font: var(--f-label-l);
  font-weight: var(--fw-semibold);
  color: var(--black);
}
.activities-item-text {
  font: var(--f-text-m);
  color: var(--black);
  max-width: 40ch;
}

/* Section Agencies */
.section-agencies {
  gap: var(--s32px_2rem);
  padding: var(--s64px_4rem) 0;
  display: flex;
  flex-direction: column;
  place-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--neutral-100);
}

.section-agencies-header {
  padding: 0 var(--s96px_6rem);
  margin-bottom: var(--s32px_2rem);
}
.agencies-wrapper {
  width: 100%;
}

.swiper {
  width: 100%;
  height: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
}

.agencies-item {
  display: flex;
  flex-direction: column;
  place-self: center;
  width: 450px;
  border-radius: var(--br20px_1-25rem);
  border: 1px solid var(--neutral-300);
}
.agencies-item-img {
  height: 400px;
  width: 100%;
  object-fit: cover;
  border-radius: var(--br20px_1-25rem) var(--br20px_1-25rem) 0 0;
}
.agencies-item-title {
  font: var(--f-text-2xl);
  font-weight: var(--fw-bold);
  color: var(--black);
}
.agencies-item-content {
  padding: var(--s16px_1rem);
  border-radius: 0 0 var(--br20px_1-25rem) var(--br20px_1-25rem);
  background-color: var(--white);
}

.agencies-item-cta {
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s8px_0-5rem);
  padding: var(--s16px_1rem);
  background-color: var(--primary-500);
  color: var(--black);
  border-radius: var(--br14px_0-875rem);
  font: var(--f-label-m);
  transition: var(--t300);
  width: 100%;
}
.agencies-item-cta:hover {
  background-color: var(--primary-300);
  transition: var(--t300);
}

.agencies-item-info-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s16px_1rem);
  padding: var(--s24px_1-5rem) 0;
}

.agencies-item-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s8px_0-5rem);
}
.agencies-item-info-icon {
  width: 24px;
  height: 24px;
}
.agencies-item-info-icon svg {
  width: 100%;
  height: 100%;
}
.agencies-item-info-name {
  font: var(--f-text-m);
  color: var(--black);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--s8px_0-5rem);
}

.swiper-slide {
  width: fit-content;
  background-position: center;
  background-size: cover;
  border-radius: var(--br20px_1-25rem);
}
.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0)
  );
  border-radius: var(--br20px_1-25rem);
}

.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0)
  );
  border-radius: var(--br20px_1-25rem);
}

/* Section FAQ */
.section-faq {
  gap: var(--s32px_2rem);
  padding: var(--s64px_4rem) var(--s96px_6rem);
  display: flex;
  flex-direction: column;
  place-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--neutral-100);
}

.faq-item {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.faq-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--s16px_1rem);
  max-width: 800px;
}
.faq-separator {
  height: 1px;
  width: 100%;
  background-color: var(--neutral-300);
}
.faq-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.faq-title {
  font: var(--f-text-xl);
  font-weight: var(--fw-bold);
  color: var(--black);
  width: fit-content;
  margin-right: var(--s16px_1rem);
}

.faq-content {
  visibility: hidden;
  opacity: 0;
  max-height: 0;
  color: var(--neutral-700);
  transition: var(--t600);
  line-height: 1.5;
  place-self: flex-start;
  text-align: justify;
  margin-top: var(--s8px_0-5rem);
}
.faq-content__active {
  display: block;
  visibility: visible;
  opacity: 1;
  max-height: 1000px;
  color: var(--neutral-700);
  transition: var(--t600);
}

.faq-icon {
  width: 24px;
  height: 24px;
  transition: var(--t600);
}

.faq-icon__active {
  transform: rotate(180deg);
  transition: var(--t600);
}

/* MEDIA QUERIES */
/* 1280 */
@media screen and (max-width: 1280px) {
  .section-about,
  .section-magazine,
  .section-activities,
  .section-agencies-header,
  .section-faq {
    padding: var(--s64px_4rem) var(--s64px_4rem);
  }
  .section-faq {
    padding: var(--s64px_4rem) var(--s64px_4rem);
  }
  .about-wrapper {
    flex-direction: column;
  }
  .about-img {
    height: 400px;
  }
}
/* 1024 */
@media screen and (max-width: 1024px) {
}
/* 768 */
@media screen and (max-width: 768px) {
  .section-hero {
    margin-top: var(--navbar-height-mobile);
    padding: var(--s64px_4rem) var(--s48px_3rem);
  }
  .hero-title {
    font: var(--f-heading-h4);
  }
  .section-about,
  .section-magazine,
  .section-activities,
  .section-agencies-header,
  .section-faq {
    padding: var(--s64px_4rem) var(--s48px_3rem);
  }
  .about-wrapper {
    flex-direction: column;
  }
  .magazine-wrapper {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .magazine-left {
    order: 2;
  }
  .magazine-item {
    height: 400px;
  }
  .magazine-right .button-primary {
    width: 100%;
  }
  .about-img {
    width: 100%;
    height: 300px;
  }
  .activities-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--s32px_2rem);
  }
  .section-title {
    font: var(--f-heading-h5);
  }
  .section-subtitle {
    font: var(--f-text-l);
  }
}
/* 480 */
@media screen and (max-width: 480px) {
  .section-hero {
    padding: var(--s64px_4rem) var(--s32px_2rem);
  }
  .section-about,
  .section-magazine,
  .section-activities,
  .section-agencies-header,
  .section-faq {
    padding: var(--s64px_4rem) var(--s32px_2rem);
  }
  .about-img {
    width: 100%;
    height: 250px;
  }
  .agencies-item {
    width: 380px;
  }
}