.onglets-image-lien {
position: relative;
} .onglets-nav {
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--2);
margin-bottom: var(--wp--preset--spacing--5);
} .onglet-btn {
padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
font-family: var(--wp--preset--font-family--inter);
font-size: var(--wp--preset--font-size--4);
font-weight: 800;
text-transform: uppercase;
background-color: var(--wp--preset--color--custom-noir);
color: var(--wp--preset--color--custom-blanc);
border: none;
outline: none;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 0 0 30px 30px;
}
.onglet-btn:hover {
padding-top: var(--wp--preset--spacing--4);
background-color: var(--wp--preset--color--custom-vert);
}
.onglet-btn.active {
padding-top: var(--wp--preset--spacing--4);
background-color: var(--wp--preset--color--custom-vert);
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-contenu.fade-out {
animation: fadeOut 0.2s ease-in-out;
}
@keyframes fadeOut {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-10px);
}
} .onglet-inner {
display: flex;
justify-content: space-between;
gap: var(--wp--preset--spacing--5);
align-items: flex-start;
} .onglet-texte {
flex: 1;
max-width: 50%;
}
.onglet-description *:not(li) {
margin: var(--wp--preset--spacing--2) 0;
}
.onglet-description li {
line-height: 1.5;
}
.onglet-description *:first-child {
margin-top: 0;
}
.onglet-description *:last-child {
margin-bottom: 0;
}
.onglet-description h2,
.onglet-description h3,
.onglet-description h4,
.onglet-description h5,
.onglet-description h6 {
text-transform: uppercase;
}
.onglet-description h2 {
font-size: var(--wp--preset--font-size--7);
}
.onglet-description h3 {
font-size: var(--wp--preset--font-size--5);
margin-top: var(--wp--preset--spacing--3);
margin-bottom: var(--wp--preset--spacing--1);
}
.onglet-description p,
.onglet-description ul,
.onglet-description ol,
.onglet-description h2,
.onglet-description h3,
.onglet-description h4,
.onglet-description h5,
.onglet-description h6 {
margin-top: var(--wp--preset--spacing--1);
margin-bottom: 0;
}
.onglet-description ul {
margin-top: 0.5rem;
} .onglet-media {
flex: 1;
max-width: 50%;
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--3);
} .onglet-image-wrapper {
position: relative;
overflow: hidden;
border-radius: var(--wp--preset--spacing--3);
}
.onglet-image-link {
display: block;
transition: transform 0.3s ease;
}
.onglet-image-link:hover {
transform: scale(1.02);
}
.onglet-image {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease;
} .onglet-lien-wrapper {
display: flex;
justify-content: flex-start;
}
.onglet-lien {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--wp--preset--font-family--inter);
font-size: var(--wp--preset--font-size--4);
font-weight: 800;
color: var(--wp--preset--color--custom-noir);
text-transform: uppercase;
transition: all 0.3s ease;
line-height: 1;
}
.onglet-lien:hover {
color: var(--wp--preset--color--custom-vert);
transform: translateX(4px);
}
.onglet-lien figure {
margin: 0;
} @media (max-width: 768px) { .onglets-nav {
gap: var(--wp--preset--spacing--1);
margin-bottom: var(--wp--preset--spacing--3);
padding-top: var(--wp--preset--spacing--3);
}
.onglet-btn {
padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--1);
font-size: var(--wp--preset--font-size--1);
border-radius: 20px
}
.onglet-btn:hover {
padding-top: var(--wp--preset--spacing--1);
}
.onglet-btn.active {
padding-top: var(--wp--preset--spacing--1);
} .onglets-contenu-wrapper {
min-height: 300px;
} .onglet-inner {
flex-direction: column;
gap: var(--wp--preset--spacing--4);
} .onglet-texte {
max-width: 100%;
} .onglet-media {
max-width: 100%;
}
}