.bloc-contact-02 {
padding: 112px 64px;
background-color: #fff;
box-sizing: border-box;
}
.bloc-contact-02__container {
max-width: 1312px;
margin: 0 auto;
} .bloc-contact-02__header {
margin-bottom: 40px;
}
.bloc-contact-02__header--fullwidth .bloc-contact-02__headline,
.bloc-contact-02__header--fullwidth .bloc-contact-02__description {
max-width: none;
}
.bloc-contact-02__header--boxed {
max-width: 768px;
}
.bloc-contact-02__tagline {
font-size: 16px;
font-weight: 600;
color: #232425;
margin: 0 0 12px 0;
}
.bloc-contact-02__headline {
font-size: 48px;
font-weight: 500;
line-height: 1.2;
color: #232425;
margin: 0 0 24px 0;
max-width: 768px;
}
.bloc-contact-02--cards-only .bloc-contact-02__headline,
.bloc-contact-02--cards-only .bloc-contact-02__description {
max-width: none;
}
.bloc-contact-02__description {
font-size: 18px;
line-height: 1.5;
color: #232425;
margin: 0 0 32px 0;
max-width: 768px;
}
.bloc-contact-02__button {
display: inline-block;
padding: 12px 24px;
font-size: 16px;
font-weight: 500;
text-decoration: none;
border-radius: 4px;
transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.bloc-contact-02__button--outline {
background: transparent;
color: #232425;
border: 1px solid #232425;
}
.bloc-contact-02__button--outline:hover {
background: #232425;
color: #fff;
}
.bloc-contact-02__button--primary {
background: inherit;
color: inherit;
border: 1px solid currentColor;
}
.bloc-contact-02__button--primary:hover {
opacity: 0.85;
} .bloc-contact-02__main {
display: grid;
grid-template-columns: 3fr 2fr;
gap: 64px;
align-items: start;
}
.bloc-contact-02__main--cards-only {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
gap: 48px;
} .bloc-contact-02__form-column {
position: sticky;
top: 32px;
}
.bloc-contact-02__form-card {
background: #fff;
border: 1px solid #E6E7E7;
border-radius: 8px;
padding: 32px;
}
.bloc-contact-02__native-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.bloc-contact-02__plugin-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.bloc-contact-02__plugin-form .bloc-contact-02__wpcf7-form {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.bloc-contact-02__form-group:nth-of-type(n+3) {
grid-column: 1 / -1;
}
.bloc-contact-02__native-form .bloc-contact-02__form-check {
grid-column: 1 / -1;
}
.bloc-contact-02__plugin-form .bloc-contact-02__form-check,
.bloc-contact-02__plugin-form .wpcf7-response-output,
.bloc-contact-02__plugin-form .wpcf7-spinner {
grid-column: 1 / -1;
}
.bloc-contact-02__form-submit {
grid-column: 1 / -1;
}
.bloc-contact-02__plugin-form > p {
grid-column: 1 / -1;
margin: 0;
}
.bloc-contact-02__plugin-form .wpcf7-form-control-wrap {
display: block;
}
.bloc-contact-02__plugin-form .bloc-contact-02__wpcf7-form .wpcf7-form-control-wrap {
display: block;
}
.bloc-contact-02__form-label {
display: block;
font-size: 14px;
font-weight: 500;
color: var(--usine-form-label-color, #374151);
margin-bottom: 6px;
}
.bloc-contact-02__form-required {
margin-inline-start: 0.2em;
font-weight: 700;
color: #005cfb;
text-decoration: none;
cursor: help;
}
.bloc-contact-02__form-input,
.bloc-contact-02__form-select,
.bloc-contact-02__form-textarea {
width: 100%;
min-height: 52px;
padding: 12px 16px;
font-size: 16px;
border-width: var(--usine-form-field-border-width, 1px);
border-style: solid;
border-color: var(--usine-form-field-border, #D1D5DB);
border-radius: var(--usine-form-field-radius, 4px);
background: var(--usine-form-field-bg, #fff);
color: var(--usine-form-field-color, #232425);
box-sizing: border-box;
}
.bloc-contact-02__form-input::placeholder,
.bloc-contact-02__form-textarea::placeholder {
color: #9CA3AF;
}
.bloc-contact-02__form-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
}
.bloc-contact-02__form-textarea {
min-height: 120px;
resize: vertical;
}
.bloc-contact-02__form-check {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.bloc-contact-02__checkbox,
.bloc-contact-02__radio {
width: 18px;
height: 18px;
accent-color: #3C0314;
}
.bloc-contact-02__check-label {
font-size: 14px;
color: inherit;
} .bloc-contact-02__content-column {
display: flex;
flex-direction: column;
gap: 48px;
}
.bloc-contact-02__content-column--cards-only {
gap: 32px;
}
.bloc-contact-02__main--cards-only .bloc-contact-02__cards-row--duo {
gap: 32px;
} .bloc-contact-02__intro {
display: flex;
flex-direction: column;
gap: 24px;
}
.bloc-contact-02__intro-text {
font-size: 16px;
line-height: 1.6;
color: #232425;
margin: 0;
font-weight: inherit;
}
.bloc-contact-02__highlight-brand {
color: var(--we-brand-blue, #005cfb);
font-weight: inherit;
} @media (max-width: 1024px) {
.bloc-contact-02--contact-embed .bloc-contact-02__intro-text {
font-size: calc(48px * 0.75) !important;
line-height: 1 !important;
font-weight: 500 !important;
}
}
.bloc-contact-02__intro-features {
display: flex;
flex-direction: column;
gap: 16px;
}
.bloc-contact-02__intro-feature {
display: flex;
align-items: flex-start;
gap: 12px;
}
.bloc-contact-02__intro-feature-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
color: #232425;
margin-top: 2px;
}
.bloc-contact-02__intro-feature-text {
font-size: 14px;
line-height: 1.5;
color: inherit;
} .bloc-contact-02__cards {
display: flex;
flex-direction: column;
gap: 24px;
}
.bloc-contact-02__cards-row {
display: grid;
gap: 24px;
}
.bloc-contact-02__cards-row--duo {
grid-template-columns: 1fr 1fr;
} .bloc-contact-02__card {
background: #fff;
border: 1px solid #E6E7E7;
border-radius: 8px;
overflow: hidden;
}
.bloc-contact-02__card--icon-only {
overflow: visible;
}
.bloc-contact-02__card-image {
background: #F3F4F6;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
}
.bloc-contact-02__card-image svg {
width: 48px;
height: 48px;
}
.bloc-contact-02__card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bloc-contact-02__card-content {
padding: 24px;
}
.bloc-contact-02--cards-only .bloc-contact-02__card--small .bloc-contact-02__card-content {
padding: 32px 28px;
min-height: 144px;
}
.bloc-contact-02--cards-only .bloc-contact-02__card--small .bloc-contact-02__card-icon-only {
margin-bottom: 20px;
}
.bloc-contact-02__card-icon-only {
display: inline-flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 16px;
color: #232425;
}
.bloc-contact-02__card-icon-only .icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.bloc-contact-02__card-icon-only svg {
width: 32px;
height: 32px;
}
.bloc-contact-02__card-number {
display: block;
font-size: 20px;
font-weight: 600;
color: #232425;
line-height: 1;
margin-bottom: 8px;
overflow-wrap: break-word;
word-break: break-word;
}
.bloc-contact-02__main--cards-only .bloc-contact-02__card--small .bloc-contact-02__card-number {
white-space: nowrap;
overflow-wrap: normal;
word-break: normal;
font-size: clamp(20px, 1.5vw, 24px);
}
.bloc-contact-02__card-title {
font-size: 20px;
font-weight: 500;
color: #232425;
margin: 0 0 12px 0;
}
.bloc-contact-02__card-description {
font-size: 14px;
line-height: 1.6;
color: inherit;
margin: 0 0 16px 0;
}
.bloc-contact-02__card-features {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.bloc-contact-02__card-feature {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 14px;
color: inherit;
}
.bloc-contact-02__card-feature-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
margin-top: 2px;
}
.bloc-contact-02__card-button {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: #3C0314;
text-decoration: none;
}
.bloc-contact-02__card-button:hover {
text-decoration: underline;
}
.bloc-contact-02__card-button-arrow {
font-size: 12px;
}  .bloc-contact-02__card--small {
display: flex;
flex-direction: column;
}
.bloc-contact-02__card--small .bloc-contact-02__card-image {
height: 160px;
}
.bloc-contact-02__card--small .bloc-contact-02__card-number {
font-size: 36px;
}
.bloc-contact-02--cards-only .bloc-contact-02__card--small .bloc-contact-02__card-number {
font-size: clamp(20px, 1.6vw, 24px);
}
.bloc-contact-02__plugin-form > p .bloc-contact-02__form-submit {
display: block;
width: 100%;
min-height: 54px;
border-radius: 0;
} .bloc-contact-02__card--featured {
display: grid;
grid-template-columns: 280px 1fr;
}
.bloc-contact-02__card--featured .bloc-contact-02__card-image {
height: 100%;
min-height: 300px;
}
.bloc-contact-02__card--featured .bloc-contact-02__card-content {
display: flex;
flex-direction: column;
justify-content: center;
} .bloc-contact-02__card--standard {
display: flex;
flex-direction: column;
}
.bloc-contact-02__card--standard .bloc-contact-02__card-image {
height: 200px;
}  @media (max-width: 1024px) {
section.bloc-contact-02,
section.bloc-contact-02.bloc-contact-02--contact-embed,
body.home .page-content-wrapper .entry-content > section.bloc-contact-02,
body.home .flexible-content-wrapper .entry-content > section.bloc-contact-02,
body.home main#primary .page-content-wrapper .entry-content > section.bloc-contact-02,
body.front-page .page-content-wrapper .entry-content > section.bloc-contact-02,
body.front-page main#primary .page-content-wrapper .entry-content > section.bloc-contact-02,
body:not(.home) .page-content-wrapper .entry-content > section.bloc-contact-02,
body:not(.home) .flexible-content-wrapper .entry-content > section.bloc-contact-02,
body:not(.home) main#primary .page-content-wrapper .entry-content > section.bloc-contact-02,
body:not(.home) main#primary .flexible-content-wrapper .entry-content > section.bloc-contact-02,
body.page-contact .page-content-wrapper .entry-content > section.bloc-contact-02,
body.page-contact main#primary .page-content-wrapper .entry-content > section.bloc-contact-02,
body.page-notre-offre-et-tarif .page-content-wrapper .entry-content > section.bloc-contact-02,
body.page-notre-offre-et-tarif main#primary .page-content-wrapper .entry-content > section.bloc-contact-02,
body.page-comment-ca-marche .page-content-wrapper .entry-content > section.bloc-contact-02,
main#primary .page-content-wrapper .entry-content > section.bloc-contact-02,
main#primary .flexible-content-wrapper .entry-content > section.bloc-contact-02 {
padding: 32px 16px !important;
box-sizing: border-box;
}
.bloc-contact-02__main {
grid-template-columns: 1fr;
gap: 48px;
}
.bloc-contact-02__form-column {
position: static;
order: 2;
}
.bloc-contact-02__content-column {
order: 1;
}
.bloc-contact-02__card--featured {
grid-template-columns: 1fr;
}
.bloc-contact-02__card--featured .bloc-contact-02__card-image {
min-height: 200px;
}
}
@media (max-width: 768px) {
.bloc-contact-02__headline {
font-size: 32px;
}
.bloc-contact-02__form-card {
padding: 24px;
}
.bloc-contact-02__form-input,
.bloc-contact-02__form-select,
.bloc-contact-02__form-textarea {
min-height: 52px;
font-size: 16px;
}
.bloc-contact-02__form-textarea {
min-height: 132px;
}
.bloc-contact-02__form-check {
align-items: flex-start;
gap: 10px;
}
.bloc-contact-02__intro-feature {
gap: 10px;
}
.bloc-contact-02__intro-feature-icon {
width: 18px;
height: 18px;
margin-top: 3px;
}
.bloc-contact-02__card-image {
padding: 28px;
}
.bloc-contact-02__card-image svg {
width: 36px;
height: 36px;
}
.bloc-contact-02__cards-row--duo {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.bloc-contact-02__native-form {
grid-template-columns: 1fr;
}
.bloc-contact-02__plugin-form {
grid-template-columns: 1fr;
}
.bloc-contact-02__plugin-form .bloc-contact-02__wpcf7-form {
grid-template-columns: 1fr;
}
.bloc-contact-02__form-group:nth-of-type(n+3) {
grid-column: auto;
}
.bloc-contact-02__native-form .bloc-contact-02__form-check {
grid-column: auto;
}
.bloc-contact-02__form-submit {
grid-column: auto;
}
} body.page-contact .page-content-wrapper .entry-content > .bloc-contact-02--contact-embed {
overflow: visible !important;
} .bloc-contact-02--contact-embed {
background-color: #f4f6f9;
} body.page-contact .bloc-contact-02__intro-features {
gap: 28px;
}
@media (max-width: 768px) {
body.page-contact .bloc-contact-02__intro-features {
gap: 22px;
}
} @media (max-width: 768px) {
body.page-contact .bloc-contact-02--contact-embed .bloc-contact-02__header {
margin-bottom: clamp(24px, 5vw, 32px);
}
body.page-contact .bloc-contact-02--contact-embed .bloc-contact-02__headline {
font-size: clamp(26px, 6.5vw, 30px);
line-height: 1.18;
margin-bottom: clamp(16px, 4vw, 22px);
}
body.page-contact .bloc-contact-02--contact-embed .bloc-contact-02__main {
gap: clamp(32px, 7vw, 44px);
}
body.page-contact .bloc-contact-02--contact-embed .bloc-contact-02__intro {
gap: clamp(18px, 4vw, 24px);
}
body.page-contact .bloc-contact-02--contact-embed .bloc-contact-02__intro-features {
gap: clamp(18px, 4vw, 26px);
}
body.page-contact .bloc-contact-02--contact-embed .bloc-contact-02__intro-features .icon-text {
align-items: center;
gap: 12px;
}
body.page-contact .bloc-contact-02--contact-embed .bloc-contact-02__intro-features .icon-text__text {
line-height: 1.45;
}
} @media (min-width: 1024px) {
body.page-contact .bloc-contact-02--contact-embed .bloc-contact-02__intro-features .icon-text__text {
font-size: 18px !important;
font-weight: 500 !important;
}
}
@media (max-width: 414px) {
body.page-contact .bloc-contact-02--contact-embed .bloc-contact-02__headline {
font-size: clamp(24px, 6.2vw, 28px);
}
}
.bloc-contact-02--contact-embed .bloc-contact-02__form-card--embed {
padding: 28px !important;
overflow: visible !important;
border-radius: 20px;
border: 1px solid rgba(15, 23, 42, 0.08);
background: #ffffff;
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.04),
0 12px 32px rgba(15, 23, 42, 0.07),
0 28px 64px rgba(36, 100, 209, 0.1);
box-sizing: border-box;
}
.bloc-contact-02__form-card--embed {
padding: 0;
overflow: visible;
border-radius: 12px;
}
.bloc-contact-02--contact-embed .bloc-contact-02__embed-wrap {
width: 100%;
max-width: 100%;
line-height: 0;
background: #ffffff;
border-radius: 16px;
overflow-x: hidden;
overflow-y: visible;
padding: 12px;
box-sizing: border-box;
margin-top: 0;
border: 1px solid rgba(15, 23, 42, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.bloc-contact-02__embed-wrap {
width: 100%;
line-height: 0;
background: #fafafa;
} .bloc-contact-02--contact-embed .bloc-contact-02__embed-iframe {
display: block;
width: 100%;
border: 0;
vertical-align: top;
background: #fff;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
max-height: none;
min-height: min(480px, 55svh);
height: min(680px, calc(100svh - 120px));
} @media (max-width: 1024px) {
.bloc-contact-02--contact-embed .bloc-contact-02__embed-iframe {
max-height: min(640px, 78svh) !important;
}
} @media (min-width: 1024px) {
.bloc-contact-02--contact-embed .bloc-contact-02__embed-iframe {
min-height: 500px;
max-height: 650px !important;
height: 600px;
}
}
.bloc-contact-02__embed-iframe {
display: block;
width: 100%;
max-height: min(648px, 76.5vh, 76.5svh);
height: min(504px, 64.8vh, 70.2svh);
min-height: min(360px, 40.5svh);
border: 0;
vertical-align: top;
background: #fff;
} @media (min-width: 769px) {
.bloc-contact-02--contact-embed .bloc-contact-02__main {
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) !important;
gap: clamp(36px, 4.5vw, 72px);
align-items: start;
}
.bloc-contact-02--contact-embed .bloc-contact-02__content-column {
grid-column: 1;
grid-row: 1;
order: 0;
max-width: 100%;
align-self: start;
}
.bloc-contact-02--contact-embed .bloc-contact-02__form-column {
grid-column: 2;
grid-row: 1;
order: 0;
min-width: 0;
align-self: start;
position: static;
top: auto;
}
.bloc-contact-02--contact-embed .bloc-contact-02__intro {
gap: 28px;
}
body.page-contact .bloc-contact-02--contact-embed .bloc-contact-02__intro-text,
.bloc-contact-02--contact-embed .bloc-contact-02__intro-text {
max-width: none;
color: #1a1c1e;
}
.bloc-contact-02--contact-embed .bloc-contact-02__header {
margin-bottom: 36px;
}
.bloc-contact-02--contact-embed .bloc-contact-02__headline {
color: #121417;
letter-spacing: -0.02em;
}
}
@media (max-width: 768px) {
.bloc-contact-02--contact-embed .bloc-contact-02__main {
grid-template-columns: minmax(0, 1fr) !important;
width: 100%;
}
.bloc-contact-02--contact-embed .bloc-contact-02__form-column,
.bloc-contact-02--contact-embed .bloc-contact-02__content-column {
grid-column: 1;
min-width: 0;
width: 100%;
max-width: 100%;
}
.bloc-contact-02__form-card--embed {
border-radius: 8px;
}
.bloc-contact-02--contact-embed .bloc-contact-02__form-card--embed {
padding: 22px !important;
border-radius: 18px;
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.05),
0 10px 28px rgba(15, 23, 42, 0.08),
0 22px 48px rgba(36, 100, 209, 0.09); min-height: min(calc(420px * 1.2), calc(50svh * 1.2)); max-height: min(calc(736px * 1.2), calc(86svh * 1.2));
}
.bloc-contact-02--contact-embed .bloc-contact-02__embed-wrap {
padding: 10px;
border-radius: 14px;
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.bloc-contact-02--contact-embed .bloc-contact-02__embed-iframe { max-height: min(558px, 73.8vh, 73.8svh) !important;
min-height: min(420px, 50svh);
height: min(620px, calc(100svh - 100px));
border-radius: 10px;
}
.bloc-contact-02__embed-iframe {
max-height: min(558px, 73.8vh, 73.8svh);
height: min(432px, 63vh, 67.5svh);
min-height: min(324px, 37.8svh);
}
} @media (max-width: 767px) { .bloc-contact-02--contact-embed .bloc-contact-02__form-column {
max-height: min(calc(780px * 1.2), calc(90svh * 1.2));
min-height: min(max(420px, 72svh), min(calc(780px * 1.2), calc(90svh * 1.2)));
overflow: visible;
box-sizing: border-box;
}
.bloc-contact-02--contact-embed .bloc-contact-02__form-card--embed { min-height: min(calc(420px * 1.2), calc(48svh * 1.2));
overflow: visible;
}
.bloc-contact-02--contact-embed .bloc-contact-02__embed-iframe { max-height: min(calc(620px * 1.2), calc(86svh * 1.2 - 129.6px)) !important;
min-height: min(420px, 48svh);
height: min(calc(580px * 1.2), calc(86svh * 1.2 - 129.6px));
}
.bloc-contact-02--contact-embed .bloc-contact-02__embed-wrap {
overflow-x: hidden;
overflow-y: visible;
max-height: none;
}
} .bloc-contact-02 .wpcf7-response-output,
.bloc-contact-02__plugin-form .wpcf7-response-output {
margin: 16px 0 0 !important;
padding: 14px 18px !important;
border: 1px solid transparent !important;
border-radius: 12px !important;
font-family: 'Inter Tight', 'Figtree', sans-serif !important;
font-size: 14px !important;
line-height: 1.5 !important;
font-weight: 500 !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
background-color: #f5f8ff;
color: #1f2937;
}
.bloc-contact-02 .wpcf7 form.sent .wpcf7-response-output,
.bloc-contact-02__plugin-form .wpcf7 form.sent .wpcf7-response-output {
background-color: #ecfdf3 !important;
border-color: #abefc6 !important;
color: #067647 !important;
}
.bloc-contact-02 .wpcf7 form.invalid .wpcf7-response-output,
.bloc-contact-02 .wpcf7 form.unaccepted .wpcf7-response-output,
.bloc-contact-02 .wpcf7 form.payment-required .wpcf7-response-output,
.bloc-contact-02__plugin-form .wpcf7 form.invalid .wpcf7-response-output,
.bloc-contact-02__plugin-form .wpcf7 form.unaccepted .wpcf7-response-output {
background-color: #fef3f2 !important;
border-color: #fecdca !important;
color: #b42318 !important;
}
.bloc-contact-02 .wpcf7 form.failed .wpcf7-response-output,
.bloc-contact-02 .wpcf7 form.aborted .wpcf7-response-output,
.bloc-contact-02__plugin-form .wpcf7 form.failed .wpcf7-response-output,
.bloc-contact-02__plugin-form .wpcf7 form.aborted .wpcf7-response-output {
background-color: #fff4ed !important;
border-color: #f9dbaf !important;
color: #b93815 !important;
}
.bloc-contact-02 .wpcf7-not-valid-tip {
font-family: 'Inter Tight', 'Figtree', sans-serif !important;
font-size: 12px !important;
font-weight: 500 !important;
color: #b42318 !important;
margin-top: 6px !important;
display: block;
}
.bloc-contact-02 .wpcf7-form-control.wpcf7-not-valid {
border-color: #f04438 !important;
background-color: #fef3f2 !important;
}