:root {
  --orange: #ff5601;
  --orange--light: #fbe8d7;
  --white: #fff;
  --section-pb: 48px;
  --pastel-pink: #fd75b7;
  --pink: #ff3bd0;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Merriweather", serif;
}

.container {
  width: 90%;
  max-width: 1400px;
  margin-inline: auto;
}


/*********************** HEADER ***********************/
.header {
  position: sticky;
  z-index: 100;
  inset-block-start: 0;
  background-color: var(--orange);
}

.header .container {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(5, 1fr);
}

.header__logo {
  z-index: 50;
  grid-row: 1/2;
  grid-column: 3/4;
  text-align: center;
}

.nav {
  grid-row: 1/2;
  grid-column: 1/6;
  display: grid;
  grid-template-columns: subgrid;
}

.nav__list {
  grid-column: 1/6;
  display: grid;
  grid-template-columns: subgrid;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav__item:first-child {
  grid-column: 1/2;
}

.nav__item:nth-child(2) {
  grid-column: 2/3;
}

.nav__item:nth-child(3) {
  grid-column: 4/5;
}

.nav__item:last-child {
  grid-column: 5/6;
}

.nav__item-link {
  color: var(--white);
  text-decoration: none;
}

.nav__item-link:hover {
  text-decoration: underline;
}


/*********************** HERO BANNER ***********************/
.heroBanner {
  padding-block: var(--section-pb);
  background: #FF5601;
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange) 50%, var(--white) 50%, var(--white) 100%);
}

.heroBanner .container {
  display: flex;
}

.heroBanner__title-details {
  display: block;
  margin-inline: auto;
}
.heroBanner__title-details.--brand {
  font-family: "Style Script", cursive;
}

