.accueil {
  color: #161515;
  margin-bottom: 3rem;
}

.accueil h1,
.accueil h2,
.accueil h3 {
  margin: 0;
}

:where(.accueil) p {
  max-width: 90ch;
  margin: 0;
}

.accueil p a {
  text-decoration: underline;
  color: inherit;
}

.accueil__hero {
  display: grid;
  max-width: 1440px;
  margin: 0 auto;
}
@media (min-width: 64em) {
  .accueil__hero {
    grid-template-columns: min(45%, 560px) 1fr;
  }
}

.accueil__hero p {
  max-width: 50ch;
}

.accueil__hero-image {
  grid-column: 1 / -1;
  grid-row: 1;
}

.accueil__hero-texte {
  grid-column: 1;
  align-self: center;
  justify-self: center;
  background: #fff;
  max-width: 25rem;
  margin: 1.5rem .75rem .75rem;
}
@media (min-width: 64em) {
  .accueil__hero-texte {
      grid-row: 1;
      padding: 2.25rem 1.5rem;
      margin-top: .75rem;
  }
}

.accueil__hero-image-img {
  display: block;
  margin: 0 auto;
}

.accueil__hero-slogan {
  text-transform: uppercase;
  font-family: "Fjalla One", sans-serif;
  font-size: calc(22 / 16 * 1rem);
  line-height: 1.2;
  margin: 1.5rem 0 0;
  text-align: center;
  text-wrap: balance;
}
@media (min-width: 64em) {
  .accueil__hero-slogan {
      text-align: left;
  }
}
@media (min-width: 80em) {
  .accueil__hero-slogan {
      font-size: calc(28 / 16 * 1rem);
  }
}

.accueil__centre {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.accueil__titre {
  font-family: 'Fjalla One', sans-serif;
  font-size: calc(45 / 16 * 1rem);
  font-weight: normal;
  line-height: 1.1;
  text-transform: uppercase;
}

.accueil__sous-titre {
  font-family: 'Fjalla One', sans-serif;
  font-size: calc(30 / 16 * 1rem);
  font-weight: normal;
  line-height: 1.1;
}

.accueil__sous-sous-titre {
  font-family: 'Fjalla One', sans-serif;
  font-size: calc(24 / 16 * 1rem);
  font-weight: normal;
  line-height: 1.1;
  text-transform: uppercase;
}

.accueil__operation {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  align-items: center;
  justify-content: center;
}

.accueil__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem .75rem;
  justify-content: center;
  align-items: flex-start;
}
.accueil__categories > * {
  max-width: 367px;
}
.accueil__categories--2-categories > * {
  max-width: 556px;
}
.accueil__categories a {
  color: inherit;
}
.accueil__categories h3,
.accueil__categories p {
  margin: .375rem .75rem 0;
  text-align: center;
}
.accueil__categories h3 {
  margin-top: .75rem;
}

in-viewport:defined .accueil__categories > * {
  opacity: 0;
  transform: translateY(6rem);
  will-change: transform, opacity;
}
in-viewport:defined[true] .accueil__categories > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 2.5s cubic-bezier(.22, 1, .36, 1), transform 2s cubic-bezier(.22, 1, .36, 1);
}
in-viewport:defined[true] .accueil__categories > :nth-child(2) {
  transition-delay: .2s;
}
in-viewport:defined[true] .accueil__categories > :nth-child(3) {
  transition-delay: .4s;
}

.accueil__titre3 {
  font-family: 'Fjalla One', sans-serif;
  text-transform: uppercase;
  font-size: 1rem;
}

.accueil__media-box {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem 4.5rem;
  align-items: center;
  justify-content: center;
}
.accueil__media-box-image {
  flex: 1 1 var(--largeur-minimum, 350px);
  max-width: max-content;
}
.accueil__media-box-texte {
  flex-basis: var(--largeur, 30rem);
}

.accueil__branding {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  font-size: 1rem;
}
.accueil__branding > * {
  flex-basis: 23rem;
}

.accueil__bloc {
  padding: 1.5rem;
  background: #F2F2ED;
}
@media (min-width: 48em) {
  .accueil__bloc {
    padding: 3rem;
  }
}

.accueil__branding-titre {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
}

.accueil__offre {
  display: flex;
  flex-wrap: wrap;
  gap: 4.5rem 1.5rem;
  justify-content: center;
}
.accueil__offre > * {
  flex: 1 1 350px;
  max-width: max-content;
}

.accueil__video {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.accueil__citation {
  font-size: 1.5rem;
  font-family: "Fjalla One", sans-serif;
  max-width: 45ch;
  text-wrap: balance;
}
@media (min-width: 48em) {
  .accueil__citation {
    font-size: 2rem;
  }
}