@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; }
@media (max-width: 1100px) {
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
}
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); }
@media (hover: none), (pointer: coarse) {
body {
cursor: auto;
}
#cur-dot,
#cur-ring {
display: none !important;
}
}
.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-quick-contact {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: -8px;
}
.hero-quick-contact-label {
font-family: "Inter", sans-serif;
font-size: 13px;
font-weight: 500;
color: var(--grey);
}
.hero-phone-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
border-radius: 999px;
border: 1px solid rgba(11,11,9,.12);
background: rgba(248,245,239,.74);
font-family: "Space Grotesk", sans-serif;
font-size: 13px;
font-weight: 500;
color: var(--black);
transition: background .2s, border-color .2s, transform .2s;
}
.hero-phone-link svg {
width: 14px;
height: 14px;
}
.hero-phone-link:hover {
background: var(--green);
border-color: var(--green);
transform: translateY(-1px);
}
.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: 150px var(--px) 56px;
overflow: visible;
}
.hero-left {
max-width: 100%;
margin-left: 0;
gap: 22px;
}
.hero-main-title {
font-size: clamp(60px, 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; }
.hero-quick-contact {
margin-top: 0;
flex-wrap: wrap;
gap: 10px;
}
.hero-quick-contact-label { width: 100%; }
.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; }
.diff-right{padding-top: 0;}
}
#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;
text-decoration: none;
color: inherit;
}
.offre-card:focus-visible {
outline: 2px solid var(--green);
outline-offset: 2px;
}
.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(0);
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);
opacity: 0;
transition: opacity .45s;
}
.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);
opacity: 0;
transform: translateY(10px);
transition: color .45s, opacity .45s, transform .45s;
}
.offre-arrow-btn {
position: absolute;
top: 60px;
right: 60px;
width: 40px;
height: 40px;
opacity: 0;
transform: translateY(10px);
transition: opacity .45s, transform .45s;
}
.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;
opacity: 0;
transform: translateY(12px);
transition: opacity .45s, transform .45s;
}
.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 > * { z-index: 1; }
.offre-card:hover .offre-video-overlay { opacity: 1; }
.offre-card:hover .offre-label,
.offre-card:hover .offre-body,
.offre-card:hover .offre-arrow-btn {
opacity: 1;
transform: translateY(0);
}
.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-video-wrap { transform: translateY(0); }
.offre-video-overlay { opacity: 1; }
.offre-label,
.offre-body,
.offre-arrow-btn {
opacity: 1;
transform: translateY(0);
}
.offre-label,
.offre-title,
.offre-desc { color: var(--white); }
.offre-num-bg {
opacity: 0;
transform: translateY(-8px);
}
.offre-arrow-btn .arrow-btn {
transform: rotate(45deg);
background: var(--green);
border-color: var(--green);
}
.offre-arrow-btn .arrow-btn svg path { stroke: var(--black); }
.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;
touch-action: pan-y;
}
.cas-track {
display: flex;
gap: 16px;
transition: transform .6s cubic-bezier(.25,.46,.45,.94);
will-change: transform;
touch-action: pan-y;
}
.cas-card {
flex-shrink: 0;
width: calc((100% - 32px) / 3);
cursor: pointer;
color: inherit;
text-decoration: none;
display: block;
}
.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-link {
color: inherit;
text-decoration: none;
}
.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);
min-height: 0;
padding: 190px var(--px) 96px;
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;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0;
z-index: 2;
}
.contact-label {
position: static;
width: 100%;
justify-content: center;
margin-bottom: 22px;
}
.contact-label.label-tag { color: rgba(248,245,239,.86); }
.contact-title {
position: static;
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 22px;
}
.contact-sub {
position: static;
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 0 28px;
text-align: center;
}
.contact-cta-wrap{
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
position: static;
width: max-content;
margin-inline: auto;
z-index: 3;
padding: 16px 22px;
margin-bottom: 48px;
}
.contact-hr {
position: static;
width: min(1242px, calc(100vw - (var(--px) * 2)));
border: none;
border-top: 1px solid rgba(248,245,239,.12);
margin: 0 auto 48px;
}
.contact-infos {
position: static;
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);
text-align: left;
}
.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;
}
.contact-files .codedropz-upload-inner span, .contact-files .codedropz-upload-inner a{
font-family: "Inter", sans-serif;
font-size: 12px;
color: rgb(255, 255, 255);
text-transform: none;
}
.contact-files .remove-file span:after {
background-image: url("data:image/svg+xml,%3Csvg width='35' height='35' viewBox='0 0 35 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.5 0C7.83499 0 0 7.83499 0 17.5C0 27.165 7.83499 35 17.5 35C27.165 35 35 27.165 35 17.5C34.9888 7.83965 27.1604 0.0112198 17.5 0ZM17.5 33.871C8.45857 33.871 1.12903 26.5414 1.12903 17.5C1.12903 8.45857 8.45857 1.12903 17.5 1.12903C26.5414 1.12903 33.871 8.45857 33.871 17.5C33.861 26.5373 26.5373 33.861 17.5 33.871Z' fill='white'/%3E%3Cpath d='M25.4834 9.51661C25.2629 9.29624 24.9056 9.29624 24.6852 9.51661L17.5 16.7018L10.3148 9.51661C10.0983 9.29236 9.74087 9.28615 9.51661 9.50271C9.29236 9.71927 9.28615 10.0767 9.50271 10.3009C9.50723 10.3057 9.51188 10.3103 9.51661 10.3148L16.7018 17.5L9.51661 24.6852C9.29236 24.9018 9.28615 25.2591 9.50278 25.4834C9.71941 25.7076 10.0768 25.7139 10.301 25.4972C10.3057 25.4927 10.3103 25.488 10.3148 25.4834L17.5 18.2982L24.6852 25.4834C24.9094 25.7 25.2668 25.6938 25.4834 25.4696C25.6947 25.2508 25.6947 24.9039 25.4834 24.6852L18.2982 17.5L25.4834 10.3148C25.7038 10.0944 25.7038 9.73705 25.4834 9.51661Z' fill='white'/%3E%3C/svg%3E%0A")!important;
}
.contact-files span.name span{color: var(--beige)!important;}
.contact-files span.name em{color: rgb(173, 173, 173)!important;}
@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-wrap,
.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-wrap { margin-bottom: 44px;flex-wrap: wrap;        width: 100%; }
.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: "Monigue", "Syne", sans-serif;
font-weight: 400;
font-size: clamp(34px, 3.3vw, 56px);
line-height: .9;
letter-spacing: 0;
text-transform: none;
color: var(--black);
margin-bottom: 22px;
}
.seo-title-main {
display: block;
font-size: clamp(42px, 4.3vw, 78px);
line-height: .9;
text-transform: uppercase;
}
.seo-title-sub {
display: block;
margin-top: 8px;
font-size: clamp(24px, 2vw, 34px);
line-height: 1.05;
font-family: "Syne", sans-serif;
font-weight: 700;
}
.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-tagline{width: auto;}
.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;
}
} .page-offre .hero-left {
max-width: 717px;
gap: 40px;
}
.page-offre .offre-hero-label {
font-family: "Space Grotesk", sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--grey);
}
.page-offre .offre-hero-title {
font-family: "Monigue", "Syne", sans-serif;
font-weight: 400;
font-size: clamp(52px, 6.25vw, 120px);
line-height: .84;
letter-spacing: 0;
text-transform: uppercase;
color: var(--black);
}
.page-offre .offre-hero-title .line {
display: block;
margin-top: -0.04em;
}
.page-offre .offre-hero-title .line > span {
display: inline-block;
}
.page-offre .offre-hero-title .highlight {
color: var(--green);
text-shadow: 0 0 18px rgba(196,255,0,.45);
}
.page-offre .offre-hero-desc {
max-width: 440px;
}
.page-offre .offre-hero-desc p {
font-family: "Inter", sans-serif;
font-size: 15px;
line-height: 1.67;
color: var(--black);
}
.page-offre .offre-hero-desc strong {
font-weight: 700;
}
@media (max-width: 900px) {
.page-offre .offre-hero-title {
font-size: clamp(44px, 11vw, 72px);
line-height: .88;
}
.page-offre .offre-hero-desc {
max-width: 100%;
}
}
.page-offre #offre-what {
background: var(--black);
padding: clamp(80px, 5vw, 95px) var(--px) clamp(80px, 6vw, 115px);
padding-left: calc(16.67% + 61px);
}
.page-offre .offre-what-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(48px, 5vw, 80px) clamp(32px, 4vw, 96px);
}
.page-offre .offre-what-title {
font-family: "Monigue", "Syne", sans-serif;
font-weight: 400;
font-size: clamp(56px, 5.2vw, 100px);
line-height: .8;
letter-spacing: 0;
text-transform: uppercase;
margin-bottom: 30px;
}
.page-offre .offre-what-title-line {
display: block;
}
.page-offre .offre-what-title-light {
color: var(--white);
}
.page-offre .offre-what-title-accent {
color: var(--green);
}
.page-offre .offre-what-list {
max-width: 440px;
list-style: disc;
padding-left: 1.4em;
}
.page-offre .offre-what-list li {
font-family: "Inter", sans-serif;
font-weight: 700;
font-size: 15px;
line-height: 1.67;
color: var(--white);
}
.page-offre .offre-what-list li::marker {
color: var(--white);
}
@media (max-width: 900px) {
.page-offre #offre-what {
padding-left: var(--px);
}
.page-offre .offre-what-grid {
grid-template-columns: 1fr;
gap: 56px;
}
.page-offre .offre-what-list {
max-width: 100%;
}
}
.page-offre #offre-exemples {
background: var(--beige);
padding:
clamp(100px, 8.125vw, 156px)
calc(8.33% + 73px)
clamp(120px, 10.94vw, 210px);
}
.page-offre .offre-exemples-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
margin-bottom: clamp(64px, 5.2vw, 100px);
flex-wrap: wrap;
}
.page-offre .offre-exemples-title {
font-family: "Monigue", "Syne", sans-serif;
font-weight: 400;
font-size: clamp(56px, 5.2vw, 100px);
line-height: .8;
letter-spacing: 0;
text-transform: uppercase;
color: var(--black);
max-width: 1012px;
}
.page-offre .offre-exemples-title-line {
display: block;
}
.page-offre .offre-exemples-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 717px));
gap: 40px 20px;
justify-content: center;
}
.page-offre .offre-exemple-card {
display: flex;
flex-direction: column;
gap: 18px;
}
.page-offre .offre-exemple-caption {
font-family: "Syne", sans-serif;
font-weight: 700;
font-size: clamp(20px, 1.8vw, 26px);
line-height: 1.2;
color: var(--black);
}
.page-offre .offre-exemple-card--video {
gap: 26px;
}
.page-offre .offre-exemple-media {
position: relative;
height: clamp(260px, 21vw, 404px);
border-radius: 20px;
overflow: hidden;
}
.page-offre .offre-exemple-media video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.page-offre .offre-exemple-desc {
font-family: "Inter", sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 25px;
color: var(--grey);
}
.page-offre .offre-exemple-card--video-simple {
gap: 18px;
}
.page-offre .offre-exemples-layout--films {
display: flex;
flex-direction: column;
gap: 40px;
}
.page-offre .offre-exemple-card--featured .offre-exemple-media {
height: clamp(320px, 34vw, 652px);
}
.page-offre .offre-exemples-row {
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
gap: 20px;
}
.page-offre .offre-exemple-card--reel {
flex: 0 0 auto;
width: auto;
}
.page-offre .offre-exemple-card--reel .offre-exemple-media {
height: clamp(360px, 39vw, 750px);
width: auto;
aspect-ratio: 9 / 16;
}
.page-offre .offre-exemple-card--vertical {
justify-self: center;
}
.page-offre .offre-exemple-card--vertical .offre-exemple-media {
height: clamp(360px, 39vw, 750px);
width: auto;
aspect-ratio: 9 / 16;
}
.page-offre .offre-exemple-card--fullwidth {
grid-column: 1 / -1;
}
.page-offre .offre-exemple-card--fullwidth .offre-exemple-media {
height: clamp(320px, 34vw, 652px);
}
.page-offre .ba-slider-inner {
--ba-pos: 50%;
position: relative;
height: clamp(260px, 21vw, 404px);
border-radius: 20px;
overflow: hidden;
cursor: ew-resize;
user-select: none;
touch-action: none;
}
.page-offre .ba-before-wrap,
.page-offre .ba-after-layer {
position: absolute;
inset: 0;
overflow: hidden;
}
.page-offre .ba-before-wrap {
z-index: 2;
clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0);
}
.page-offre .ba-after-layer {
z-index: 3;
clip-path: inset(0 0 0 var(--ba-pos));
}
.page-offre .ba-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
z-index: 1;
}
.page-offre .ba-label {
position: absolute;
top: 20px;
z-index: 2;
padding: 10px;
border-radius: 30px;
font-family: "Space Grotesk", sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: .01em;
line-height: 1;
pointer-events: none;
}
.page-offre .ba-label-before {
left: 21px;
background: var(--black);
color: var(--white);
}
.page-offre .ba-label-after {
right: 21px;
background: var(--green);
color: var(--black);
}
.page-offre .ba-handle {
position: absolute;
top: 0;
bottom: 0;
left: var(--ba-pos);
transform: translateX(-50%);
z-index: 4;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 95px;
pointer-events: none;
}
.page-offre .ba-handle-line {
width: 2px;
flex: 1;
max-height: 155px;
background: #fff;
}
.page-offre .ba-handle-btn {
display: flex;
align-items: center;
justify-content: center;
width: 95px;
height: 95px;
border-radius: 50%;
background: #fff;
box-shadow: 0 8px 28px rgba(0,0,0,.16);
flex-shrink: 0;
pointer-events: auto;
}
.page-offre .ba-handle-btn svg {
width: 24px;
height: 24px;
}
.page-offre .ba-handle:focus-visible {
outline: 2px solid var(--green);
outline-offset: 4px;
}
.page-offre #offre-valeur {
position: relative;
overflow: hidden;
background: var(--white);
min-height: clamp(560px, 35.7vw, 686px);
padding:
clamp(120px, 10.4vw, 200px)
calc(8.33% + 73px)
clamp(80px, 6vw, 120px);
}
.page-offre .offre-valeur-grid {
display: grid;
grid-template-columns: minmax(0, 717px) minmax(0, 569px);
gap: 20px;
justify-content: space-between;
align-items: start;
}
.page-offre .offre-valeur-left {
display: flex;
flex-direction: column;
gap: 40px;
}
.page-offre .offre-valeur-title {
font-family: "Monigue", "Syne", sans-serif;
font-weight: 400;
font-size: clamp(72px, 7.8vw, 150px);
line-height: .8;
letter-spacing: 0;
text-transform: uppercase;
max-width: 717px;
}
.page-offre .offre-valeur-title-line {
display: block;
}
.page-offre .offre-valeur-title-dark {
color: var(--black);
}
.page-offre .offre-valeur-title-accent {
color: var(--green);
}
.page-offre .offre-valeur-right {
padding-top: clamp(80px, 0px, 143px);
}
.page-offre .offre-valeur-text {
font-family: "Inter", sans-serif;
font-size: 17px;
line-height: 1.78;
color: var(--grey);
max-width: 569px;
}
.page-offre .offre-valeur-star {
position: absolute;
top: clamp(80px, 6.4vw, 123px);
left: 50%;
transform: translateX(-50%);
width: 52px;
pointer-events: none;
z-index: 2;
}
.page-offre .offre-valeur-cat {
position: absolute;
bottom: 0;
right: calc(8.33% + 73px);
width: 126px;
pointer-events: none;
z-index: 2;
}
.page-offre #contact,
.single-reference #contact {
min-height: clamp(720px, 47.9vw, 920px);
padding: clamp(140px, 9.9vw, 190px) var(--px) clamp(72px, 5vw, 96px);
}
.page-offre .offre-contact-cta-wrap,
.single-reference .offre-contact-cta-wrap {
padding: 0;
margin-bottom: clamp(40px, 3.5vw, 48px);
}
.page-offre .offre-contact-meta,
.single-reference .offre-contact-meta {
display: flex;
justify-content: center;
align-items: center;
gap: clamp(20px, 4vw, 80px);
flex-wrap: wrap;
width: min(1748px, calc(100vw - (var(--px) * 2)));
margin-inline: auto;
font-family: "Space Grotesk", sans-serif;
font-size: 13px;
line-height: 1.6;
color: var(--grey);
text-align: center;
}
.page-offre .offre-contact-meta a,
.single-reference .offre-contact-meta a {
color: var(--grey);
text-decoration: underline;
text-underline-offset: 2px;
transition: color .2s;
}
.page-offre .offre-contact-meta a:hover,
.single-reference .offre-contact-meta a:hover {
color: var(--white);
}
@media (max-width: 900px) {
.page-offre #contact,
.single-reference #contact {
min-height: 0;
}
.page-offre .offre-contact-meta,
.single-reference .offre-contact-meta {
flex-direction: column;
gap: 12px;
}
.page-offre #offre-valeur {
min-height: 0;
padding: var(--section-pad) var(--px);
}
.page-offre .offre-valeur-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.page-offre .offre-valeur-right {
padding-top: 0;
}
.page-offre .offre-valeur-text,
.page-offre .offre-valeur-title {
max-width: 100%;
}
.page-offre .offre-valeur-star,
.page-offre .offre-valeur-cat {
display: none;
}
.page-offre #offre-exemples {
padding: var(--section-pad) var(--px);
}
.page-offre .offre-exemples-header {
align-items: flex-start;
flex-direction: column;
margin-bottom: clamp(40px, 4vw, 64px);
}
.page-offre .offre-exemples-row {
flex-direction: column;
align-items: center;
gap: 36px;
}
.page-offre .offre-exemples-grid {
grid-template-columns: 1fr;
gap: 36px;
}
.page-offre .ba-handle {
width: 72px;
}
.page-offre .ba-handle-btn {
width: 72px;
height: 72px;
}
}  .single-reference .ref-header {
padding: clamp(130px, 11vw, 200px) var(--px) clamp(56px, 5vw, 80px);
}
.single-reference .ref-header-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
max-width: 860px;
}
.single-reference .ref-client {
margin-top: 4px;
}
.single-reference .ref-title {
font-family: "Monigue", "Syne", sans-serif;
font-weight: 400;
font-size: clamp(42px, 5.5vw, 96px);
line-height: .9;
letter-spacing: -.01em;
text-transform: uppercase;
color: var(--black);
}
.single-reference .ref-description {
font-family: "Inter", sans-serif;
font-size: clamp(15px, 1.1vw, 18px);
line-height: 1.7;
color: var(--dgrey);
max-width: 620px;
margin-top: 8px;
} .single-reference .ref-gallery-section {
padding: 0 var(--px) clamp(80px, 8vw, 140px);
}
.single-reference .ref-gallery {
columns: 4;
column-gap: 12px;
}
.single-reference .ref-gallery-item {
break-inside: avoid;
margin-bottom: 12px;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
position: relative;
}
.single-reference .ref-gallery-item::after {
content: "";
position: absolute;
inset: 0;
background: rgba(11, 11, 9, 0);
transition: background .25s;
border-radius: 12px;
}
.single-reference .ref-gallery-item:hover::after,
.single-reference .ref-gallery-item:focus-visible::after {
background: rgba(11, 11, 9, .12);
}
.single-reference .ref-gallery-item:focus-visible {
outline: 2px solid var(--green);
outline-offset: 2px;
}
.single-reference .ref-gallery-item img {
display: block;
width: 100%;
height: auto;
transition: transform .4s ease;
}
.single-reference .ref-gallery-item:hover img {
transform: scale(1.025);
}
.single-reference .ref-item-video-wrap {
position: relative;
width: 100%;
}
.single-reference .ref-item-video-wrap video {
display: block;
width: 100%;
height: auto;
}
.single-reference .ref-item-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
opacity: 0;
transition: opacity .25s;
z-index: 1;
pointer-events: none;
}
.single-reference .ref-item-play svg {
width: 48px;
height: 48px;
filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
}
.single-reference .ref-gallery-item:hover .ref-item-play {
opacity: 1;
} .ref-lightbox {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.ref-lightbox[hidden] {
display: none;
}
.ref-lb-backdrop {
position: absolute;
inset: 0;
background: rgba(11, 11, 9, .92);
backdrop-filter: blur(6px);
}
.ref-lb-close {
position: absolute;
top: 20px;
right: 24px;
z-index: 10;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255,255,255,.1);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: background .2s;
cursor: pointer;
}
.ref-lb-close svg {
width: 20px;
height: 20px;
}
.ref-lb-close:hover {
background: rgba(255,255,255,.22);
}
.ref-lb-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255,255,255,.1);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: background .2s;
cursor: pointer;
}
.ref-lb-nav svg {
width: 22px;
height: 22px;
}
.ref-lb-nav:hover {
background: rgba(255,255,255,.22);
}
.ref-lb-prev { left: 20px; }
.ref-lb-next { right: 20px; }
.ref-lb-media {
position: relative;
z-index: 5;
max-width: min(90vw, 1400px);
max-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
}
.ref-lb-media img {
max-width: 100%;
max-height: 90vh;
object-fit: contain;
border-radius: 8px;
display: block;
}
.ref-lb-media video {
max-width: 100%;
max-height: 90vh;
border-radius: 8px;
display: block;
}
.ref-lb-counter {
position: absolute;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
font-family: "Space Grotesk", sans-serif;
font-size: 12px;
font-weight: 500;
color: rgba(255,255,255,.5);
letter-spacing: .08em;
} @media (max-width: 1100px) {
.single-reference .ref-gallery {
columns: 3;
}
}
@media (max-width: 700px) {
.single-reference .ref-gallery {
columns: 2;
column-gap: 8px;
}
.single-reference .ref-gallery-item {
margin-bottom: 8px;
border-radius: 8px;
}
.ref-lb-prev { left: 8px; }
.ref-lb-next { right: 8px; }
.ref-lb-nav {
width: 40px;
height: 40px;
}
}
@media (max-width: 400px) {
.single-reference .ref-gallery {
columns: 1;
}
} .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); }input[type="checkbox"].cmplz-category { width: initial; -webkit-appearance: checkbox;}input[type="checkbox"].cmplz-category:checked::before { content: '';}.cmplz-cookiebanner { box-sizing: border-box;}:root { --cmplz_banner_width: 526px; --cmplz_banner_background_color: #f8f5ef; --cmplz_banner_border_color: #f2f2f2; --cmplz_banner_border_width: 0px 0px 0px 0px ; --cmplz_banner_border_radius: 15px 15px 15px 15px; --cmplz_banner_margin: 10px; --cmplz_categories-height: 163px; --cmplz_title_font_size: 15px; --cmplz_text_line_height: calc(var(--cmplz_text_font_size) * 1.5); --cmplz_text_color: #000000; --cmplz_hyperlink_color: #000000; --cmplz_text_font_size: 12px; --cmplz_link_font_size: 12px; --cmplz_category_body_font_size: 12px; --cmplz_button_accept_background_color: #bff60d; --cmplz_button_accept_border_color: #bff60d; --cmplz_button_accept_text_color: #000000; --cmplz_button_deny_background_color: #000000; --cmplz_button_deny_border_color: #000000; --cmplz_button_deny_text_color: #ffffff; --cmplz_button_settings_background_color: #000000; --cmplz_button_settings_border_color: #000000; --cmplz_button_settings_text_color: #ffffff; --cmplz_button_border_radius: 50px 50px 50px 50px; --cmplz_button_font_size: 15px; --cmplz_category_header_always_active_color: green; --cmplz_category_header_title_font_size: 14px; --cmplz_category_header_active_font_size: 12px; --cmplz-manage-consent-height: 50px; --cmplz-manage-consent-offset: -35px; --cmplz_slider_active_color: #bff60d; --cmplz_slider_inactive_color: #5a1414; --cmplz_slider_bullet_color: #ffffff;}body.cmplz-banner-active *:not(.cmplz-cookiebanner):not(.cmplz-cookiebanner *) { pointer-events: none !important; user-select: none !important;}.cmplz-cookiebanner * { pointer-events: auto !important; user-select: auto !important;}#cmplz-manage-consent .cmplz-manage-consent { margin: unset; z-index: 9998; color: var(--cmplz_text_color); background-color: var(--cmplz_banner_background_color); border-style: solid; border-color: var(--cmplz_banner_border_color); border-width: var(--cmplz_banner_border_width); border-radius: var(--cmplz_banner_border_radius); border-bottom-left-radius: 0; border-bottom-right-radius: 0; line-height: initial; position: fixed; bottom: var(--cmplz-manage-consent-offset); min-width: 100px; height: var(--cmplz-manage-consent-height); right: 40px; padding: 15px; cursor: pointer; animation: mc_slideOut 0.5s forwards;}#cmplz-manage-consent .cmplz-manage-consent:active { outline: none; border: none;}#cmplz-manage-consent .cmplz-manage-consent.cmplz-dismissed { display: none;}#cmplz-manage-consent .cmplz-manage-consent:hover,#cmplz-manage-consent .cmplz-manage-consent:focus { animation: mc_slideIn 0.5s forwards; animation-delay: 0;}@-webkit-keyframes mc_slideIn { 100% { bottom: 0; }}@keyframes mc_slideIn { 100% { bottom: 0; }}@-webkit-keyframes mc_slideOut { 100% { bottom: var(--cmplz-manage-consent-offset); }}@keyframes mc_slideOut { 100% { bottom: var(--cmplz-manage-consent-offset); }}@media (max-width: 425px) { .cmplz-cookiebanner .cmplz-header .cmplz-title { display: none; }}.cmplz-cookiebanner { max-height: calc(100vh - 20px); overflow-y: auto; position: fixed; height: auto; left: 50%; top: 50%; -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); grid-template-rows: minmax(0, 1fr); z-index: 99999; background: var(--cmplz_banner_background_color);}.cmplz-cookiebanner a { transition: initial;}.cmplz-cookiebanner .cmplz-buttons a.cmplz-btn.tcf { display: none;}.cmplz-cookiebanner.cmplz-dismissed { display: none;}.cmplz-cookiebanner .cmplz-body { width: 100%; grid-column: span 3; overflow-y: auto; overflow-x: hidden; max-height: 55vh;}.cmplz-cookiebanner .cmplz-body::-webkit-scrollbar-track { border-radius: 10px; -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0); background-color: transparent;}.cmplz-cookiebanner .cmplz-body::-webkit-scrollbar { width: 5px; background-color: transparent;}.cmplz-cookiebanner .cmplz-body::-webkit-scrollbar-thumb { background-color: var(--cmplz_button_accept_background_color); border-radius: 10px;}@media (min-width: 350px) { .cmplz-cookiebanner .cmplz-body { min-width: 300px; }}@media (max-height: 400px) { .cmplz-cookiebanner { height: calc(100vh - 20px); display: flex; flex-direction: column; overflow: hidden; gap: 1px; grid-row-gap: 1px; padding: 7px 12px !important; zoom: 0.6; } .cmplz-cookiebanner .cmplz-body { flex: 1; min-height: 0; overflow-y: auto; max-height: none; margin-top: 15px !important; } .cmplz-cookiebanner .cmplz-header, .cmplz-cookiebanner .cmplz-divider, .cmplz-cookiebanner .cmplz-links, .cmplz-cookiebanner .cmplz-buttons, .cmplz-cookiebanner .cmplz-documents { flex-shrink: 0; } .cmplz-cookiebanner .cmplz-header { margin-bottom: 15px !important; max-height: 10px; } .cmplz-close { zoom: 0.6 !important; } .cmplz-cookiebanner .cmplz-buttons { gap: 1px !important; } .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { height: 15vh !important; min-height: unset !important; padding: 0 !important; white-space: nowrap !important; font-size: 1.1rem !important; line-height: 14px !important; zoom: 0.5 !important; } .cmplz-cookiebanner .cmplz-documents, .cmplz-cookiebanner .cmplz-information { zoom: 0.5 !important; }}@media (max-height: 400px) and (max-width: 768px) { .cmplz-cookiebanner { gap: 1px; }}.cmplz-cookiebanner { border-style: solid; border-color: var(--cmplz_banner_border_color); border-width: var(--cmplz_banner_border_width); border-radius: var(--cmplz_banner_border_radius); padding: 15px 20px; display: grid; grid-gap: 10px;}.cmplz-cookiebanner .cmplz-divider { margin-left: -20px; margin-right: -20px;}.cmplz-cookiebanner .cmplz-header { grid-template-columns: 100px 1fr 100px; align-items: center; display: grid; grid-column: span 3;}@media (max-width: 399px) { .cmplz-cookiebanner .cmplz-header { grid-template-columns: auto 1fr auto; }}.cmplz-cookiebanner .cmplz-logo svg { max-height: 35px; width: inherit;}.cmplz-cookiebanner .cmplz-logo img { max-height: 40px; width: inherit;}.cmplz-cookiebanner .cmplz-title { justify-self: center; grid-column-start: 2; font-size: var(--cmplz_title_font_size); color: var(--cmplz_text_color); font-weight: 500;}.cmplz-cookiebanner .cmplz-close { line-height: 20px; justify-self: end; grid-column-start: 3; font-size: 20px; cursor: pointer; width: 20px; height: 20px; color: var(--cmplz_text_color);}.cmplz-cookiebanner .cmplz-close svg { width: 20px; height: 20px;}.cmplz-cookiebanner .cmplz-close:hover { text-decoration: none; line-height: initial; font-size: 18px;}.cmplz-cookiebanner .cmplz-message { word-wrap: break-word; font-size: var(--cmplz_text_font_size); line-height: var(--cmplz_text_line_height); color: var(--cmplz_text_color); margin-bottom: 5px;}.cmplz-cookiebanner .cmplz-message a { color: var(--cmplz_hyperlink_color);}.cmplz-cookiebanner .cmplz-message,.cmplz-cookiebanner .cmplz-categories,.cmplz-cookiebanner .cmplz-links,.cmplz-cookiebanner .cmplz-buttons,.cmplz-cookiebanner .cmplz-divider { grid-column: span 3;}.cmplz-cookiebanner .cmplz-categories.cmplz-tcf .cmplz-category .cmplz-category-header { grid-template-columns: 1fr auto;}.cmplz-cookiebanner .cmplz-categories .cmplz-category { background-color: rgba(239, 239, 239, 0.5);}.cmplz-cookiebanner .cmplz-categories .cmplz-category:not(:last-child) { margin-bottom: 10px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header { display: grid; grid-template-columns: 1fr auto 15px; grid-template-rows: minmax(0, 1fr); align-items: center; grid-gap: 10px; padding: 10px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title { font-weight: 500; grid-column-start: 1; justify-self: start; font-size: var(--cmplz_category_header_title_font_size); color: var(--cmplz_text_color); margin: 0;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active { font-size: var(--cmplz_category_header_active_font_size); font-weight: 500; color: var(--cmplz_category_header_always_active_color);}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active label { display: none;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-banner-checkbox { display: flex; align-items: center; margin: 0;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-banner-checkbox input[data-category=cmplz_functional] { display: none;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle { background: none; border: none; padding: 0; margin: 0; cursor: pointer; grid-column-start: 3; display: flex; align-items: center; justify-content: center; color: inherit;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-icon.cmplz-open { cursor: pointer; content: ''; transform: rotate(0deg); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background-size: cover; height: 18px; width: 18px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description { font-size: var(--cmplz_category_body_font_size); color: var(--cmplz_text_color); margin: 0; max-width: 100%; padding: 10px;}@media (max-width: 425px) { .cmplz-cookiebanner .cmplz-category .cmplz-category-header { grid-template-columns: 1fr!important; }}@media (max-width: 425px) { .cmplz-cookiebanner .cmplz-message { margin-right: 5px; }}.cmplz-cookiebanner .cmplz-buttons { display: flex; gap: var(--cmplz_banner_margin);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn { min-height: 45px; padding: 10px; margin: initial; width: 100%; white-space: nowrap; border-radius: var(--cmplz_button_border_radius); cursor: pointer; font-size: var(--cmplz_button_font_size); font-weight: 500; text-decoration: none; line-height: 20px; text-align: center; flex: initial;}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn:hover { text-decoration: none;}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept { background-color: var(--cmplz_button_accept_background_color); border: 1px solid var(--cmplz_button_accept_border_color); color: var(--cmplz_button_accept_text_color);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny { background-color: var(--cmplz_button_deny_background_color); border: 1px solid var(--cmplz_button_deny_border_color); color: var(--cmplz_button_deny_text_color);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences { background-color: var(--cmplz_button_settings_background_color); border: 1px solid var(--cmplz_button_settings_border_color); color: var(--cmplz_button_settings_text_color);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences { background-color: var(--cmplz_button_settings_background_color); border: 1px solid var(--cmplz_button_settings_border_color); color: var(--cmplz_button_settings_text_color);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-manage-options { background-color: var(--cmplz_button_settings_background_color); border: 1px solid var(--cmplz_button_settings_border_color); color: var(--cmplz_button_settings_text_color);}.cmplz-cookiebanner .cmplz-buttons a.cmplz-btn { display: flex; align-items: center; justify-content: center; padding: initial;}@media (max-width: 425px) { .cmplz-cookiebanner .cmplz-links.cmplz-information { display: initial; text-align: center; }}.cmplz-cookiebanner .cmplz-links { display: flex; gap: var(--cmplz_banner_margin);}.cmplz-cookiebanner .cmplz-links.cmplz-information { justify-content: space-between;}.cmplz-cookiebanner .cmplz-links.cmplz-documents { justify-content: center;}.cmplz-cookiebanner .cmplz-links .cmplz-link { color: var(--cmplz_hyperlink_color); font-size: var(--cmplz_link_font_size); text-decoration: underline; margin: 0;}.cmplz-cookiebanner .cmplz-links .cmplz-link.cmplz-read-more-purposes { display: none;}.cmplz-cookiebanner .cmplz-links ul { margin: 0; padding: 0; list-style: none; display: flex; gap: var(--cmplz_banner_margin); justify-content: center;}.cmplz-categories .cmplz-category .cmplz-description-statistics-anonymous { display: none;}.cmplz-categories .cmplz-category .cmplz-description-statistics { display: block;}.cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle { background: none; border: none; padding: 0; margin: 0; cursor: pointer; grid-column-start: 3; display: flex; align-items: center; justify-content: center; color: inherit;}.cmplz-categories .cmplz-category .cmplz-category-toggle[aria-expanded="true"] .cmplz-icon.cmplz-open { transform: rotate(180deg);}.cmplz-cookiebanner { top: initial; left: initial; right: 10px; bottom: 10px; transform: initial;}@media (min-width: 768px) { .cmplz-cookiebanner { min-width: var(--cmplz_banner_width); max-width: 100%; display: grid; grid-row-gap: 10px; }}@media (max-width: 768px) { .cmplz-cookiebanner { left: initial; right: initial; bottom: 0; width: 100%; } .cmplz-cookiebanner .cmplz-buttons { flex-direction: column; }}@media (min-width: 768px) { .cmplz-message, .cmplz-categories { width: calc(var(--cmplz_banner_width) - 42px); }}.cmplz-cookiebanner .cmplz-categories,.cmplz-cookiebanner .cmplz-save-preferences,.cmplz-cookiebanner .cmplz-link.cmplz-manage-options,.cmplz-cookiebanner .cmplz-manage-vendors,.cmplz-cookiebanner .cmplz-read-more,.cmplz-cookiebanner .cmplz-btn.cmplz-manage-options { display: none;}.cmplz-cookiebanner .cmplz-categories.cmplz-fade-in { animation: fadeIn 1s; -webkit-animation: fadeIn 1s; -moz-animation: fadeIn 1s; -o-animation: fadeIn 1s; -ms-animation: fadeIn 1s; display: block;}@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-ms-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}.cmplz-cookiebanner .cmplz-links.cmplz-information { display: none;}.cmplz-cookiebanner .cmplz-preferences,.cmplz-manage-consent-container .cmplz-preferences { display: none;}#cmplz-manage-consent .cmplz-manage-consent { display: none;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox { position: relative;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox { opacity: 0; margin: 0; margin-top: -10px; cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; position: absolute; z-index: 1; top: 0px; left: 0px; width: 40px; height: 20px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus + .cmplz-label:before { box-shadow: 0 0 0 2px #245fcc;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::before { display: block; background-color: var(--cmplz_slider_active_color); content: ""; padding-left: 6px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label:after { left: 14px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label { position: relative; padding-left: 30px; margin: 0;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:before,.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:after { box-sizing: border-box; position: absolute; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; transition: background-color 0.3s, left 0.3s;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:before { display: block; content: ""; color: #fff; box-sizing: border-box; font-family: 'FontAwesome', sans-serif; padding-left: 23px; font-size: 12px; line-height: 20px; background-color: var(--cmplz_slider_inactive_color); left: 0px; top: -7px; height: 15px; width: 28px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:after { display: block; content: ""; letter-spacing: 20px; background: var(--cmplz_slider_bullet_color); left: 4px; top: -5px; height: 11px; width: 11px;}.cmplz-cookiebanner { box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}#cmplz-manage-consent .cmplz-manage-consent { box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}.cmplz-cookiebanner.cmplz-show { box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}.cmplz-cookiebanner.cmplz-show:hover { transition-duration: 1s; box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;}