.schema-bulles {
width: 100%;
}
.schema-bulles-container {
display: flex;
justify-content: center;
align-items: center;
gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
padding-bottom: var(--wp--preset--spacing--4);
}
.schema-bulle {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
max-width: 200px;
aspect-ratio: 1/1;
padding: var(--wp--preset--spacing--2);
text-align: center;
border-radius: 100%;
color: var(--wp--preset--color--custom-blanc);
font-size: var(--wp--preset--font-size--3);
font-weight: 600;
}
.schema-bulles-container .schema-bulle:nth-child(2n + 1) {
background-color: var(--wp--preset--color--custom-beige);
}
.schema-bulles-container .schema-bulle:nth-child(2n + 1)::after {
content: '';
position: absolute;
z-index: -1;
top: 75%;
left: 95%;
width: 100px;
height: 4px;
background-image: url(//www.smoov-design.fr/wp-content/themes/smoov/assets/chart/ligne-pointilles.svg);
background-size: 100px;
background-repeat: no-repeat;
background-position: center;
transform: rotate(25deg);
}
.schema-bulles-container .schema-bulle:nth-child(2n + 2) {
background-color: var(--wp--preset--color--custom-noir);
transform: translateY(48px);
}
.schema-bulles-container .schema-bulle:nth-child(2n + 2)::after {
content: '';
position: absolute;
z-index: -1;
top: 40%;
left: 95%;
width: 100px;
height: 4px;
background-image: url(//www.smoov-design.fr/wp-content/themes/smoov/assets/chart/ligne-pointilles.svg);
background-size: 100px;
background-repeat: no-repeat;
background-position: center;
transform: rotate(-25deg);
}
.schema-bulles-container .schema-bulle:last-child::after {
display: none;
}
@media (max-width: 768px) {
.schema-bulles-container {
flex-flow: row wrap;
gap: var(--wp--preset--spacing--2);
padding-bottom: 0;
}
.schema-bulle {
max-width: 170px;
}
.schema-bulles-container .schema-bulle:nth-child(2n + 2) {
transform: translateY(0);
}
.schema-bulles-container .schema-bulle:nth-child(2n + 1)::after {
display: none;
}
.schema-bulles-container .schema-bulle:nth-child(2n + 2)::after {
display: none;
}
}