.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}:root {
--color-bg-dark: #40584A;
--color-bg-light: #EFE8DD;
--color-bg-brown: #6F4B33;
--color-bg-gray: #F2F2F2;
--color-bg-footer: #567663;
--color-accent: #C86F46;
--color-text-dark: #0A0604;
--color-white: #FFF;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Spectral', serif;
color: var(--color-text-dark);
line-height: 1.6;
overflow-x: hidden;
}
body.menu-open {
overflow: hidden;
} .navbar {
background: transparent;
padding: 0 64px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
transition: background-color 0.3s ease;
}
.navbar.scrolled {
background: var(--color-bg-dark);
}
.navbar-container {
max-width: 1280px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar-logo {
width: 140px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.navbar-content {
display: flex;
align-items: center;
gap: 32px;
}
.navbar-links {
display: flex;
gap: 32px;
align-items: center;
}
.navbar-link {
color: var(--color-white);
text-decoration: none;
font-size: 18px;
font-weight: 400;
line-height: 1.6;
border-bottom: 2px solid var(--color-white);
border-bottom-color: transparent;
padding-bottom: 0;
transition: border-bottom-color 0.3s ease;
}
.navbar-link:hover {
border-bottom-color: var(--color-white);
}
.navbar-link.is-active{
border-bottom-color: var(--color-white);
}
.navbar-actions {
display: flex;
gap: 16px;
}
.btn {
padding: 8px 20px;
border-radius: 100px;
font-family: 'Spectral', serif;
font-size: 18px;
font-weight: 500;
line-height: 1.6;
cursor: pointer;
transition: all 0.3s;
border: none;
text-decoration: none;
display: inline-block;
}
.btn-secondary-white {
background: transparent;
color: var(--color-white);
border: 2px solid var(--color-white);
}
.btn-secondary-white:hover {
background: var(--color-white);
color: var(--color-bg-dark);
}
.btn-primary {
background: var(--color-accent);
color: var(--color-white);
border: 1px solid var(--color-accent);
}
.btn-primary:hover {
opacity: 0.9;
}
.btn-secondary-dark {
background: transparent;
color: var(--color-text-dark);
border: 2px solid var(--color-text-dark);
}
.btn-secondary-dark:hover {
background: var(--color-text-dark);
color: var(--color-white);
} .hero {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), url(https://amenagementsdumidi.ca/wp-content/uploads/2026/02/hero.jpg) lightgray 50% / cover no-repeat;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 120px 64px 80px 64px;
margin-top: 0;
box-sizing: border-box;
background-repeat: no-repeat; background-position: center;
}
.hero-container {
max-width: 1280px;
width: 100%;
}
.hero-content {
max-width: 777px;
display: flex;
flex-direction: column;
gap: 32px;
}
.hero-title {
font-family: 'Gloock', serif;
font-size: 84px;
font-weight: 400;
line-height: 1.1;
letter-spacing: 0.84px;
color: var(--color-white);
margin-bottom: 32px;
}
.hero-subtitle {
font-family: 'Gloock', serif;
font-size: 32px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 2px;
color: var(--color-white);
margin-bottom: 32px;
opacity: 0.9;
}
.hero-text {
font-size: 20px;
color: var(--color-white);
line-height: 1.6;
}
.hero-actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
} .section {
padding: 112px 64px;
}
.section-container {
max-width: 1280px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 20px;
}
.section-header {
max-width: 768px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
gap: 16px;
}
.section-tagline {
font-size: 16px;
font-weight: 600;
line-height: 1.5;
}
.section-title {
font-family: 'Gloock', serif;
font-size: 60px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.6px;
}
.section-description {
font-size: 20px;
line-height: 1.6;
margin-top: 8px;
} .services-section {
background: var(--color-bg-light);
}
.services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 48px;
}
.service-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
text-align: center;
}
.service-card a{
text-decoration: none;
color: var(--color-text-dark);
transition: all 0.3s ease;
}
.service-card a:hover{
opacity: 0.6;
}
.service-icon {
width: 80px;
height: 80px;
}
.service-title {
font-family: 'Gloock', serif;
font-size: 25px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.4px;
width: 320px;
}
.service-description {
font-size: 18px;
line-height: 1.6;
}
.section-actions {
display: flex;
gap: 24px;
align-items: center;
justify-content: center;
}
.btn-link {
background: transparent;
color: inherit;
border: none;
display: flex;
align-items: center;
gap: 8px;
font-size: 18px;
font-weight: 500;
cursor: pointer;
padding: 10px 0;
text-decoration: none;
transition: all 0.3s ease;
}
.btn-link-text {
border-bottom: 2px solid transparent;
padding-bottom: 2px;
transition: border-bottom-color 0.3s ease;
}
.btn-link:hover .btn-link-text {
border-bottom-color: currentColor;
}
.btn-link svg {
transition: transform 0.3s ease;
}
.btn-link:hover svg {
transform: translateX(4px);
} .portfolio-section {
background: var(--color-bg-brown);
color: var(--color-white);
}
.portfolio-section .section-tagline,
.portfolio-section .section-title,
.portfolio-section .section-description {
color: var(--color-white);
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 48px;
}
.project-card {
display: flex;
flex-direction: column;
gap: 24px;
}
.project-image {
width: 100%;
height: 346.5px;
object-fit: cover;
border-radius: 16px;
}
.project-title {
font-family: 'Gloock', serif;
font-size: 32px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.32px;
}
.project-description {
font-size: 18px;
line-height: 1.6;
}
.project-tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.tag {
padding: 4px 10px;
border-radius: 100px;
border: 2px solid var(--color-white);
font-size: 16px;
font-weight: 600;
line-height: 1.6;
} .blog-section {
background: var(--color-bg-light);
display: none;
}
.blog-section.realisations-off {
background: var(--color-bg-brown);
color: var(--color-white);
}
.blog-section.realisations-off .blog-tag {
border: 2px solid var(--color-white);
}
.blog-section.realisations-off .btn-secondary-dark{
border: 2px solid var(--color-white);
color: var(--color-white);
}
.blog-section.realisations-off .btn-secondary-dark:hover {
background: var(--color-white);
color: var(--color-text-dark);
}
.blog-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 32px;
}
.blog-header .section-header {
text-align: left;
margin: 0;
flex: 1;
}
.blog-grid {
display: grid;
gap: 48px;
}
.blog-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 64px;
}
.blog-card {
display: flex;
gap: 32px;
align-items: flex-start;
}
.blog-image {
width: 288px;
height: 288px;
object-fit: cover;
border-radius: 16px;
flex-shrink: 0;
}
.blog-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 24px;
}
.blog-meta {
display: flex;
gap: 16px;
align-items: center;
}
.blog-tag {
padding: 4px 10px;
border-radius: 100px;
border: 2px solid var(--color-text-dark);
font-size: 16px;
font-weight: 600;
line-height: 1.6;
}
.blog-time {
font-size: 16px;
font-weight: 600;
line-height: 1.6;
}
.blog-title {
font-family: 'Gloock', serif;
font-size: 32px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.32px;
}
.blog-excerpt {
font-size: 18px;
line-height: 1.6;
} .cta-section {
background: var(--color-bg-dark);
color: var(--color-white);
}
.cta-content {
display: flex;
align-items: center;
gap: 32px;
}
.cta-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 24px;
text-align: left;
}
.cta-title {
font-family: 'Gloock', serif;
font-size: 48px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.48px;
}
.cta-description {
font-size: 20px;
line-height: 1.6;
} .footer {
background: var(--color-bg-footer);
color: var(--color-white);
padding: 80px 64px;
}
.footer-container {
max-width: 1280px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 80px;
}
.footer-content {
display: flex;
gap: 64px;
}
.footer-column-main {
flex: 1;
display: flex;
flex-direction: column;
gap: 32px;
align-items: flex-start;
}
.footer-info {
display: flex;
flex-direction: column;
gap: 24px;
}
.footer-info-section {
display: flex;
flex-direction: column;
gap: 4px;
}
.footer-info-section a{
color: #F2F2F2;
text-decoration: none;
}
.footer-info-title {
font-size: 16px;
font-weight: 600;
line-height: 1.6;
}
.footer-info-text {
font-size: 16px;
line-height: 1.6;
}
.footer-info-text a {
color: var(--color-white);
text-decoration: underline;
}
.footer-social {
display: flex;
gap: 12px;
}
.footer-social svg {
width: 24px;
height: 24px;
cursor: pointer;
transition: opacity 0.3s;
}
.footer-social svg:hover {
opacity: 0.8;
}
.footer-column-links {
flex: 1;
display: flex;
gap: 24px;
}
.footer-links {
flex: 1;
display: flex;
flex-direction: column;
}
.footer-link {
padding: 8px 0;
color: var(--color-white);
text-decoration: none;
font-size: 16px;
font-weight: 600;
line-height: 1.6;
transition: text-decoration 0.3s;
}
.footer-link:hover {
text-decoration: underline;
}
.footer-credits {
display: flex;
flex-direction: column;
gap: 32px;
}
.footer-divider {
width: 100%;
height: 2px;
background: var(--color-white);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-copyright {
font-size: 16px;
line-height: 1.6;
}
.footer-legal {
display: flex;
gap: 24px;
}
.footer-legal a {
color: var(--color-white);
text-decoration: underline;
font-size: 16px;
line-height: 1.6;
transition: opacity 0.3s;
}
.footer-legal a:hover {
opacity: 0.8;
} .mobile-menu-btn {
display: none;
background: transparent;
border: none;
color: var(--color-white);
cursor: pointer;
padding: 8px;
}
.mobile-menu {
position: fixed;
top: 72px;
left: 0;
right: 0;
height: calc(100vh - 72px);
background: var(--color-bg-dark);
padding: 32px;
display: flex;
flex-direction: column;
gap: 24px;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
align-items: center;
}
.mobile-menu.active {
opacity: 1;
visibility: visible;
}
.mobile-menu .navbar-link {
text-align: center;
}
.mobile-menu-actions {
display: flex;
gap: 16px;
width: 100%;
justify-content: center;
flex-wrap: wrap;
}
.mobile-menu .btn {
max-width: 180px;
flex: 0 1 auto;
white-space: nowrap;
}
.hamburger-icon {
display: block;
}
.close-icon {
display: none;
}
.mobile-menu-btn.active .hamburger-icon {
display: none;
}
.mobile-menu-btn.active .close-icon {
display: block;
}
.navbar.menu-open {
background: var(--color-bg-dark);
} .hero.hero-little {
padding: 112px 64px;
min-height: inherit;
background-repeat: no-repeat;
background-attachment: inherit;
background-position: center;
}
.hero.hero-little .hero-content {
gap: 24px;
}
.hero.hero-little .hero-title {
margin-bottom: 0;
} .team-section {
background: var(--color-bg-dark);
color: var(--color-white);
}
.team-section .section-title,
.team-section .section-description {
color: var(--color-white);
}
.team-section .section-title {
font-size: 60px;
letter-spacing: 0.6px;
}
.team-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.team-card {
display: flex;
flex-direction: column;
gap: 24px;
}
.team-image {
width: 70%;
margin: 0 auto;
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 16px;
}
.team-info {
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
text-align: center;
}
.team-name {
font-size: 26px;
font-weight: 600;
line-height: 1.6;
}
.team-role {
font-size: 20px;
font-weight: 400;
line-height: 1.6;
}
.team-bio {
font-size: 18px;
line-height: 1.6;
}
.team-social {
display: flex;
gap: 14px;
}
.team-social svg {
width: 24px;
height: 24px;
cursor: pointer;
transition: opacity 0.3s;
}
.team-social svg:hover {
opacity: 0.8;
} .testimonials-section {
background: var(--color-bg-light);
}
.testimonials-section .section-title {
font-size: 60px;
letter-spacing: 0.6px;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 95px;
}
.testimonial-card {
display: flex;
flex-direction: column;
gap: 16px;
}
.stars {
display: flex;
gap: 4px;
}
.testimonial-quote {
font-size: 20px;
line-height: 1.4;
letter-spacing: 0.26px;
}
.testimonial-author {
display: flex;
gap: 16px;
}
.author-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
}
.author-info {
display: flex;
flex-direction: column;
}
.author-name {
font-size: 18px;
font-weight: 600;
line-height: 1.6;
}
.author-title {
font-size: 18px;
font-weight: 400;
line-height: 1.6;
} .projects-grid {
display: flex;
gap: 32px;
overflow-x: hidden;
scroll-behavior: smooth;
}
.projects-grid.listing {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
}
.project-card {
flex: 0 0 calc(33.333% - 21px);
min-width: calc(33.333% - 21px);
}
.project-card {
flex: 0 0 calc(33.333% - 21px);
min-width: calc(33.333% - 21px);
display: flex;
flex-direction: column;
gap: 24px;
}
.project-image {
width: 100%;
aspect-ratio: 394 / 262.6;
border-radius: 16px;
object-fit: cover;
}
.project-content {
display: flex;
flex-direction: column;
gap: 8px;
}
.project-tag {
font-size: 16px;
font-weight: 600;
line-height: 1.6;
color: var(--color-text-dark);
}
.project-title {
font-family: 'Gloock', serif;
font-size: 32px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.32px;
}
.project-description {
font-size: 18px;
line-height: 1.6;
}
.project-meta {
display: flex;
align-items: center;
gap: 16px;
}
.project-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
}
.project-meta-content {
display: flex;
flex-direction: column;
}
.project-meta-name {
font-size: 16px;
font-weight: 600;
line-height: 1.6;
}
.project-meta-info {
display: flex;
gap: 8px;
align-items: center;
font-size: 16px;
line-height: 1.6;
} .slider-navigation {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 24px;
}
.slider-dots {
display: flex;
gap: 8px;
}
.slider-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-text-dark);
cursor: pointer;
transition: opacity 0.3s, background-color 0.3s;
}
.slider-dot.active {
background: var(--color-accent);
opacity: 1;
}
.slider-dot:not(.active) {
opacity: 0.2;
}
.slider-buttons {
display: flex;
gap: 16px;
}
.slider-btn {
display: flex;
padding: 12px;
justify-content: center;
align-items: center;
border-radius: 100px;
border: 1px solid var(--color-accent);
background: var(--color-accent);
cursor: pointer;
transition: all 0.3s;
}
.slider-btn:hover {
background: transparent;
border-color: var(--color-accent);
}
.slider-btn:hover svg path {
fill: var(--color-accent);
}
.slider-btn svg {
width: 24px;
height: 24px;
}
.slider-btn svg path {
fill: var(--color-white);
} .featured-project {
background: var(--color-bg-brown);
padding: 112px 64px;
}
.featured-container {
max-width: 1280px;
margin: 0 auto;
display: flex;
gap: 80px;
align-items: flex-start;
}
.featured-content {
width: 420px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 32px;
}
.featured-info {
display: flex;
flex-direction: column;
gap: 24px;
}
.featured-meta {
display: flex;
align-items: center;
gap: 16px;
}
.featured-tag {
padding: 4px 10px;
border-radius: 100px;
border: 2px solid var(--color-white);
background: transparent;
font-size: 16px;
font-weight: 600;
line-height: 1.6;
color: var(--color-white);
}
.featured-reading-time {
font-size: 16px;
font-weight: 600;
line-height: 1.6;
color: var(--color-white);
}
.featured-title {
font-family: 'Gloock', serif;
font-size: 60px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.6px;
color: var(--color-white);
}
.featured-date {
display: flex;
gap: 4px;
padding-top: 4px;
font-size: 16px;
line-height: 1.6;
color: var(--color-white);
}
.featured-image {
flex: 1;
height: 450px;
border-radius: 16px;
object-fit: cover;
} .blog-section {
background: var(--color-bg-light);
}
.page-template-conseil .blog-section .section-header {
margin: 0;
text-align: left;
max-width: none;
}
.page-template-conseil .blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.page-template-conseil .blog-card {
display: flex;
flex-direction: column;
gap: 24px;
}
.page-template-conseil .blog-image {
width: 100%;
height: 270px;
object-fit: cover;
border-radius: 16px;
}
.page-template-conseil .blog-content {
display: flex;
flex-direction: column;
gap: 16px;
}
.page-template-conseil .blog-meta {
display: flex;
gap: 16px;
align-items: center;
}
.page-template-conseil .blog-tag {
padding: 4px 10px;
border-radius: 100px;
border: 2px solid var(--color-text-dark);
font-size: 16px;
font-weight: 600;
line-height: 1.6;
}
.page-template-conseil .blog-time {
font-size: 16px;
font-weight: 600;
line-height: 1.6;
}
.page-template-conseil .blog-title {
font-family: 'Gloock', serif;
font-size: 32px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.32px;
}
.page-template-conseil .blog-excerpt {
font-size: 18px;
line-height: 1.6;
}
.page-template-conseil .btn-link {
background: transparent;
color: inherit;
border: none;
display: flex;
align-items: center;
gap: 8px;
font-size: 18px;
font-weight: 400;
cursor: pointer;
padding: 0;
text-decoration: none;
transition: all 0.3s ease;
}
.page-template-conseil .btn-link-text {
border-bottom: 2px solid transparent;
padding-bottom: 2px;
transition: border-bottom-color 0.3s ease;
}
.page-template-conseil .btn-link:hover .btn-link-text {
border-bottom-color: currentColor;
}
.page-template-conseil .btn-link svg {
transition: transform 0.3s ease;
}
.page-template-conseil .btn-link:hover svg {
transform: translateX(4px);
} .form-section {
background: var(--color-bg-light);
}
.form-container {
max-width: 768px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 24px;
}
.form-row {
display: flex;
gap: 24px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.form-group.full-width {
width: 100%;
}
.form-label {
font-size: 18px;
font-weight: 400;
color: var(--color-text-dark);
}
.form-input,
.form-select,
.form-textarea {
padding: 8px 12px;
border-radius: 12px;
border: 2px solid var(--color-text-dark);
background: transparent;
font-family: 'Spectral', serif;
font-size: 18px;
color: var(--color-text-dark);
}
.form-input {
height: 48px;
}
.form-select {
height: 48px;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0008 15.2019C11.8888 15.2019 11.7832 15.1813 11.684 15.1399C11.5847 15.0986 11.4894 15.0323 11.398 14.9409L6.45402 9.99694C6.28402 9.82694 6.20319 9.62385 6.21152 9.38769C6.21985 9.15152 6.30902 8.94844 6.47902 8.77844C6.64902 8.60844 6.85211 8.52344 7.08827 8.52344C7.32444 8.52344 7.52752 8.60844 7.69752 8.77844L12.0008 13.1067L16.329 8.77844C16.499 8.60844 16.6979 8.5276 16.9258 8.53594C17.1536 8.54427 17.3525 8.63344 17.5225 8.80344C17.6925 8.97344 17.7775 9.17652 17.7775 9.41269C17.7775 9.64885 17.6925 9.85194 17.5225 10.0219L12.6035 14.9409C12.5122 15.0323 12.4169 15.0986 12.3175 15.1399C12.2184 15.1813 12.1128 15.2019 12.0008 15.2019Z' fill='%230A0604' fill-opacity='0.6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 40px;
width: 53%;
}
.form-textarea {
height: 180px;
resize: vertical;
width: 100%;
}
.form-textarea::placeholder {
color: rgba(10, 6, 4, 0.6);
}
.wpcf7-checkbox {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}   
.wpcf7-checkbox label {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 16px;
}   
.wpcf7-checkbox input{
border: 2px solid var(--color-text-dark);
width: 18px;
height: 18px;
min-width: 18px;
min-height: 18px;
border-radius: 4px;
background: transparent;
appearance: none;
cursor: pointer;
}
.wpcf7-checkbox input:checked {
background-color: var(--color-text-dark);
background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L4.5 7.5L11 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}       
.wpcf7-checkbox input:checked {
background-color: var(--color-text-dark);
background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L4.5 7.5L11 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.wpcf7-checkbox label {
font-size: 16px;
}
.wpcf7-checkbox label a {
text-decoration: underline;
color: var(--color-text-dark);
}
.form-submit {
display: flex;
padding: 10px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 100px;
border: 1px solid var(--color-accent);
background: var(--color-accent);
color: var(--color-white);
font-family: 'Spectral', serif;
font-size: 18px;
font-weight: 500;
cursor: pointer;
align-self: flex-start;
}
.form-submit:hover {
opacity: 0.9;
} .contact-section {
background: var(--color-bg-dark);
color: var(--color-white);
}
.contact-row {
display: flex;
gap: 48px;
}
.contact-item {
display: flex;
flex-direction: column;
gap: 24px;
flex: 1;
}
.contact-icon {
width: 48px;
height: 48px;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 24px;
}
.contact-content {
display: flex;
flex-direction: column;
gap: 16px;
}
.contact-heading {
font-family: 'Gloock', serif;
font-size: 40px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.4px;
color: var(--color-white);
}
.contact-text {
font-size: 18px;
line-height: 1.6;
color: var(--color-white);
}
.contact-link {
font-size: 18px;
line-height: 1.6;
color: var(--color-white);
text-decoration: underline;
}
.page-template-contact .cta-section{
display: none;
}
.radio-grid .wpcf7-list-item {
margin: 0;
}
.radio-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
} .radio-grid .wpcf7-list-item label {
display: flex;
align-items: center;
gap: 10px;
} .wpcf7-form-control-wrap {
display: block;
margin: 10px 0 0 0;
}
.radio-item .wpcf7-list-item {
margin: 0 !important;
}
.radio-item label {
display: flex;
align-items: center;
gap: 10px;
} .wpcf7-not-valid-tip {
margin-top: 6px;
font-size: 14px;
}
.wpcf7-radio {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px 24px; } .wpcf7-list-item {
margin: 0; } .wpcf7-list-item label {
display: flex;
align-items: center;
gap: 10px;
} .split-section {
display: flex;
gap: 80px;
align-items: center;
}
.split-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 32px;
}
.split-image {
flex: 1;
}
.split-image img {
width: 100%;
height: 640px;
object-fit: cover;
border-radius: 16px;
}
.split-subtitle {
font-family: 'Gloock', serif;
font-size: 48px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.48px;
}
.split-text {
font-size: 20px;
line-height: 1.6;
}
.features-row {
display: flex;
gap: 16px;
padding: 8px 0;
}
.feature-column {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
}
.feature-heading {
font-family: 'Gloock', serif;
font-size: 26px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.26px;
}
.feature-text {
font-size: 18px;
line-height: 1.6;
} .features-section {
background: var(--color-bg-dark);
color: var(--color-white);
}
.features-header {
display: flex;
gap: 80px;
}
.features-header-col {
flex: 1;
}
.features-title {
font-family: 'Gloock', serif;
font-size: 48px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.48px;
color: var(--color-white);
}
.features-description {
font-size: 20px;
line-height: 1.6;
color: var(--color-white);
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
}
.feature-card {
display: flex;
flex-direction: column;
gap: 32px;
}
.feature-image {
width: 100%;
height: 234px;
object-fit: cover;
border-radius: 16px;
}
.feature-card-content {
display: flex;
flex-direction: column;
gap: 32px;
}
.feature-card-text {
display: flex;
flex-direction: column;
gap: 16px;
}
.feature-card-title {
font-family: 'Gloock', serif;
font-size: 32px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.32px;
color: var(--color-white);
}
.feature-card-description {
font-size: 18px;
line-height: 1.6;
color: var(--color-white);
}
.btn-link {
background: transparent;
color: inherit;
border: none;
display: flex;
align-items: center;
gap: 8px;
font-size: 18px;
font-weight: 500;
cursor: pointer;
padding: 0;
text-decoration: none;
transition: all 0.3s ease;
}
.btn-link-text {
border-bottom: 2px solid transparent;
padding-bottom: 2px;
transition: border-bottom-color 0.3s ease;
}
.btn-link:hover .btn-link-text {
border-bottom-color: currentColor;
}
.btn-link svg {
transition: transform 0.3s ease;
}
.btn-link:hover svg {
transform: translateX(4px);
} .faq-section {
background: var(--color-bg-light);
}
.accordion-list {
display: flex;
flex-direction: column;
border-bottom: 2px solid var(--color-text-dark);
}
.accordion-item {
display: flex;
flex-direction: column;
}
.accordion-question {
display: flex;
padding: 20px 0;
align-items: center;
gap: 24px;
border-top: 2px solid var(--color-text-dark);
cursor: pointer;
}
.accordion-question-text {
flex: 1;
font-size: 20px;
font-weight: 700;
line-height: 1.6;
}
.accordion-answer {
max-width: 768px;
font-size: 18px;
line-height: 1.6;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
padding: 0;
}
.accordion-item.open .accordion-answer {
max-height: 500px;
opacity: 1;
padding-bottom: 24px;
}
.accordion-question svg {
transition: transform 0.3s ease;
transform: rotate(180deg);
flex-shrink: 0;
}
.accordion-item.open .accordion-question svg {
transform: rotate(0deg);
}
.faq-cta {
max-width: 560px;
display: flex;
flex-direction: column;
gap: 24px;
}
.faq-cta-title {
font-family: 'Gloock', serif;
font-size: 40px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.4px;
}
.faq-cta-text {
font-size: 20px;
line-height: 1.6;
}
.faq-cta-actions {
display: flex;
gap: 24px;
}
.breadcrumb ul {
display: flex;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
}
.breadcrumb li::after {
content: "/";
margin-left: 8px;
}
.breadcrumb li:last-child::after {
content: "";
}
.breadcrumb a {
text-decoration: none;
color: #555;
border-bottom: 2px solid transparent;
padding-bottom: 2px;
transition: border-bottom-color 0.3s ease;
}
.breadcrumb a:hover {
color: #000;
border-bottom: 2px solid #000;
}
.breadcrumb li[aria-current="page"] {
color:  var(--color-accent);
font-weight: 600;
}
@media (max-width: 1050px) {
.blog-grid {
grid-template-columns: 1fr;
gap: 48px;
}
.radio-row {
flex-direction: column;
}
.split-subtitle {
font-size: 36px;
}
}
@media (max-width: 1200px) {  
.features-row {
display: block;
gap: 24px;
}
.feature-column{
flex: 0 0 calc(100% - 0px);
min-width: calc(100% - 0px);
padding: 0 24px 24px 0  ;
}
.feature-column:last-child{
padding: 0 24px 0px 0  ;
}
.feature-heading{
font-size: 24px;
}
}
@media (max-width: 1024px) {  
.features-grid{
grid-template-columns: repeat(1, 1fr);
gap: 24px;
}
.team-image {
width: 100%;
}
.feature-card{
flex: 0 0 calc(100% - 0px);
min-width: calc(100% - 0px);
}
.feature-image{
height: 240px;
}
.feature-card-content{
gap: 24px;
}
.feature-card-text{
gap: 16px;
}
.feature-card-title{
font-size: 24px;
}
.feature-card-description{
font-size: 16px;
}
.feature-card-content{
display: block;
}
.form-container{
padding: 0 32px;
}
.form-row{
flex-direction: column;
}
.form-group{
flex: 0 0 calc(100% - 0px);
min-width: calc(100% - 0px);
}
.form-group:last-child{
padding: 0;
}
.form-group:last-child .form-label{
padding: 0;
}
.form-submit {
width: 100%;
}   
.form-input {
font-size: 16px;
}
.form-select {
font-size: 16px;
}
.form-textarea {
font-size: 16px;
}
.form-label {
font-size: 16px;
}
.section-header {
flex-direction: column;
gap: 24px;
}
.section-header-col {
flex: 0 0 calc(100% - 0px);
min-width: calc(100% - 0px);
}
.section-header-col:last-child {
padding: 0;
}
.section-header-col:last-child .section-header-title {
padding: 0;
}
.section-header-col:last-child .section-header-description {
padding: 0;
}
.wpcf7-radio {
grid-template-columns: repeat(2, 1fr);  
}
.wpcf7-list-item {
margin: 0;
}
.wpcf7-list-item label {
font-size: 16px;
}
.wpcf7-list-item input {
font-size: 16px;
}
} @media (max-width: 768px) {
.navbar {
padding: 0 32px;
}
.hero {
padding: 180px 32px 80px 32px;
min-height: auto;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.hero-title {
font-size: 36px;
}
.hero-subtitle {
font-size: 24px;
margin-bottom: 24px;
}
.section {
padding: 80px 32px;
}
.testimonials-section .section-title {
font-size: 32px;
}
.testimonial-quote{
font-size: 16px;
}
.section-title {
font-size: 32px;
}
.section-description {
font-size: 16px;
}
.services-grid {
grid-template-columns: 1fr;
gap: 64px;
}
.portfolio-grid,
.blog-row {
grid-template-columns: 1fr;
}
.blog-header {
flex-direction: column;
align-items: flex-start;
}
.blog-card {
flex-direction: column;
}
.blog-image {
width: 100%;
}
.cta-content {
flex-direction: column;
align-items: stretch;
gap: 24px;
}
.cta-text {
flex: none;
}
.cta-title {
font-size: 35px;
}
.cta-content .btn {
display: block;
text-align: center;
width: 200px;
}
.footer {
padding: 64px 32px;
}
.features-row{
display: block;
gap: 24px;
}
.footer-content {
flex-direction: column;
}
.footer-bottom {
flex-direction: column;
gap: 16px;
text-align: center;
}
.team-grid {
grid-template-columns: 1fr;
}
.testimonials-grid {
grid-template-columns: 1fr;
}
.features-grid{
grid-template-columns: 1fr;
}
.project-card {
flex: 0 0 calc(100% - 0px);
min-width: calc(100% - 0px);
}
.features-header{
display: block;
gap: 24px;
}   
.features-title{
display: block;
font-size: 30px;
}
.features-header h2{
padding-bottom: 24px;
}   
.features-header-col{
flex: 0 0 calc(100% - 0px);
min-width: calc(100% - 0px);
}
.featured-project {
padding: 60px 16px;
}
.featured-title {
font-size: 36px;
}
.blog-grid,
.portfolio-grid {
grid-template-columns: 1fr;
}
.form-row {
flex-direction: column;
}
.contact-row {
flex-direction: column;
}
.split-section {
flex-direction: column;
}
.form-select {
width: 100%;
}
.form-input {
width: 100%;
}
.form-textarea {
width: 100%;
}
.form-label {
font-size: 16px;
}
.form-submit {
width: 100%;
}
.form-submit:hover {
opacity: 0.9;
}
.form-submit:active {
opacity: 0.8;
}
.wpcf7-checkbox {
grid-template-columns: repeat(2, 1fr);
}
.footer-column-links { 
gap: 0;
}
.footer-content{ 
gap: 0;
}
.footer-container{ 
gap: 24px;
}
} @media (max-width: 480px) {
.hero#accueil {
padding: 100px 32px 80px 32px;
}
.hero-subtitle {
font-size: 14px;
margin-bottom: 10px;
}
.hero-title {
font-size: 32px;
margin-bottom: 15px;
}
.hero-actions {
flex-direction: column;
gap: 12px;
}
.hero-actions .btn {
width: 100%;
font-size: 14px;
padding: 12px 16px;
text-align: center;
white-space: nowrap;
}
.section-actions {
display: block;
text-align: center;
}
.team-grid {
grid-template-columns: repeat(1, 1fr);
}
.testimonials-grid {
grid-template-columns: 1fr;
}
.faq-cta-title {
font-size: 25px;
}
.faq-cta-text {
font-size: 16px;
}
.faq-cta-actions {
display: block;
}
.faq-cta-actions .btn {
width: 100%;
display: block;
text-align: center;
}
.breadcrumb ul {
display: block;
gap: 0px;
padding: 0;
margin: 0;
}
.breadcrumb li {
display: inline-block;
padding: 0 5px;
margin: 0;          
}
.accordion-question-text    {
font-size: 16px;
}
.accordion-answer {
font-size: 14px;
}
.accordion-question svg {
width: 24px;
height: 24px;
}
.cta-title {
font-size: 30px;
}
.cta-text {
font-size: 16px;
}
.cta-content .btn {
width: 100%;
}
.hero.hero-little {
padding: 90px 32px 32px 32px;
}
.hero-content {
gap: 24px;
}
.hero-title {
font-size: 32px;
margin-bottom: 15px;
}
.hero-subtitle {
font-size: 14px;
margin-bottom: 10px;
}
.hero-actions {
flex-direction: column;
gap: 12px;
}
.hero-actions .btn {
width: 100%;
}
.section {
padding: 64px 32px;
}
.section-title {
font-size: 32px;
}
.section-description {
font-size: 16px;
}
.section-actions {
display: block;
text-align: center;
}
.section-actions .btn {
width: 100%;
}
.team-section .section-title{
font-size: 32px;
}
.team-section .section-description {
font-size: 16px;
}
.team-grid {
grid-template-columns: 1fr;
}
.team-card {
flex-direction: column;
}
.team-card-content {
gap: 24px;
}
.team-card-text {
gap: 16px;
}
.team-card-title {
font-size: 24px;
}
.team-card-description {
font-size: 16px;
}
.team-card-content {
display: block;
}
.team-card-image {
width: 100%;
}
.team-card-image img {
width: 100%;
}
.wpcf7-radio {
grid-template-columns: repeat(1, 1fr);  
}
.wpcf7-checkbox {
grid-template-columns: repeat(1, 1fr);
} 
.wpcf7-radio label {
font-size: 16px;
}
.wpcf7-checkbox label {
font-size: 16px;
}   
.wpcf7-radio input {
width: 18px;
height: 18px;
min-width: 18px;
min-height: 18px;
border-radius: 4px;
}
.wpcf7-checkbox input {
width: 18px;
height: 18px;
min-width: 18px;
min-height: 18px;
border-radius: 4px;
}
.wpcf7-radio input:checked {
background-color: var(--color-text-dark);
background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L4.5 7.5L11 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.wpcf7-checkbox input:checked {
background-color: var(--color-text-dark);
background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L4.5 7.5L11 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.footer-column-links {
display: block;
}
} @media (max-width: 1050px) {
.navbar-content {
display: none;
}
.mobile-menu-btn {
display: block;
}
} @media (min-width: 769px) and (max-width: 1024px) {
.project-card {
flex: 0 0 calc(50% - 16px);
min-width: calc(50% - 16px);
}
.featured-project {
padding: 80px 32px;
}
.featured-container {
flex-direction: column;
}
.featured-content {
width: 100%;
}
.featured-image {
width: 100%;
}
} @media (min-width: 481px) and (max-width: 1050px) {
.navbar {
padding: 0 24px;
}
.hero {
padding: 120px 24px 50px 24px;
min-height: auto;
}
.hero-title {
font-size: 42px;
}
.hero-text {
font-size: 18px;
}
.navbar-link {
border-bottom: none;
display: block;
}
.section {
padding: 64px 24px;
}
.section-container {
gap: 48px;
}
.section-title {
font-size: 36px;
}
.service-title {
font-size: 32px;
}
.blog-card {
flex-direction: column;
}
.blog-image {
width: 100%;
}
.cta-title {
font-size: 36px;
}
.footer {
padding: 48px 24px;
}
.footer-column-links {
flex-direction: column;
}
.footer-legal {
flex-direction: column;
gap: 12px;
}
}