:root {
--maxwidth: 1600px;
--green: #159B6D;
--black: #0F0F0F;
--white: #fff;
--red: #FF4438;
--orange: #f56e28;
--yellow: #ffb900;
--grey: #A6ADB4;
--grey2: #CECECE;
--greyForm: #EDEDED;
--greyFormLabel: #979797;
--pink: #E8E8E8;
--font1: 'Montserrat', sans-serif;
--font2: 'Poppins', sans-serif;
--fontSizeH1: 48px;
--fontSizeH2: 40px;
--fontSizeH3: 34px;
--fontSizeH4: 26px;
--fontSizeH5: 24px;
--fontSizeP: 16px;
--fontSizeP2: 18px;
--fontSizeA: 18px;
--fontSizeA2: 20px;
--transition001: 0.01s;
--transition025: 0.25s;
--transition05: 0.5s;
scroll-behavior: smooth;
}
@media (max-width: 1800px) {
:root {
--maxwidth: calc(100% - 160px);
}
}
@media (max-width: 1440px) {
:root {
--fontSizeH1: 40px;
--fontSizeH2: 34px;
--fontSizeH3: 28px;
--fontSizeH4: 22px;
--fontSizeH5: 20px;
--fontSizeP: 16px;
--fontSizeP2: 16px;
--fontSizeA: 16px;
--fontSizeA2: 18px;
}
}
@media (max-width: 1280px) {
:root {
--maxwidth: calc(100% - 40px);
}
}
@media (max-width: 600px) {
:root {
--maxwidth: calc(100% - 20px);
--fontSizeH1: 24px;
--fontSizeH2: 22px;
--fontSizeH3: 20px;
--fontSizeH4: 18px;
--fontSizeH5: 16px;
--fontsizeP: 16px;
--fontSizeP2: 16px;
--fontSizeA: 16px;
--fontSizeA2: 16px;
}
}
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.has-reduced-motion {
--transition001: 0s;
--transition025: 0s;
--transition05: 0s;
}
.has-high-contrast {
--green: #000;
--black: #000;
--white: #fff;
--red: #000;
--orange: #000;
--yellow: #000;
--grey: #000;
--grey2: #fff;
--greyForm: #fff;
--greyFormLabel: #000;
--pink: #fff;
}
html {
overflow: auto;
}
body {
position: relative;
font-family: var(--font1);
color: var(--black);
margin: 0;
overflow: hidden;
width: 100%;
max-width: 100%;
}
header.header {
width: 100%;
max-width: 100%;
}
header.header a {
text-decoration: none;
}
#page {
width: 100%;
}
.main {
width: 100%;
max-width: var(--maxwidth);
min-height: 60vh;
}
h1 {
font-size: var(--fontSizeH1);
font-weight: 700;
text-transform: uppercase;
}
h2 {
font-size: var(--fontSizeH2);
font-weight: 700;
}
h3 {
font-size: var(--fontSizeH3);
font-weight: 700;
}
h4 {
font-size: var(--fontSizeH4);
font-weight: 700;
}
h1, h2, h3, h4 {
width: 100%;
margin: 30px 0 20px 0;
padding: 0;
}
p, blockquote, table td {
width: 100%;
font-size: var(--fontSizeP2);
font-weight: 400;
line-height: 140%;
}
table {
margin: 80px 0;
}
table td {
width: auto;
}
a {
color: var(--black);
text-decoration: underline;
}
ul {
width: calc(100% - 10px);
margin: 18px 0 18px 10px;
padding: 0 0 0 10px;
list-style: disc;
}
ul li {
font-size: var(--fontSizeP2);
line-height: 140%;
margin-bottom: 18px;
}
figure {
margin: 0;
}
img {
max-width: 100%;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
}
.flex__col {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.button {
position: relative;
font-size: var(--fontSizeA2);
font-weight: 600;
padding: 14px 20px;
background-color: var(--black);
color: var(--white);
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.16);
transition: all var(--transition05);
border: 2px solid var(--black);
text-decoration: none;
}
.button::after {
content: '';
position: absolute;
top: -2px;
left: calc(100% - 12px);
width: 20px;
height: calc(100% + 4px);
background-color: var(--black);
transform: skewX(-10deg);
pointer-events: none;
}
.button:hover, .button:focus {
background-color: var(--white);
color: var(--black);
padding-right: 40px;
}
.button__white {
background-color: var(--white);
color: var(--green);
border: 2px solid var(--white);
}
.button__white::after {
background-color: var(--white);
}
.button__white:hover, .button__white:focus {
background-color: var(--black);
color: var(--white);
border: 2px solid var(--white);
padding-right: 40px;
}
.button__green {
background-color: var(--green);
color: var(--white);
border: 2px solid var(--green);
}
.button__green::after {
background-color: var(--green);
}
.button__green:hover, .button__green:focus {
background-color: var(--white);
color: var(--green);
border: 2px solid var(--green);
padding-right: 40px;
}
.margeStart {
margin-top: 325px;
}
@media (max-width: 1460px) {
.margeStart {
margin-top: 150px;
}
} a:focus, button:focus {
outline: 2px dashed var(--green);
}
.has-high-contrast a,
.has-high-contrast button {
outline-color: var(--white);
} .skip-links {
position: absolute;
top: 0;
left: 0;
right: 0;
background: black;
z-index: 1002;
}
.skip-links:not(:focus-within) {
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.skip-links ul {
display: flex;
list-style: none;
margin: unset;
padding: unset;
width: 100%;
justify-content: center;
gap: 30px;
}
.skip-links li {
padding: .5rem;
}
.skip-links a {
color: white;
padding: .25rem;
} .m_header {
position: relative;
z-index: 11;
width: 100vw;
background-color: #000;
}
.m_header__inner {
position: relative;
width: calc(100% - 40px);
max-width: var(--maxwidth);
justify-content: flex-start;
}
.m_header a {
text-decoration: none;
color: #fff;
}
.m_logo {
font-family: "Mayenne Sans";
font-size: 16px;
line-height: 30px;
width: 126px;
}
.m_logo img {
width: auto;
height: 13px;
object-fit: contain;
margin-right: 3px;
}
ul#m_container {
width: calc(100% - 156px);
list-style: none;
margin: 0;
margin-left: 30px;
padding: 0;
justify-content: flex-start;
font-size: 16px;
color: #C4BFBC;
}
.has-high-contrast ul#m_container {
color: white;
}
.m_header li {
margin: 0 30px;
list-style: none;
} 
.m_header li a {
font-family: "Rival";
font-size: 12px;
font-weight: 300;
line-height: 30px;
white-space: nowrap;
color: inherit;
}
#m_dropdown {
position: relative;
z-index: 3;
width: 180px;
font-family: "Rival";
font-size: 12px;
font-weight: 300;
line-height: 30px;
white-space: nowrap;
cursor: pointer;
margin: 0 0 0 auto;
}
#m_dropdown button {
appearance: none;
color: inherit;
background-color: unset;
border: unset;
font: inherit;
line-height: normal;
}
.m_dropdown .m_caret {
display: inline-block;
width: 0;
height: 0;
margin-top: -5px;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.m_droplist {
position: absolute;
z-index: 2;
top: 100%;
right: 0;
width: 100%;
max-height: 80vh;
margin: 4px 0 0;
padding: 5px 0;
justify-content: flex-start;
align-items: flex-start;
background-color: #000;
box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
border-radius: 4px;
overflow: hidden;
}
.m_droplist[aria-hidden="true"] {
visibility: hidden;
}
.m_droplist li {
margin: 0 15px;
}
.m_droplist li a {
font-size: 11px;
white-space: unset;
}
@media only screen and (max-width: 400px) {
.m_header__inner {
max-width: calc(100% - 10px);
}
}
@media only screen and (max-width: 320px) {
.m_dropdown {
display: none;
}
} .lda__header {
width: 100vw;
background-color: #fff;
padding: 20px 0 10px 0;
}
.lda__header__content {
width: calc(100% - 40px);
max-width: var(--maxwidth);
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
}
.lda__header__left {
width: 50%;
justify-content: flex-start;
margin: 0;
gap: 40px;
}
.lda__header__left a {
width: 50%;
display: flex;
}
.lda__header__left a:first-of-type {
max-width: 244px;
}
.lda__header__left a:last-of-type {
max-width: 288px;
}
.lda__header__left a img {
width: 100%;
height: auto;
}
.lda__header__right {
width: 50%;
justify-content: flex-end;
font-family: var(--font2);
margin-bottom: 0;
line-height: normal;
}
.lda__header__right a.search {
width: 26px;
height: 26px;
border: 4px solid var(--black);
padding: 8px;
}
.lda__header__right a.search img {
width: 100%;
height: auto;
}
.lda__header__right__links a.analyse {
background-color: var(--white);
color: var(--green);
border: 4px solid var(--green);
padding: 8px;
font-size: var(--fontSizeA);
font-weight: 500;
margin-left: 20px;
}
.lda__header__right__links a.client {
background-color: var(--green);
color: var(--white);
border: 4px solid var(--green);
padding: 8px;
font-size: var(--fontSizeA);
font-weight: 500;
margin-right: 10px;
}
.lda__header__right__links a.contact {
color: var(--green);
padding: 8px;
font-size: var(--fontSizeA);
font-weight: 700;
text-transform: uppercase;
}
.lda__header__right__links a{
text-align: center;
letter-spacing: 0px;
transition: all var(--transition025);
}
.lda__header__right__links a:hover {
letter-spacing: 1px;
}
.menu__header {
position: relative;
z-index: 10;
width: 100%;
max-width: var(--maxwidth);
justify-content: flex-end;
margin-top: 10px;
margin-bottom: 20px;
}
.menu__header__content {
width: auto;
position: relative;
background-color: var(--green);
margin: 0;
padding: 0;
list-style: none;
}
.menu__header__content::after {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: calc(100% - 10px);
width: 20px;
height: 100%;
background-color: var(--green);
transform: skewX(-10deg);
pointer-events: none;
}
.menu__header__content li {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0;
line-height: normal;
}
.menu__header__content li a {
background-color: var(--green);
color: var(--white);
padding: 16px 20px;
font-size: 15px;
font-weight: 600;
font-family: var(--font2);
text-transform: uppercase;
text-align: center;
transition: all var(--transition025);
letter-spacing: 0;
}
.menu__header__content li a:hover {
letter-spacing: 1px;
background-color: #0a754f;
}
.has-high-contrast .menu__header__content li a:hover {
background-color: var(--green);
}
.menu__header__content > li:nth-child(1) > a {
position: relative;
background-color: var(--black);
color: var(--white);
margin-right: 5px;
}
.menu__header__content > li:nth-child(1) > a::after {
content: '';
position: absolute;
z-index: 2;
top: 0;
left: calc(100% - 16px);
width: 20px;
height: 100%;
background-color: var(--black);
transform: skewX(-10deg);
pointer-events: none;
}
.menu__header__content li ul.sub-menu {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: var(--green);
opacity: 0;
visibility: hidden;
transition: all var(--transition025);
margin: 0;
padding: 0;
list-style: none;
}
.menu__header__content li:hover ul.sub-menu {
opacity: 1;
visibility: visible;
}
.menu__header__content li ul.sub-menu li {
}
.menu__header__content li ul.sub-menu li a {
font-size: 14px;
padding: 20px;
line-height: 110%;
}
.menu__header__content li ul.sub-menu li a:hover {
letter-spacing: normal;
}
.menu__header__content li ul.sub-menu li:nth-child(1) a {
background-color: var(--green);
padding-left: 20px;
margin-right: 0;
}
.menu__header__content li ul.sub-menu li:nth-child(1) a:hover {
background-color: #0a754f;
}
.menu__header__content li ul.sub-menu li:nth-child(1) a::after {
display: none;
}
.single .main {
max-width: var(--maxwidth);
}
.wp-block-embed-youtube {
width: 100%;
margin: 80px 0;
}
.wp-block-embed-youtube .wp-block-embed__wrapper {
width: 100%;
}
.wp-block-embed-youtube iframe {
width: 100%;
height: auto;
aspect-ratio: 16/9;
}
.menu__burger, .menu__close {
display: none;
}
@media (min-width: 1401px) {
.menu__header,
.lda__header__right__links {
transform: unset!important;
}
}
@media (max-width: 1600px) {
.menu__header {
width: calc(100% - 60px);
max-width: 100%;
}
}
@media (max-width: 1400px) {
.menu__burger {
display: flex;
width: 50px;
height: 50px;
margin-left: 20px;
}
.menu__burger:focus {
outline: 2px dashed var(--green);
}
.menu__burger div {
width: 80%;
height: 4px;
background-color: var(--black);
margin: 4px 0;
}
.lda__header__left {
width: 75%;
}
.lda__header__right {
width: 25%;
}
.lda__header__right__links {
position: fixed;
z-index: 1000;
bottom: 20px;
left: 20px;
flex-flow: wrap;
justify-content: flex-start;
align-items: flex-start;
gap: 6px;
width: calc(100vw - 150px);
max-width: 100%;
max-height: 140px;
padding: 20px;
border-radius: 6px;
overflow-y: auto;
transform: translateX(200%);
background-color: var(--green);
box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}
.lda__header__right__links a.analyse,
.lda__header__right__links a.client,
.lda__header__right__links a.contact {
position: relative;
border: unset;
background-color: var(--white);
margin: 0;
font-size: 14px;
font-weight: 600;
padding: 10px 20px;
color: var(--green);
text-transform: none;
border-radius: 6px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}
.menu__header {
position: fixed;
z-index: 999;
top: 0;
left: 0;
align-items: flex-start;
width: calc(100vw - 90px);
max-width: 100%;
height: calc(100vh - 230px);
margin: 0;
transform: translateX(200%);
padding: 20px 70px 210px 20px;
background-color: #fff;
}
.menu__header__content {
flex-direction: column;
width: 100%;
max-height: 100%;
padding: 20px;
align-items: flex-start;
justify-content: flex-start;
overflow-y: auto;
background-color: #fff;
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.16);
border-radius: 8px;
gap: 6px;
}
.menu__header__content::after {
display: none;
}
.menu__header__content li {
width: 100%;
align-items: flex-start;
flex-direction: column;
}
.menu__header__content li a,
.menu__header__content li:nth-child(1) a {
width: calc(100% - 40px);
padding: 10px 20px;
font-size: 14px;
text-align: left;
border-radius: 6px;
background-color: var(--white);
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.16);
color: var(--black);
}
.menu__header__content li:nth-child(1) a {
padding-left: 20px;
}
.menu__header__content li:nth-child(1) a::after {
display: none;
}
.menu__header__content li ul.sub-menu {
position: relative;
top: unset;
left: unset;
opacity: 1;
visibility: visible;
align-items: flex-start;
margin-top: 6px;
padding-left: 20px;
gap: 6px;
background-color: transparent;
}
.menu__header__content li ul.sub-menu li a {
padding: 10px 20px;
font-size: 14px;
text-align: left;
}
.menu__header__content li ul.sub-menu li:nth-child(1) a {
padding: 10px 20px;
background-color: var(--white);
}
.menu__header__content li a:hover,
.menu__header__content li ul.sub-menu li a:hover,
.menu__header__content li ul.sub-menu li:nth-child(1) a:hover {
background-color: var(--black);
color: var(--white);
letter-spacing: 0.5px;
}
.menu__close {
display: flex;
position: fixed;
z-index: 1000;
top: 20px;
right: 20px;
width: 30px;
height: 30px;
transform: translateX(300%);
background-color: var(--white);
box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}
.menu__close:focus {
outline: 2px dashed var(--green);
}
.menu__close::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 3px;
background-color: var(--green);
transform: translate(-50%, -50%) rotate(45deg);
}
.menu__close::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 3px;
background-color: var(--green);
transform: translate(-50%, -50%) rotate(-45deg);
}
.menu__header__content li a,
.lda__header__right__links a {
outline-color: white;
}
}
@media (max-width: 768px) {
.lda__header__left {
width: 60%;
gap: 10px;
margin-right: 10px;
}
.lda__header__right {
width: 40%;
}
}
@media (max-width: 600px) {
.lda__header__right a.search {
width: 20px;
height: 20px;
border-width: 2px;
}
.menu__burger {
margin-left: 5px;
width: 40px;
height: 40px;
}
.menu__burger div {
height: 4px;
margin: 3px 0;
}
} .site-footer {
width: 100vw;
position: relative;
z-index: 98;
}
.footer {
width: 100%;
background-color: #000;
}
.footer a {
color: #fff;
display: inline-block;
height: 100%;
}
.footer ul {
list-style: none;
margin: unset;
padding: unset;
}
.footer__inner {
width: calc(100% - 80px);
max-width: 1428px;
padding: 60px 0;
justify-content: space-between;
}
.footer__menu {
width: 25%;
max-width: 215px;
}
.footer__menu ul {
align-items: flex-start;
gap: 10px 20px;
}
.footer__menu a {
font-size: 20px;
font-weight: 400;
text-decoration: none;
}
.footer__menu li:last-child a {
margin-bottom: 0;
}
.footer__social {
width: 25%;
max-width: 215px;
align-items: flex-start;
}
.footer__social__text {
font-size: 20px;
font-weight: 400;
color: #fff;
margin: 0 0 20px;
line-height: normal;
width: fit-content;
}
.footer__social__pictos {
justify-content: flex-start;
flex-flow: wrap;
gap: 15px;
}
.footer__social__pictos li {
width: 43px;
height: 43px;
margin-bottom: 0;
}
.footer__social__pictos li:last-child {
margin-right: 0;
}
.footer__social__pictos li img {
width: 100%;
height: 100%;
object-fit: contain;
}
.footer__last__m {
width: 50%;
justify-content: flex-end;
}
.footer__last__m li {
width: 40%;
max-width: 319px;
margin: 0 5%;
}
.footer__last__m a {
display: flex;
padding: 4px;
}
.footer__last__m img {
width: 100%;
height: auto;
}
@media only screen and (max-width: 1200px) {
.footer__inner {
flex-flow: wrap;
max-width: var(--maxwidth);
padding: 40px 0;
}
.footer__menu {
width: 50%;
}
.footer__menu ul li {
margin: 0;
}
.footer__social {
align-items: flex-end;
width: 50%;
margin-top: 20px;
}
.footer__social__pictos {
justify-content: flex-end;
}
.footer .footer__last__m {
margin-top: 20px;
width: calc(100% - 60px);
justify-content: center;
align-items: center;
}
}
@media only screen and (max-width: 600px) {
.footer__menu {
width: 100%;
}
.footer__menu a, .footer__social__text {
font-size: 16px;
}
.footer__social {
width: 100%;
align-items: flex-start;
margin-top: 40px;
}
.footer__last__m {
flex-direction: column;
align-items: flex-end;
}
.footer__last__m li {
width: 100%;
margin: 0;
margin-bottom: 40px;
}
.footer__last__m li:last-child {
margin-bottom: 0;
}
}
.greenBG, .whiteBG {
width: auto;
position: relative;
padding: 10px 40px 15px 30px;
color: #fff;
}
.whiteBG {
color: var(--black);
}
.greenBG svg, .whiteBG svg {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: calc(100% + 20px);
}
.blackBG {
width: auto;
position: relative;
z-index: 2;
padding: 15px 40px 10px 30px;
color: #fff;
}
.blackBG svg {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.whiteBG-text {
width: auto;
position: relative;
padding: 10px 50px 10px 30px;
}
.whiteBG-text svg {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: calc(100% + 20px);
}
hr {
position: relative;
width: 100%;
height: 5px;
background-color: #000;
border: unset;
margin: 0;
border-radius: 100px;
overflow: visible;
}
hr::after {
content: "";
position: absolute;
bottom: 0;
right: 5px;
width: 60px;
height: 30px;
background-image: url(https://lda53.fr/wp-content/themes/theme-wordpress/images/picto-feuilles.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
@media (max-width: 600px) {
hr::after {
right: 0;
width: 40px;
height: 20px;
}
}
.wpcf7,
.wpcf7-form {
width: 100%;
}
.form {
position: relative;
width: calc(100% - 80px);
padding: 40px;
}
.form::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 50%;
width: 100vw;
height: 100%;
background-color: var(--greyForm);
transform: translateX(-50%);
}
.form hr {
margin-bottom: 40px;
}
.form__line {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px 40px;
margin: 20px 0;
}
.form__input {
position: relative;
}
.form__input.w50 {
width: 50%;
}
.form__input.w100 {
width: 100%;
}
.form__input {
font-size: var(--fontSizeP);
justify-content: flex-start;
align-items: flex-start;
}
.form__input.form__label__1 label {
position: absolute;
z-index: 2;
top: calc(50% - 4px);
left: 0;
font-size: var(--fontSizeP2);
font-weight: 500;
color: var(--greyFormLabel);
transform: translateY(-50%);
transition: all var(--transition025);
}
.form__input.form__label__1.form__label__1--focus {
transition: all var(--transition025);
margin: 7px 0;
}
.form__input.form__bigLabel.form__label__1--focus {
margin: 21px 0 7px 0;
}
.form__input.form__label__1.form__label__1--focus label {
color: var(--black);
top: 0;
transform: translateY(calc(-100% - 5px));
}
.form__input span.wpcf7-form-control-wrap {
width: 100%;
}
.form__input span.wpcf7-form-control-wrap input,
.form__input span.wpcf7-form-control-wrap textarea {
position: relative;
z-index: 2;
width: 100%;
background-color: transparent;
border: unset;
border-bottom: 4px solid var(--white) ;
height: 40px;
font-family: var(--font1);
font-size: var(--fontSizeP);
appearance: none;
}
.form__input span.wpcf7-form-control-wrap input::placeholder,
.form__input span.wpcf7-form-control-wrap textarea::placeholder {
color: var(--greyFormLabel);
}
.has-high-contrast .form__input span.wpcf7-form-control-wrap input,
.has-high-contrast .form__input span.wpcf7-form-control-wrap textarea {
border-color: var(--black);
}
.has-high-contrast .form__input span.wpcf7-form-control-wrap input::placeholder,
.has-high-contrast .form__input span.wpcf7-form-control-wrap textarea::placeholder {
color: var(--black);
}
.form__input span.wpcf7-form-control-wrap textarea {
resize: vertical;
}
.form__input span.wpcf7-form-control-wrap input:focus,
.form__input span.wpcf7-form-control-wrap textarea:focus {
outline: 4px dashed var(--green);
}
.form__input.form__check {
flex-direction: column;
gap: 10px;
}
.form__input.form__check label.form__check__label {
font-weight: 700;
text-transform: uppercase;
}
.form__input.form__check span.wpcf7-form-control-wrap {
width: auto;
padding: 20px;
background-color: var(--white);
}
.form__input.form__check span.wpcf7-form-control {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-flow: wrap;
gap: 10px 20px;
}
.form__input.form__check span.wpcf7-checkbox {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
}
.form__input.form__check span.wpcf7-list-item {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
}
.form__input.form__check span.wpcf7-list-item label {
display: flex;
align-items: center;
gap: 10px;
}
.form__input.form__check input[type="checkbox"],
.form__input.form__check input[type="radio"] {
position: relative;
z-index: 2;
width: 25px;
height: 25px;
background-color: var(--white);
border: 3px solid var(--green);
border-radius: 100px;
cursor: pointer;
appearance: none;
min-height: unset;
aspect-ratio: 1/1;
}
.form__input.form__check input[type="checkbox"] {
border-radius: 0;
}
.form__input.form__check input[type="checkbox"]:checked,
.form__input.form__check input[type="radio"]:checked {
background-color: var(--green);
border: 4px solid var(--green);
}
.form__input.form__check .wpcf7-list-item .wpcf7-list-item-label {
width: calc(100% - 40px);
}
.form__input.form__check__2 span.wpcf7-form-control-wrap {
padding: 20px;
}
.form__input__2 {
flex-direction: column;
gap: 10px;
}
.form__input__2 label {
font-weight: 700;
}
.form__send {
width: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
gap: 20px;
}
.form__send input[type="submit"] {
position: relative;
font-family: var(--font1);
font-size: var(--fontSizeA2);
font-weight: 500;
padding: 15px 20px;
background-color: var(--black);
color: var(--white);
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.16);
transition: all var(--transition05);
border: 2px solid var(--black);
cursor: pointer;
text-transform: uppercase;
appearance: none;
}
.form__send input[type="submit"]:hover,
.form__send input[type="submit"]:focus {
background-color: var(--white);
color: var(--black);
}
.wpcf7 form .wpcf7-response-output {
width: calc(100% - 40px);
margin: 10px 0;
padding: 20px;
font-weight: 700;
color: var(--white);
font-size: var(--fontSizeA);
border: unset!important;
}
.wpcf7 form.sent .wpcf7-response-output {
background-color: var(--green); }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
background-color: var(--red); }
.wpcf7 form.spam .wpcf7-response-output {
background-color: var(--orange); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
background-color: var(--yellow); }
.wpcf7-not-valid-tip {
font-size: var(--fontSizeA);
font-weight: 700;
color: var(--red);
width: 100%;
}
@media (max-width: 1000px) {
.form__line {
flex-direction: column;
}
.form__input.w50 {
width: 100%;
}
}
@media (max-width: 600px) {
.form {
width: 100%;
padding: 40px 0 0 0;
}
.form hr {
margin-bottom: 0;
}
.form__input.form__check span.wpcf7-form-control-wrap {
padding: 10px;
}
.form__input.form__check__2 span.wpcf7-form-control-wrap {
padding: 20px;
}
}
.blogPage h2 {
font-size: var(--fontSizeH4);
text-transform: uppercase;
}
.blogPosts {
width: 100%;
margin: 0 0 70px 0;
}
.blogPosts ul {
width: 100%;
gap: 40px;
margin: 0;
margin-top: 40px;
padding: 0;
align-items: flex-start;
justify-content: flex-start;
flex-flow: wrap;
}
.blogPosts ul li {
width: calc(25% - 30px);
}
.blogPosts ul li a {
width: 100%;
border-radius: 6px;
background-color: var(--white);
text-decoration: none;
transition: all var(--transition05);
}
.blogPosts ul li a:hover,
.blogPosts ul li a:focus {
background-color: var(--black);
}
.blogPosts ul li a figure {
position: relative;
width: 100%;
height: auto;
aspect-ratio: 16/9;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
overflow: hidden;
}
.blogPosts ul li a figure img.wp-post-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
transition: all var(--transition05);
}
.blogPosts ul li a:hover figure img.wp-post-image,
.blogPosts ul li a:focus figure img.wp-post-image {
transform: scale(1.2);
}
.blogPosts__content {
width: calc(100% - 80px);
padding: 40px;
align-items: flex-start;
}
.blogPosts ul li a h2 {
font-size: var(--fontSizeA2);
font-weight: 700;
margin: 0 0 10px 0;
text-transform: none;
}
.blogPosts ul li a p {
font-size: 16px;
font-weight: 400;
margin: 0;
color: var(--grey);
}
.blogPosts__content__date {
display: none;
font-size: 16px;
font-weight: 400;
margin-top: 10px;
color: var(--grey);
}
.blogPosts__content__date img {
width: 16px;
height: 16px;
object-fit: contain;
}
.blogPosts__content__date time {
margin-left: 5px;
font-style: italic;
}
.blogPosts ul li a:hover h2,
.blogPosts ul li a:focus h2,
.blogPosts ul li a:hover p,
.blogPosts ul li a:focus p,
.blogPosts ul li a:hover .blogPosts__content__date,
.blogPosts ul li a:focus .blogPosts__content__date {
color: var(--white);
}
.blogPosts .button {
font-size: var(--fontSizeP2);
margin-top: 40px;
text-transform: uppercase;
}
@media (max-width: 1280px) {
.blogPosts ul {
gap: 20px;
flex-flow: wrap;
}
.blogPosts ul li {
width: calc(50% - 20px);
}
}
@media (max-width: 900px) {
.blogPosts__content {
width: calc(100% - 40px);
padding: 20px;
}
}
@media (max-width: 600px) {
.blogPosts {
margin: 30px 0;
}
.blogPosts ul {
gap: 20px 10px;
}
.blogPosts ul li {
width: calc(100% - 20px);
max-width: 350px;
}
}
.categories {
width: 100%;
gap: 10px;
flex-flow: wrap;
margin-top: 40px;
}
.categories__link {}
.categories__link.active {
background-color: var(--black);
color: var(--white);
font-size: var(--fontSizeA);
font-weight: 500;
padding: 20px 40px;
cursor: not-allowed;
}
.categories__link a {
background-color: var(--green);
color: var(--white);
font-size: var(--fontSizeA);
font-weight: 500;
padding: 20px 40px;
color: var(--white);
text-decoration: none;
transition: all var(--transition025);
}
.categories__link.active a {
padding: 0;
background-color: var(--black);
pointer-events: none;
}
.categories__link a:hover {
background-color: var(--black);
letter-spacing: 1px;
}
.blogPosts__pagination {
width: 100%;
margin: 40px 0;
}
.blogPosts__pagination .nav {
width: 100%;
}
.blogPosts__pagination .nav-links {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-flow: wrap;
gap: 5px;
}
.blogPosts__pagination .nav-links a, 
.blogPosts__pagination .nav-links span {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background-color: var(--green);
color: var(--white);
font-size: var(--fontSizeA);
font-weight: 500;
text-decoration: none;
transition: all var(--transition025);
}
.blogPosts__pagination .nav-links span {
background-color: var(--black);
}
.blogPosts__pagination .nav-links a:hover {
background-color: var(--black);
}
.single__bandeau {
position: relative;
width: 100vw;
}
.single__bandeau::after {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 80%;
background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
}
.single__bandeau figure {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.single__bandeau figure img {
width: 100%;
height: 100%;
object-fit: cover;
}
.single__bandeau h1 {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--maxwidth);
text-align: center;
padding: 100px 0;
color: var(--white);
text-shadow: 0 3px 6px rgba(0,0,0,0.16);
margin: 0;
}
.single__content {
align-items: flex-start;
width: 100%;
padding: 40px 0;
}
.searchPage h1 {
max-width: 1000px;
text-align: center;
}
.searchform, 
.searchform div {
width: 100%;
max-width: 1000px;
}
.searchform input[type="text"] {
width: 100%;
background-color: transparent;
border: 2px solid var(--black);
font-family: var(--font1);
font-size: var(--fontSizeP2);
border-radius: 4px;
padding: 10px 20px;
}
.searchform input[type="text"] {
width: calc(100% - 300px);
background-color: transparent;
border: 2px solid var(--black);
font-family: var(--font1);
font-size: var(--fontSizeP2);
border-radius: 4px;
padding: 18px 20px;
appearance: none;
}
.searchform input[type="submit"] {
position: relative;
width: 250px;
font-family: var(--font1);
font-size: var(--fontSizeA);
font-weight: 500;
padding: 20px 40px;
background-color: var(--black);
color: var(--white);
box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%);
transition: all var(--transition05);
border: 2px solid var(--black);
cursor: pointer;
text-transform: uppercase;
text-align: center;
appearance: none;
}
.searchform input[type="submit"]:hover, .searchform input[type="submit"]:focus {
background-color: var(--white);
color: var(--black);
}
.searchResults {
width: 100%;
max-width: 1000px;
margin-bottom: 40px;
}
.searchResults ul {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
width: 100%;
}
.searchResults ul li {
width: 100%;
margin: 20px 0;
padding: 20px 0;
align-items: flex-start;
border-bottom: 1px solid var(--black);
}
.searchResults ul li:last-child {
border-bottom: none;
}
.searchResults ul li a {
width: 100%;
align-items: flex-start;
}
.searchResults ul li a img {
width: 300px;
height: auto;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
margin-bottom: 10px;
}
.searchResults ul li a h2 {
text-decoration: underline;
font-size: var(--fontSizeH3);
margin: 0;
}
.searchResults ul li a p {
margin: 5px 0 0 0;
}
.searchResults ul li a div {
font-size: var(--fontSizeA);
font-weight: 500;
color: var(--green);
text-decoration: underline;
}
@media (max-width: 600px) {
.searchform div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 10px;
}
.searchform input[type="text"] {
width: calc(100% - 48px);
}
}
.toTop {
position: fixed;
z-index: 1001;
bottom: 90px;
right: 20px;
width: 50px;
height: 50px;
box-shadow: 0 3px 6px 0 rgba(0,0,0,.16);
background-color: #fff;
padding: 12.5px;
box-sizing: border-box;
text-align: center;
}
.toTop svg {
height: 100%;
width: auto;
stroke: #000;
}
#a11y:has(#a11y-toggle[aria-expanded="true"]) + .toTop {
box-shadow: unset;
}
.toTop:hover,
.toTop:focus {
outline: 4px dashed var(--green);
}
.toTop:hover svg,
.toTop:focus svg {
stroke: var(--green);
}  #a11y {
position: fixed;
z-index: 1002;
bottom: 20px;
right: 20px;
width: 50px;
box-shadow: 0 3px 6px 0 rgba(0,0,0,.16);
background-color: #fff;
display: flex;
flex-direction: column-reverse;
}
#a11y button {
appearance: none;
background: unset;
border: unset;
}
#a11y button,
#a11y a {
padding: 12.5px;
display: flex;
cursor: pointer;
position: relative;
}
#a11y svg {
height: 100%;
width: auto;
}
#a11y-toggle {
z-index: 1;
}
#a11y button:hover,
#a11y button:focus,
#a11y a:hover,
#a11y a:focus {
outline: 4px dashed var(--green);
}
#a11y button:hover svg,
#a11y button:focus svg,
#a11y a:hover svg,
#a11y a:focus svg {
fill: var(--green);
}
#a11y button span,
#a11y a span,
.toTop span {
position: absolute;
width: 18ch;
max-width: calc(100vw - 150px);
right: calc(100% + 1em);
background: white;
padding: 4px;
top: 50%;
font-size: 1.5rem;
color: black;
transform: translateY(-50%);
outline: 1px solid var(--green);
text-align: center;
font-family: "TypeType", "serif";
}
#a11y button span:before,
#a11y a span:before,
.toTop span:before {
content: '';
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
border: 7px solid transparent;
border-left-color: white;
z-index: 1;
}
#a11y button span:after,
#a11y a span:after,
.toTop span:after {
content: '';
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
border: 8px solid transparent;
border-left-color: var(--green);
z-index: 0;
}
#a11y button:focus span,
#a11y a:focus span,
.toTop:focus span {
z-index: 10;
}
#a11y button:not(:hover):not(:focus-within) span,
#a11y a:not(:hover):not(:focus-within) span,
.toTop:not(:hover):not(:focus) span {
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
padding: unset;
}
#a11y img {
width: 100%;
}
#a11y-menu {
display: none;
margin: unset;
padding: unset;
width: 100%;
list-style: none;
flex-direction: column-reverse;
background-color: white;
}
#a11y-toggle[aria-expanded="true"] ~ #a11y-menu {
display: flex;
}
.wp-block-media-text {
width: 100%;
margin: 40px 0;
}
@media (min-width: 1401px) {
.client__mobile {
display: none;
}
}
@media (max-width: 1400px) {
.client__mobile {
width: 26px;
height: 26px;
background-color: var(--green);
border: 4px solid var(--green);
margin-right: 10px;
padding: 8px;
}
.client__mobile img {
width: 100%;
height: auto;
}
}
@media (max-width: 600px) {
.client__mobile {
width: 20px;
height: 20px;
border-width: 2px;
}
}
.wp-block-image {
width: 100%;
}
.wp-block-image .aligncenter {
align-self: center;
}
.captcha-image {
border: unset;
background-color: #fff;
}