.contactez-nous {
--contactez-nous-size: clamp(140px, 18vw, 205px);
position: relative;
display: inline-grid;
place-items: center;
width: var(--contactez-nous-size);
height: var(--contactez-nous-size);
flex-shrink: 0;
text-decoration: none;
isolation: isolate;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.contactez-nous__ring,
.contactez-nous__arrow {
grid-area: 1 / 1;
display: block;
pointer-events: none;
}
.contactez-nous__ring {
width: 100%;
height: 100%;
will-change: transform;
}
.contactez-nous__ring img {
display: block;
width: 100%;
height: 100%;
max-width: none;
}
.contactez-nous__arrow {
width: 33%;
z-index: 1;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.contactez-nous__arrow img {
display: block;
width: 100%;
height: auto;
max-width: none;
}
.contactez-nous:hover,
.contactez-nous:focus-visible {
outline: none;
transform: scale(1.04);
}
.contactez-nous:hover .contactez-nous__arrow,
.contactez-nous:focus-visible .contactez-nous__arrow {
transform: rotate(-12deg);
}
.contactez-nous:focus-visible::after {
content: '';
position: absolute;
inset: -6px;
border: 1px solid currentColor;
border-radius: 50%;
opacity: 0.5;
pointer-events: none;
}
@keyframes contactez-nous-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.contactez-nous__ring {
animation: none !important;
}
.contactez-nous:hover .contactez-nous__arrow,
.contactez-nous:focus-visible .contactez-nous__arrow {
transform: none;
}
}
.contactez-nous.is-editor .contactez-nous__ring {
animation: contactez-nous-spin 36s linear infinite;
}