.onglets-chiffres-cles {
position: relative;
} .onglets-chiffres-cles-nav {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-flow: wrap;
gap: var(--wp--preset--spacing--1);
margin-bottom: var(--wp--preset--spacing--4);
}
.onglets-chiffres-cles-btn {
padding: 6px 10px;
border-radius: 10px;
font-family: var(--wp--preset--font-family--inter);
font-size: var(--wp--preset--font-size--3);
font-weight: 900;
text-transform: uppercase;
background-color: transparent;
color: var(--wp--preset--color--custom-blanc);
border: 2px solid var(--wp--preset--color--custom-marron);
outline: none;
cursor: pointer;
transition: 0.3s;
}
.onglets-chiffres-cles-btn:hover:not(.active) {
background-color: var(--wp--preset--color--custom-marron);
color: var(--wp--preset--color--custom-blanc);
}
.onglets-chiffres-cles-btn.active {
background-color: var(--wp--preset--color--custom-marron);
color: var(--wp--preset--color--custom-blanc);
opacity: 1;
cursor: default;
} .onglets-chiffres-cles-wrapper {
position: relative;
min-height: 360px;
} .onglets-chiffres-cles-contenu {
display: none;
animation: fadeIn 0.3s ease-in-out;
}
.onglets-chiffres-cles-contenu.active {
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .onglets-chiffres-cles-inner {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--2);
align-items: stretch;
} .onglets-chiffres-cles-container {
display: flex;
justify-content: center;
align-items: center;
flex-flow: wrap;
gap: var(--wp--preset--spacing--2);
margin: 0 auto;
width: 100%;
} .onglets-chiffres-cles-item {
position: relative;
width: calc(33.33% - 16px);
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--3);
transition: all 0.3s ease;
}
.onglets-chiffres-cles-item::after {
content: '';
position: absolute;
top: 0;
right: -1rem;
width: 2px;
height: 100%;
background-color: var(--wp--preset--color--custom-marron);
}
.onglets-chiffres-cles-container .onglets-chiffres-cles-item:last-child::after,
.onglets-chiffres-cles-container .onglets-chiffres-cles-item:nth-child(3n)::after {
display: none;
} .onglets-chiffres-cles-header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 0.5rem;
position: relative;
}
.onglets-chiffres-cles-numero {
font-size: var(--wp--preset--font-size--6);
font-weight: 900;
line-height: 1;
min-width: 120px;
text-align: center;
position: relative;
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease;
}
.onglets-chiffres-cles-numero.animate {
opacity: 1;
transform: translateY(0);
}
.onglets-chiffres-cles-texte {
font-size: var(--wp--preset--font-size--4);
font-weight: 700;
text-align: center;
color: var(--wp--preset--color--custom-marron);
} .onglets-chiffres-cles-contenu-general * {
margin: var(--wp--preset--spacing--1) 0;
}
.onglets-chiffres-cles-contenu-general *:last-child {
margin-bottom: 0;
}
.onglets-chiffres-cles-contenu-general *:first-child {
margin-top: 0;
}
.onglets-chiffres-cles-contenu-general h2,
.onglets-chiffres-cles-contenu-general h3,
.onglets-chiffres-cles-contenu-general h4,
.onglets-chiffres-cles-contenu-general h5,
.onglets-chiffres-cles-contenu-general h6 {
text-transform: uppercase;
color: var(--wp--preset--color--custom-marron);
font-family: var(--wp--preset--font-family--inter);
}
.onglets-chiffres-cles-contenu-general h3 {
font-size: var(--wp--preset--font-size--6);
} .onglets-chiffres-cles-navigation {
display: flex;
justify-content: flex-end;
}
.onglets-chiffres-cles-nav-btn {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: transparent;
border: none;
outline: none;
width: 32px;
height: 32px;
transition: all 0.3s ease;
}
.onglets-chiffres-cles-nav-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
}
.onglets-chiffres-cles-nav-arrow {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}
.onglets-chiffres-cles-nav-prev .onglets-chiffres-cles-nav-arrow {
transform: rotate(180deg);
}
.onglets-chiffres-cles-nav-btn:hover .onglets-chiffres-cles-nav-arrow {
transform: scale(1.2);
}
.onglets-chiffres-cles-nav-prev:hover .onglets-chiffres-cles-nav-arrow {
transform: rotate(180deg) scale(1.2);
} .onglets-chiffres-cles-item {
opacity: 0;
transform: translateY(30px);
animation: slideInUp 0.6s ease forwards;
}
.onglets-chiffres-cles-item:nth-child(2) {
animation-delay: 0.1s;
}
.onglets-chiffres-cles-item:nth-child(3) {
animation-delay: 0.2s;
}
.onglets-chiffres-cles-item:nth-child(4) {
animation-delay: 0.3s;
}
.onglets-chiffres-cles-item:nth-child(5) {
animation-delay: 0.4s;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .onglets-chiffres-cles-numero.animate {
animation: pulseNumber 0.8s ease;
}
@keyframes pulseNumber {
0% {
transform: translateY(20px) scale(0.8);
opacity: 0;
}
50% {
transform: translateY(0) scale(1.1);
opacity: 0.8;
}
100% {
transform: translateY(0) scale(1);
opacity: 1;
}
} .onglets-chiffres-cles-contenu.fade-out {
animation: fadeOut 0.2s ease-in-out;
}
@keyframes fadeOut {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-10px);
}
}