.heroBanner__methodology {
  order: 1;
  flex: 0 1 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--white);
}
.heroBanner__methodology-title {
  text-align: center;
}
.heroBanner__methodology-list {
  display: flex;
  gap: 24px 0;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.heroBanner__methodology-item {
  position: relative;
  flex: 0 0 50%;
  text-align: center;
}

.heroBanner__methodology-item:nth-child(odd):has(~ .heroBanner__methodology-item)::after {
  content: '-';
  position: absolute;
  inset-inline-end: -2px;
}

.heroBanner__img {
  order: 2;
  flex: 1 1 auto;
}
.heroBanner__intro {
  order: 3;
  flex: 0 1 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/*********************** EDITO ***********************/
.edito {
  padding-block: var(--section-pb);
}

.edito .container {
  display: grid;
  gap: 16px 32px;
  grid-template-areas: "title title title" "text1 img text3" "text2 img text4";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr 1fr;
}

.edito__title {
  grid-area: title;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  font-family: "Style Script", cursive;
}

.edito__title::before,
.edito__title::after {
  content: '';
  display: block;
  width: 32px;
  height: 56px;
  margin-block-start: -16px;
  background: transparent url('../img/intro-decoration.png') center center no-repeat;
  background-size: contain;
}

.edito__title::before {
  transform: scaleX(-1);
}

.edito__img {
  grid-area: img;
  width: 100%;
}

.edito__text {
  margin: 0;
  text-align: justify;
}

.edito__text:nth-of-type(1) {
  grid-area: text1;
  display: flex;
  align-items: flex-end;
}

.edito__text:nth-of-type(2) {
  grid-area: text2;
}

.edito__text:nth-of-type(3) {
  grid-area: text3;
  display: flex;
  align-items: flex-end;
}

.edito__text:nth-of-type(4) {
  grid-area: text4;
}


/*********************** PRESTATIONS ***********************/
.prestations {
  padding-block: calc(48px + var(--section-pb)) var(--section-pb);
  background: transparent url('../img/separator-decoration.png') repeat-x center top;
  background-size: auto 48px;
}

.prestations__title {
  margin: 0;
  text-align: center;
  font-family: "Style Script", cursive;
}

.prestations__list {
  display: grid;
  gap: 16px 32px;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.prestations__item .prestations__item-link {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 24px;
  text-align: center;
  color: var(--orange--light);
  font-weight: 700;
  border-radius: 16px;
  text-decoration: none;
}

.prestations__item .prestations__item-link span {
  flex: 1 1 auto;
}

.prestations__item .prestations__item-link::before {
  content: "";
  display: block;
  width: 164px;
  aspect-ratio: 1;
  border-radius: 16px;
  background: transparent var(--prestation-item-img) no-repeat center center;
  background-size: cover;
}

.prestations__item:nth-child(odd) .prestations__item-link {
  flex-direction: row-reverse;
}

.prestations__item:nth-child(1) .prestations__item-link,
.prestations__item:nth-child(4) .prestations__item-link {
  background-color: var(--orange);
}
.prestations__item:nth-child(2) .prestations__item-link,
.prestations__item:nth-child(3) .prestations__item-link {
  background-color: var(--pastel-pink);
}
.prestations__item.--education-reeducation .prestations__item-link::before {
  --prestation-item-img: url('../img/education-reeducation-canine.png')
}
.prestations__item.--chiot .prestations__item-link::before {
  --prestation-item-img: url('../img/education-chiot.png')
}
.prestations__item.--mediation .prestations__item-link::before {
  --prestation-item-img: url('../img/mediation-canine.png')
}
.prestations__item.--balade-cours-collectifs .prestations__item-link::before {
  --prestation-item-img: url('../img/balades-cours-collectifs.png')
}

/*********************** PRESENTATION ***********************/
.presentation {
  padding-block: calc(48px + var(--section-pb)) var(--section-pb);
  background: transparent url('../img/separator-decoration.png') repeat-x center top;
  background-size: auto 48px;
}

.presentation__title {
  margin: 0;
  text-align: center;
  font-family: "Style Script", cursive;
}

.presentation__list {
  display: grid;
  gap: 80px;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.presentation__item {
  padding: 16px 16px 24px;
  border: 2px solid var(--presentation-item-borderWidth);
  border-radius: 16px;
  text-align: center;
}

.presentation__item.--marieMey {
  --presentation-item-borderWidth: var(--pastel-pink);
}
.presentation__item.--mystik {
  --presentation-item-borderWidth: var(--orange);
}

.presentation__item-title {
  margin: 0;
}

.presentation__item-img {
  display: block;
  margin-inline: auto;
}

.presentation__item-text {
  margin: 0;
  text-align: justify;
}

/*********************** CONTACT ***********************/
.contact {
  padding-block: calc(48px + var(--section-pb)) var(--section-pb);
  background: transparent url('../img/contact-decoration.png') repeat-x center top;
  background-size: auto 48px;
}

.contact__title {
  margin: 0;
  text-align: center;
  font-family: "Style Script", cursive;
}

.contact__content {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: center;
}

.contact__content::before {
  content: '';
  order: 2;
  flex: 1 0 auto;
  display: block;
  width: 200px;
  aspect-ratio: 186/187;
  background: transparent url('img/lyon-alentours-rhone.png') no-repeat center center;
  background-size: contain;
}

.contact__whereToFindMe {
  order: 1;
  flex: 1 1 100%;
  padding: 24px;
  border: 2px solid var(--pastel-pink);
  text-align: center;
  border-radius: 16px;
}

.contact__whereToFindMe-title {
  margin: 0;
}
.contact__whereToFindMe-text {
  margin: 0;
}

.contact__details {
  order: 3;
  flex: 1 1 100%;
  padding: 8px 8px 16px;
  background-color: var(--orange);
  color: var(--white);
  text-align: center;
  border-radius: 16px;
}

.contact__details-title {
  margin: 0;
}

.contact__details-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact__details-item-link {
  color: var(--white);
}

/*********************** FOOTER ***********************/
.footer {
  padding-block: var(--section-pb);
}

.footer__socials {
  max-width: 200px;
  margin-inline: auto;
  padding: 24px;
  border: 2px solid var(--pastel-pink);
  text-align: center;
  border-radius: 16px;
}
.footer__socials-title {
  flex: 0 0 100%;
  margin: 0;
}

.footer__socials-list {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__socials-img {
  max-width: 24px;
}