/**
 * @file _tokens.scss
 * @description Variables de design (couleurs, typo, espacements, breakpoints)
 */
.accueil {
  display: grid;
  gap: 2rem;
  padding-block: 1rem 4rem;
}
@media (min-width: 768px) {
  .accueil {
    gap: 4rem;
    padding-block: 4rem;
  }
}
.accueil__hero {
  padding-right: 0;
  width: 100%;
}
.accueil__hero h1 {
  line-height: 1.2;
  word-break: keep-all;
}
.accueil__hero .photo-bg {
  background-image: url("/assets/images/accueil-hero-photo.png");
  background-position: top 0 right -30px;
  background-repeat: no-repeat;
  background-size: clamp(275px, 85%, 338px);
  padding-top: 2rem;
  width: 100%;
}
@media (min-width: 768px) {
  .accueil__hero .photo-bg {
    background-position: top right 10vw;
  }
}
.accueil__hero .photo-bg__content {
  padding-right: 1rem;
}
.accueil__hero .photo-bg p {
  max-width: clamp(8ch, 38vw, 15ch);
  height: 6.5em;
  padding-bottom: 1rem;
}
.accueil__hero .callout {
  margin-top: 4rem;
  background-color: #F48C34;
  color: #ffffff;
  padding: 1rem;
  border-radius: 5px;
  max-width: max-content;
}
.accueil__hero .callout h2 {
  margin-bottom: 0.5rem;
}
.accueil__hero .callout ul {
  list-style: "* ";
  padding-left: 1rem;
}
.accueil__hero .callout ul li {
  margin-bottom: 0.5rem;
}
.accueil__cta1 {
  padding-inline: 2rem;
  display: grid;
  justify-items: center;
  gap: 2rem;
}