.onglets-contenu {
position: relative;
} .onglets-nav {
display: flex;
justify-content: center;
align-items: center;
flex-flow: wrap;
gap: var(--wp--preset--spacing--1);
margin-bottom: var(--wp--preset--spacing--4);
}
.onglet-btn {
padding: 8px 12px;
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: var(--wp--preset--color--custom-bleu);
color: var(--wp--preset--color--custom-blanc);
border: 0;
outline: none;
cursor: pointer;
transition: 0.3s;
}
.onglet-btn:hover:not(.active) {
background-color: var(--wp--preset--color--custom-blanc);
color: var(--wp--preset--color--custom-bleu);
}
.onglet-btn.active {
background-color: var(--wp--preset--color--custom-blanc);
color: var(--wp--preset--color--custom-bleu);
opacity: 1;
cursor: default;
} .onglets-contenu-wrapper {
position: relative;
min-height: 400px;
} .onglet-contenu {
display: none;
animation: fadeIn 0.3s ease-in-out;
}
.onglet-contenu.active {
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .onglet-inner {
display: flex;
justify-content: flex-start;
gap: var(--wp--preset--spacing--7);
align-items: start;
} .onglet-texte {
width: calc(50% - var(--wp--preset--spacing--7));
}
.onglet-titre {
margin-top: var(--wp--preset--spacing--1);
margin-bottom: var(--wp--preset--spacing--2);
text-transform: uppercase;
}
.onglet-description {
margin-top: var(--wp--preset--spacing--1);
}
.onglet-description * {
margin: var(--wp--preset--spacing--1) 0;
}
.onglet-description h2,
.onglet-description h3,
.onglet-description h4,
.onglet-description h5,
.onglet-description h6 {
text-transform: uppercase;
}
h2.onglet-titre {
font-size: var(--wp--preset--font-size--7);
}
.onglet-description h3 {
font-size: var(--wp--preset--font-size--4);
}
.onglet-description *:last-child {
margin-bottom: 0;
} .onglet-media {
display: flex;
flex-direction: column;
width: 50%;
gap: var(--wp--preset--spacing--1);
} .onglet-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--wp--preset--spacing--2);
} .onglet-image-wrapper {
position: relative;
overflow: hidden;
border-radius: 50px;
transition: transform 0.3s ease;
}
.onglet-image {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease;
} .onglet-bouton-wrapper {
display: flex;
justify-content: flex-start;
flex: 1;
}
.onglet-bouton-suivant {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-size: var(--wp--preset--font-size--4);
font-weight: 700;
color: var(--wp--preset--color--custom-noir);
text-transform: uppercase;
appearance: none;
border: none;
background: transparent;
cursor: pointer;
padding: 0;
}
.onglet-bouton-suivant::after {
content: '';
position: absolute;
top: calc(100% + 8px);
left: 0;
width: calc(100% - 32px);
height: 2px;
background-color: var(--wp--preset--color--custom-marron);
}
.bouton-fleche {
width: 24px;
height: 17px;
transition: transform 0.3s ease;
}
.onglet-bouton-suivant:hover .bouton-fleche {
transform: translateX(4px);
} .onglet-navigation {
display: flex;
justify-content: flex-start;
gap: 0.5rem;
}
.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;
}
.nav-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
}
.nav-btn:disabled:hover {
background: var(--wp--preset--color--custom-beige-2);
border-color: var(--wp--preset--color--custom-beige-1);
}
.nav-arrow {
width: 32px;
height: 32px;
transition: transform 0.3s ease;
}
.nav-prev .nav-arrow {
transform: rotate(180deg);
}
.nav-btn:hover .nav-arrow {
transform: scale(1.2);
}
.nav-prev:hover .nav-arrow {
transform: rotate(180deg) scale(1.2);
} .onglet-contenu.fade-out {
animation: fadeOut 0.2s ease-in-out;
}
@keyframes fadeOut {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-10px);
}
} @media (max-width: 768px) { .onglets-nav {
justify-content: flex-start;
gap: 0.5rem;
margin-bottom: var(--wp--preset--spacing--3);
}
.onglet-btn {
padding: 6px 10px;
font-size: var(--wp--preset--font-size--1);
} .onglets-contenu-wrapper {
min-height: 300px;
} .onglet-inner {
flex-direction: column;
gap: var(--wp--preset--spacing--4);
} .onglet-texte {
width: 100%;
}
.onglet-titre {
margin-top: 0;
margin-bottom: var(--wp--preset--spacing--1);
} .onglet-media {
width: 100%;
gap: var(--wp--preset--spacing--2);
} .onglet-actions {
flex-direction: column;
align-items: flex-start;
gap: var(--wp--preset--spacing--1);
} .onglet-navigation {
width: 100%;
justify-content: flex-end;
}
}