.bloc-features-02 {
width: 100%;
box-sizing: border-box;
margin-top: -37px;
padding: 80px var(--section-padding-x, 64px);
background-color: transparent;
font-family: inherit;
}
.bloc-features-02--offre-tarif-services {
margin-top: -41px;
}
.bloc-features-02__container {
max-width: var(--section-max-width, 1312px);
margin: 0 auto;
display: flex;
flex-direction: row;
gap: 32px;
align-items: stretch;
}
.bloc-features-02--wrapped-shell {
padding-top: 0;
padding-bottom: 0;
}
.bloc-features-02__container--media-left {
flex-direction: row-reverse;
}
.bloc-features-02__container--media-right {
flex-direction: row;
} .bloc-features-02__zone-left {
flex: 1 1 0%;
min-width: 0;
display: flex;
flex-direction: column;
gap: 32px;
}
.bloc-features-02__zone-left--wrapped {
padding: var(--bloc-features-02-zone-wrapper-padding, 24px);
box-sizing: border-box;
} .bloc-features-02__zone-icons {
display: flex;
gap: 16px;
align-items: center;
}
.bloc-features-02__zone-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bloc-features-02__zone-icon .bloc-features-02__zone-icon-glyph,
.bloc-features-02__zone-icon .icon,
.bloc-features-02__zone-icon img,
.bloc-features-02__zone-icon svg {
display: block;
max-width: 100%;
max-height: 100%;
} .bloc-features-02__tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.bloc-features-02__tag {
display: inline-flex;
padding: 4px 12px;
border-radius: var(--badge-border-radius, 9999px);
font-size: 14px;
font-weight: 600;
} .bloc-features-02__content-all {
display: flex;
flex-direction: column;
gap: 24px;
color: inherit;
}
.bloc-features-02__content-all:empty {
display: none;
}
.bloc-features-02__tagline {
font-size: 16px;
font-weight: 700;
line-height: 1.5;
margin: 0;
}
.bloc-features-02__headline {
font-size: 48px;
font-weight: 500;
line-height: 1;
margin: 0;
}
.bloc-features-02__description {
font-size: 18px;
font-weight: 400;
line-height: 1.5;
margin: 0;
} .bloc-features-02__form-section {
display: flex;
flex-direction: column;
gap: 8px;
}
.bloc-features-02__form-label {
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #232425;
}
.bloc-features-02__form-row {
display: flex;
gap: 0;
}
.bloc-features-02__form-input {
flex: 1;
height: 48px;
padding: 12px 16px;
font-size: 16px;
font-weight: 400;
color: #232425;
background-color: #ffffff;
border: 1px solid #232425;
border-right: none;
outline: none;
}
.bloc-features-02__form-input::placeholder {
color: var(--bloc-features-02-placeholder-color, #999);
}
.bloc-features-02__form-input:focus {
border-color: #3C0314;
} .bloc-features-02__details {
display: flex;
flex-direction: column;
gap: 12px; } .bloc-features-02__details .icon-text {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
width: 100%;
}
.bloc-features-02__details .icon-text__icon {
width: var(--us-icon-size, 24px);
height: var(--us-icon-size, 24px);
flex-shrink: 0;
background-color: transparent;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.bloc-features-02__details .icon-text__icon.icon--wrapped {
padding: var(--us-icon-wrap-padding, 8px);
box-sizing: content-box;
}
.bloc-features-02__details .icon-text__icon svg,
.bloc-features-02__details .icon-text__icon img {
width: 14px;
height: 14px;
color: inherit;
}
.bloc-features-02__details .icon-text__text {
flex: 1 1 auto;
min-width: 0;
font-size: 16px;
line-height: 1.5;
color: inherit;
}  .bloc-features-02__card-wrap {
display: flex;
flex-direction: column;
gap: 32px;
}
.bloc-features-02__card-wrap--horizontal {
flex-direction: column;
}
.bloc-features-02__card-wrap--vertical {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
align-items: start; } .bloc-features-02__card {
background-color: var(--card-bg, transparent);
border: none;
overflow: hidden;
width: 100%;
} .bloc-features-02__card--horizontal {
display: flex;
flex-direction: row;
}
.bloc-features-02__card--horizontal .bloc-features-02__card-image {
flex: 1 1 50%;
width: 50%;
min-height: 200px;
}
.bloc-features-02__card--horizontal .bloc-features-02__card-content {
flex: 1 1 50%;
width: 50%;
} .bloc-features-02__card--vertical {
display: flex;
flex-direction: column;
}
.bloc-features-02__card--vertical .bloc-features-02__card-image {
width: 100%;
aspect-ratio: 16 / 9;
} .bloc-features-02__card--media-bottom {
flex-direction: column-reverse;
}
.bloc-features-02__card--media-background {
position: relative;
}
.bloc-features-02__card--media-background .bloc-features-02__card-image {
position: absolute;
inset: 0;
z-index: 0;
}
.bloc-features-02__card--media-background .bloc-features-02__card-content {
position: relative;
z-index: 1;
}
.bloc-features-02__card--horizontal-reverse {
flex-direction: row-reverse;
} .bloc-features-02__card-image {
background-color: transparent;
overflow: hidden;
}
.bloc-features-02__card-image--wrapped {
padding: var(--bloc-features-02-card-image-wrapper-padding, 24px);
box-sizing: border-box;
}
.bloc-features-02__card-image img {
width: 100%;
height: 100%;
object-fit: cover;
} .bloc-features-02__card-content {
display: flex;
flex-direction: column;
gap: 32px;
padding: 24px;
min-width: 0;
box-sizing: border-box;
}
.bloc-features-02__card-shell-link {
display: block;
width: 100%;
color: inherit;
text-decoration: none;
}
.bloc-features-02__card-number-wrap {
align-self: flex-start;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px;
} .bloc-features-02__card-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.bloc-features-02__card-icon svg {
width: 36px;
height: 36px;
color: #232425;
} .bloc-features-02__card-number {
display: block;
font-size: 40px;
font-weight: 500;
line-height: 1;
color: #232425;
margin: 0 0 13px 0;
} .bloc-features-02__card-title {
font-size: 20px;
font-weight: 500;
line-height: 1.5;
color: #232425;
margin: 0;
overflow-wrap: break-word;
word-break: break-word;
} .bloc-features-02__card-description {
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: inherit;
margin: 0;
overflow-wrap: break-word;
word-break: break-word;
}
.bloc-features-02 .icon-text__text {
overflow-wrap: break-word;
word-break: break-word;
} .bloc-features-02__card-details {
display: flex;
flex-direction: column;
gap: 16px;
}
.bloc-features-02__card-details .icon-text {
display: flex;
gap: 8px;
align-items: flex-start;
width: 100%;
}
.bloc-features-02__card-details .icon-text__icon {
width: var(--us-icon-size, 24px);
height: var(--us-icon-size, 24px);
padding: 2px;
border-radius: 32px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.bloc-features-02__card-details .icon-text__icon.icon--wrapped {
padding: var(--us-icon-wrap-padding, 8px);
box-sizing: content-box;
}
.bloc-features-02__card-details .icon-text__icon svg,
.bloc-features-02__card-details .icon-text__icon img {
width: 20px;
height: 20px;
}
.bloc-features-02__card-details .icon-text__text {
flex: 1 1 auto;
min-width: 0;
} .bloc-features-02__card-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #3C0314;
text-decoration: none;
transition: color 0.2s ease;
}
.bloc-features-02__card-link:hover {
color: #2a020e;
}
.bloc-features-02__card-link-icon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.bloc-features-02__card-link-icon svg {
width: 10px;
height: 10px;
} .bloc-features-02__actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
} .bloc-features-02__zone-right {
flex: 1 1 0%;
width: 100%;
min-width: 0;
display: flex;
overflow: hidden;
border-radius: 0;
}
.bloc-features-02__hero-image {
width: 100%;
height: 100%;
background-color: transparent;
display: flex;
align-items: stretch;
justify-content: center;
min-height: 616px;
aspect-ratio: 654 / 616;
border-radius: 0;
overflow: hidden;
}
.bloc-features-02__hero-image--wrapped {
padding: var(--bloc-features-02-hero-wrapper-padding, 24px);
box-sizing: border-box;
}
.bloc-features-02__hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bloc-features-02__hero-img {
transform: translateX(-19%) scale(1.6);
transform-origin: center;
} .bloc-features-02--offre-tarif-services .bloc-features-02__hero-image {
aspect-ratio: 1 / 1;
width: 100%;
height: auto;
min-height: 0;
max-height: none;
flex: 0 0 auto;
align-self: center;
background-color: #f8dc73 !important;
border-radius: 24px;
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: center;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__hero-image img,
.bloc-features-02--offre-tarif-services .bloc-features-02__hero-img {
transform: scale(1.4) !important;
transform-origin: center bottom;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: bottom center;
} .bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
align-items: stretch;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > .bloc-features-02__card-shell-link {
aspect-ratio: 1 / 1;
min-width: 0;
min-height: 0;
display: block;
overflow: hidden;
border-radius: 16px;
container-type: size;
container-name: offre-f02-card;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > .bloc-features-02__card-shell-link > .bloc-features-02__card--vertical {
height: 100%;
min-height: 0;
overflow: hidden;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > .bloc-features-02__card--vertical {
aspect-ratio: 1 / 1;
min-width: 0;
min-height: 0;
overflow: hidden;
border-radius: 16px;
container-type: size;
container-name: offre-f02-card;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card--vertical .bloc-features-02__card-image {
display: none;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card--vertical .bloc-features-02__card-content {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
gap: 8px;
padding: 12px;
justify-content: flex-start;
} @container offre-f02-card (min-width: 0) {
.bloc-features-02__card-title {
font-size: clamp(13px, 5.5cqi, 18px);
line-height: 1.22;
}
.bloc-features-02__card-description {
font-size: clamp(10px, 3.9cqi, 14px);
line-height: 1.38;
margin: 0;
min-height: 0;
}
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-icon {
background-color: #ffffff !important;
border-radius: 8px;
flex-shrink: 0;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-icon .icon,
.bloc-features-02--offre-tarif-services .bloc-features-02__card-icon .bloc-features-02__card-icon-img {
background-color: transparent;
color: #005cfb;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-icon svg {
color: #005cfb;
fill: currentColor;
} .bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > a:nth-child(1) article.bloc-features-02__card--vertical
.bloc-features-02__card-icon
> span.icon.bloc-features-02__card-icon-img
svg,
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > article.bloc-features-02__card--vertical:nth-child(1)
.bloc-features-02__card-icon
> span.icon.bloc-features-02__card-icon-img
svg {
display: none !important;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > a:nth-child(1) article.bloc-features-02__card--vertical
.bloc-features-02__card-icon
> span.icon.bloc-features-02__card-icon-img,
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > article.bloc-features-02__card--vertical:nth-child(1)
.bloc-features-02__card-icon
> span.icon.bloc-features-02__card-icon-img {
position: relative;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
box-sizing: border-box;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > a:nth-child(1) article.bloc-features-02__card--vertical
.bloc-features-02__card-icon
> span.icon.bloc-features-02__card-icon-img::before,
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > article.bloc-features-02__card--vertical:nth-child(1)
.bloc-features-02__card-icon
> span.icon.bloc-features-02__card-icon-img::before {
content: '';
display: block;
width: 36px;
height: 36px;
background-image: url(//creation-site-plombier.fr/wp-content/themes/usine-theme/blocks/bloc_features_02/assets/icon-offre-tarif-services-globe-pin.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > a:nth-child(2) article.bloc-features-02__card--vertical
.bloc-features-02__card-icon
> span.icon.bloc-features-02__card-icon-img
svg,
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > article.bloc-features-02__card--vertical:nth-child(2)
.bloc-features-02__card-icon
> span.icon.bloc-features-02__card-icon-img
svg {
display: none !important;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > a:nth-child(2) article.bloc-features-02__card--vertical
.bloc-features-02__card-icon
> span.icon.bloc-features-02__card-icon-img,
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > article.bloc-features-02__card--vertical:nth-child(2)
.bloc-features-02__card-icon
> span.icon.bloc-features-02__card-icon-img {
position: relative;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
box-sizing: border-box;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > a:nth-child(2) article.bloc-features-02__card--vertical
.bloc-features-02__card-icon
> span.icon.bloc-features-02__card-icon-img::before,
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > article.bloc-features-02__card--vertical:nth-child(2)
.bloc-features-02__card-icon
> span.icon.bloc-features-02__card-icon-img::before {
content: '';
display: block;
width: 36px;
height: 36px;
background-image: url(//creation-site-plombier.fr/wp-content/themes/usine-theme/blocks/bloc_features_02/assets/icon-offre-tarif-services-pencil.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > a:nth-child(3) article.bloc-features-02__card--vertical
.bloc-features-02__card-icon
> span.icon.bloc-features-02__card-icon-img
svg,
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > article.bloc-features-02__card--vertical:nth-child(3)
.bloc-features-02__card-icon
> span.icon.bloc-features-02__card-icon-img
svg {
display: none !important;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > a:nth-child(3) article.bloc-features-02__card--vertical
.bloc-features-02__card-icon
> span.icon.bloc-features-02__card-icon-img,
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > article.bloc-features-02__card--vertical:nth-child(3)
.bloc-features-02__card-icon
> span.icon.bloc-features-02__card-icon-img {
position: relative;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
box-sizing: border-box;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > a:nth-child(3) article.bloc-features-02__card--vertical
.bloc-features-02__card-icon
> span.icon.bloc-features-02__card-icon-img::before,
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > article.bloc-features-02__card--vertical:nth-child(3)
.bloc-features-02__card-icon
> span.icon.bloc-features-02__card-icon-img::before {
content: '';
display: block;
width: 36px;
height: 36px;
background-image: url(//creation-site-plombier.fr/wp-content/themes/usine-theme/blocks/bloc_features_02/assets/icon-offre-tarif-services-text.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > a:nth-child(4) article.bloc-features-02__card--vertical
.bloc-features-02__card-icon
> span.icon.bloc-features-02__card-icon-img
svg,
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > article.bloc-features-02__card--vertical:nth-child(4)
.bloc-features-02__card-icon
> span.icon.bloc-features-02__card-icon-img
svg {
display: none !important;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > a:nth-child(4) article.bloc-features-02__card--vertical
.bloc-features-02__card-icon
> span.icon.bloc-features-02__card-icon-img,
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > article.bloc-features-02__card--vertical:nth-child(4)
.bloc-features-02__card-icon
> span.icon.bloc-features-02__card-icon-img {
position: relative;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
box-sizing: border-box;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > a:nth-child(4) article.bloc-features-02__card--vertical
.bloc-features-02__card-icon
> span.icon.bloc-features-02__card-icon-img::before,
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > article.bloc-features-02__card--vertical:nth-child(4)
.bloc-features-02__card-icon
> span.icon.bloc-features-02__card-icon-img::before {
content: '';
display: block;
width: 36px;
height: 36px;
background-image: url(//creation-site-plombier.fr/wp-content/themes/usine-theme/blocks/bloc_features_02/assets/icon-offre-tarif-services-cursor.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
} @media (min-width: 1201px) {
.bloc-features-02--offre-tarif-services .bloc-features-02__container {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 32px;
row-gap: 24px;
align-items: start;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__zone-left {
display: contents;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__zone-icons,
.bloc-features-02--offre-tarif-services .bloc-features-02__tags,
.bloc-features-02--offre-tarif-services .bloc-features-02__content-all,
.bloc-features-02--offre-tarif-services .bloc-features-02__form-section,
.bloc-features-02--offre-tarif-services .bloc-features-02__details,
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--horizontal {
grid-column: 1 / -1;
order: 0;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical {
grid-column: 1;
order: 1;
min-width: 0;
align-self: stretch;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__zone-right {
grid-column: 2;
order: 1;
min-width: 0;
align-self: stretch;
display: flex;
flex-direction: column;
overflow: hidden;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__actions {
grid-column: 1 / -1;
order: 2;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__hero-image {
flex: 1 1 auto;
height: 100%;
min-height: 0;
min-width: 0;
aspect-ratio: unset;
width: 100%;
align-self: stretch;
flex-grow: 1;
}
}
.bloc-features-02__hero-image-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.bloc-features-02__hero-image-placeholder svg {
width: 64px;
height: 64px;
color: #999;
opacity: 0.5;
} @media (max-width: 1400px) {
.bloc-features-02__container {
gap: 32px;
}
.bloc-features-02__headline {
font-size: 40px;
}
} @media (max-width: 1200px) {
.bloc-features-02 {
padding: 64px var(--section-padding-x, 64px);
}
.bloc-features-02__container {
flex-direction: column-reverse; gap: 48px;
} .bloc-features-02--offre-tarif-services .bloc-features-02__container {
display: flex;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__zone-left {
display: flex;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__zone-icons,
.bloc-features-02--offre-tarif-services .bloc-features-02__tags,
.bloc-features-02--offre-tarif-services .bloc-features-02__content-all,
.bloc-features-02--offre-tarif-services .bloc-features-02__form-section,
.bloc-features-02--offre-tarif-services .bloc-features-02__details,
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--horizontal,
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical,
.bloc-features-02--offre-tarif-services .bloc-features-02__zone-right,
.bloc-features-02--offre-tarif-services .bloc-features-02__actions {
grid-column: unset;
order: unset;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__zone-right {
overflow: visible;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__hero-image {
flex: 0 0 auto;
height: auto;
}
.bloc-features-02__zone-left,
.bloc-features-02__zone-right {
width: 100%;
max-width: none;
} body.page-comment-ca-marche .bloc-features-02__container {
flex-direction: column;
}
.bloc-features-02__headline {
font-size: 36px;
}
.bloc-features-02__hero-image {
min-height: 400px;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__hero-image {
min-height: 0 !important;
aspect-ratio: 1 / 1;
align-self: stretch;
}
} @media (min-width: 769px) and (max-width: 1024px) {
.bloc-features-02:not(.bloc-features-02--offre-tarif-services) .bloc-features-02__hero-image {
--bf02-hero-h-scale: 0.4;
min-height: calc(400px * var(--bf02-hero-h-scale)) !important;
aspect-ratio: 654 / calc(616 * var(--bf02-hero-h-scale)) !important;
height: auto;
overflow: hidden;
}
.bloc-features-02:not(.bloc-features-02--offre-tarif-services) .bloc-features-02__hero-image img,
.bloc-features-02:not(.bloc-features-02--offre-tarif-services) .bloc-features-02__hero-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
} @media (max-width: 1023px) { .bloc-features-02__card-wrap--vertical {
grid-template-columns: 1fr;
gap: 24px;
}
}
@media (max-width: 992px) {
.bloc-features-02 {
padding: 48px var(--section-padding-x, 64px);
}
.bloc-features-02__headline {
font-size: 32px;
}
.bloc-features-02__card--horizontal {
flex-direction: column;
}
.bloc-features-02__card--horizontal .bloc-features-02__card-image {
flex: none;
width: 100%;
aspect-ratio: 16 / 9;
min-height: auto;
} .bloc-features-02__card--horizontal .bloc-features-02__card-content {
flex: 1 1 auto;
width: 100%;
max-width: 100%;
min-width: 0;
}
} @media (max-width: 768px) {
.bloc-features-02 {
padding: 40px var(--section-padding-x, 64px);
}
.bloc-features-02__zone-left {
gap: 24px;
}
.bloc-features-02__headline {
font-size: 28px;
}
.bloc-features-02__description {
font-size: 16px;
} .bloc-features-02__card-content {
gap: 20px;
}
.bloc-features-02__form-row {
flex-direction: column;
}
.bloc-features-02__form-input {
border-right: 1px solid #232425;
border-bottom: none;
}
.bloc-features-02__actions {
flex-direction: column;
}
.bloc-features-02__card-number {
font-size: 20px;
}
.bloc-features-02__card-wrap--vertical {
grid-template-columns: 1fr;
gap: 20px;
}
.bloc-features-02__card-details {
gap: 14px;
}
.bloc-features-02__card-details .icon-text {
gap: 12px;
align-items: flex-start;
} .bloc-features-02__card-details .icon-text__icon {
box-sizing: border-box !important;
border-radius: 50% !important;
aspect-ratio: 1;
flex-shrink: 0;
align-self: flex-start;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
.bloc-features-02__card-details .icon-text__icon.icon--wrapped {
width: calc(
(var(--us-icon-size, 16px) + 2 * var(--us-icon-wrap-padding, 8px)) * 0.7
) !important;
height: calc(
(var(--us-icon-size, 16px) + 2 * var(--us-icon-wrap-padding, 8px)) * 0.7
) !important;
max-width: none !important;
max-height: none !important;
padding: calc(var(--us-icon-wrap-padding, 8px) * 0.7);
}
.bloc-features-02__card-details .icon-text__icon:not(.icon--wrapped) {
width: calc((var(--us-icon-size, 24px) + 4px) * 0.7) !important;
height: calc((var(--us-icon-size, 24px) + 4px) * 0.7) !important;
padding: calc(2px * 0.7);
}
.bloc-features-02__card-details .icon-text__icon svg,
.bloc-features-02__card-details .icon-text__icon img {
width: calc(20px * 0.7) !important;
height: calc(20px * 0.7) !important;
}
.bloc-features-02__card-details .icon-text__text {
font-size: 15px;
line-height: 1.45;
}
.bloc-features-02__hero-image {
height: auto;
min-height: 240px;
max-height: min(52vh, 360px);
}
.bloc-features-02__hero-image img {
object-fit: cover;
object-position: center;
} body.page-comment-ca-marche .bloc-features-02 {
padding: 32px var(--section-padding-x, 16px);
}
body.page-comment-ca-marche .bloc-features-02__content-all {
gap: 14px;
}
body.page-comment-ca-marche .bloc-features-02__headline {
font-size: clamp(22px, 6.2vw, 28px);
line-height: 1.2;
}
body.page-comment-ca-marche .bloc-features-02__tagline {
font-size: 14px;
}
body.page-comment-ca-marche .bloc-features-02__card--vertical .bloc-features-02__card-content {
padding: 22px 18px;
gap: 16px;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
body.page-comment-ca-marche .bloc-features-02__card-title {
font-size: 18px;
line-height: 1.35;
}
body.page-comment-ca-marche .bloc-features-02__card-details {
gap: 12px;
width: 100%;
max-width: 100%;
min-width: 0;
}
body.page-comment-ca-marche .bloc-features-02__card-details .icon-text {
display: flex !important;
flex-wrap: nowrap;
gap: 14px;
width: 100%;
max-width: 100%;
min-width: 0;
align-items: flex-start;
justify-content: flex-start;
}
body.page-comment-ca-marche .bloc-features-02__card-details .icon-text__icon {
flex: 0 0 auto;
min-width: calc(24px * 0.7);
}
body.page-comment-ca-marche .bloc-features-02__card-details .icon-text__text {
font-size: 15px;
line-height: 1.5; flex: 1 1 0% !important;
display: block;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
white-space: normal;
overflow-wrap: break-word;
word-break: normal;
hyphens: none;
}
body.page-comment-ca-marche .bloc-features-02__hero-image {
height: auto;
min-height: 200px;
max-height: min(48vh, 300px);
aspect-ratio: 16 / 10;
} body.page-comment-ca-marche
.bloc-text-01:has(.bloc-text-01__headline-vs)
+ .bloc-features-02
.bloc-features-02__container {
display: flex;
flex-direction: column;
gap: clamp(28px, 6vw, 40px);
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
body.page-comment-ca-marche
.bloc-text-01:has(.bloc-text-01__headline-vs)
+ .bloc-features-02
.bloc-features-02__zone-left {
width: 100%;
max-width: 100%;
min-width: 0;
order: 1;
gap: clamp(22px, 5vw, 30px);
}
body.page-comment-ca-marche
.bloc-text-01:has(.bloc-text-01__headline-vs)
+ .bloc-features-02
.bloc-features-02__zone-right {
order: 2;
width: 100%;
max-width: 100%;
min-width: 0;
}
body.page-comment-ca-marche
.bloc-text-01:has(.bloc-text-01__headline-vs)
+ .bloc-features-02
.bloc-features-02__card-wrap--horizontal {
display: flex;
flex-direction: column;
gap: clamp(22px, 5vw, 28px);
width: 100%;
}
body.page-comment-ca-marche
.bloc-text-01:has(.bloc-text-01__headline-vs)
+ .bloc-features-02
.bloc-features-02__card-wrap--horizontal
> .bloc-features-02__card--horizontal,
body.page-comment-ca-marche
.bloc-text-01:has(.bloc-text-01__headline-vs)
+ .bloc-features-02
.bloc-features-02__card-wrap--horizontal
> .bloc-features-02__card-shell-link {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
body.page-comment-ca-marche
.bloc-text-01:has(.bloc-text-01__headline-vs)
+ .bloc-features-02
.bloc-features-02__card-wrap--horizontal
> .bloc-features-02__card-shell-link
> .bloc-features-02__card--horizontal {
width: 100%;
max-width: 100%;
min-width: 0;
} body.page-comment-ca-marche
.bloc-text-01:has(.bloc-text-01__headline-vs)
+ .bloc-features-02
.bloc-features-02__card-wrap--horizontal
> :nth-child(1)
.bloc-features-02__card--horizontal {
border-left: 3px solid rgba(35, 36, 37, 0.85);
box-shadow: 0 8px 24px rgba(35, 36, 37, 0.06);
} body.page-comment-ca-marche
.bloc-text-01:has(.bloc-text-01__headline-vs)
+ .bloc-features-02
.bloc-features-02__card-wrap--horizontal
> :nth-child(2)
.bloc-features-02__card--horizontal {
border-left: 3px solid var(--we-brand-blue, #005cfb);
box-shadow: 0 10px 28px rgba(0, 92, 251, 0.08);
}
body.page-comment-ca-marche
.bloc-text-01:has(.bloc-text-01__headline-vs)
+ .bloc-features-02
.bloc-features-02__card--horizontal
.bloc-features-02__card-content {
width: 100%;
max-width: 100%;
min-width: 0;
padding: clamp(18px, 4.5vw, 22px) clamp(16px, 4vw, 20px);
gap: clamp(14px, 3.5vw, 18px);
box-sizing: border-box;
}
body.page-comment-ca-marche
.bloc-text-01:has(.bloc-text-01__headline-vs)
+ .bloc-features-02
.bloc-features-02__card--horizontal
.bloc-features-02__card-number {
font-size: clamp(1.5rem, 6vw, 2rem);
margin-bottom: 8px;
}
body.page-comment-ca-marche
.bloc-text-01:has(.bloc-text-01__headline-vs)
+ .bloc-features-02
.bloc-features-02__card--horizontal
.bloc-features-02__card-title {
font-size: clamp(1.05rem, 3.6vw, 1.25rem);
line-height: 1.3;
word-break: normal;
overflow-wrap: break-word;
}
body.page-comment-ca-marche
.bloc-text-01:has(.bloc-text-01__headline-vs)
+ .bloc-features-02
.bloc-features-02__card--horizontal
.bloc-features-02__card-description {
word-break: normal;
overflow-wrap: break-word;
line-height: 1.5;
}
body.page-comment-ca-marche
.bloc-text-01:has(.bloc-text-01__headline-vs)
+ .bloc-features-02
.bloc-features-02__card--horizontal
.bloc-features-02__card-details {
width: 100%;
max-width: 100%;
min-width: 0;
gap: clamp(12px, 3vw, 14px);
}
body.page-comment-ca-marche
.bloc-text-01:has(.bloc-text-01__headline-vs)
+ .bloc-features-02
.bloc-features-02__card--horizontal
.bloc-features-02__card-details
.icon-text {
display: flex;
align-items: flex-start;
gap: 12px;
width: 100%;
max-width: 100%;
min-width: 0;
}
body.page-comment-ca-marche
.bloc-text-01:has(.bloc-text-01__headline-vs)
+ .bloc-features-02
.bloc-features-02__card--horizontal
.bloc-features-02__card-details
.icon-text__icon {
flex: 0 0 auto;
}
body.page-comment-ca-marche
.bloc-text-01:has(.bloc-text-01__headline-vs)
+ .bloc-features-02
.bloc-features-02__card--horizontal
.bloc-features-02__card-details
.icon-text__text {
flex: 1 1 0%;
min-width: 0;
font-size: 15px;
line-height: 1.45;
word-break: normal;
overflow-wrap: break-word;
hyphens: none;
} body.page-comment-ca-marche
.bloc-text-01:has(.bloc-text-01__headline-vs)
+ .bloc-features-02
.bloc-features-02__hero-image {
min-height: min(220px, 42vw);
max-height: min(44vh, 320px);
}
body.page-comment-ca-marche
.bloc-text-01:has(.bloc-text-01__headline-vs)
+ .bloc-features-02 {
padding-top: clamp(24px, 5vw, 36px);
padding-bottom: clamp(32px, 7vw, 48px);
}
} @media (max-width: 480px) {
.bloc-features-02__headline {
font-size: 24px;
}
.bloc-features-02__tagline {
font-size: 14px;
}
.bloc-features-02__card-content {
padding: 16px;
} body.page-comment-ca-marche .bloc-features-02__card--vertical .bloc-features-02__card-content {
padding: 20px 16px;
}
} @media (max-width: 768px) {
.bloc-features-02--offre-tarif-services .bloc-features-02__hero-image {
background-color: #f8dc73 !important;
aspect-ratio: 1 / 1;
min-height: 0 !important;
max-height: none !important;
height: auto;
width: 100%;
align-self: stretch;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__hero-image img,
.bloc-features-02--offre-tarif-services .bloc-features-02__hero-img {
transform: scale(1.4) !important;
transform-origin: center bottom;
object-fit: contain !important;
object-position: bottom center;
}
} @media (max-width: 1024px) { .bloc-features-02--offre-tarif-services {
margin-top: 0 !important;
margin-bottom: 0 !important;
} .bloc-features-02--offre-tarif-services .bloc-features-02__container {
flex-direction: column !important;
gap: clamp(26px, 6vw, 48px) !important;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__zone-right {
order: 1;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__zone-left {
order: 2;
} .bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical {
gap: clamp(18px, 3.8vw, 26px) !important;
} .bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > .bloc-features-02__card-shell-link {
aspect-ratio: 3 / 2 !important;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > .bloc-features-02__card--vertical {
aspect-ratio: 3 / 2 !important;
} .bloc-features-02--offre-tarif-services .bloc-features-02__card--vertical .bloc-features-02__card-content {
padding: clamp(12px, 3.2vw, 16px) !important;
gap: 10px !important;
align-items: flex-start;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-title {
line-height: 1.25 !important;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-description {
line-height: 1.5 !important;
} .bloc-features-02--offre-tarif-services .bloc-features-02__card-icon {
width: 44px;
height: 44px;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-icon svg {
width: 30px;
height: 30px;
} .bloc-features-02--offre-tarif-services .bloc-features-02__hero-image {
aspect-ratio: auto !important;
max-height: 320px !important;
height: auto;
margin-top: 0 !important;
border-radius: 18px !important;
}
} @media (max-width: 1023px) and (min-width: 769px) {
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px !important;
align-items: stretch !important;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > .bloc-features-02__card-shell-link {
aspect-ratio: 16 / 9 !important;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical > .bloc-features-02__card--vertical {
aspect-ratio: 16 / 9 !important;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card--vertical .bloc-features-02__card-content {
padding: clamp(8px, 2vw, 12px) !important;
gap: 6px !important;
justify-content: flex-start;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-icon {
width: 40px;
height: 40px;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-icon svg {
width: 28px;
height: 28px;
}
} @media (max-width: 768px) {
.bloc-features-02--offre-tarif-services .bloc-features-02__container {
gap: clamp(22px, 6vw, 36px) !important;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__zone-left {
gap: 28px !important;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-wrap--vertical {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card--vertical .bloc-features-02__card-content {
padding: clamp(12px, 3.5vw, 16px) !important;
gap: 10px !important;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-title {
font-size: clamp(13px, 4.8vw, 17px) !important;
line-height: 1.2 !important;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-description {
font-size: clamp(11px, 3.8vw, 13px) !important;
line-height: 1.45 !important;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-icon {
width: 38px;
height: 38px;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__card-icon svg {
width: 26px;
height: 26px;
} .bloc-features-02--offre-tarif-services .bloc-features-02__hero-image {
max-height: 220px !important;
height: min(220px, 56vw) !important;
margin-top: 0 !important;
border-radius: 18px !important;
}
.bloc-features-02--offre-tarif-services .bloc-features-02__hero-image img,
.bloc-features-02--offre-tarif-services .bloc-features-02__hero-img {
transform: scale(1.15) !important;
}
} @media (max-width: 1024px) {
.bloc-features-02:not(.bloc-features-02--wrapped-shell) {
padding: 32px 16px !important;
box-sizing: border-box;
}
.bloc-features-02--wrapped-shell {
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: 16px !important;
padding-right: 16px !important;
box-sizing: border-box;
} main#primary .page-content-wrapper .entry-content > section.bloc-text-01 + section.bloc-features-02.bloc-features-02--offre-tarif-services,
main#primary .flexible-content-wrapper .entry-content > section.bloc-text-01 + section.bloc-features-02.bloc-features-02--offre-tarif-services {
padding-top: 0 !important;
margin-top: -10px !important;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
} @media (max-width: 768px) {
main#primary .page-content-wrapper .entry-content > section.bloc-text-01 + section.bloc-features-02.bloc-features-02--offre-tarif-services,
main#primary .flexible-content-wrapper .entry-content > section.bloc-text-01 + section.bloc-features-02.bloc-features-02--offre-tarif-services {
margin-top: calc(-1 * var(--we-rhythm-lg, 24px)) !important;
}
} .bloc-features-02--hidden {
opacity: 0;
transform: translateY(30px);
}
.bloc-features-02--visible {
opacity: 1;
transform: translateY(0);
transition: opacity 0.8s ease, transform 0.8s ease;
}
@media (prefers-reduced-motion: reduce) {
.bloc-features-02--hidden { opacity: 1; transform: none; }
.bloc-features-02--visible { transition: none; }
}