.agence-diagnostic {
position: relative;
z-index: 5;
background-color: var(--color-black);
padding-top: var(--space-4xl);
padding-bottom: calc(var(--space-4xl) + var(--space-lg));
}
.agence-diagnostic__inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-sm);
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--header-padding-x);
}
.agence-diagnostic__pretitle {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 0 var(--space-xs);
}
.agence-diagnostic__pretitle-puce {
flex-shrink: 0;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: var(--color-primary-on-dark);
}
.agence-diagnostic__pretitle-texte {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: var(--font-weight-medium);
line-height: 1;
text-transform: uppercase;
color: var(--color-white);
}
.agence-diagnostic__titre {
max-width: 13em;
margin: 0;
font-family: var(--font-display);
font-weight: var(--font-weight-book);
font-size: var(--text-4xl);
line-height: 1;
letter-spacing: 0.02em;
color: var(--color-white);
}
.agence-diagnostic__texte {
max-width: 48ch;
margin: 0;
font-family: var(--font-body);
font-size: var(--text-md);
line-height: var(--leading-normal);
color: var(--color-gray-400);
}
.agence-diagnostic__bouton {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-top: var(--space-md);
padding: var(--space-sm) var(--space-xl);
border-radius: var(--radius-full);
background-color: var(--color-white);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--color-black);
text-decoration: none;
transition: background-color var(--duration-fast) var(--easing-default);
}
@media (hover: hover) {
.agence-diagnostic__bouton:hover {
background-color: var(--color-gray-100);
}
}
.agence-diagnostic__bouton:focus-visible {
outline: 2px solid var(--color-primary-on-dark);
outline-offset: 3px;
}
@media (max-width: 767px) {
.agence-diagnostic {
padding-top: var(--space-2xl);
padding-bottom: var(--space-3xl);
}
.agence-diagnostic__inner {
padding-inline: var(--space-sm);
}
.agence-diagnostic__pretitle-texte {
font-size: var(--text-sm);
}
.agence-diagnostic__pretitle-puce {
width: 5px;
height: 5px;
}
.agence-diagnostic__titre {
font-size: var(--text-3xl);
}
.agence-diagnostic__texte {
font-size: var(--text-base);
}
}