:root { --black: #111212;
--white: #FFFFFF;
--dove: #666666;
--silver: #DCDCDC;
--wild-sand: #F5F5F5;
--hippie: #4DA19A;
--hippie-80: #70B4AE;
--hippie-50: #A6D0CD;
--hippie-30: #C9E3E1;
--hippie-16: #E3F0EF;
--primary: var(--hippie);
--content-color: var(--black);
--accent-content-color: var(--primary); --bold: "Manrope", sans-serif;
--body: "Manrope", sans-serif; --border-radius: 12px; --header-height: 87px;
--container-padding: 2rem;
--spacing-xxs: 0.5rem;
--spacing-xs: 1rem;
--spacing-sm: 1.5rem;
--spacing-md: 3.75rem;
--spacing-lg: 6.25rem;
--spacing-section-inner: var(--spacing-md);
--spacing-section-outer: var(--spacing-lg);
--content-spacing: 2.25em; --transition-duration: 250ms;
--transition-timing: ease;
}
@media screen and (min-width: 992px) {
:root {
--spacing-lg: 10rem;
}
} @keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
html {
scroll-behavior: smooth;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
color: var(--content-color);
background-color: var(--white);
&.body-freeze {
overflow: hidden;
}
}
#main {
margin-top: 0;
}
#main>section {
padding-block: var(--spacing-section-outer);
opacity: 1;
translate: none;
}
.js-enabled #main>section:not(.js-alwaysInView) {
opacity: 0;
translate: 0 20px;
transition: opacity calc(var(--transition-duration) * 2) ease-out, translate calc(var(--transition-duration) * 2) ease-out;
&.js-inView {
opacity: 1;
translate: 0;
}
}
img,
svg,
video {
max-width: 100%;
height: auto;
}
::selection {
color: var(--white);
background-color: var(--primary);
}
:focus-visible {
outline: 2px dashed var(--content-color);
outline-offset: 4px;
}
a,
button,
input,
select,
textarea {
&:focus:not(:focus-visible) {
outline: none;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*:before,
*:after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 1ms !important;
}
#main>section:not(.js-alwaysInView) {
opacity: 1;
transition: none;
translate: none;
}
}
body {
font-size: 1rem;
font-family: var(--body);
font-weight: 400;
line-height: 1.65;
}
p,
.p-size,
li {
color: inherit;
font-family: var(--body);
font-size: inherit;
line-height: 1.65;
}
strong,
b {
font-weight: 700;
}
em,
i {
font-style: italic;
}
main a:not([class]) {
color: var(--content-color);
font-weight: 600;
}
h1,
.h1-size,
h2,
.h2-size,
h3,
.h3-size,
h4,
.h4-size,
h5,
.h5-size,
h6,
.h6-size {
color: inherit;
font-family: var(--bold);
font-style: normal;
font-weight: 600;
line-height: 1.15;
}
h1,
.h1-size {
font-size: clamp(2.5rem, 6vw, 4rem);
}
h2,
.h2-size {
font-size: clamp(2rem, 5vw, 3rem);
}
h3,
.h3-size {
font-size: clamp(1.5rem, 4vw, 2.125rem);
}
h4,
.h4-size {
font-size: 1.5rem;
}
h5,
.h5-size {
font-size: 1.25rem;
}
h6,
.h6-size {
font-size: 1.125rem;
}
.formatted,
.formatted .wp-block-media-text__content {
--list-indent: 1.75em;
display: flex;
flex-direction: column;
gap: var(--content-spacing);
color: var(--content-color);
overflow-wrap: break-word;
}
.formatted > * {
margin-top: 0;
margin-bottom: 0;
}
.formatted a:not([class]) {
overflow-wrap: anywhere;
} .formatted ul,
.formatted ol {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.75em;
list-style: none;
}
.formatted ol {
counter-reset: item;
}
.formatted ul > li,
.formatted ol > li {
position: relative;
padding-left: var(--list-indent);
}
.formatted ul > li:before,
.formatted ol > li:before {
position: absolute;
left: 0;
}
.formatted ul > li:before {
content: "";
width: 6px;
height: 6px;
margin-top: 0.7em;
background-color: currentColor;
border-radius: 50%;
}
.formatted ol > li {
counter-increment: item;
}
.formatted ol > li:before {
content: counter(item);
font-weight: 700;
} .formatted figure,
.formatted figure img {
max-width: 100%;
}
.formatted figure img {
height: auto;
display: block;
}
.formatted figcaption {
margin-top: 0.5em;
font-size: 0.875em;
font-style: italic;
} .formatted .wp-block-quote {
padding-left: 2em;
border-left: 2px solid var(--accent-content-color);
} .formatted .wp-block-table {
overflow-x: auto;
}
.formatted table {
width: 100%;
border-collapse: collapse;
}
.formatted td,
.formatted th {
padding: 1em;
border: 1px solid var(--silver);
vertical-align: middle;
}
.formatted th {
font-weight: 700;
} .rank-math-breadcrumb a,
.rank-math-breadcrumb .last,
.rank-math-breadcrumb .separator {
color: var(--content-color);
font-size: 0.875em;
}
.rank-math-breadcrumb .last {
font-weight: 700;
}
.btn-wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-xxs);
}
.btn {
min-height: 45px;
padding: var(--spacing-xs) var(--spacing-xs);
display: inline-flex;
justify-content: center;
align-items: center;
font-family: var(--body);
font-size: 0.875rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
text-transform: uppercase;
border: 2px solid transparent;
border-radius: var(--border-radius);
cursor: pointer;
transition: color var(--transition-timing) var(--transition-duration), background-color var(--transition-timing) var(--transition-duration), border-color var(--transition-timing) var(--transition-duration);
} .btn-primary {
color: var(--white);
background-color: var(--primary);
border-color: var(--primary);
}
.btn-primary:hover,
.btn-primary:focus-visible {
color: var(--black);
background-color: transparent;
border-color: var(--black);
} .btn-black {
color: var(--white);
background-color: var(--black);
border-color: var(--black);
}
.btn-black:hover,
.btn-black:focus-visible {
color: var(--black);
background-color: transparent;
} .btn-icon-arrow-right:after {
content: "";
width: 0.9375rem;
height: 0.75rem;
margin-left: var(--spacing-xs);
flex: 0 0 auto;
background: currentColor;
-webkit-mask: url(//vox-btp.fr/wp-content/themes/vox-aedificatoris/assets/medias/icons/arrow-right.svg) center / contain no-repeat;
mask: url(//vox-btp.fr/wp-content/themes/vox-aedificatoris/assets/medias/icons/arrow-right.svg) center / contain no-repeat;
} .inline-link {
display: inline-flex;
align-items: center;
gap: var(--spacing-xxs);
color: inherit;
font-size: 0.875rem;
font-weight: 700;
line-height: 1.2;
padding-bottom: 0.35em;
text-decoration: none;
text-transform: uppercase;
border-bottom: 2px solid currentColor;
}
.inline-link-primary {
color: var(--primary);
}
.inline-link:after {
content: "";
width: 0.9375rem;
height: 0.75rem;
flex: 0 0 auto;
background: currentColor;
-webkit-mask: url(//vox-btp.fr/wp-content/themes/vox-aedificatoris/assets/medias/icons/arrow-right.svg) center / contain no-repeat;
mask: url(//vox-btp.fr/wp-content/themes/vox-aedificatoris/assets/medias/icons/arrow-right.svg) center / contain no-repeat;
transition: translate var(--transition-duration) var(--transition-timing);
}
.inline-link:hover:after,
.inline-link:focus-visible:after {
translate: 0.25rem 0;
}
.cols-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: var(--spacing-section-inner);
}
@media screen and (min-width: 992px) {
.cols-wrapper {
flex-direction: row;
}
.cols-wrapper.reverse {
flex-direction: row-reverse;
}
}
.cols-wrapper > .col {
width: 100%;
flex: 1 1 0;
}
@media screen and (min-width: 992px) {
.cols-wrapper > .col {
max-width: 50%;
}
}
.container {
max-width: 720px;
margin: 0 auto;
padding-right: var(--container-padding);
padding-left: var(--container-padding);
position: relative;
}
@media screen and (min-width: 992px) {
.container {
max-width: 800px;
}
}
@media screen and (min-width: 1200px) {
.container {
max-width: 1200px;
}
} @media screen and (min-width: 992px) {
.container-sm {
max-width: 1000px;
}
} @media screen and (min-width: 992px) {
.container-lg {
max-width: 1050px;
}
}
@media screen and (min-width: 1200px) {
.container-lg {
max-width: 1450px;
}
} .container-full {
max-width: unset;
}
.eyebrow {
display: inline-flex;
align-items: center;
min-height: 1.75rem;
margin: 0;
padding: 0.25rem 0.75rem;
color: var(--primary);
background-color: var(--hippie-16);
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
}
#footer {
--content-color: var(--white);
position: relative;
color: var(--white);
background-color: var(--black);
}
#footer a {
color: inherit;
}
#footer a:focus-visible {
outline-color: var(--white);
} #main-footer {
padding-block: var(--spacing-md);
font-size: 0.875rem;
}
#main-footer .footer-content {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: var(--spacing-md);
}
@media screen and (min-width: 768px) {
#main-footer .footer-content {
grid-template-columns: minmax(0, 2fr) minmax(8rem, 0.7fr) minmax(10rem, 1fr);
align-items: start;
}
}
#main-footer .footer-identity {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-md);
}
@media screen and (min-width: 768px) {
#main-footer .footer-identity {
grid-column: auto;
}
}
#main-footer .footer-logo {
width: min(100%, 285px);
display: block;
}
#main-footer .footer-logo .custom-logo-link {
display: block;
}
#main-footer .footer-logo img {
width: 100%;
height: auto;
display: block;
}
#main-footer .footer-contact {
display: flex;
flex-direction: column;
gap: 0.15rem;
font-size: inherit;
font-style: normal;
line-height: 1.6;
}
#main-footer .footer-contact a,
#main-footer .menu-footer a {
text-underline-offset: 0.15em;
}
#main-footer .footer-title {
margin-bottom: var(--spacing-sm);
font-size: 1rem;
font-weight: 600;
line-height: 1.4;
}
#main-footer .menu-footer {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xxs);
}
#main-footer .menu-footer li {
font-size: inherit;
line-height: 1.5;
}
#main-footer .menu-footer a {
text-decoration: none;
}
#main-footer .menu-footer a:hover,
#main-footer .menu-footer a:focus-visible {
text-decoration: underline;
}
#main-footer .footer-copyright {
margin-top: var(--spacing-md);
padding-top: var(--spacing-xs);
color: rgba(255, 255, 255, 0.7);
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
#main-footer .footer-copyright p {
font-size: inherit;
line-height: 1.5;
}
label {
display: block;
font-weight: 600;
}
input,
textarea,
select,
button {
font: inherit;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
textarea,
select {
width: 100%;
padding: var(--spacing-xs);
color: var(--content-color);
background-color: var(--white);
border: 1px solid var(--silver);
border-radius: var(--border-radius);
}
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="url"]:focus-visible,
input[type="number"]:focus-visible,
input[type="date"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
border-color: var(--content-color);
}
textarea {
min-height: 10rem;
resize: vertical;
}
.wpcf7-list-item {
margin: 0;
}
.grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: var(--spacing-section-inner);
}
@media screen and (min-width: 768px) {
.grid.grid-2,
.grid.posts,
.grid.realisations {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 1200px) {
.grid.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid.grid-4 {
grid-template-columns: repeat(4, 1fr);
}
}
body.js-menuOpened {
overflow: hidden;
}
#header {
width: 100%;
padding: var(--spacing-xs) 0;
position: relative;
z-index: 99;
background-color: var(--white);
}
@media screen and (min-width: 1200px) {
#header {
padding: 0;
}
}
.home #header {
position: absolute;
top: 0;
color: var(--white);
background-color: transparent;
}
.admin-bar.home #header {
top: var(--admin-bar-visible-height, var(--wp-admin--admin-bar--height, 32px));
}
.js-menuOpened.home #header {
color: var(--black);
background-color: var(--white);
}
#header .inner-header {
min-height: 55px;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--spacing-sm);
}
@media screen and (min-width: 1200px) {
#header .inner-header {
min-height: 100px;
}
}
#header .custom-logo {
width: 100%;
max-width: 295px;
max-height: 55px;
display: block;
filter: brightness(0);
}
.home:not(.js-menuOpened) #header .custom-logo {
filter: brightness(0) invert(1);
}
.home:not(.js-menuOpened) #header a:focus-visible,
.home:not(.js-menuOpened) #header button:focus-visible {
outline-color: var(--white);
}
#header .custom-logo-link,
#header .logo-link {
display: inline-block;
}
#header .logo-link {
color: inherit;
font-size: 1.5rem;
font-weight: 700;
text-decoration: none;
}
#header .nav-wrapper {
width: 100%;
height: calc(var(--viewport-height, 100vh) - var(--header-height) - var(--admin-bar-visible-height, 0px));
padding: var(--spacing-sm);
position: fixed;
top: calc(var(--header-height) + var(--admin-bar-visible-height, 0px));
right: 0;
z-index: 25;
overflow-y: auto;
background-color: var(--white);
transform: translateX(100%);
transition: transform var(--transition-timing) var(--transition-duration);
}
@media screen and (min-width: 1200px) {
#header .nav-wrapper {
width: unset;
height: auto;
padding: 0;
position: static;
margin-left: auto;
overflow: visible;
transform: none;
}
.home #header .nav-wrapper {
padding: 0.25rem;
background-color: rgba(255, 255, 255, 0.6);
border-radius: var(--border-radius);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
}
.js-menuOpened #header .nav-wrapper {
transform: translateX(0);
}
.menu-header {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
@media screen and (min-width: 1200px) {
.menu-header {
padding-left: 2rem;
flex-direction: row;
align-items: center;
}
}
.menu-header a {
min-height: 44px;
display: flex;
align-items: center;
color: var(--content-color);
font-weight: 400;
text-decoration: none;
transition: text-shadow var(--transition-duration) var(--transition-timing);
}
.menu-header a:hover,
.menu-header a:focus-visible {
text-shadow: 0.4px 0 currentColor, -0.4px 0 currentColor;
}
.menu-header>li:not(.menu-item-button) {
padding-bottom: var(--spacing-sm);
border-bottom: 1px solid var(--hippie-16);
}
@media screen and (min-width: 1200px) {
.menu-header>li:not(.menu-item-button) {
padding-bottom: 0;
border-bottom: 0;
}
}
.menu-header .menu-item-button>a {
width: fit-content;
min-height: 44px;
padding: 0.5rem var(--spacing-sm);
color: var(--white);
background-color: var(--primary);
border-radius: var(--border-radius);
}
.menu-toggle-col {
display: block;
}
@media screen and (min-width: 1200px) {
.menu-toggle-col {
display: none;
}
}
.menu-toggle-wrapper {
width: 30px;
height: 24px;
position: relative;
display: block;
}
.menu-toggle {
width: 44px;
height: 44px;
margin: 0;
padding: 10px 7px;
display: flex;
align-items: center;
justify-content: center;
color: var(--content-color);
background-color: transparent;
border: 0;
cursor: pointer;
}
.home:not(.js-menuOpened) .menu-toggle {
color: var(--white);
}
.menu-toggle-open,
.menu-toggle-open:before,
.menu-toggle-open:after,
.menu-toggle-open span {
width: 30px;
height: 2px;
position: absolute;
left: 0;
background-color: currentColor;
transition: transform var(--transition-timing) var(--transition-duration), opacity var(--transition-timing) var(--transition-duration);
}
.menu-toggle-open {
top: 11px;
}
.menu-toggle-open:before,
.menu-toggle-open:after {
content: "";
}
.menu-toggle-open:before {
top: -9px;
}
.menu-toggle-open:after {
top: 9px;
}
.js-menuOpened .menu-toggle-open {
background-color: transparent;
}
.js-menuOpened .menu-toggle-open:before {
top: 0;
transform: rotate(45deg);
}
.js-menuOpened .menu-toggle-open:after {
top: 0;
transform: rotate(-45deg);
}
.hero-simple {
text-align: center;
background-color: var(--hippie-16);
}
.hero-simple .container {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--content-spacing);
}
.hero-media {
margin: 0;
}
.hero-media img {
width: 100%;
height: auto;
display: block;
}
video,
iframe {
max-width: 100%;
}
video {
width: 100%;
height: auto;
}  .front-page-approach-header {
display: grid;
gap: var(--spacing-xs);
margin-bottom: var(--spacing-md);
}
@media screen and (min-width: 992px) {
.front-page-approach-header {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
align-items: end;
gap: var(--spacing-lg);
}
}
.front-page-approach-heading h2 {
max-width: 28rem;
margin: var(--spacing-xs) 0 0;
}
.front-page-approach-introduction {
--content-spacing: var(--spacing-xs);
}
.front-page-approach-steps {
display: grid;
gap: 0.75rem;
margin: 0;
padding: 0;
list-style: none;
counter-reset: approach-step;
}
@media screen and (min-width: 768px) {
.front-page-approach-steps {
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
gap: var(--spacing-xs);
}
}
.front-page-approach-step {
display: flex;
flex-direction: column;
padding: 2.25rem;
color: var(--dove);
background-color: var(--wild-sand);
border-radius: 0.625rem;
counter-increment: approach-step;
}
@media screen and (min-width: 992px) {
.front-page-approach-step {
min-height: 27.5rem;
}
}
.front-page-approach-step:before {
content: counter(approach-step, decimal-leading-zero) ".";
margin-bottom: var(--spacing-xxs);
color: var(--primary);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.15;
}
@media screen and (min-width: 992px) {
.front-page-approach-step:before {
font-size: 1.75rem;
}
}
.front-page-approach-step h3 {
margin: 0;
color: var(--primary);
font-size: 1.25rem;
}
@media screen and (min-width: 992px) {
.front-page-approach-step h3 {
font-size: 1.5rem;
}
}
.front-page-approach-step-text {
--content-spacing: var(--spacing-xs);
--content-color: var(--dove);
margin-top: var(--spacing-sm);
font-size: 0.875rem;
}
@media screen and (min-width: 992px) {
.front-page-approach-step-text {
margin-top: auto;
padding-top: var(--spacing-sm);
font-size: 1rem;
}
}
.front-page-clients {
overflow: hidden;
}
.front-page-clients-header {
margin-bottom: var(--spacing-md);
text-align: center;
}
.front-page-clients-header h2 {
max-width: 18rem;
margin: var(--spacing-xs) auto 0;
}
@media screen and (min-width: 992px) {
.front-page-clients-header h2 {
max-width: none;
}
}
.front-page-clients-slider {
overflow: visible;
}
.front-page-client {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
margin: 0;
padding: var(--spacing-xs);
background-color: var(--wild-sand);
border-radius: 0.375rem;
}
.front-page-client-logo {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.front-page-contact-inner {
display: grid;
gap: var(--spacing-md);
}
@media screen and (min-width: 992px) {
.front-page-contact-inner {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: start;
gap: var(--spacing-lg);
}
}
.front-page-contact-header h2 {
max-width: 28rem;
margin: var(--spacing-xs) 0 0;
}
.front-page-contact-text {
--content-spacing: var(--spacing-xs);
max-width: 29rem;
margin-top: var(--spacing-xs);
}
.front-page-contact-portrait {
width: min(100%, 16rem);
margin-top: var(--spacing-sm);
}
.front-page-contact-portrait-image {
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: var(--border-radius);
}
.front-page-contact-portrait-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.front-page-contact-portrait figcaption {
margin-top: var(--spacing-xxs);
color: var(--dove);
font-size: 0.875rem;
}
.front-page-contact-form form {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--spacing-sm) 2rem;
}
@media screen and (min-width: 992px) {
.front-page-contact-form form {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: var(--spacing-md);
}
}
.front-page-contact-form label {
font-size: 0.875rem;
font-weight: 400;
}
@media screen and (min-width: 992px) {
.front-page-contact-form label:nth-of-type(n+3) {
grid-column: 1 / -1;
}
}
.front-page-contact-form label:has(> .wpcf7-form-control-wrap .wpcf7-validates-as-required) {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
}
.front-page-contact-form label:has(> .wpcf7-form-control-wrap .wpcf7-validates-as-required):after {
content: "*";
grid-column: 2;
grid-row: 1;
color: var(--primary);
}
.front-page-contact-form label>.wpcf7-form-control-wrap {
grid-column: 1 / -1;
grid-row: 2;
}
.front-page-contact-form .wpcf7-form-control-wrap {
display: block;
}
.front-page-contact-form input[type="text"],
.front-page-contact-form input[type="email"],
.front-page-contact-form input[type="tel"],
.front-page-contact-form input[type="url"],
.front-page-contact-form textarea {
padding: var(--spacing-xxs) 0;
background-color: transparent;
border: 0;
border-bottom: 1px solid var(--dove);
border-radius: 0;
}
.front-page-contact-form textarea {
min-height: 6rem;
}
@media screen and (min-width: 992px) {
.front-page-contact-form textarea {
min-height: 7rem;
}
}
.front-page-contact-form .wpcf7-form-control-wrap[data-name="contact-consent"],
.front-page-contact-form input[type="submit"],
.front-page-contact-form .wpcf7-spinner,
.front-page-contact-form .wpcf7-response-output {
grid-column: 1 / -1;
}
.front-page-contact-form .wpcf7-acceptance label {
min-height: 44px;
display: inline-flex;
align-items: center;
gap: var(--spacing-xxs);
cursor: pointer;
}
.front-page-contact-form .wpcf7-list-item-label {
font-size: 0.875rem;
}
.front-page-contact-form input[type="checkbox"] {
width: 1.125rem;
height: 1.125rem;
margin: 0;
}
.front-page-contact-form input[type="submit"] {
width: fit-content;
min-width: 15rem;
padding-right: 3rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='12' viewBox='0 0 15 12'%3E%3Cpath fill='%23fff' d='m8.753.249 5.063 5.063a.845.845 0 0 1 0 1.195l-5.063 5.062a.845.845 0 0 1-1.195-1.195l3.622-3.622H.844a.844.844 0 0 1 0-1.687H11.18L7.557 1.443A.845.845 0 0 1 8.753.249Z'/%3E%3C/svg%3E");
background-position: right var(--spacing-xs) center;
background-repeat: no-repeat;
}
.front-page-contact-form input[type="submit"]:hover,
.front-page-contact-form input[type="submit"]:focus-visible {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='12' viewBox='0 0 15 12'%3E%3Cpath fill='%23111212' d='m8.753.249 5.063 5.063a.845.845 0 0 1 0 1.195l-5.063 5.062a.845.845 0 0 1-1.195-1.195l3.622-3.622H.844a.844.844 0 0 1 0-1.687H11.18L7.557 1.443A.845.845 0 0 1 8.753.249Z'/%3E%3C/svg%3E");
}
.front-page-contact-form .wpcf7-spinner {
margin: 0;
position: absolute;
bottom: 0.65rem;
left: 16rem;
}
.front-page-contact-form .wpcf7-response-output {
margin: 0;
}
#main>.front-page-hero {
min-height: max(42rem, 100svh);
padding-top: calc(var(--header-height) + var(--spacing-md));
padding-bottom: var(--spacing-md);
position: relative;
display: flex;
color: var(--white);
overflow: hidden;
}
.front-page-hero-media {
width: 100%;
height: 100%;
margin: 0;
position: absolute;
inset: 0;
object-fit: cover;
}
.front-page-hero-media img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.front-page-hero:after {
content: "";
position: absolute;
inset: 0;
background-color: rgba(17, 18, 18, 0.48);
}
.front-page-hero-inner {
width: 100%;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
}
.front-page-hero-inner>h1 {
max-width: 45rem;
margin: 0 0 var(--spacing-sm);
}
.front-page-hero-card {
width: 100%;
max-width: 34rem;
padding: var(--spacing-sm);
color: var(--black);
background-color: rgba(255, 255, 255, 0.6);
border-radius: var(--border-radius);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.front-page-hero-card h2 {
margin: 0 0 var(--spacing-xxs);
}
.front-page-hero-card-text {
--content-spacing: var(--spacing-xs);
}
.front-page-hero-actions {
margin-top: var(--spacing-sm);
}
.front-page-hero-actions .btn {
min-width: min(100%, 12rem);
flex: 1 1 calc(50% - var(--spacing-xxs));
}
.key-figures {
color: var(--white);
background-color: var(--primary);
}
.key-figures-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacing-sm) var(--spacing-xs);
margin: 0;
padding: 0;
list-style: none;
}
@media screen and (min-width: 992px) {
.key-figures-list {
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: var(--spacing-md) 0;
}
}
.key-figure {
min-width: 0;
padding-left: var(--spacing-xxs);
border-left: 1px solid currentColor;
}
@media screen and (min-width: 992px) {
.key-figure {
padding-left: 1rem;
}
}
.key-figure-value,
.key-figure-label {
display: block;
}
.key-figure-value {
font-family: var(--bold);
font-size: 3rem;
font-weight: 600;
line-height: 1;
}
@media screen and (min-width: 992px) {
.key-figure-value {
font-size: 4rem;
}
}
.key-figure-label {
margin-top: var(--spacing-xxs);
font-size: 0.75rem;
line-height: 1.35;
}
@media screen and (min-width: 992px) {
.key-figure-label {
font-size: 1rem;
}
}
#main>section.front-page-missions {
padding-block: 0;
}
.front-page-missions-header {
margin-bottom: var(--spacing-md);
text-align: center;
}
.front-page-missions-header h2 {
margin: var(--spacing-xs) 0 0;
}
.front-page-mission {
background-color: var(--mission-background);
}
.front-page-mission-hippie {
--mission-background: var(--hippie);
}
.front-page-mission-hippie-80 {
--mission-background: var(--hippie-80);
}
.front-page-mission-hippie-50 {
--mission-background: var(--hippie-50);
}
.front-page-mission-hippie-30 {
--mission-background: var(--hippie-30);
}
.front-page-mission-hippie-16 {
--mission-background: var(--hippie-16);
}
.front-page-mission-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) 2rem;
gap: var(--spacing-sm);
padding-top: var(--spacing-md);
padding-bottom: var(--spacing-md);
}
@media screen and (min-width: 992px) {
.front-page-mission-inner {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 2rem;
grid-template-rows: auto 1fr;
gap: var(--spacing-sm) var(--spacing-lg);
}
}
.front-page-mission-title {
display: flex;
align-items: center;
gap: var(--spacing-xs);
margin: 0;
}
@media screen and (min-width: 992px) {
.front-page-mission-title {
grid-column: 1;
grid-row: 1;
}
}
.front-page-mission-title img {
width: 1.75rem;
flex: 0 0 auto;
}
@media screen and (min-width: 992px) {
.front-page-mission-title img {
width: 2.5rem;
}
}
.front-page-mission-icon-toggle {
width: 2rem;
height: 2rem;
padding: 0;
position: relative;
display: none;
color: var(--black);
background: none;
border: 0;
cursor: pointer;
}
@media screen and (min-width: 992px) {
.front-page-mission-icon-toggle {
display: block;
grid-column: 3;
grid-row: 1;
align-self: center;
}
}
.front-page-mission-icon-toggle:before,
.front-page-mission-icon-toggle:after {
content: "";
width: 2rem;
height: 3px;
position: absolute;
top: 50%;
left: 50%;
background-color: currentColor;
border-radius: 20%;
translate: -50% -50%;
transition: scale var(--transition-duration) var(--transition-timing);
}
.front-page-mission-icon-toggle:after {
rotate: 90deg;
}
.front-page-mission-icon-toggle[aria-expanded="true"]:after {
scale: 0 1;
}
.front-page-mission-media {
grid-column: 1 / -1;
grid-row: 2;
margin: 0;
}
@media screen and (min-width: 992px) {
.front-page-mission-media {
grid-column: 1;
grid-row: 2;
}
}
.front-page-mission-media img {
width: 100%;
aspect-ratio: 3 / 2;
display: block;
object-fit: cover;
}
.front-page-mission-content {
display: flex;
flex-direction: column;
align-items: flex-start;
grid-column: 1 / -1;
grid-row: 3;
gap: 2rem;
}
@media screen and (min-width: 992px) {
.front-page-mission-content {
grid-column: 2;
grid-row: 1 / span 2;
}
}
.front-page-mission-text {
--content-spacing: var(--spacing-sm);
}
.front-page-mission-offer-toggle-icon {
width: 0.875rem;
height: 0.875rem;
margin-left: var(--spacing-xs);
position: relative;
}
.front-page-mission-offer-toggle-icon:before,
.front-page-mission-offer-toggle-icon:after {
content: "";
width: 100%;
height: 1px;
position: absolute;
top: 50%;
left: 50%;
background-color: currentColor;
translate: -50% -50%;
transition: scale var(--transition-duration) var(--transition-timing);
}
.front-page-mission-offer-toggle-icon:after {
rotate: 90deg;
}
.front-page-mission-offer-toggle[aria-expanded="true"] .front-page-mission-offer-toggle-icon:after {
scale: 0 1;
}
.front-page-mission-offers {
width: 100%;
}
.front-page-mission-offers[hidden] {
display: none;
}
.front-page-mission-offers-title {
font-size: 0.75rem;
text-transform: uppercase;
}
.front-page-mission-offers ol {
margin: 0;
padding: 0;
list-style: none;
counter-reset: mission-offer;
}
.front-page-mission-offers li {
display: grid;
grid-template-columns: 2rem minmax(0, 1fr);
gap: var(--spacing-xs);
padding: var(--spacing-sm) 0;
font-weight: 500;
border-bottom: 1px solid currentColor;
counter-increment: mission-offer;
}
.front-page-mission-offers li:last-child {
border-bottom: 0;
}
.front-page-mission-offers li:before {
content: counter(mission-offer, decimal-leading-zero);
color: var(--dove);
font-weight: 300;
font-size: 0.875rem;
}
.front-page-realisations-header {
margin-bottom: var(--spacing-md);
text-align: center;
}
.front-page-realisations-header h2 {
max-width: 20rem;
margin: var(--spacing-xs) auto 0;
}
@media screen and (min-width: 992px) {
.front-page-realisations-header h2 {
max-width: none;
}
}
.front-page-realisations-filters {
margin-bottom: var(--spacing-sm);
display: flex;
gap: var(--spacing-xxs);
overflow-x: auto;
scrollbar-width: none;
}
@media screen and (min-width: 992px) {
.front-page-realisations-filters {
justify-content: center;
}
}
.front-page-realisations-filters::-webkit-scrollbar {
display: none;
}
.front-page-realisations-filters a {
min-height: 2.5rem;
padding: 0 var(--spacing-xs);
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
color: var(--black);
font-size: 0.875rem;
line-height: 1;
text-decoration: none;
white-space: nowrap;
border: 1px solid var(--black);
border-radius: 999px;
}
.front-page-realisations-filters a:hover,
.front-page-realisations-filters a:focus-visible,
.front-page-realisations-filters a[aria-current="true"] {
color: var(--white);
background-color: var(--primary);
border-color: var(--primary);
}
.front-page-realisations-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacing-sm) var(--spacing-xxs);
}
@media screen and (min-width: 768px) {
.front-page-realisations-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--spacing-md) var(--spacing-xs);
}
}
.front-page-realisations-pagination {
margin-top: var(--spacing-md);
display: flex;
align-items: center;
justify-content: center;
}
.front-page-realisations-pagination .page-numbers:not(.prev):not(.next) {
width: 2.75rem;
height: 2.75rem;
display: flex;
align-items: center;
justify-content: center;
color: transparent;
font-size: 0;
}
.front-page-realisations-pagination .page-numbers:not(.prev):not(.next):before {
content: "";
width: 0.5rem;
height: 0.5rem;
display: block;
background-color: var(--hippie-30);
border-radius: 50%;
}
.front-page-realisations-pagination .page-numbers.current:not(.prev):not(.next):before,
.front-page-realisations-pagination .page-numbers[aria-current="page"]:not(.prev):not(.next):before {
background-color: var(--primary);
}
.front-page-realisations-pagination .prev,
.front-page-realisations-pagination .next {
width: 2.75rem;
height: 2.75rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
}
.front-page-realisations-pagination .prev:before,
.front-page-realisations-pagination .next:before {
content: "";
width: 1rem;
height: 1rem;
display: block;
background-color: currentColor;
}
.front-page-realisations-pagination .prev:before {
transform: rotate(180deg);
-webkit-mask: url(//vox-btp.fr/wp-content/themes/vox-aedificatoris/assets/medias/icons/arrow-right.svg) center / contain no-repeat;
mask: url(//vox-btp.fr/wp-content/themes/vox-aedificatoris/assets/medias/icons/arrow-right.svg) center / contain no-repeat;
}
.front-page-realisations-pagination .next:before {
-webkit-mask: url(//vox-btp.fr/wp-content/themes/vox-aedificatoris/assets/medias/icons/arrow-right.svg) center / contain no-repeat;
mask: url(//vox-btp.fr/wp-content/themes/vox-aedificatoris/assets/medias/icons/arrow-right.svg) center / contain no-repeat;
}
.front-page-testimonials {
background-color: var(--wild-sand);
overflow: hidden;
}
.front-page-testimonials-header {
margin-bottom: var(--spacing-md);
text-align: center;
}
.front-page-testimonials-header h2 {
max-width: 20rem;
margin: var(--spacing-xs) auto 0;
}
@media screen and (min-width: 992px) {
.front-page-testimonials-header h2 {
max-width: none;
}
}
.front-page-testimonials-slider {
padding-right: var(--spacing-sm);
padding-left: var(--spacing-sm);
overflow: visible;
}
.front-page-testimonial {
height: auto;
margin: 0;
}
.front-page-testimonial-inner {
height: 100%;
padding: var(--spacing-sm);
display: flex;
flex-direction: column;
color: inherit;
text-decoration: none;
background-color: var(--white);
border-radius: var(--border-radius);
}
@media screen and (min-width: 992px) {
.front-page-testimonial-inner {
min-height: 19.5rem;
padding: 2.5rem;
}
}
.front-page-testimonial h3 {
margin: 0 0 var(--spacing-xs);
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
}
.front-page-testimonial-text {
--content-spacing: var(--spacing-xs);
}
.front-page-testimonial-author {
margin-top: auto;
padding-top: var(--spacing-sm);
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: var(--spacing-xxs);
}
.front-page-testimonial-author.has-photo {
grid-template-columns: 5rem minmax(0, 1fr);
}
.front-page-testimonial-photo {
width: 5rem;
height: 5rem;
display: block;
object-fit: cover;
border-radius: 50%;
}
.front-page-testimonial-author-content cite {
display: block;
font-style: normal;
font-weight: 700;
}
.front-page-testimonial-author-content p {
margin: 0;
color: var(--dove);
font-size: 0.875rem;
}
.front-page-testimonial-logo {
width: auto;
max-width: 5rem;
max-height: 2rem;
margin-top: var(--spacing-xxs);
display: block;
object-fit: contain;
object-position: left center;
}
@media screen and (min-width: 992px) {
.front-page-testimonial-logo {
max-width: 8rem;
}
}

.item-realisation {
min-width: 0;
}
.item-realisation-link {
display: block;
color: inherit;
text-decoration: none;
}
.item-realisation-media {
aspect-ratio: 8 / 10;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--hippie-16);
overflow: hidden;
}
.item-realisation-media img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
object-position: center;
}
.item-realisation-media.is-video:after {
content: "";
width: 1.5rem;
height: 1.75rem;
position: absolute;
top: 50%;
left: 50%;
background-color: var(--white);
clip-path: polygon(0 0, 100% 50%, 0 100%);
translate: -40% -50%;
}
.item-realisation-content {
margin-top: var(--spacing-xxs);
}
.item-realisation-format {
width: fit-content;
margin: 0 0 var(--spacing-xxs);
padding: 0.1rem 0.4rem;
color: var(--primary);
font-size: 0.625rem;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
border: 1px solid var(--primary);
border-radius: 33px;
}
@media screen and (min-width: 992px) {
.item-realisation-format {
margin-bottom: var(--spacing-xs);
}
}
.item-realisation-title {
margin: 0;
font-size: 0.875rem;
font-weight: 700;
line-height: 1.3;
overflow-wrap: anywhere;
}
@media screen and (min-width: 992px) {
.item-realisation-title {
font-size: 1.125rem;
}
}
.item-realisation-link:hover .item-realisation-title,
.item-realisation-link:focus-visible .item-realisation-title {
text-decoration: underline;
}
.item-realisation-client {
margin: var(--spacing-xxs) 0;
color: var(--dove);
font-size: 0.75rem;
}
@media screen and (min-width: 992px) {
.item-realisation-client {
margin: var(--spacing-xs) 0;
font-size: 0.875rem;
}
}
.item-realisation .inline-link {
margin-top: var(--spacing-xxs);
}  



#main > .page-hero-has-content {
padding-bottom: 0;
}
#main > .page-content {
padding-top: var(--spacing-md);
}

.realisation-single-client {
margin: 0;
color: var(--dove);
}
.realisation-pdf-viewer iframe {
width: 100%;
height: 70svh;
min-height: 32rem;
display: block;
border: 0;
}
.realisation-pdf-viewer .btn {
margin-top: var(--spacing-sm);
}
.realisation-single-video {
width: 100%;
display: block;
background-color: var(--black);
}
.realisation-single-body {
max-width: 62.5rem;
margin: var(--spacing-md) auto 0;
}
.realisation-single-body:first-child {
margin-top: 0;
}