.bloc-timelines-01 {
width: 100%;
box-sizing: border-box;
padding: 80px var(--section-padding-x, 64px);
background-color: #F3F4F6;
font-family: inherit;
}
.bloc-timelines-01__container {
max-width: var(--section-max-width, 1312px);
margin: 0 auto;
padding: 64px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 80px;
align-items: flex-start;
background-color: #FFFFFF;
border-radius: 24px;
} .bloc-timelines-01__intro {
flex: 0 0 auto;
width: clamp(280px, 38%, 576px);
display: flex;
flex-direction: column;
align-items: flex-start;
position: sticky;
top: 100px;
align-self: flex-start;
}
.bloc-timelines-01__intro--wrapped {
padding: var(--bloc-timelines-01-intro-wrapper-padding, 24px);
}
.bloc-timelines-01__intro--fullwidth {
flex: 0 0 auto;
width: clamp(280px, 38%, 576px);
position: sticky;
top: 100px;
}
.bloc-timelines-01__tagline {
font-family: 'Inter Tight', sans-serif;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: inherit;
line-height: 1.5;
margin: 0 0 16px;
}
.bloc-timelines-01__headline {
font-family: 'Inter Tight', sans-serif;
font-size: 40px;
font-weight: 500;
line-height: 1.1;
color: inherit;
margin: 0 0 16px;
}
.bloc-timelines-01__description {
font-family: 'Figtree', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #5A5E60;
margin: 0 0 32px;
} .bloc-timelines-01 .btn {
border-radius: 9999px;
}
.bloc-timelines-01--square-button .btn,
.bloc-timelines-01--square-button .bloc-timelines-01__button {
border-radius: 0;
}
.bloc-timelines-01__button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
height: 48px;
font-size: 16px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
border-radius: 9999px;
}
.bloc-timelines-01__button--outline {
color: inherit;
background-color: transparent;
border: 1px solid currentColor;
}
.bloc-timelines-01__button--outline:hover {
opacity: 0.8;
} .bloc-timelines-01__timeline-wrapper {
flex: 1;
min-width: 0;
}
.bloc-timelines-01--ccc-page {
border-radius: 24px;
overflow: hidden;
}
@media (min-width: 993px) {
.bloc-timelines-01--ccc-page .bloc-timelines-01__timeline-wrapper {
flex: 0 1 auto;
max-width: 440px;
width: 100%;
}
.bloc-timelines-01--ccc-page .bloc-timelines-01__intro,
.bloc-timelines-01--ccc-page .bloc-timelines-01__intro--fullwidth {
width: clamp(320px, 52%, 720px);
}
} .bloc-timelines-01__timeline-line {
display: none;
} .bloc-timelines-01__cards {
display: flex;
flex-direction: column;
gap: 0;
min-width: 0;
} .bloc-timelines-01__cards::before {
content: none;
} .bloc-timelines-01__timeline-row {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 32px;
min-height: 0;
} .bloc-timelines-01__step-indicator {
flex: 0 0 56px;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
min-height: 0;
}
.bloc-timelines-01__step-divider {
flex: 1;
width: 1px;
background-color: #CFD1D2;
min-height: 16px;
} .bloc-timelines-01__timeline-row:first-child .bloc-timelines-01__step-divider:first-child {
background-color: transparent;
} .bloc-timelines-01__timeline-row:last-child .bloc-timelines-01__step-divider:last-child {
background-color: transparent;
}
.bloc-timelines-01__step-number {
flex: 0 0 auto;
font-family: 'Inter', sans-serif;
font-size: 40px;
font-weight: 500;
color: #CFD1D2;
line-height: 1;
padding: 12px 0;
white-space: nowrap;
} .bloc-timelines-01__card {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column !important;
background-color: #F7F6F2;
border-radius: 16px !important;
overflow: hidden;
border: none !important;
box-shadow: none !important;
margin-bottom: 0;
} .bloc-timelines-01__card::before,
.bloc-timelines-01__card::after {
content: none !important;
display: none !important;
} .bloc-timelines-01__card--media-top {
flex-direction: column-reverse !important;
} .bloc-timelines-01__card-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
padding: 32px;
justify-content: flex-start;
} .bloc-timelines-01__card-year,
.bloc-timelines-01__card-number-wrap {
display: none !important;
} .bloc-timelines-01__card-number-wrap--wrapped {
padding: var(--bloc-timelines-01-number-wrapper-padding, 8px 12px);
} .bloc-timelines-01__card-icon {
width: 48px;
height: 48px;
color: inherit;
}
.bloc-timelines-01__card-icon svg {
width: 100%;
height: 100%;
} .bloc-timelines-01__card-chip {
display: inline-block;
} .bloc-timelines-01__card-title {
font-family: 'Inter Tight', sans-serif;
font-size: 24px;
font-weight: 600;
line-height: 1.3;
color: #232425;
margin: 0;
} .bloc-timelines-01__card-description {
font-family: 'Figtree', sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.6;
color: #5A5E60;
margin: 0;
} .bloc-timelines-01__card-details {
display: flex;
flex-direction: column;
gap: 8px;
}
.bloc-timelines-01__detail-item {
display: flex;
align-items: flex-start;
gap: 8px;
}
.bloc-timelines-01__detail-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
color: inherit;
}
.bloc-timelines-01__detail-text {
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: inherit;
} .bloc-timelines-01__cta-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 500;
color: #3C0314;
text-decoration: none;
width: fit-content;
transition: color 0.2s ease;
}
.bloc-timelines-01__cta-link:hover {
color: #2a020e;
}
.bloc-timelines-01__cta-arrow {
width: 20px;
height: 20px;
transition: transform 0.2s ease;
}
.bloc-timelines-01__cta-link:hover .bloc-timelines-01__cta-arrow {
transform: translateX(4px);
} .bloc-timelines-01__card-image {
width: 100%;
min-width: 0;
flex-shrink: 0;
aspect-ratio: 16 / 10;
background-color: transparent !important;
border-radius: 0 0 16px 16px;
overflow: hidden;
}
.bloc-timelines-01__card-img,
.bloc-timelines-01__card-image img,
.bloc-timelines-01__card-image .usine-image-placeholder {
background-color: #f8dc73;
}
.bloc-timelines-01__card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
} .bloc-timelines-01__card:not(.bloc-timelines-01__card--media-top) .bloc-timelines-01__card-image {
margin-bottom: 30px;
box-sizing: border-box;
} .bloc-timelines-01--ccc-page .bloc-timelines-01__card:not(.bloc-timelines-01__card--media-top) .bloc-timelines-01__card-image {
margin-bottom: 0 !important;
}
.bloc-timelines-01__image-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #999;
}
.bloc-timelines-01__image-placeholder svg {
width: 80px;
height: 80px;
opacity: 0.5;
} .bloc-timelines-01--home-process .bloc-timelines-01__container {
background-color: #FFFFFF !important;
border-radius: 24px !important;
padding: 64px !important;
}
.bloc-timelines-01--home-process .bloc-timelines-01__card {
background-color: #F7F6F2 !important;
border-radius: 16px !important;
border: none !important;
box-shadow: none !important;
}
.bloc-timelines-01--home-process .bloc-timelines-01__card-content {
padding: 32px !important;
}
.bloc-timelines-01--home-process .bloc-timelines-01__card:not(.bloc-timelines-01__card--media-top) .bloc-timelines-01__card-image {
margin-bottom: 0 !important;
} .bloc-timelines-01__card--media-top .bloc-timelines-01__card-image {
border-radius: 16px 16px 0 0;
}
@media (max-width: 992px) {
.bloc-timelines-01--home-process .bloc-timelines-01__container {
padding: 32px !important;
border-radius: 16px !important;
}
}
@media (max-width: 768px) {
.bloc-timelines-01--home-process .bloc-timelines-01__container {
padding: 24px !important;
border-radius: 12px !important;
}
.bloc-timelines-01--home-process .bloc-timelines-01__card-content {
padding: 20px !important;
} .bloc-timelines-01__card-image {
border-radius: 0 0 12px 12px;
}
.bloc-timelines-01__card--media-top .bloc-timelines-01__card-image {
border-radius: 12px 12px 0 0;
}
.bloc-timelines-01__card:not(.bloc-timelines-01__card--media-top) .bloc-timelines-01__card-image {
margin-bottom: 4px;
}
} .bloc-timelines-01--single-rail .bloc-timelines-01__container {
background-color: transparent;
border-radius: 0;
padding: 0;
}
.bloc-timelines-01--single-rail .bloc-timelines-01__step-divider {
background-color: rgba(255, 255, 255, 0.25);
}
.bloc-timelines-01--single-rail .bloc-timelines-01__step-number {
color: rgba(255, 255, 255, 0.4);
}
.bloc-timelines-01--single-rail .bloc-timelines-01__card {
background-color: transparent;
border-color: transparent;
}
.bloc-timelines-01--single-rail .bloc-timelines-01__card-title {
color: #ffffff;
}
.bloc-timelines-01--single-rail .bloc-timelines-01__card-description {
color: rgba(255, 255, 255, 0.75);
}
.bloc-timelines-01--single-rail .bloc-timelines-01__detail-text {
color: rgba(255, 255, 255, 0.75);
}
.bloc-timelines-01--single-rail .bloc-timelines-01__cta-link {
color: #ffffff;
} @media (max-width: 1200px) {
.bloc-timelines-01 {
padding: 64px var(--section-padding-x, 40px);
}
.bloc-timelines-01__container {
padding: 48px;
gap: 48px;
}
.bloc-timelines-01__intro {
width: clamp(240px, 35%, 400px);
}
.bloc-timelines-01__headline {
font-size: 36px;
}
.bloc-timelines-01__step-number {
font-size: 32px;
}
.bloc-timelines-01__step-indicator {
flex: 0 0 48px;
}
.bloc-timelines-01__timeline-row {
gap: 24px;
}
} @media (max-width: 992px) {
.bloc-timelines-01__container {
flex-direction: column;
gap: 32px;
}
.bloc-timelines-01__intro,
.bloc-timelines-01__intro--fullwidth {
flex: none;
width: 100%;
max-width: 100%;
position: static;
}
.bloc-timelines-01 {
padding: 48px var(--section-padding-x, 32px);
}
.bloc-timelines-01__container {
padding: 32px;
border-radius: 16px;
}
.bloc-timelines-01__timeline-row {
gap: 20px;
}
.bloc-timelines-01__step-indicator {
flex: 0 0 40px;
}
.bloc-timelines-01__step-number {
font-size: 28px;
}
.bloc-timelines-01__card-content {
padding: 24px;
}
} @media (max-width: 768px) {
.bloc-timelines-01 {
padding: 32px var(--section-padding-x);
}
.bloc-timelines-01__container {
padding: 24px;
border-radius: 12px;
gap: 24px;
}
.bloc-timelines-01__headline {
font-size: 32px;
}
.bloc-timelines-01__description {
font-size: 15px;
margin-bottom: 24px;
}
.bloc-timelines-01__timeline-row {
gap: 16px;
}
.bloc-timelines-01__step-indicator {
flex: 0 0 32px;
}
.bloc-timelines-01__step-number {
font-size: 24px;
padding: 8px 0;
}
.bloc-timelines-01__card {
border-radius: 12px !important;
}
.bloc-timelines-01__card-content {
gap: 8px;
padding: 20px;
}
.bloc-timelines-01__card-title {
font-size: 20px;
}
} @media (max-width: 480px) {
.bloc-timelines-01__headline {
font-size: 28px;
}
.bloc-timelines-01__step-indicator {
flex: 0 0 28px;
}
.bloc-timelines-01__step-number {
font-size: 20px;
padding: 6px 0;
}
.bloc-timelines-01__timeline-row {
gap: 12px;
}
.bloc-timelines-01__card-content {
padding: 16px;
}
} .bloc-timelines-01--ccc-page .bloc-timelines-01__card-title-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 12px 16px;
width: 100%;
}
.bloc-timelines-01--ccc-page .bloc-timelines-01__card-title-row .bloc-timelines-01__card-title {
flex: 1 1 auto;
margin: 0;
min-width: 0;
}
.bloc-timelines-01--ccc-page .bloc-timelines-01__card-title-row .bloc-timelines-01__card-year,
.bloc-timelines-01--ccc-page .bloc-timelines-01__card-title-row .bloc-timelines-01__card-number-wrap {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
}
.bloc-timelines-01--ccc-page .bloc-timelines-01__card-title-row .bloc-timelines-01__card-year {
font-size: 40px;
font-weight: 500;
line-height: 1;
color: #cfd1d2;
}
.bloc-timelines-01--ccc-page .bloc-timelines-01__card-title-row .bloc-timelines-01__card-number-wrap {
align-items: center;
}
@media (max-width: 768px) {
.bloc-timelines-01--ccc-page .bloc-timelines-01__card-title-row .bloc-timelines-01__card-year {
font-size: 28px;
}
}
@media (max-width: 480px) {
.bloc-timelines-01--ccc-page .bloc-timelines-01__card-title-row .bloc-timelines-01__card-year {
font-size: 24px;
}
} @media (max-width: 1024px) {
body.home main#primary .entry-content > .bloc-timelines-01--home-process .bloc-timelines-01__intro .btn,
body.home main#primary .entry-content > .bloc-timelines-01--home-process .bloc-timelines-01__intro .btn-secondary,
body.home main#primary .entry-content > .bloc-timelines-01--home-process .bloc-timelines-01__intro a.btn {
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
z-index: auto !important;
}
} @media (max-width: 1024px) {
.bloc-timelines-01 {
padding: 32px 16px !important;
box-sizing: border-box;
}
.bloc-timelines-01__container {
padding: 32px 16px !important;
box-sizing: border-box;
}
.bloc-timelines-01--single-rail .bloc-timelines-01__container {
padding: 0 !important;
}
}
@media (min-width: 1025px) {
.bloc-timelines-01--home-process .bloc-timelines-01__card-content {
padding: 20px !important;
}
}