.timeline-annees {
width: 100%;
--tlan-font-family: var(--wp--preset--font-family--cera-pro, inherit);
--tlan-tab-fg: var(--wp--preset--color--default, #1a1a1a);
--tlan-tab-fg-muted: color-mix(in srgb, var(--tlan-tab-fg) 55%, transparent);
--tlan-tab-active: var(--wp--preset--color--default, currentColor);
--tlan-line: color-mix(in srgb, var(--tlan-tab-fg) 18%, transparent);
}
.timeline-annees__placeholder {
margin: 0;
padding: 1rem;
font-style: italic;
opacity: 0.85;
} .timeline-annees__nav {
margin-bottom: var(--wp--preset--spacing--3, 28px);
}
.timeline-annees__tabs {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 0;
position: relative;
}
.timeline-annees__tabs-item {
display: flex;
}
.timeline-annees__tab {
position: relative;
margin: 0;
padding: 0.65rem 1.1rem 0.85rem;
border: none;
border-bottom: 3px solid transparent;
background: transparent;
cursor: pointer;
font-family: var(--tlan-font-family);
font-size: var(--wp--preset--font-size--6, 1.25rem);
font-weight: 700;
line-height: 1.2;
color: var(--tlan-tab-fg-muted);
transition: color 0.2s ease, border-color 0.2s ease;
z-index: 1;
}
.timeline-annees__tab:hover,
.timeline-annees__tab:focus-visible {
color: var(--tlan-tab-fg);
outline: none;
}
.timeline-annees__tab:focus-visible {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--tlan-tab-active) 35%, transparent);
}
.timeline-annees__tab.is-active {
color: var(--tlan-tab-fg);
border-bottom-color: var(--tlan-tab-active);
} .timeline-annees__panels {
position: relative;
}
.timeline-annees__panel.is-active {
animation: tlanFadeIn 0.35s ease both;
}
@keyframes tlanFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.timeline-annees__panel.is-active {
animation: none !important;
}
}
.timeline-annees__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--wp--preset--spacing--4, 32px);
align-items: start;
}
.timeline-annees__wysiwyg {
font-family: var(--tlan-font-family);
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--2, 16px);
}
.timeline-annees__wysiwyg > :first-child {
margin-top: 0;
}
.timeline-annees__wysiwyg > :last-child {
margin-bottom: 0;
}
.timeline-annees__wysiwyg * {
margin-block: 0;
}
.timeline-annees__wysiwyg h2,
.timeline-annees__wysiwyg h3,
.timeline-annees__wysiwyg h4 {
line-height: 1.15;
}
.timeline-annees__media {
position: relative;
aspect-ratio: 3 / 2;
overflow: hidden;
background: color-mix(in srgb, var(--tlan-tab-fg) 6%, transparent);
}
.timeline-annees__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
} .timeline-annees__steps {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--wp--preset--spacing--3, 24px);
padding-top: var(--wp--preset--spacing--3, 24px);
}
.timeline-annees__step {
display: inline-flex;
align-items: center;
gap: 0.4em;
margin: 0;
padding: 0;
border: none;
background: none;
cursor: pointer;
font-family: var(--tlan-font-family);
font-size: var(--wp--preset--font-size--5, 1.0625rem);
font-weight: 700;
line-height: 1.2;
color: var(--tlan-tab-fg);
text-decoration: none;
transition: color 0.2s ease, opacity 0.2s ease;
}
.timeline-annees__step:hover,
.timeline-annees__step:focus-visible {
color: var(--tlan-tab-active);
opacity: 1;
}
.timeline-annees__step:focus-visible {
outline: none;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--tlan-tab-active) 35%, transparent);
}
.timeline-annees__step-arrow {
font-size: 1.15em;
line-height: 1;
}
.timeline-annees__step--next {
flex-direction: row;
}
.timeline-annees__step--prev {
flex-direction: row;
}
.timeline-annees__step-placeholder {
flex: 0 0 1px;
min-width: 1px;
min-height: 1px;
visibility: hidden;
pointer-events: none;
}
@media (max-width: 782px) {
.timeline-annees__grid {
grid-template-columns: 1fr;
gap: var(--wp--preset--spacing--3, 24px);
}
.timeline-annees__nav {
margin-bottom: var(--wp--preset--spacing--3, 20px);
}
.timeline-annees__tabs {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
padding-bottom: 2px;
}
.timeline-annees__tab {
white-space: nowrap;
flex: 0 0 auto;
}
}