/*Homepage*/

.hero-background {
	background: var(--bloc-background);
	position: relative;	
}

.hero-background__content {
	max-width: var(--max-content);
	margin: auto;
	padding: 0 var(--padding-content-inline);
	display: grid;
	grid-template-areas: "titre"
		"soustexte"
		"image"
		"cta";
	column-gap: var(--grid-gap);
	row-gap: calc(var(--grid-gap) / 4);
}

.hero-background__titre {
  grid-area: titre;
	margin: var(--margin-block-secondary) 0 0 0;
}

.hero-background__titre h1 {
  /* text-wrap: balance; */
  margin-block: 0 !important;
	color: #501C02;
  font-size: 2.25em;
	font-weight: var(--font-weight-surgras);
  line-height: 1.15;
}

.hero-background__sous-texte {
	grid-area: soustexte;
	font-size: var(--font-size-h4);
  
  > * {
    max-inline-size: 75ch;  
  }
}

.hero-background__image,
.hero-background__video {
	grid-area: image;
	align-self: center;
}

.hero-background__video > * {
  inline-size: 100%;
  /*aspect-ratio: 16 / 9;*/
  background: grey;
  border-radius: var(--border-radius-secondary);
}

.hero-background__image img {
	width: 100%;
	height: 100%;
}

.hero-background__cta {
	grid-area: cta;
	margin: var(--margin-block-secondary) 0;
}

.CTA__hero_homepage {
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-surgras);
	color: hsl(var(--card-timeline-background-start) / .9);
	letter-spacing: .025rem;
  box-shadow: inset 0 0 2px oklch(100% 0 0 / .5), 0 0 2px oklch(0% 0 0 / .12)
	transition: color 200ms ease;
}

.CTA__hero_homepage:is(:hover, :focus-visible) {
       color: hsl(var(--card-timeline-background-start) / 1)
}
           
.CTA__hero_homepage:active {
       color: hsl(var(--card-timeline-background-start) / .5)
}

@media (min-width: 801px) {
	.hero-background__content {
		grid-template-columns: 0.9fr 1fr;
		grid-template-areas: "titre image"
			"soustexte image"
			"cta image";
	}
}