@font-face {
font-family: "Monigue";
src: url(//www.we-are-clovis.fr/wp-content/themes/wac/assets/fonts/Monigue.woff2) format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
:root {
--black: #0B0B09;
--green: #bff60d;
--beige: #F0EDE5;
--white: #F8F5EF;
--grey: #88887E;
--dgrey: #545454;
--px: clamp(20px, 4.5vw, 86px);
--r-btn: 30px;
--section-pad: clamp(110px, 10vw, 170px);
--section-gap: clamp(28px, 3vw, 44px);
--label-title-gap: 24px;
}
.grecaptcha-badge { visibility: hidden; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
overflow: hidden;
}
body {
font-family: "Inter", sans-serif;
background: var(--white);
color: var(--black);
overflow-x: hidden;
cursor: none;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
#cur-dot, #cur-ring {
position: fixed;
border-radius: 50%;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
will-change: transform;
}
#cur-dot { width: 6px; height: 6px; background: var(--black); transition: background .2s; }
#cur-ring {
width: 38px; height: 38px;
border: 1.5px solid rgba(11,11,9,.35);
transition: width .25s, height .25s, opacity .25s, border-color .25s;
}
body.on-dark #cur-dot { background: #fff; }
body.on-dark #cur-ring { border-color: rgba(255,255,255,.4); }
.label-tag {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: "Space Grotesk", sans-serif;
font-size: 12.5px;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--grey);
}
.label-tag::before {
content: "";
display: block;
width: 7px;
height: 7px;
border-radius: 3.5px;
background: var(--green);
flex-shrink: 0;
}
.section-title {
font-family: "Monigue", "Syne", sans-serif;
font-weight: 400;
font-size: clamp(40px, 4.2vw, 82px);
line-height: .84;
letter-spacing: 0;
text-transform: uppercase;
color: var(--black);
}
.btn-dark {
display: inline-flex;
align-items: center;
padding: 16px 22px;
border-radius: var(--r-btn);
background: var(--black);
color: var(--white);
font-family: "Space Grotesk", sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: .01em;
white-space: nowrap;
transition: opacity .2s;
}
.btn-dark:hover { opacity: .8; }
.btn-green {
display: inline-flex;
align-items: center;
padding: 16px 22px;
border-radius: var(--r-btn);
background: var(--green);
color: var(--black);
font-family: "Space Grotesk", sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: .01em;
white-space: nowrap;
transition: opacity .2s;
}
.btn-green:hover { opacity: .85; }
.arrow-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1.5px solid rgba(11,11,9,.2);
background: transparent;
flex-shrink: 0;
transition: background .2s, border-color .2s;
}
.arrow-btn svg { width: 12px; height: 12px; }
.arrow-btn:hover { background: var(--black); border-color: var(--black); }
.arrow-btn:hover svg path { stroke: #fff; }
#main-nav {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 500;
padding: 18px var(--px);
display: flex;
align-items: center;
justify-content: space-between;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body.admin-bar #main-nav { top: 32px; }
.nav-right {
display: flex;
align-items: center;
gap: 40px;
}
.nav-logo {
display: flex;
align-items: center;
}
.nav-logo img {
height: 60px;
width: auto;
display: block;
}
.nav-links {
display: flex;
gap: 40px;
}
.nav-links a {
font-family: "Space Grotesk", sans-serif;
font-size: 13px;
font-weight: 500;
color: var(--grey);
transition: color .2s;
}
.nav-links a:hover { color: var(--black); }
@media (max-width: 900px) {
.nav-links { display: none; }
body.admin-bar #main-nav { top: 46px; }
}
#hero {
position: relative;
min-height: 360vh;
background: var(--white);
}
.hero-stage {
position: sticky;
top: 0;
height: 100vh;
padding: 140px var(--px) 80px;
padding-left: calc(var(--px) + 18px);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
.hero-constellation {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
#hero-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.hero-gradient {
position: absolute;
top: -20%;
right: -5%;
width: 55vw;
height: 55vw;
border-radius: 50%;
background: radial-gradient(circle, rgba(196,255,0,.18) 0%, rgba(196,255,0,0) 70%);
pointer-events: none;
z-index: 0;
}
.hero-left {
position: relative;
z-index: 3;
max-width: 58%;
margin-left: 8%;
display: flex;
flex-direction: column;
gap: 32px;
}
.hero-main-title {
font-family: "Monigue", "Syne", sans-serif;
font-weight: 400;
font-size: clamp(60px, 8.1vw, 174px);
line-height: .86;
letter-spacing: 0;
text-transform: uppercase;
color: #11110f;
}
.hero-main-title .line {
display: block;
margin-top: -0.08em;
}
.hero-main-title .line > span {
display: inline-block;
}
.hero-main-title .accent { color: #6a6a62; }
.hero-main-title .highlight {
color: var(--green);
text-shadow: 0 0 18px rgba(196,255,0,.45);
display: inline-block;
will-change: transform, text-shadow, filter;
}
.hero-main-title .creation-word {
display: inline-flex;
gap: 0.005em;
}
.hero-main-title .creation-word .c-letter {
display: inline-block;
will-change: transform, text-shadow, filter, opacity;
transform-origin: 50% 78%;
}
.hero-main-title .city {
font-size: clamp(34px, 2.7vw, 58px);
line-height: 1;
color: #7a7a72;
}
.hero-main-title .city-line { margin-top: -0.44em; }
.hero-services {
display: flex;
flex-wrap: wrap;
gap: 10px;
max-width: 680px;
}
.hero-service-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(11,11,9,.12);
background: rgba(248,245,239,.75);
font-family: "Space Grotesk", sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--black);
will-change: transform, opacity;
}
.hero-service-chip.is-accent {
background: var(--green);
border-color: transparent;
}
.hero-body { max-width: 560px; }
.hero-body strong {
display: block;
font-family: "Inter", sans-serif;
font-weight: 800;
font-size: 16px;
line-height: 1.5;
color: var(--black);
margin-bottom: 6px;
}
.hero-body p {
font-size: 15px;
line-height: 1.65;
color: var(--grey);
}
.hero-ctas {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.hero-right {
position: absolute;
right: calc(var(--px) - 30px);
top: 50%;
transform: translateY(-50%) rotate(-5deg);
width: min(44vw, 760px);
height: min(47vh, 470px);
z-index: 12;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 28px 80px rgba(0,0,0,.18);
}
.hero-img-wrap {
width: 100%;
height: 100%;
background: #000;
}
.hero-img-wrap video {
width: 100%;
height: 100%;
object-fit: cover;
}
.sticker {
position: absolute;
pointer-events: none;
z-index: 1;
}
.sticker-smiley { width: 128px; top: 20%; right: calc(var(--px) + 70px); }
.sticker-star { width: 52px; top: 22%; right: calc(var(--px) + 240px); }
.sticker-world { width: 126px; top: 69%; right: calc(var(--px) + 235px); }
.sticker-hand {
width: 155px;
top: 77%;
right: calc(var(--px) + 95px);
transform: rotate(18deg);
}
.scroll-down {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.scroll-down span {
font-family: "Space Grotesk", sans-serif;
font-size: 11px;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--grey);
}
.scroll-down-line {
width: 1px;
height: 40px;
background: var(--grey);
opacity: .4;
animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
0%,100% { transform: scaleY(1); opacity: .4; }
50% { transform: scaleY(.4); opacity: .8; }
}
@media (max-width: 900px) {
#hero { min-height: auto; }
.hero-stage {
position: relative;
height: auto;
padding: 112px var(--px) 56px;
overflow: visible;
}
.hero-left {
max-width: 100%;
margin-left: 0;
gap: 22px;
}
.hero-main-title {
font-size: clamp(52px, 11.4vw, 104px);
line-height: .88;
}
.hero-main-title .city { font-size: clamp(26px, 6.2vw, 42px); }
.hero-right {
position: relative;
top: auto;
right: auto;
transform: none !important;
width: 100%;
height: clamp(240px, 56vw, 420px);
margin-top: 22px;
border-radius: 14px;
}
.hero-ctas { gap: 12px; }
.scroll-down { display: none; }
.sticker-smiley, .sticker-world, .sticker-star, .sticker-hand { display: none; }
}
#banner {
background: var(--black);
padding: 20px 0;
overflow: hidden;
white-space: nowrap;
}
.banner-track {
display: inline-flex;
gap: 0;
animation: bannerScroll 22s linear infinite;
}
.banner-item {
display: inline-flex;
align-items: center;
gap: 24px;
padding: 0 24px;
font-family: "Syne", sans-serif;
font-weight: 600;
font-size: clamp(14px, 1.3vw, 20px);
letter-spacing: .05em;
text-transform: uppercase;
color: var(--white);
opacity: .85;
}
.banner-sep {
color: var(--green);
font-size: 22px;
line-height: 1;
opacity: 1;
}
@keyframes bannerScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
#notre-diff {
padding: var(--section-pad) var(--px);
background: var(--white);
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
overflow: hidden;
}
.diff-left { display: flex; flex-direction: column; gap: 0; }
.diff-title { max-width: 700px; }
.diff-wac-title {
font-family: "Monigue", "Syne", sans-serif;
font-weight: 400;
font-size: clamp(72px, 7.6vw, 150px);
line-height: .82;
letter-spacing: 0;
text-transform: uppercase;
color: var(--black);
max-width: 720px;
}
.dw-line { display: block; }
.dw-line > span { display: inline-block; }
.dw-fixed { color: #bff60d; }
.dw-swap {
display: inline-block;
position: relative;
vertical-align: baseline;
}
.dw-swap .v2 {
position: absolute;
left: 0;
top: 0;
}
.diff-right {
padding-top: 54px;
display: flex;
flex-direction: column;
gap: 15px;
}
.diff-text {
font-size: 17px;
line-height: 1.75;
color: var(--grey);
max-width: 560px;
}
.diff-tags {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 8px;
}
.diff-tag {
font-family: "Monigue", "Syne", sans-serif;
font-weight: 400;
font-size: clamp(22px, 2.5vw, 46px);
color: var(--black);
}
.diff-tag .plus { color: var(--green); }
.sticker-cat {
position: absolute;
bottom: 0;
right: var(--px);
width: 126px;
pointer-events: none;
z-index: 2;
}
.diff-star-green {
position: absolute;
top: 112px;
left: 50%;
transform: translateX(-50%);
width: 52px;
pointer-events: none;
z-index: 2;
}
@media (max-width: 900px) {
#notre-diff { grid-template-columns: 1fr; gap: 48px; }
.sticker-cat, .diff-star-green { display: none; }
}
#offres {
padding: calc(var(--section-pad) + 8px) var(--px) calc(var(--section-pad) + 26px);
background: var(--beige);
}
.offres-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 64px;
gap: 32px;
flex-wrap: wrap;
}
.offres-header .label-tag { margin-bottom: 0; }
.offres-header-left { display: flex; flex-direction: column; gap: 0; }
.offres-title {
max-width: 1012px;
font-family: "Monigue", "Syne", sans-serif;
font-size: clamp(64px, 5.2vw, 100px);
line-height: .82;
letter-spacing: 0;
}
.offres-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--beige);
align-items: start;
}
.offre-card {
position: relative;
background: var(--white);
height: 465px;
min-height: 465px;
padding: 60px;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
border: 1px solid var(--beige);
cursor: pointer;
transition: border-color .3s;
}
.offre-card:hover { border-color: rgba(11,11,9,.12); }
.offre-card-archive {
height: 460px;
min-height: 460px;
}
.offre-video-wrap {
position: absolute;
inset: 0;
transform: translateY(102%);
transition: transform .55s cubic-bezier(.22,.61,.36,1);
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.offre-hover-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.offre-video-overlay {
position: absolute;
inset: 0;
background: rgba(11, 11, 9, .48);
}
.offre-num-bg {
position: absolute;
top: 10px;
right: -14px;
width: 310px;
height: 132px;
display: flex;
align-items: center;
justify-content: flex-end;
font-family: "Syne", sans-serif;
font-weight: 800;
font-size: 200px;
line-height: 200px;
color: var(--black);
opacity: .05;
letter-spacing: -0.05em;
user-select: none;
pointer-events: none;
text-align: right;
transition: color .45s, opacity .45s, transform .45s;
}
.offre-label {
position: absolute;
top: 64px;
left: 60px;
font-family: "Space Grotesk", sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--grey);
transition: color .45s;
}
.offre-arrow-btn {
position: absolute;
top: 60px;
right: 60px;
width: 40px;
height: 40px;
}
.offre-arrow-btn .arrow-btn { transition: transform .45s, background .45s, border-color .45s; }
.offre-body {
position: absolute;
left: 60px;
right: 60px;
bottom: 51px;
display: flex;
flex-direction: column;
gap: 50px;
}
.offre-desc {
font-size: 15px;
line-height: 1.67;
color: var(--grey);
max-width: 440px;
transition: color .45s;
}
.offre-title {
font-family: "Syne", sans-serif;
font-weight: 700;
font-size: clamp(34px, 2.2vw, 40px);
line-height: 1;
letter-spacing: -0.02em;
color: var(--black);
transition: color .45s;
max-width: 607px;
}
.offre-card:hover .offre-video-wrap { transform: translateY(0); }
.offre-card > * { z-index: 1; }
.offre-card:hover .offre-label { color: var(--white); }
.offre-card:hover .offre-title { color: var(--white); }
.offre-card:hover .offre-desc { color: var(--white); }
.offre-card:hover .offre-num-bg {
opacity: 0;
transform: translateY(-8px);
}
.offre-card:hover .offre-arrow-btn .arrow-btn {
transform: rotate(45deg);
background: var(--green);
border-color: var(--green);
}
.offre-card:hover .offre-arrow-btn .arrow-btn svg path { stroke: var(--black); }
@media (max-width: 768px) {
.offres-grid { grid-template-columns: 1fr; }
.offre-card { height: auto; padding: 40px 28px; min-height: 360px; }
.offre-card-archive { height: auto; min-height: 360px; }
.offre-label { top: 28px; left: 28px; }
.offre-arrow-btn { top: 28px; right: 28px; }
.offre-num-bg { top: 0; right: -8px; font-size: 140px; line-height: 140px; }
.offre-body {
position: absolute;
left: 28px;
right: 28px;
bottom: 32px;
gap: 24px;
}
.offre-title { font-size: 34px; line-height: 1.02; }
}
#cas-pratiques {
position: relative;
padding: calc(var(--section-pad) + 22px) 0 calc(var(--section-pad) + 30px);
background: var(--white);
overflow: hidden;
}
.cas-header {
padding: 0 var(--px);
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 72px;
flex-wrap: wrap;
gap: 24px;
position: relative;
z-index: 2;
}
.cas-header-left { display: flex; flex-direction: column; gap: 0; }
.cas-title {
max-width: 1012px;
font-family: "Monigue", "Syne", sans-serif;
font-weight: 400;
font-size: clamp(64px, 5.2vw, 100px);
line-height: .82;
letter-spacing: 0;
}
.cas-nav {
display: flex;
gap: 8px;
}
.cas-nav-btn {
width: 48px;
height: 48px;
border-radius: 24px;
border: 1px solid rgba(11,11,9,.14);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .2s, border-color .2s;
}
.cas-nav-btn:hover { background: var(--black); border-color: var(--black); }
.cas-nav-btn:hover svg path { stroke: #fff; }
.cas-nav-btn svg { width: 15px; height: 15px; }
.cas-track-wrap {
overflow: hidden;
padding: 0 var(--px);
position: relative;
z-index: 2;
}
.cas-track {
display: flex;
gap: 16px;
transition: transform .6s cubic-bezier(.25,.46,.45,.94);
will-change: transform;
}
.cas-card {
flex-shrink: 0;
width: calc((100% - 32px) / 3);
cursor: pointer;
}
.cas-card-img {
width: 100%;
aspect-ratio: 570 / 390;
border-radius: 10px;
overflow: hidden;
background: var(--beige);
margin-bottom: 31px;
position: relative;
}
.cas-card-img video {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.cas-card:hover .cas-card-img video { transform: scale(1.05); }
.cas-card-label {
display: flex;
align-items: center;
gap: 10px;
font-family: "Syne", sans-serif;
font-weight: 700;
font-size: clamp(19px, 1.354vw, 26px);
line-height: 1.2;
letter-spacing: 0;
color: var(--black);
}
.cas-sticker-awesome {
position: absolute;
top: 120px;
right: calc(var(--px) + 164px);
width: 251px;
z-index: 0;
pointer-events: none;
}
.cas-sticker-world {
position: absolute;
top: 200px;
right: calc(var(--px) + 296px);
width: 126px;
z-index: 0;
pointer-events: none;
}
@media (max-width: 1100px) {
.cas-card { width: calc((100% - 16px) / 2); }
}
@media (max-width: 768px) {
#cas-pratiques { padding: 120px 0 120px; }
.cas-header { margin-bottom: 44px; }
.cas-header-left { gap: 18px; }
.cas-title {
font-size: clamp(40px, 10vw, 64px);
line-height: .86;
}
.cas-card { width: 100%; }
.cas-sticker-awesome, .cas-sticker-world { display: none; }
}
#methode {
padding: calc(var(--section-pad) + 20px) var(--px) calc(var(--section-pad) + 24px);
background: var(--beige);
}
.methode-header {
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: 72px;
}
.diff-wac-title,
.offres-title,
.cas-title,
.methode-title {
margin-top: var(--label-title-gap);
}
.methode-title {
max-width: 726px;
font-family: "Monigue", "Syne", sans-serif;
font-weight: 400;
font-size: clamp(64px, 5.2vw, 100px);
line-height: .8;
letter-spacing: 0;
}
.methode-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
background: transparent;
}
.methode-card {
position: relative;
background: var(--white);
height: 380px;
min-height: 380px;
border: 1px solid var(--beige);
overflow: hidden;
transition: border-color .3s, transform .3s;
}
.methode-card:hover { border-color: rgba(11,11,9,.12); }
.methode-card::before {
content: "";
position: absolute;
inset: 0;
background: var(--black);
transform: translateY(102%);
transition: transform .55s cubic-bezier(.22,.61,.36,1);
z-index: 0;
}
.methode-card:hover::before { transform: translateY(0); }
.methode-card > * { position: relative; z-index: 1; }
.methode-num-bg {
position: absolute;
top: 20px;
right: -13px;
width: 310px;
height: 130px;
display: flex;
align-items: center;
justify-content: flex-end;
font-family: "Syne", sans-serif;
font-weight: 800;
font-size: 200px;
line-height: 200px;
color: var(--black);
opacity: .05;
letter-spacing: -0.05em;
user-select: none;
pointer-events: none;
transition: color .45s, opacity .45s, transform .45s;
}
.methode-step-num {
font-family: "Space Grotesk", sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: .1em;
color: var(--grey);
position: absolute;
top: 74px;
left: 60px;
transition: color .45s;
}
.methode-body {
position: absolute;
left: 60px;
right: 52px;
bottom: 90px;
display: flex;
flex-direction: column;
gap: 20px;
}
.methode-card-title {
font-family: "Syne", sans-serif;
font-weight: 700;
font-size: clamp(34px, 2.1vw, 40px);
color: var(--black);
line-height: 1;
letter-spacing: 0;
transition: color .45s;
}
.methode-card-desc {
font-family: "Syne", sans-serif;
font-weight: 400;
font-size: clamp(18px, 1.15vw, 22px);
color: var(--grey);
line-height: 1.136;
transition: color .45s;
}
.methode-card:hover .methode-step-num { color: rgba(248,245,239,.42); }
.methode-card:hover .methode-card-title { color: var(--white); }
.methode-card:hover .methode-card-desc { color: rgba(248,245,239,.76); }
.methode-card:hover .methode-num-bg {
color: var(--green);
opacity: .12;
transform: translateY(-8px);
}
@media (max-width: 900px) {
.methode-grid { grid-template-columns: 1fr 1fr; }
.methode-card {
height: 340px;
min-height: 340px;
}
.methode-num-bg {
top: 8px;
right: -10px;
width: 220px;
height: 96px;
font-size: 150px;
line-height: 150px;
}
.methode-step-num { top: 52px; left: 40px; }
.methode-body {
left: 40px;
right: 34px;
bottom: 52px;
gap: 14px;
}
.methode-card-title { font-size: 34px; }
.methode-card-desc {
font-size: 18px;
line-height: 1.25;
}
}
@media (max-width: 600px) {
#methode { padding: 120px var(--px) 120px; }
.methode-header { gap: 18px; margin-bottom: 40px; }
.methode-title {
font-size: clamp(40px, 10vw, 64px);
line-height: .86;
}
.methode-grid { grid-template-columns: 1fr; }
.methode-card {
height: 300px;
min-height: 300px;
}
.methode-num-bg {
top: 8px;
right: -8px;
width: 170px;
height: 76px;
font-size: 116px;
line-height: 116px;
}
.methode-step-num { top: 40px; left: 28px; }
.methode-body {
left: 28px;
right: 24px;
bottom: 34px;
gap: 12px;
}
.methode-card-title { font-size: 30px; }
.methode-card-desc { font-size: 16px; line-height: 1.25; }
}
#contact {
position: relative;
background: var(--black);
height: 1520px;
padding: 0 var(--px);
overflow: hidden;
}
.contact-wac-bg {
position: absolute;
top: 38px;
left: 50%;
transform: translateX(-50%);
width: 864px;
max-width: 76vw;
pointer-events: none;
z-index: 0;
}
.contact-sticker-hello {
position: absolute;
top: 183px;
right: 182px;
width: 186px;
transform: rotate(14deg);
z-index: 1;
pointer-events: none;
}
.contact-star {
position: absolute;
left: calc(var(--px) + 75px);
bottom: 321px;
width: 52px;
z-index: 1;
pointer-events: none;
}
.contact-inner {
position: relative;
height: 100%;
z-index: 2;
}
.contact-label {
position: absolute;
top: 200px;
left: 0;
right: 0;
width: 100%;
justify-content: center;
}
.contact-label.label-tag { color: rgba(248,245,239,.86); }
.contact-title {
position: absolute;
top: 256px;
left: 0;
right: 0;
width: min(1242px, calc(100vw - (var(--px) * 2)));
margin-inline: auto;
font-family: "Monigue", "Syne", sans-serif;
font-weight: 400;
font-size: clamp(68px, 7.3vw, 140px);
line-height: .857;
letter-spacing: 0;
text-transform: uppercase;
color: var(--white);
text-align: center;
margin: 0 auto;
}
.contact-sub {
position: absolute;
top: 527px;
left: 0;
right: 0;
width: 100%;
font-family: "Syne", sans-serif;
font-weight: 700;
font-size: clamp(30px, 2.1vw, 40px);
line-height: 1;
color: var(--green);
margin: 0;
text-align: center;
}
.contact-cta {
position: absolute;
top: 589px;
left: 0;
right: 0;
width: max-content;
margin-inline: auto;
padding: 16px 22px;
z-index: 3;
}
.contact-hr {
position: absolute;
left: 0;
right: 0;
top: 742px;
border: none;
border-top: 1px solid rgba(248,245,239,.12);
margin: 0;
}
.contact-infos {
position: absolute;
top: 790px;
left: 0;
right: 0;
width: min(1242px, calc(100vw - (var(--px) * 2)));
margin-inline: auto;
display: grid;
grid-template-columns: minmax(280px, .8fr) minmax(440px, 1.2fr);
gap: 52px;
align-items: start;
}
.contact-info-col h3,
.contact-form-col h3 {
font-family: "Syne", sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 1.2;
color: var(--white);
margin-bottom: 16px;
}
.contact-info-col,
.contact-form-col {
border: 1px solid rgba(248,245,239,.1);
background: rgba(248,245,239,.02);
border-radius: 14px;
padding: 22px;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.contact-info-col p {
font-family: "Inter", sans-serif;
font-size: 14px;
line-height: 1.7;
color: rgba(248,245,239,.58);
margin-bottom: 22px;
}
.contact-meta-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.contact-meta-item {
display: flex;
align-items: center;
gap: 10px;
font-family: "Space Grotesk", sans-serif;
font-size: 14px;
color: rgba(248,245,239,.82);
}
.contact-meta-item::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--green);
flex-shrink: 0;
}
.contact-meta-item a {
color: rgba(248,245,239,.82);
text-decoration: underline;
text-underline-offset: 2px;
transition: color .2s;
}
.contact-meta-item a:hover { color: var(--white); }
.contact-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.contact-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.contact-field>p {
display: flex;
flex-direction: column;
gap: 6px;
}
.contact-field-full { grid-column: 1 / -1; }
.contact-field label {
font-family: "Space Grotesk", sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: .04em;
text-transform: uppercase;
color: rgba(248,245,239,.54);
}
.contact-field input,
.contact-field select,
.contact-field textarea {
width: 100%;
border-radius: 10px;
border: 1px solid rgba(248,245,239,.16);
background: rgba(248,245,239,.03);
color: var(--white);
font-family: "Inter", sans-serif;
font-size: 14px;
padding: 12px 14px;
outline: none;
transition: border-color .2s, background .2s;
}
.contact-field select {
appearance: none;
-webkit-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, rgba(248,245,239,.5) 50%),
linear-gradient(135deg, rgba(248,245,239,.5) 50%, transparent 50%);
background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder { color: rgba(248,245,239,.34); }
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
border-color: rgba(191,246,13,.65);
background: rgba(248,245,239,.06);
}
.contact-field textarea {
height: 110px;
resize: vertical;
}
.contact-file-note {
font-family: "Inter", sans-serif;
font-size: 12px;
color: rgba(248,245,239,.46);
margin-top: 2px;
}
.contact-form-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 4px;
}
.contact-form-help {
font-family: "Inter", sans-serif;
font-size: 12px;
color: rgba(248,245,239,.46);
}
.contact-form-submit { padding: 14px 20px; }
.contact-form-submit[disabled] {
opacity: .58;
cursor: not-allowed;
}
.contact-rgpd{
margin-top: 5px;
}
.contact-rgpd span {
font-family: "Inter", sans-serif;
font-size: 12px;
color: rgba(248,245,239,.46);
text-transform: none;
}
.contact-rgpd input[type="checkbox"] {
margin-right: 6px;width: auto;
}
.contact-rgpd .wpcf7-list-item{
margin-left: 0;
}
@media (max-width: 1100px) {
#contact {
height: auto;
min-height: 860px;
padding: 90px var(--px) 0;
}
.contact-inner {
height: auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.contact-label,
.contact-title,
.contact-sub,
.contact-cta,
.contact-hr,
.contact-infos {
position: static;
left: auto;
right: auto;
top: auto;
transform: none;
}
.contact-label { margin-bottom: 22px; }
.contact-title {
width: 100%;
font-size: clamp(58px, 9.2vw, 108px);
margin-bottom: 26px;
}
.contact-sub { margin-bottom: 24px; }
.contact-cta { margin-bottom: 44px; }
.contact-hr { width: calc(100% + (var(--px) * 2)); }
.contact-infos {
position: relative;
left: auto;
width: min(980px, 100%);
grid-template-columns: 1fr;
gap: 20px;
padding: 24px 0 34px;
}
.contact-wac-bg {
top: 18px;
width: min(740px, 84vw);
}
.contact-sticker-hello {
top: 90px;
right: max(var(--px), 26px);
width: 152px;
}
.contact-star {
left: var(--px);
bottom: 222px;
}
}
@media (max-width: 768px) {
.contact-sticker-hello,
.contact-star { display: none; }
.contact-title {
font-size: clamp(40px, 11vw, 72px);
line-height: .9;
}
.contact-sub { font-size: clamp(28px, 7vw, 34px); }
.contact-infos {
width: 100%;
gap: 20px;
}
.contact-form-grid { grid-template-columns: 1fr; }
.contact-form-actions {
flex-direction: column;
align-items: flex-start;
}
}
#seo-faq {
background: var(--white);
padding: 96px var(--px) 84px;
border-top: 1px solid rgba(11,11,9,.08);
}
.seo-wrap {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.seo-title {
font-family: "Syne", sans-serif;
font-weight: 700;
font-size: clamp(26px, 2vw, 34px);
line-height: 1.1;
color: var(--black);
margin-bottom: 18px;
}
.seo-intro {
font-family: "Inter", sans-serif;
font-size: 15px;
line-height: 1.75;
color: var(--grey);
}
.seo-faq-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.seo-item {
border: 1px solid rgba(11,11,9,.12);
border-radius: 10px;
background: #fbfaf7;
overflow: hidden;
}
.seo-item summary {
list-style: none;
cursor: pointer;
font-family: "Space Grotesk", sans-serif;
font-size: 15px;
font-weight: 500;
color: var(--black);
padding: 16px 18px;
position: relative;
}
.seo-item summary::-webkit-details-marker { display: none; }
.seo-item summary::after {
content: "+";
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--grey);
font-size: 20px;
line-height: 1;
}
.seo-item[open] summary::after { content: "−"; }
.seo-answer {
padding: 0 18px 16px;
font-family: "Inter", sans-serif;
font-size: 14px;
line-height: 1.72;
color: var(--grey);
}
@media (max-width: 900px) {
.seo-wrap {
grid-template-columns: 1fr;
gap: 32px;
}
}
.page-texte {
padding: 170px var(--px) 110px;
background: var(--white);
}
.page-texte__inner {
max-width: 960px;
margin: 0 auto;
}
.page-texte__header {
margin-top: var(--label-title-gap);
margin-bottom: clamp(28px, 4vw, 48px);
}
.page-texte__title {
font-family: "Monigue", "Syne", sans-serif;
font-weight: 400;
font-size: clamp(48px, 5.2vw, 92px);
line-height: .86;
text-transform: uppercase;
color: var(--black);
}
.page-texte__content {
font-family: "Inter", sans-serif;
font-size: 16px;
line-height: 1.75;
color: var(--grey);
}
.page-texte__content > * + * {
margin-top: 1.2em;
}
.page-texte__content h2,
.page-texte__content h3,
.page-texte__content h4,
.page-texte__content h5,
.page-texte__content h6 {
font-family: "Syne", sans-serif;
color: var(--black);
letter-spacing: -0.01em;
line-height: 1.15;
}
.page-texte__content h2 {
font-size: clamp(28px, 3vw, 40px);
margin-top: 1.8em;
}
.page-texte__content h3 {
font-size: clamp(22px, 2.3vw, 30px);
margin-top: 1.6em;
}
.page-texte__content a {
color: var(--black);
text-decoration: underline;
text-underline-offset: 2px;
}
.page-texte__content ul,
.page-texte__content ol {
padding-left: 1.2em;
}
.page-texte__content li + li {
margin-top: .5em;
}
.page-texte__content strong {
color: var(--black);
font-weight: 600;
}
.page-texte__content table {
width: 100%;
border-collapse: collapse;
margin-top: 1.4em;
font-size: 15px;
}
.page-texte__content th,
.page-texte__content td {
padding: 12px 10px;
border: 1px solid rgba(11,11,9,.14);
text-align: left;
}
.page-texte__content th {
color: var(--black);
background: rgba(11,11,9,.03);
font-weight: 600;
}
.page-texte__content blockquote {
margin-top: 1.4em;
padding: 14px 18px;
border-left: 3px solid var(--green);
background: rgba(191,246,13,.08);
color: var(--black);
}
@media (max-width: 900px) {
.page-texte {
padding: 128px var(--px) 80px;
}
.page-texte__content {
font-size: 15px;
line-height: 1.7;
}
.page-texte__content table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
footer {
background: var(--white);
min-height: 450px;
padding: 94px var(--px) 20px;
border-top: 1px solid rgba(11,11,9,.08);
}
.footer-top {
display: grid;
grid-template-columns: 1fr auto auto;
grid-template-areas:
"logo agence contact"
"tagline . .";
column-gap: 132px;
row-gap: 34px;
margin-bottom: 86px;
align-items: start;
}
.footer-logo {
grid-area: logo;
display: flex;
align-items: center;
gap: 22px;
min-width: 0;
width: max-content;
justify-self: start;
}
.footer-logo img {
width: 272px;
height: auto;
display: block;
}
.footer-brand-text {
font-family: "Monigue", "Syne", sans-serif;
font-weight: 400;
font-size: 44px;
line-height: .84;
letter-spacing: 0;
text-transform: uppercase;
color: var(--black);
}
.footer-brand-line { display: block; }
.footer-tagline {
grid-area: tagline;
font-family: "Space Grotesk", sans-serif;
font-weight: 500;
font-size: 12.5px;
line-height: 20px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--grey);
width: max-content;
justify-self: start;
}
.footer-tagline strong { color: var(--black); font-weight: 700; }
.footer-col h4 {
font-family: "Space Grotesk", sans-serif;
font-size: 11.5px;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--grey);
margin-bottom: 18px;
}
.footer-col-agence { grid-area: agence; }
.footer-col-contact { grid-area: contact; }
.footer-col ul {
display: flex;
flex-direction: column;
gap: 8px;
}
.footer-col a,
.footer-col span {
font-family: "Inter", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.6;
color: var(--grey);
}
.footer-col a { transition: color .2s; }
.footer-col a:hover { color: var(--black); }
.footer-sep {
border: none;
border-top: 1px solid rgba(11,11,9,.18);
margin: 0;
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-top: 22px;
}
.footer-copy {
font-family: "Space Grotesk", sans-serif;
font-size: 12.5px;
font-weight: 500;
color: var(--grey);
}
.footer-legal {
display: flex;
align-items: center;
gap: 14px;
}
.footer-legal a {
font-family: "Space Grotesk", sans-serif;
font-size: 12.5px;
font-weight: 500;
color: var(--grey);
transition: color .2s;
}
.footer-legal a:hover { color: var(--black); }
@media (min-width: 1201px) {
.footer-top {
display: block;
position: relative;
min-height: 188px;
margin-bottom: 62px;
}
.footer-tagline { margin-top: 27px; }
.footer-col-agence,
.footer-col-contact {
position: absolute;
top: 14px;
}
.footer-col-agence { left: 67.45%; }
.footer-col-contact { left: 84.26%; }
}
@media (max-width: 1200px) {
.footer-top {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"logo logo"
"tagline tagline"
"agence contact";
column-gap: 90px;
}
}
@media (max-width: 900px) {
footer {
min-height: auto;
padding: 72px var(--px) 24px;
}
.footer-top {
grid-template-columns: 1fr;
grid-template-areas:
"logo"
"tagline"
"agence"
"contact";
row-gap: 28px;
margin-bottom: 44px;
}
.footer-logo {
min-width: 0;
gap: 16px;
}
.footer-logo img { width: min(272px, 62vw); }
.footer-brand-text {
font-size: 34px;
line-height: .9;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
.r { opacity: 0; transform: translateY(40px); }
.r-left { opacity: 0; transform: translateX(-30px); }
.r-right { opacity: 0; transform: translateX(30px); }
.r-scale { opacity: 0; transform: scale(.94); }