.bloc-features-03 {
width: 100%;
box-sizing: border-box;
padding: 80px 64px;
background-color: #ffffff;
color: inherit;
font-family: inherit;
}
.bloc-features-03__container {
max-width: 1312px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 80px;
} .bloc-features-03__header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
gap: 32px;
}
.bloc-features-03__header-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
max-width: 800px;
}
.bloc-features-03__tagline {
font-size: 16px;
font-weight: 700;
line-height: 1.5;
color: inherit;
margin: 0;
}
.bloc-features-03__headline {
font-size: 48px;
font-weight: 500;
line-height: 1.1;
color: inherit;
margin: 0;
}
.bloc-features-03__description {
font-size: 18px;
font-weight: 400;
line-height: 1.5;
color: inherit;
margin: 0;
}
.bloc-features-03__header-action {
flex-shrink: 0;
display: flex;
align-items: flex-start;
gap: 12px;
padding-top: 8px;
} .bloc-features-03__btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 8px 24px;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
text-decoration: none;
transition: all 0.2s ease;
}
.bloc-features-03__btn--secondary {
background-color: #ffffff;
color: #3C0314;
border: 1px solid #3C0314;
}
.bloc-features-03__btn--secondary:hover {
background-color: #fdf2f4;
} .bloc-features-03__body {
display: flex;
flex-direction: row;
gap: 32px;
align-items: stretch;
}
.bloc-features-03__body--right-only {
gap: 0;
} .bloc-features-03__zone-left {
flex: 1;
display: flex;
flex-direction: column;
gap: 32px;
}
.bloc-features-03__body-description {
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: inherit;
margin: 0;
} .bloc-features-03__details {
display: flex;
flex-direction: column;
gap: 12px;
}
.bloc-features-03__detail-item {
display: flex;
align-items: flex-start;
gap: 8px;
}
.bloc-features-03__detail-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.bloc-features-03__detail-icon svg {
width: 16px;
height: 16px;
color: inherit;
}
.bloc-features-03__detail-text {
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: inherit;
}  .bloc-features-03__two-cards {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.bloc-features-03__two-cards .bloc-features-03__card {
flex: 1;
min-width: 200px;
}
@media (min-width: 1201px) {
.bloc-features-03__body--balanced-card-map .bloc-features-03__zone-left {
align-self: stretch;
}
.bloc-features-03__body--balanced-card-map .bloc-features-03__zone-left > .bloc-features-03__two-cards,
.bloc-features-03__body--balanced-card-map .bloc-features-03__zone-left > .bloc-features-03__card {
flex: 1 1 0;
min-height: 0;
}
.bloc-features-03__body--balanced-card-map .bloc-features-03__two-cards {
align-items: stretch;
}
.bloc-features-03__body--balanced-card-map .bloc-features-03__two-cards .bloc-features-03__card {
height: 100%;
}
} .bloc-features-03__card {
background-color: var(--card-bg, transparent); border: none;
overflow: hidden;
position: relative;
} .bloc-features-03__card--vertical {
display: flex;
flex-direction: column;
}
.bloc-features-03__card--vertical .bloc-features-03__card-image {
width: 100%;
aspect-ratio: auto;
} .bloc-features-03__card--full {
width: 100%;
} .bloc-features-03__card--horizontal {
display: flex;
flex-direction: row;
}
.bloc-features-03__card--horizontal .bloc-features-03__card-image {
flex: 0 0 180px;
min-height: 180px;
}
.bloc-features-03__card--horizontal .bloc-features-03__card-content {
flex: 1;
} .bloc-features-03__card-image {
background-color: #E6E7E7;
overflow: hidden;
}
.bloc-features-03__card-image img,
.bloc-features-03__card-image > .usine-image-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
}
.bloc-features-03__card-image-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
}
.bloc-features-03__card-image-placeholder svg {
width: 40px;
height: 40px;
color: #999;
opacity: 0.5;
} .bloc-features-03__card-content {
display: flex;
flex-direction: column;
gap: 12px;
padding: 20px;
position: relative;
z-index: 2;
} .bloc-features-03__card-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.bloc-features-03__card-icon svg {
width: 32px;
height: 32px;
color: inherit;
} .bloc-features-03__card-number-wrapper {
display: inline-flex;
align-items: center;
justify-content: center;
}
.bloc-features-03__card-number-wrapper--wrapped {
padding: var(--bloc-features-03-number-wrapper-padding, 8px 12px);
}
.bloc-features-03__card-number {
font-size: 32px;
font-weight: 700;
line-height: 1.2;
color: inherit;
overflow-wrap: break-word;
word-break: break-word;
} .bloc-features-03__card-title {
font-size: 18px;
font-weight: 500;
line-height: 1.4;
color: inherit;
margin: 0;
} .bloc-features-03__card-description {
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: inherit;
margin: 0;
overflow-wrap: anywhere;
} .bloc-features-03__card-details {
display: flex;
flex-direction: column;
gap: 6px;
}
.bloc-features-03__card-hitarea {
position: absolute;
inset: 0;
z-index: 1;
display: block;
border-radius: inherit;
}
.bloc-features-03__card .btn {
position: relative;
z-index: 2;
}
.bloc-features-03__card-details .bloc-features-03__detail-text {
font-size: 12px;
} .bloc-features-03__card-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #3C0314;
text-decoration: none;
transition: color 0.2s ease;
}
.bloc-features-03__card-link:hover {
color: #2a020e;
}
.bloc-features-03__card-link-icon {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.bloc-features-03__card-link-icon svg {
width: 8px;
height: 8px;
} .bloc-features-03__zone-right {
flex: 1;
display: flex;
min-width: 300px;
}
.bloc-features-03__zone-right--full {
flex: 1 1 100%;
min-width: 0;
width: 100%;
}
.bloc-features-03__map {
width: 100%;
height: 100%;
background-color: #E6E7E7;
display: flex;
align-items: center;
justify-content: center;
min-height: var(--bloc-features-03-map-min-height, 566px);
position: relative;
}
.bloc-features-03__map img,
.bloc-features-03__map > .usine-image-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
} .bloc-features-03__map-container {
width: 100%;
height: 100%;
min-height: 400px;
border-radius: 8px;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
}
.bloc-features-03__map-container iframe {
flex: 1;
width: 100%;
min-height: 0;
border-radius: 8px 8px 0 0;
}
.bloc-features-03__map-attribution {
background-color: #f8f9fa;
padding: 6px 12px;
font-size: 12px;
text-align: right;
border-radius: 0 0 8px 8px;
}
.bloc-features-03__map-attribution a {
color: #2464D1;
text-decoration: none;
font-weight: 500;
}
.bloc-features-03__map-attribution a:hover {
text-decoration: underline;
}
.bloc-features-03__map-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.bloc-features-03__map-pin {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
color: #999;
opacity: 0.6;
}
.bloc-features-03__map-pin svg {
width: 100%;
height: 100%;
}  .bloc-features-03__header--vertical {
flex-direction: column;
align-items: flex-start;
}
.bloc-features-03__header--wrapped {
padding: 32px;
box-sizing: border-box;
}
.bloc-features-03__header--center {
justify-content: center;
}
.bloc-features-03__header-content--boxed {
max-width: 800px;
}
.bloc-features-03__header-content--center {
align-items: center;
margin-inline: auto;
}
.bloc-features-03__header-content--center .bloc-features-03__headline,
.bloc-features-03__header-content--center .bloc-features-03__description,
.bloc-features-03__header-content--center .bloc-features-03__tagline {
text-align: center;
} .bloc-features-03__header-content--fullwidth {
max-width: 100%;
}  .bloc-features-03--media-left .bloc-features-03__body {
flex-direction: row-reverse;
}  .bloc-features-03__card--media-bottom {
display: flex;
flex-direction: column-reverse;
} .bloc-features-03__card--media-background {
position: relative;
}
.bloc-features-03__card--media-background .bloc-features-03__card-image {
position: absolute;
inset: 0;
z-index: 0;
}
.bloc-features-03__card--media-background .bloc-features-03__card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bloc-features-03__card--media-background .bloc-features-03__card-content {
position: relative;
z-index: 1;
} .bloc-features-03__card--horizontal-reverse {
flex-direction: row-reverse;
} .bloc-features-03--wrapped-shell .bloc-features-03__container {
border-radius: 16px;
} @media (max-width: 1400px) {
.bloc-features-03__headline {
font-size: 40px;
}
.bloc-features-03__body {
gap: 32px;
}
} @media (max-width: 1200px) {
.bloc-features-03 {
padding: 64px 48px;
}
.bloc-features-03__header {
flex-direction: column;
gap: 24px;
}
.bloc-features-03__header-content {
max-width: 100%;
}
.bloc-features-03__body,
.bloc-features-03--media-left .bloc-features-03__body {
flex-direction: column;
gap: 48px;
}
.bloc-features-03__zone-right {
min-width: 100%;
}
.bloc-features-03__map {
min-height: 400px;
}
.bloc-features-03__map-container {
min-height: 350px;
}
.bloc-features-03__headline {
font-size: 36px;
}
} @media (max-width: 992px) {
.bloc-features-03 {
padding: 48px 32px;
}
.bloc-features-03__headline {
font-size: 32px;
}
.bloc-features-03__card--horizontal {
flex-direction: column;
}
.bloc-features-03__card--horizontal .bloc-features-03__card-image {
flex: none;
width: 100%;
aspect-ratio: 16 / 9;
}
.bloc-features-03__two-cards .bloc-features-03__card-image,
.bloc-features-03__card--vertical .bloc-features-03__card-image {
aspect-ratio: 16 / 9;
}
.bloc-features-03__card--horizontal,
.bloc-features-03__card--horizontal-reverse {
flex-direction: column;
}
} @media (max-width: 768px) {
.bloc-features-03 {
padding: 40px 20px;
}
.bloc-features-03__container {
gap: 32px;
}
.bloc-features-03__headline {
font-size: 28px;
}
.bloc-features-03__description {
font-size: 16px;
}
.bloc-features-03__two-cards {
flex-direction: column;
}
.bloc-features-03__two-cards .bloc-features-03__card {
width: 100%;
min-width: 0;
}
.bloc-features-03__card-number {
font-size: 28px;
}
.bloc-features-03__map {
min-height: 300px;
}
.bloc-features-03__map-container {
min-height: 280px;
}
} @media (max-width: 480px) {
.bloc-features-03__headline {
font-size: 24px;
}
.bloc-features-03__tagline {
font-size: 14px;
}
.bloc-features-03__header-action {
width: 100%;
flex-wrap: wrap;
align-items: stretch;
}
.bloc-features-03__header-action .btn {
width: 100%;
flex: 1 0 100%;
min-width: 0;
}
.bloc-features-03__card-content {
padding: 16px;
}
}