.steps-container {
max-width: 900px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 en 3 */
gap: 32px 16px;
position: relative;
}
.step-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
}
.step-icon {
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid var(--app-blue);
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
color: var(--app-blue);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
z-index: 2;
}
.step-item:hover .step-icon {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(29, 78, 216, 0.12);
}
.step-title {
margin-top: 14px;
font-size: 16px;
font-weight: 800;
color: var(--app-blue);
max-width: 180px;
line-height: 1.3;
font-family: 'Montserrat-Medium', sans-serif;
}
.step-item:not(:nth-child(3n))::after {
content: '\f105';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
right: -12px;
top: 38px;
font-size: 18px;
color: var(--app-blue);
}
.step-item.highlight .step-icon {
border-color: var(--app-orange);
color: var(--app-orange);
}
.step-item.highlight:hover .step-icon {
box-shadow: 0 8px 20px rgba(249, 115, 22, 0.15);
}
@media (max-width: 768px) {
.steps-container {
grid-template-columns: 1fr;
gap: 28px;
max-width: 320px;
}
.step-item:not(:nth-child(3n))::after {
display: none;
}
.step-item:not(:last-child)::before {
content: '\f107';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
bottom: -24px;
font-size: 18px;
color: var(--blue-border);
}
.step-item.highlight:not(:last-child)::before {
color: var(--orange-border);
}
}