.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;
}a {
text-decoration-thickness: 1px !important;
text-underline-offset: .1em;
} :where(.wp-site-blocks *:focus) {
outline-width: 2px;
outline-style: solid;
} .wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
margin-bottom: 3px;
} .wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
outline-offset: 4px;
} .wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
outline-offset: 0;
} h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
caption,
figcaption,
p {
text-wrap: pretty;
} .more-link {
display: block;
}
html {
scroll-behavior: smooth;
}
body {
background-color: #FFFAFA;
}
:root { --couleur-primaire: #FFFAFA;
--couleur-secondaire: #111111;
--couleur-accent-clair: #5F00FA;
--couleur-accent-sombre: #DDFF00;
--couleur-neutre-claire: #B4B4B4;
--couleur-neutre-sombre: #505050;
}
.wp-lightbox-overlay {
background-color: var(--couleur-secondaire);
}  .header,
.textes-hero {
opacity: 0;
transition: opacity .6s ease-out;
will-change: opacity;
}
.header.is-visible,
.textes-hero.is-visible {
opacity: 1;
} .reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity .6s ease, transform .6s ease;
will-change: opacity, transform;
} .reveal.is-visible {
opacity: 1;
transform: none;
}
.error404 .reveal {
opacity: 1;
}
html.has-modal-open .wp-site-blocks {
visibility: hidden !important;
}
html.has-modal-open .wp-block-navigation__responsive-container {
visibility: visible !important;
} .section-univers {
transition: background-color .6s ease, color .4s ease;
} .section-univers:not(.in-view)>* {
opacity: 0;
transform: translateY(10px);
visibility: hidden;
pointer-events: none;
transition: opacity .4s ease-in, transform .4s ease-in, visibility 0s linear .4s;
} .section-univers.in-view {
background: var(--couleur-secondaire);
} .section-univers.in-view>* {
opacity: 1;
transform: none;
visibility: visible;
pointer-events: auto;
transition: opacity .4s ease, transform .4s ease, visibility 0s;
} .btn-retour-haut {
position: fixed;
right: 1.5rem;
bottom: 3rem;
z-index: 9999;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
background-color: var(--couleur-primaire);
color: var(--couleur-secondaire);
font-weight: 500;
font-size: 1rem;
letter-spacing: -5%;
border: none;
cursor: pointer;
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition:
opacity 0.25s ease,
transform 0.25s ease,
background-color 0.25s ease;
} .btn-retour-haut.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.btn-retour-haut:focus:not(:focus-visible) {
outline: none;
}
@media (max-width: 1023px) {
.btn-retour-haut {
display: none;
}
} .wpcf7 p {
color: var(--couleur-neutre-sombre);
transition: color .25s ease-in-out;
font-size: clamp(1rem, 0.34vw + 0.92rem, 1.19rem);
}
.wpcf7 p:focus-within {
color: var(--couleur-secondaire);
font-weight: 500;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
width: 100%;
max-width: 100%;
padding-left: 0;
border: none;
border-bottom: 1px solid var(--couleur-neutre-claire); background-color: var(--couleur-primaire);
font-family: 'Satoshi Variable', sans-serif;
font-size: clamp(1rem, 0.34vw + 0.92rem, 1.19rem);
color: var(--couleur-secondaire);
outline: none;
transition: all 0.3s ease;
box-sizing: border-box;
}
.wpcf7 input:focus,
textarea:focus {
border-bottom-color: var(--couleur-secondaire);
transition: border-color .25s ease;
}
.wpcf7-btn-envoi {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--couleur-primaire);
background-color: var(--couleur-secondaire);
border: var(--couleur-secondaire) solid 2px;
text-decoration: none;
font-size: clamp(1rem, 0.34vw + 0.92rem, 1.19rem);
margin-top: 2rem;
padding: .25rem 1.25rem;
border-radius: 1.25rem;
cursor: pointer;
transition: background-color .3s ease-in-out, color .1s ease, border-color .3s ease-in-out;
}
.wpcf7-btn-envoi:hover {
color: var(--couleur-secondaire);
background-color: var(--couleur-primaire);
}
.wpcf7-list-item-label {
font-size: clamp(1rem, 0.34vw + 0.92rem, 1.19rem);
color: var(--couleur-secondaire);
}
.wpcf7-not-valid-tip {
font-size: clamp(1rem, 0.34vw + 0.92rem, 1.19rem);
color: red;
} .wp-block-navigation.items-justified-right {
--navigation-layout-justification-setting: none;
}
.wp-block-navigation__container {
--wp--preset--font-size--corps-de-texte: clamp(1.25rem, 0.6vw + 1.1rem, 1.58rem);
}
.wp-block-navigation-item__content {
text-decoration: none;
}
.wp-block-navigation-item__content:focus,
.wp-block-navigation-item__content:active,
.wp-block-navigation-item__content[aria-current="page"] {
outline: none;
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
font-weight: 600 !important;
} .wp-block-template-part {
margin-block-start: 0;
}
.nav-footer a {
padding-bottom: .075rem;
text-decoration: none;
background-repeat: no-repeat;
background-image: linear-gradient(to right, var(--couleur-primaire), var(--couleur-primaire)); background-size: 0% 1px;
transition: background-size .2s ease;
background-position: center bottom;
}
.reseaux-footer a {
padding-bottom: .075rem;
text-decoration: none;
background-repeat: no-repeat;
background-image: linear-gradient(to right, var(--couleur-primaire), var(--couleur-primaire)); background-size: 0% 1px;
transition: background-size .2s ease;
background-position: center bottom;
}
.reseaux-footer a:hover {
background-size: 100% 1px;
}
.nav-footer a:hover {
background-size: 100% 1px;
}
.logo-footer {
max-width: 35%;
}
.mail-footer a {
display: none;
}
.mail-footer a {
padding-bottom: .075rem;
text-decoration: none;
background-repeat: no-repeat;
background-image: linear-gradient(to right, var(--couleur-primaire), var(--couleur-primaire)); background-size: 0% 2px;
transition: background-size .5s ease;
background-position: left bottom;
}
.mail-footer a:hover {
background-size: 100% 2px;
}
.footer-row-legales a {
padding-bottom: .075rem;
text-decoration: none;
background-repeat: no-repeat;
background-image: linear-gradient(to right, var(--couleur-neutre-claire), var(--couleur-neutre-claire)); background-size: 0% 1px;
transition: background-size .4s ease;
background-position: center bottom;
}
.footer-row-legales a:hover {
background-size: 100% 1px;
}  .btn-primaire.variante1 {
display: inline-flex;
align-items: center;
color: var(--couleur-secondaire);
border-radius: 1.25rem;
font-weight: 400;
font-size: clamp(1.25rem, 0.6vw + 1.1rem, 1.58rem);
gap: .25rem;
padding-right: 1.25rem;
cursor: pointer;
overflow: hidden;
text-decoration: none;
position: relative;
transition: color .3s ease-in-out;
}
.btn-primaire.variante1 .label {
position: relative;
z-index: 1;
} .btn-primaire.variante1 .icone {
position: relative;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
} .btn-primaire.variante1 .cercle {
position: absolute;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--couleur-secondaire);
z-index: 0;
transition: transform .5s cubic-bezier(.7, 0, .3, 1);
} .btn-primaire.variante1 .icone>svg {
position: relative;
z-index: 1;
transition: transform .4s ease-in-out;
transform-origin: center;
} .btn-primaire.variante2 {
display: inline-flex;
align-items: center;
color: var(--couleur-primaire);
border-radius: 1.25rem;
font-weight: 400;
font-size: clamp(1.25rem, 0.6vw + 1.1rem, 1.58rem);
gap: .25rem;
padding-right: .75rem;
cursor: pointer;
overflow: hidden;
text-decoration: none;
position: relative;
transition: color .3s ease-in-out;
}
.btn-primaire.variante2 .label {
position: relative;
z-index: 1;
} .btn-primaire.variante2 .icone {
position: relative;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
} .btn-primaire.variante2 .cercle {
position: absolute;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--couleur-primaire);
z-index: 0;
transition: transform .5s cubic-bezier(.7, 0, .3, 1);
} .btn-primaire.variante2 .icone>svg {
position: relative;
z-index: 1;
transition: transform .4s ease-in-out;
transform-origin: center;
} .btn-secondaire.variante1 {
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: var(--couleur-secondaire) solid 2px;
text-decoration: none;
font-weight: 400;
font-size: 1.25rem;
padding: .25rem 1.25rem;
border-radius: 1.25rem;
cursor: pointer;
transition: background-color .1s ease-in-out, color .1s ease, border-color .1s ease-in-out;
} .btn-secondaire.variante1>.fleche {
width: 0;
height: auto;
opacity: 0;
margin-left: 0;
overflow: hidden;
transition: width .3s ease-in-out, margin-left .3s ease-in-out, opacity .3s ease-in-out;
} .btn-secondaire.variante2 {
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
color: var(--couleur-primaire);
border: var(--couleur-primaire) solid 2px;
text-decoration: none;
font-weight: 400;
font-size: 1.25rem;
padding: .25rem 1.25rem;
border-radius: 1.25rem;
cursor: pointer;
transition: background-color .1s ease-in-out, color .1s ease, border-color .1s ease-in-out;
} .btn-secondaire.variante2>.fleche {
width: 0;
height: auto;
opacity: 0;
margin-left: 0;
overflow: hidden;
transition: width .3s ease-in-out, margin-left .3s ease-in-out, opacity .3s ease-in-out;
}
@media (hover: hover) and (pointer: fine) { .btn-primaire.variante1:hover {
color: var(--couleur-primaire);
}
.btn-primaire.variante1:hover .cercle {
transform: scale(20); }
.btn-primaire.variante1:hover .icone>svg {
transform: rotate(180deg); }
.btn-primaire.variante2:hover {
color: var(--couleur-secondaire);
}
.btn-primaire.variante2:hover .cercle {
transform: scale(20); }
.btn-primaire.variante2:hover .icone>svg {
transform: rotate(180deg); }
.btn-secondaire.variante1:hover {
background-color: var(--couleur-secondaire);
color: var(--couleur-primaire);
border-color: transparent;
} .btn-secondaire.variante1:hover>.fleche {
width: 1.25rem;
margin-left: .75rem; opacity: 1;
}
.btn-secondaire.variante1:hover>.fleche path {
fill: var(--couleur-primaire);
}
.btn-secondaire.variante2:hover {
background-color: var(--couleur-primaire);
color: var(--couleur-secondaire);
border-color: transparent;
} .btn-secondaire.variante2:hover>.fleche {
width: 1.25rem;
margin-left: .75rem; opacity: 1;
}
}
@media (hover: none) { .btn-primaire.variante1:active {
color: var(--couleur-primaire);
}
.btn-primaire.variante2:active {
color: var(--couleur-secondaire);
}
.btn-primaire.variante1:active .icone > svg,
.btn-primaire.variante2:active .icone > svg {
transform: rotate(180deg);
}
.btn-secondaire.variante1:active {
background-color: var(--couleur-secondaire);
color: var(--couleur-primaire);
border-color: transparent;
}
.btn-secondaire.variante2:active {
background-color: var(--couleur-primaire);
color: var(--couleur-secondaire);
border-color: transparent;
}
.btn-secondaire.variante1:active > .fleche,
.btn-secondaire.variante2:active > .fleche {
width: 1.25rem;
margin-left: .75rem;
opacity: 1;
}
} .style-medium {
font-weight: 500;
color: var(--couleur-secondaire);
}
.style-medium-clair {
font-weight: 500;
color: var(--couleur-primaire);
}
.specific-medium {
font-family: 'Cormorant', serif;
font-size: clamp(1.56rem, 0.98vw + 1.32rem, 2.11rem);
font-weight: 500;
color: var(--couleur-secondaire);
}
.specific-medium-clair {
font-family: 'Cormorant', serif;
font-size: clamp(1.56rem, 0.98vw + 1.32rem, 2.11rem);
font-weight: 500;
color: var(--couleur-primaire);
}
.wp-block-separator {
border-color: var(--couleur-neutre-sombre);
width: 100%;
}
.liste-special {
font-style: italic;
color: var(--couleur-neutre-sombre);
}
.liste-special-accent {
font-style: italic;
color: var(--couleur-accent-clair);
font-weight: 500;
}  .section-hero {
padding: 2rem 0 2rem 0;
}  .section-expertises {
min-height: 70dvh;
}
.wddesign {
font-family: 'Cormorant', serif;
color: var(--couleur-secondaire);
font-size: clamp(2.44rem, 2.35vw + 1.87rem, 3.75rem);
}
.conteneur-titre-expertises {
align-items: center;
} .section-portfolio {
display: flex;
align-items: center;
color: var(--couleur-neutre-claire);
min-height: 50dvh;
}
.btn-portfolio {
width: 100%;
} .btn-portfolio #bouton-fill {
clip-path: inset(0 100% 0 0 round 5.71px);
transition: clip-path .4s ease;
}
.btn-portfolio:hover #bouton-fill {
clip-path: inset(0 0 0 0 round 5.71px);
} .btn-portfolio #bouton {
stroke: var(--couleur-primaire);
stroke-width: 1px;
fill: none;
transition: stroke .3s ease;
}
.btn-portfolio:hover #bouton {
stroke: transparent;
} .btn-portfolio #fleche line {
transition: stroke .1s ease;
}
.btn-portfolio:hover #fleche line {
stroke: var(--couleur-secondaire);
}
.btn-portfolio {
transition: color .2s ease-in;
}
.btn-portfolio:hover {
color: var(--couleur-primaire);
}
.h2-hidden {
position: absolute;
inset: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
} .wdunivers a,
.wdvision a {
font-family: 'Cormorant', serif;
color: var(--couleur-secondaire);
font-size: clamp(3.05rem, 3.5vw + 2.2rem, 5rem);
text-decoration: none;
}  .pusection-univers-image {
opacity: 0;
transform: translateY(12px);
transition: opacity .6s ease, transform .6s ease;
will-change: opacity, transform;
} .pusection-univers-image.is-visible {
opacity: 1;
transform: none;
}  .liste-graphisme,
.liste-design,
.liste-web li {
list-style: none;
padding-left: 0;
}
.formules {
display: flex;
flex-direction: column;
height: 100;
}
.formules-prix {
margin-top: auto;
padding-top: 2rem;
} @media ((min-width: 1024px)) {  .wp-block-navigation-item__content {
padding-bottom: .075rem;
text-decoration: none;
background-repeat: no-repeat;
background-image: linear-gradient(to right, var(--couleur-secondaire), var(--couleur-secondaire)); background-size: 0% 1px;
transition: background-size .2s ease;
background-position: center bottom;
}
.wp-block-navigation-item__content:hover {
background-size: 100% 1px;
}
.wp-block-navigation-item__content:focus,
.wp-block-navigation-item__content:active,
.wp-block-navigation-item__content[aria-current="page"] {
outline: none;
}
.wp-block-navigation__container {
--wp--preset--font-size--corps-de-texte: none;
} .wp-block-template-part {
margin-block-start: 1.2rem
}
.footer {
--wp--preset--spacing--16: 2rem;
}
.infos-mobile,
.separateur-haut {
display: none !important;
}
.nav-footer,
.reseaux-footer {
display: flex;
flex-direction: row;
}
.conteneur-colonnes {
--wp--preset--spacing--24: 0;
}
.nav-footer {
justify-content: left;
gap: 1.5rem;
}
.reseaux-footer {
justify-content: right;
gap: 1.5rem;
}
.mail-footer a {
display: block;
}
.mail-footer {
justify-content: right;
} .section-mentions {
--wp--preset--spacing--16: 1.5rem;
}  .section-hero {
min-height: 100vh;
--wp--preset--spacing--16: 1.5rem;
padding: 0 1.5rem 0 1.5rem;
}
.section-hero h1 {
--wp--preset--font-size--corps-de-texte: clamp(1.25rem, 0.6vw + 1.1rem, 1.58rem);
} .textes-univers {
text-align: center;
}
.section-univers .titre-section {
justify-content: right;
} .section-expertises {
height: 100vh;
padding-top: 0 !important;
}
.conteneur-titre-expertises {
align-items: flex-start;
}
.titre-expertises {
--wp--preset--font-size--titre-4: clamp(3.05rem, 3.5vw + 2.2rem, 5rem);
}
.wddesign {
font-size: clamp(3.81rem, 5.12vw + 2.57rem, 6.66rem);
} .section-portfolio {
align-items: center;
justify-content: center;
}
.btn-portfolio {
max-width: 75%;
}
.section-portfolio {
height: 100vh;
} .section-contact p {
text-align: center;
}  .pusection-univers,
.pusection-presentation {
--wp--preset--spacing--16: 2rem;
} .putextes-histoire,
.putextes-vision,
.putextes-mission {
margin-left: 50%;
}
.conteneur-histoire,
.conteneur-vision,
.conteneur-mission {
display: flex;
flex-direction: column;
gap: 2rem;
margin-block-start: 0;
} .pusection-universexp {
--wp--preset--spacing--16: 2rem;
}  .pesection-introduction {
--wp--preset--spacing--16: 2rem;
} .pesection-expertises {
--wp--preset--spacing--16: 2rem;
}
.row-btn {
justify-content: flex-start;
}
.conteneur-graphisme,
.conteneur-design,
.conteneur-web {
display: flex;
flex-direction: column;
gap: 2rem;
--wp--preset--spacing--24: 0;
}
.colonne-inversion {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.liste-design {
text-align: right;
}
.texte-web {
text-align: right;
} .pesection-formules {
min-height: 100vh;
--wp--preset--spacing--16: 2rem;
}
.formules-titre h2 {
align-self: center;
}
.formules-conteneur {
--wp--preset--spacing--16: 1rem;
}
.formules-prix {
color: var(--couleur-secondaire);
transition: color .3s ease;
}
.formules:hover .formules-prix {
color: var(--couleur-accent-clair);
} .pesection-expind {
--wp--preset--spacing--16: 2rem;
} .pesection-demandespe {
display: flex;
flex-direction: column;
gap: 1rem;
padding-top: 4rem;
--wp--preset--spacing--16: 2rem;
text-align: center;
}
.pesection-demandespe p {
--wp--preset--font-size--sous-titre-2: clamp(1.56rem, 0.98vw + 1.32rem, 2.11rem)
}  .pcsection-contact {
--wp--preset--spacing--16: 2rem;
}
.conteneur-reseaux {
--wp--preset--spacing--16: .5rem;
}
}