.wpcf7 .screen-reader-response{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;padding:0;border:0;word-wrap:normal !important}.wpcf7 .hidden-fields-container{display:none}.wpcf7 form .wpcf7-response-output{margin:2em .5em 1em;padding:.2em 1em;border:2px solid #00a0d2}.wpcf7 form.init .wpcf7-response-output,.wpcf7 form.resetting .wpcf7-response-output,.wpcf7 form.submitting .wpcf7-response-output{display:none}.wpcf7 form.sent .wpcf7-response-output{border-color:#46b450}.wpcf7 form.failed .wpcf7-response-output,.wpcf7 form.aborted .wpcf7-response-output{border-color:#dc3232}.wpcf7 form.spam .wpcf7-response-output{border-color:#f56e28}.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.unaccepted .wpcf7-response-output,.wpcf7 form.payment-required .wpcf7-response-output{border-color:#ffb900}.wpcf7-form-control-wrap{position:relative}.wpcf7-not-valid-tip{color:#dc3232;font-size:1em;font-weight:400;display:block}.use-floating-validation-tip .wpcf7-not-valid-tip{position:relative;top:-2ex;left:1em;z-index:100;border:1px solid #dc3232;background:#fff;padding:.2em .8em;width:24em}.wpcf7-list-item{display:inline-block;margin:0 0 0 1em}.wpcf7-list-item-label:before,.wpcf7-list-item-label:after{content:" "}.wpcf7-spinner{visibility:hidden;display:inline-block;background-color:#23282d;opacity:.75;width:24px;height:24px;border:none;border-radius:100%;padding:0;margin:0 24px;position:relative}form.submitting .wpcf7-spinner{visibility:visible}.wpcf7-spinner:before{content:'';position:absolute;background-color:#fbfbfc;top:4px;left:4px;width:6px;height:6px;border:none;border-radius:100%;transform-origin:8px 8px;animation-name:spin;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite}@media (prefers-reduced-motion:reduce){.wpcf7-spinner:before{animation-name:blink;animation-duration:2s}}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes blink{from{opacity:0}50%{opacity:1}to{opacity:0}}.wpcf7 [inert]{opacity:.5}.wpcf7 input[type=file]{cursor:pointer}.wpcf7 input[type=file]:disabled{cursor:default}.wpcf7 .wpcf7-submit:disabled{cursor:not-allowed}.wpcf7 input[type=url],.wpcf7 input[type=email],.wpcf7 input[type=tel]{direction:ltr}.wpcf7-reflection>output{display:list-item;list-style:none}.wpcf7-reflection>output[hidden]{display:none}.flickity-enabled {
position: relative;
}
.flickity-enabled:focus {
outline: 0;
}
.flickity-viewport {
overflow: hidden;
position: relative;
height: 100%;
touch-action: pan-y;
}
.flickity-slider {
position: absolute;
width: 100%;
height: 100%;
left: 0;
}
.flickity-rtl .flickity-slider {
left: unset;
right: 0;
}
.flickity-enabled.is-draggable {
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
cursor: move;
cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
cursor: grabbing;
}
.flickity-cell {
position: absolute;
left: 0;
}
.flickity-rtl .flickity-cell {
left: unset;
right: 0;
}
.flickity-button {
position: absolute;
background: hsl(0 0% 100%/75%);
border: none;
color: #333;
}
.flickity-button:hover {
background: #fff;
cursor: pointer;
}
.flickity-button:focus {
outline: 0;
box-shadow: 0 0 0 5px #19f;
}
.flickity-button:active {
opacity: 0.6;
}
.flickity-button:disabled {
opacity: 0.3;
cursor: auto;
pointer-events: none;
}
.flickity-button-icon {
fill: currentColor;
}
.flickity-prev-next-button {
top: 50%;
width: 44px;
height: 44px;
border-radius: 50%;
transform: translateY(-50%);
}
.flickity-prev-next-button.previous {
left: 10px;
}
.flickity-prev-next-button.next {
right: 10px;
}
.flickity-rtl .flickity-prev-next-button.previous {
left: auto;
right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
right: auto;
left: 10px;
}
.flickity-prev-next-button .flickity-button-icon {
position: absolute;
left: 20%;
top: 20%;
width: 60%;
height: 60%;
}
.flickity-page-dots {
position: absolute;
width: 100%;
bottom: -25px;
text-align: center;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.flickity-rtl .flickity-page-dots {
direction: rtl;
}
.flickity-page-dot {
display: block;
width: 10px;
height: 10px;
padding: 0;
margin: 0 8px;
background: hsl(0 0% 20%/25%);
border-radius: 50%;
cursor: pointer;
appearance: none;
border: none;
text-indent: -9999px;
overflow: hidden;
}
.flickity-rtl .flickity-page-dot {
text-indent: 9999px;
}
.flickity-page-dot:focus {
outline: 0;
box-shadow: 0 0 0 5px #19f;
}
.flickity-page-dot.is-selected {
background: hsl(0 0% 20%/100%);
}
:root {
--space: 6.25rem;
--black: #000000;
--white: #ffffff;
--white-60: rgba(255, 255, 255, 0.6);
--light: rgba(253, 236, 215, 0.25);
--light-grey: #f4f0ee;
--dark: #1d1d1d;
--primary: #d7c1a6;
--secondary: #fdecd7;
--gap: 1rem;
--font: museo-sans;
--radius-big: 6.25rem;
--radius-medium: 3.125rem;
--radius-small: 1.25rem;
--header-height: 6.375rem;
}
@media (max-width: 1023px) {
:root {
--space: 3.75rem;
--radius-big: 3.125rem;
--radius-medium: 1.5625rem;
--radius-small: 0.625rem;
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-size: 1rem;
font-weight: 400;
line-height: 1.5625;
color: #000000;
background: #ffffff;
}
svg,
img {
display: block;
max-width: 100%;
height: auto;
}
a[href^=tel] {
color: inherit;
text-decoration: none;
}
ul li {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
cursor: pointer;
}
button,
input,
select,
textarea {
appearance: none;
background: transparent;
border: none;
border-radius: 0;
outline: none;
}
.get-total {
display: none;
}
::selection {
background-color: var(--primary);
}
.grecaptcha-badge {
display: none !important;
}
[data-animation=title] span,
[data-animation=subtitle] span,
[data-animation=paragraph] span {
position: relative;
display: block;
overflow: hidden;
}
[data-animation=title] div,
[data-animation=subtitle] div,
[data-animation=paragraph] div {
opacity: 0;
transform: translate3d(0, 100%, 0);
will-change: transform, opacity;
transition: transform 1200ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1200ms;
}
[data-animation=title].--is-visible div,
[data-animation=subtitle].--is-visible div,
[data-animation=paragraph].--is-visible div {
opacity: 1;
transform: translate3d(0, 0, 0);
}
[data-animation=opa] {
opacity: 0;
will-change: opacity;
transition: opacity 1200ms;
transition-delay: 500ms;
}
[data-animation=opa].--is-visible {
opacity: 1;
}
[data-animation=fade-up] {
opacity: 0;
transform: translate3d(0, 35%, 0);
will-change: opacity, transform;
transition: transform 900ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 900ms;
transition-delay: 600ms;
}
[data-animation=fade-up].--is-visible {
opacity: 1;
transform: translate3d(0, 0, 0);
}
@media (min-width: 1025px) {
[data-animation=button] {
margin: -2em;
padding: 2em;
}
[data-animation=button] .inner {
transform: translate(var(--translate-x, 0), var(--translate-y, 0));
will-change: transform;
transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
}
[data-animation=title],
[data-animation=subtitle],
[data-animation=paragraph],
[data-animation=opa],
[data-animation=scale-custom] {
visibility: hidden;
}
[data-animation=scale-custom] {
opacity: 0;
transform: scale(0);
transform-origin: left top;
will-change: transform, opacity;
}
[data-animation=scale-custom] [data-animation-inner] {
opacity: 0;
will-change: opacity;
}
[data-animation=scale-custom].--is-visible {
opacity: 1;
transform: scale(1);
transition: transform 900ms cubic-bezier(0.77, 0, 0.175, 1), opacity 100ms;
}
[data-animation=scale-custom].--is-visible [data-animation-inner] {
opacity: 1;
transition: opacity 500ms;
transition-delay: 1300ms;
}
[data-animation=translation] {
transform: scale(1.15);
}
html {
font-family: var(--font);
font-size: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.2;
}
.h1-big {
font-size: 5rem;
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.02em;
}
@media (max-width: 1023px) {
.h1-big {
font-size: 3.75rem;
}
}
h1,
.h1 {
margin-bottom: 1.875rem;
font-size: 3.75rem;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
}
h1 b,
.h1 b {
font-weight: 600;
}
@media (max-width: 1200px) {
h1,
.h1 {
font-size: 3.125rem;
}
}
@media (max-width: 767px) {
h1,
.h1 {
font-size: 2.875rem;
}
}
@media (max-width: 600px) {
h1,
.h1 {
font-size: clamp(1.625rem, 10vw, 2.5rem);
}
}
h2,
.h2 {
margin-bottom: 1.25rem;
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
}
h2 b,
.h2 b {
font-weight: 600;
}
@media (max-width: 1200px) {
h2,
.h2 {
font-size: 2.125rem;
}
}
@media (max-width: 1023px) {
h2,
.h2 {
font-size: 2rem;
}
}
@media (max-width: 600px) {
h2,
.h2 {
font-size: clamp(1.625rem, 8.5vw, 1.875rem);
}
}
h3,
.h3 {
margin-bottom: 1.25rem;
font-size: 2rem;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
}
@media (max-width: 1023px) {
h3,
.h3 {
font-size: 1.75rem;
}
}
@media (max-width: 600px) {
h3,
.h3 {
font-size: clamp(1.375rem, 6vw, 1.625rem);
}
}
h4,
.h4 {
margin-bottom: 1rem;
font-size: 1.625rem;
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.02em;
}
@media (max-width: 1023px) {
h4,
.h4 {
font-size: 1.375rem;
}
}
@media (max-width: 600px) {
h4,
.h4 {
font-size: clamp(1rem, 5vw, 1.25rem);
}
}
h5,
.h5 {
font-size: 1.25rem;
font-weight: 600;
line-height: 1.2;
}
.p-big {
font-size: 1.125rem;
font-weight: normal;
}
@media (max-width: 600px) {
.p-big {
font-size: 1rem;
}
}
html,
body {
overflow-x: hidden;
}
html::-webkit-scrollbar {
display: none;
}
main {
min-height: 100vh;
background-color: var(--dark);
}
.page-container {
width: 100vw;
background-color: var(--white);
}
.container--fluid {
position: relative;
width: 100%;
max-width: 120rem;
margin: 0 auto;
}
@media (max-width: 1200px) {
.container--fluid {
width: 100%;
padding: 0 1.25rem;
}
}
.container {
position: relative;
width: 88.8888888889%;
max-width: 102.5rem;
margin: 0 auto;
}
@media (max-width: 1200px) {
.container {
width: 100%;
padding: 0 1.25rem;
}
}
.container--over-right {
position: relative;
width: 94.4444444444%;
max-width: calc(102.5rem + (100vw - 102.5rem) / 2);
margin-right: 0;
margin-left: auto;
overflow: hidden;
}
@media (max-width: 1200px) {
.container--over-right {
width: 100%;
margin: 0;
padding-left: 1.25rem;
}
}
.container--over-left {
position: relative;
width: 94.4444444444%;
max-width: calc(102.5rem + (100vw - 102.5rem) / 2);
margin-right: auto;
margin-left: 0;
overflow: hidden;
}
@media (max-width: 1200px) {
.container--over-left {
width: 100%;
margin: 0;
padding-right: 1.25rem;
}
}
.--o-hidden {
overflow: hidden;
}
.--position-relative {
position: relative;
}
@media (min-width: 1025px) {
.--only-mobile {
display: none;
}
}
@media (max-width: 1024px) {
.--only-desktop {
display: none;
}
} .hamburger {
display: flex;
margin: 0;
padding: 0rem 0rem;
overflow: visible;
font: inherit;
color: inherit;
text-transform: none;
cursor: pointer;
background-color: transparent;
border: 0;
transition-timing-function: linear;
transition-duration: 0.15s;
transition-property: opacity, filter;
}
.hamburger:hover {
opacity: 1;
}
.hamburger.is-active:hover {
opacity: 1;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
background-color: #ffffff;
}
.hamburger-box {
position: relative;
display: inline-block;
width: 1.625rem;
height: 1.1875rem;
}
.hamburger-inner {
top: 50%;
display: block;
margin-top: -0.09375rem;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
position: absolute;
width: 1.625rem;
height: 0.1875rem;
background-color: #ffffff;
border-radius: 0.1875rem;
transition-timing-function: ease;
transition-duration: 0.15s;
transition-property: transform;
}
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -0.5rem;
}
.hamburger-inner::after {
bottom: -0.5rem;
} .hamburger--collapse .hamburger-inner {
top: auto;
bottom: 0;
transition-delay: 0.13s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition-duration: 0.13s;
}
.hamburger--collapse .hamburger-inner::after {
top: -1rem;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}
.hamburger--collapse .hamburger-inner::before {
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--collapse.is-active .hamburger-inner {
transform: translate3d(0, -0.5rem, 0) rotate(-45deg);
transition-delay: 0.22s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--collapse.is-active .hamburger-inner::after {
top: 0;
opacity: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}
.hamburger--collapse.is-active .hamburger-inner::before {
top: 0;
transform: rotate(-90deg);
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.card-solution {
display: block;
}
.card-solution__inner {
position: relative;
overflow: hidden;
border-radius: var(--radius-small);
aspect-ratio: 635/600;
}
.card-solution__inner img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-solution__inner:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--dark);
opacity: 0.4;
}
.card-solution__title {
z-index: 2;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin-bottom: 0;
padding: 1.875rem 2.5rem;
color: var(--white);
}
@media (max-width: 900px) {
.card-solution__title {
padding: 1.25rem 1.875rem;
}
}
@media (max-width: 450px) {
.card-solution__title {
padding: 1.25rem;
}
}
@media (min-width: 601px) {
.card-solution:first-of-type .card-solution__inner {
aspect-ratio: 1280/600;
}
}
.card-shop {
display: block;
overflow: hidden;
color: var(--black);
background-color: var(--secondary);
border-bottom-right-radius: var(--radius-big);
transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
}
.card-shop__thumb {
position: relative;
aspect-ratio: 310/270;
}
.card-shop__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-shop__inner {
padding: 1.875rem var(--radius-big) 1.875rem 1.5625rem;
}
@media (max-width: 500px) {
.card-shop__inner {
padding: 1.875rem var(--radius-big) 1.875rem 1.25rem;
}
}
.card-shop__title {
margin-bottom: 0.75rem;
}
.card-shop__address, .card-shop__phone {
margin-bottom: 0.75rem;
line-height: 1.25;
}
.card-shop__button {
position: relative;
padding-top: 1.25rem;
}
.card-shop__button:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.card-shop__button.--is-visible:before {
transform: scaleX(1);
}
.card-shop__button .button:after {
content: "";
display: inline-block;
width: 1.75rem;
height: 0.5rem;
background-image: url(https://www.interieurs-prives.com/wp-content/themes/ip/dist/images/arrow-button-black.svg);
filter: invert(1);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
will-change: transform;
transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
}
@media (min-width: 1025px) {
.card-shop:hover {
background-color: var(--white);
border-top-left-radius: var(--radius-medium);
border-top-right-radius: var(--radius-medium);
}
.card-shop:hover .button {
color: var(--black);
background-color: transparent;
border-radius: 0;
}
.card-shop:hover .button:after {
filter: none;
transform: translate3d(20%, 0, 0);
}
}
.card-post {
display: block;
}
.card-post__image {
position: relative;
overflow: hidden;
background-color: var(--light);
border-top-left-radius: var(--radius-medium);
border-top-right-radius: var(--radius-medium);
aspect-ratio: 610/400;
}
.card-post__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-post__inner {
padding: 0.9375rem 1.875rem 1.875rem 1.875rem;
border: solid 0.0625rem var(--black);
border-top: none;
border-bottom-right-radius: var(--radius-medium);
border-bottom-left-radius: var(--radius-medium);
}
@media (max-width: 450px) {
.card-post__inner {
padding-inline: 1.25rem;
}
}
.card-post__categories {
display: flex;
flex-wrap: wrap;
justify-content: end;
margin-bottom: 1.875rem;
gap: 0.5rem;
}
@media (max-width: 600px) {
.card-post__categories {
margin-bottom: 1.25rem;
}
}
.card-post__category {
display: block;
padding: 0.5rem 1rem;
font-size: 1rem;
font-weight: 700;
line-height: 1;
background-color: var(--primary);
border-radius: 1.25rem;
}
.card-post__date {
margin-bottom: 1rem;
font-size: 0.75rem;
opacity: 0.6;
}
.card-post__button {
margin-top: 1.5625rem;
}
.section {
position: relative;
padding: var(--space) 0;
background-color: var(--white);
}
.section:before {
content: "";
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--white);
}
.--bg-white {
background-color: var(--white);
}
.--bg-primary {
background-color: var(--primary);
}
.--bg-secondary {
background-color: var(--secondary);
}
.--bg-light {
background-color: var(--light);
}
.--bg-dark {
background-color: var(--dark);
}
.--bg-dark * {
color: var(--white);
}
.wp-editor .video-container {
position: relative;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
}
.wp-editor .video-container iframe,
.wp-editor .video-container object,
.wp-editor .video-container embed,
.wp-editor .video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.wp-editor li {
list-style: inherit;
}
.wp-editor iframe {
max-width: 100%;
}
.wp-editor blockquote {
padding-left: 0.875rem;
border-left: solid 0.1875rem var(--black);
}
.wp-editor a {
text-decoration: underline;
}
.wp-editor .aligncenter {
margin-inline: auto;
}
#tinymce ul {
padding-left: 1rem;
}
#tinymce ul,
#tinymce li {
list-style: inherit;
}
.button {
display: inline-flex;
align-items: center;
padding: 0.4375rem 1rem;
font-weight: 700;
color: var(--white);
text-decoration: none !important;
cursor: pointer;
background-color: var(--black);
border: solid 0.0625rem var(--black);
border-radius: var(--radius-small);
transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
gap: 0.5rem;
}
.button:hover {
color: var(--black);
background-color: transparent;
border-radius: 0;
}
.button:hover:after {
filter: none;
transform: translate3d(20%, 0, 0);
}
.slider__prev,
.slider__next {
cursor: pointer;
user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
cursor: unset;
}
.flickity-viewport {
transition: height 200ms;
}
.link {
display: inline-flex;
align-items: start;
gap: 0.375rem;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
}
.link:before {
content: "";
display: inline-block;
width: 0.625rem;
height: 0.625rem;
background-image: url(https://www.interieurs-prives.com/wp-content/themes/ip/dist/images/arrow-link-black.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
transform: translateY(20%);
will-change: transform;
transition: transform 250ms cubic-bezier(0.77, 0, 0.175, 1);
}
.link span {
will-change: transform;
transition: transform 250ms cubic-bezier(0.77, 0, 0.175, 1);
}
.link--white:before {
background-image: url(https://www.interieurs-prives.com/wp-content/themes/ip/dist/images/arrow-link-white.svg);
}
.link:hover:before {
transform: translateY(20%) rotate(-45deg);
}
.link:hover span {
transform: translate3d(3%, 0, 0);
}
@media (min-width: 601px) {
.link--big {
font-size: 1.25rem;
}
.link--big:before {
width: 0.875rem;
height: 0.875rem;
}
}
.gm-style-iw-tc::after {
display: none !important;
}
.gm-style-iw-c,
.gm-style-iw-d {
padding: 0 !important;
overflow: hidden !important;
}
.gm-ui-hover-effect {
right: 12px !important;
filter: invert(25%) sepia(100%) saturate(7500%);
}
.gm-ui-hover-effect span {
width: 32px !important;
height: 32px !important;
}
.gm-fullscreen-control,
.gm-svpc,
.gm-style-mtc {
display: none;
}
.gm-bundled-control {
top: 0;
}
.gm-bundled-control .gmnoprint {
top: 0 !important;
}
.gm-bundled-control .gmnoprint div {
border-radius: 10px !important;
box-shadow: 0 9px 10px rgba(0, 0, 0, 0.1) !important;
}
.gm-bundled-control .gmnoprint div img {
max-width: 14px;
}
.gmnoprint {
display: none !important;
}
img[alt=Google] {
display: none;
}
.libelle-sticky {
z-index: 20;
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background: #f3b860;
gap: 1.25rem;
font-size: 0.75rem;
padding-left: 1rem;
padding-right: 2.5rem;
padding-bottom: 1rem;
padding-top: 1rem;
}
@media (min-width: 1024px) {
.libelle-sticky {
font-size: 1rem;
height: 2.8125rem;
}
}
.libelle-sticky__text a {
white-space: nowrap;
}
@media (min-width: 1024px) {
.libelle-sticky__text a {
display: none;
}
}
.libelle-sticky__button {
display: none;
font-size: 0.875rem;
}
@media (min-width: 1024px) {
.libelle-sticky__button {
display: block;
}
}
.libelle-sticky__close {
position: absolute;
top: 50%;
right: 1.25rem;
cursor: pointer;
transform: translateY(-50%);
}
.libelle-sticky + .header {
top: 2.8125rem;
}
.header {
position: relative;
z-index: 10;
position: fixed;
top: 0;
left: 0;
width: 100%;
padding-top: 1.75rem;
background-color: var(--white);
transition: color 300ms ease-in-out;
}
.header:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.header.--is-visible:after {
transform: scaleX(1);
}
.header a {
font-weight: 600;
}
.header a:hover {
color: var(--primary);
}
@media (max-width: 1440px) {
.header a {
font-size: 0.875rem;
}
}
.header__grid {
z-index: 2;
display: flex;
align-items: end;
justify-content: space-between;
}
@media (max-width: 1200px) {
.header__grid {
align-items: center;
}
}
.header__nav {
display: flex;
align-items: end;
gap: 3.125rem;
}
@media (max-width: 1200px) {
.header__nav:before {
content: "";
position: absolute;
top: -1.25rem;
left: 0;
width: 100%;
height: calc(100% + 1.25rem);
background-color: var(--white);
}
}
.header__logo {
position: relative;
display: block;
filter: invert(1);
}
@media (min-width: 1201px) {
.header__logo {
padding-bottom: 1.25rem;
}
}
@media (max-width: 1279px) {
.header__logo {
width: 9.375rem;
}
.header__logo img {
max-width: 7.5rem;
}
}
.header__links {
display: flex;
align-items: center;
justify-content: end;
gap: 1.25rem;
}
@media (min-width: 1201px) {
.header__links {
padding-bottom: 1.25rem;
}
}
@media (max-width: 1200px) {
.header__links {
display: none;
}
}
.header__link {
display: flex;
align-items: center;
gap: 0.3125rem;
}
.header__link img {
max-width: 1.125rem;
max-height: 1.125rem;
filter: invert(1);
transition: filter 300ms ease-in-out;
}
.header__toggler {
filter: invert(1);
}
@media (min-width: 1201px) {
.header__toggler {
display: none;
}
}
@media (min-width: 1201px) {
.header.--has-scrolled {
color: var(--white);
background-color: var(--dark) !important;
}
.header.--has-scrolled .header__link img,
.header.--has-scrolled .header__logo {
filter: none;
}
.header.--has-scrolled .header__link {
color: var(--white);
}
}
@media (max-width: 1200px) {
.header {
position: fixed;
padding: 1.25rem 0;
}
}
@media (min-width: 1201px) {
.home .header {
color: var(--white);
background-color: transparent;
}
.home .header:after {
background-color: var(--white);
}
.home .header__logo, .home .header__link img {
filter: none;
}
.--menu-open .header {
color: var(--white);
}
.--menu-open .header__link img {
filter: none;
}
}
.footer {
padding-bottom: 0;
overflow: hidden;
color: var(--white);
background-color: var(--dark);
}
.footer__top {
position: relative;
}
.footer__top:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.footer__top.--is-visible:before {
transform: scaleX(1);
}
.footer__top:before {
background-color: var(--white);
}
.footer__logo {
max-width: 40%;
}
.footer__grid {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0;
column-gap: 2.8125rem;
row-gap: 0;
}
@media (max-width: 1440px) {
.footer__grid {
grid-template-columns: 0.8fr 1fr;
}
}
@media (max-width: 1023px) {
.footer__grid {
grid-template-columns: 1fr;
}
}
.footer__inner {
display: flex;
gap: 2.1875rem;
padding: 1.875rem 1.875rem 3.75rem 1.875rem;
}
@media (max-width: 1200px) {
.footer__inner {
padding-bottom: 2.8125rem;
}
}
@media (max-width: 600px) {
.footer__inner {
padding: 1.25rem 1.25rem 1.875rem 1.25rem;
}
}
.footer__paragraph {
max-width: 27.5rem;
font-size: 0.9375rem;
opacity: 0.6;
}
.footer__nav {
position: relative;
position: relative;
min-height: 100%;
font-size: 0.875rem;
}
.footer__nav:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.footer__nav.--is-visible:before {
transform: scaleX(1);
}
.footer__nav:before {
background-color: var(--white);
}
@media (min-width: 1024px) {
.footer__nav:before {
left: 0;
width: 0.0625rem;
height: 100%;
transform: scale(1, 0);
transform-origin: top left;
}
}
@media (min-width: 1024px) {
.footer__nav.--is-visible:before {
transform: scale(1, 1);
}
}
.footer__menu {
display: flex;
justify-content: space-between;
padding: 1.875rem 1.875rem 3.75rem 1.875rem;
column-gap: 1.875rem;
row-gap: 0.9375rem;
}
.footer__menu__item .title {
font-weight: bold;
}
.footer__menu a {
display: block;
margin-bottom: 0.375rem;
}
@media (max-width: 1200px) {
.footer__menu {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding-bottom: 2.8125rem;
}
}
@media (max-width: 600px) {
.footer__menu {
grid-template-columns: repeat(2, 1fr);
padding: 1.25rem 1.25rem 1.875rem 1.25rem;
}
}
.footer__submenu {
margin-top: 0.625rem;
opacity: 0.6;
}
.footer__links {
position: relative;
display: grid;
grid-template-columns: 1fr 9.375rem;
gap: 1.875rem;
padding: 1.875rem 1.875rem 1.875rem 1.875rem;
font-size: 0.75rem;
}
.footer__links:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.footer__links.--is-visible:before {
transform: scaleX(1);
}
.footer__links:before {
background-color: var(--white);
}
@media (min-width: 1200px) {
.footer__links:before {
width: 55vw;
}
}
.footer__links__title {
font-size: 1.25rem;
}
.footer__links ul,
.footer__links .footer__socials {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: end;
column-gap: 0.75rem;
row-gap: 0.25rem;
}
@media (max-width: 1023px) {
.footer__links ul,
.footer__links .footer__socials {
justify-content: start;
}
}
@media (max-width: 1200px) {
.footer__links {
padding-top: 2.8125rem;
}
}
@media (max-width: 600px) {
.footer__links {
grid-template-columns: 1fr;
padding: 1.875rem 1.25rem 1.25rem 1.25rem;
}
}
.footer__bottom {
position: relative;
}
.footer__bottom:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.footer__bottom.--is-visible:before {
transform: scaleX(1);
}
.footer__bottom:before {
background-color: var(--white);
}
.footer__bottom__wrapper {
display: grid;
grid-template-columns: 1fr 0.5fr 1fr;
padding: 1.875rem;
font-size: 0.75rem;
opacity: 0.6;
gap: var(--gap);
}
@media (max-width: 1023px) {
.footer__bottom__wrapper {
gap: 0.625rem;
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.footer__bottom__wrapper {
padding: 1.25rem;
}
}
.footer__bottom ul {
display: flex;
flex-wrap: wrap;
justify-content: end;
column-gap: 1.875rem;
row-gap: 0.375rem;
}
@media (max-width: 600px) {
.footer__bottom ul {
justify-content: start;
column-gap: 1rem;
}
}
@media (min-width: 1024px) {
.footer__credits {
text-align: center;
}
}
.wpcf7-form > p {
margin: 1rem 0;
}
@media (min-width: 1201px) {
.menu {
display: flex;
align-items: center;
gap: 2.5rem;
}
.menu a {
display: block;
}
.menu .--mobile-only {
display: none;
}
.menu__submenu {
z-index: -1;
position: absolute;
top: -1.75rem;
left: 12.5rem;
max-height: 100vh;
padding-top: var(--header-height);
pointer-events: none;
background-color: var(--dark);
border-bottom-right-radius: 12.5rem;
transform: translateX(-2%);
}
.menu__submenu__wrapper {
display: flex;
justify-content: space-between;
gap: 3.75rem;
padding: calc(10rem - var(--header-height)) 3.125rem 2.5rem calc(3.125rem + 2%);
pointer-events: all;
}
.menu__submenu__medias {
position: relative;
align-self: end;
width: 37.5%;
max-width: 60vh;
max-height: 60vh;
overflow: hidden;
border-radius: 50%;
aspect-ratio: 1;
}
.menu__submenu__media {
position: absolute;
aspect-ratio: 1;
}
.menu__submenu__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.menu__submenu__title {
color: var(--primary);
}
.menu__submenu__item {
position: relative;
}
.menu__submenu__inner {
display: grid;
gap: 2.8125rem;
grid-template-columns: 1fr 1fr;
}
.menu__submenu__list__item {
margin-bottom: 0.9375rem;
}
}
@media (min-width: 1201px) and (max-width: 1279px) {
.menu__submenu {
padding: 10rem 3.125rem 2.5rem calc(1.25rem + 2%);
}
}
@media (min-width: 1201px) and (max-width: 1440px) {
.menu {
gap: 2.1875rem;
}
}
@media (min-width: 1201px) {
.--submenu-1 {
transform: translate3d(-2%, -100%, 0);
will-change: transform;
transition: transform 600ms cubic-bezier(0.77, 0, 0.175, 1);
transition-delay: 200ms;
}
.--submenu-1 .--menu-wrapper {
opacity: 0;
will-change: opacity;
transition: opacity 400ms;
transition-delay: 0ms;
}
.--submenu-1.--is-active {
transform: translate3d(-2%, 0, 0);
transition-delay: 0ms;
}
.--submenu-1.--is-active .--menu-wrapper {
opacity: 1;
transition: opacity 400ms;
transition-delay: 500ms;
}
.--submenu-2 {
max-height: 0;
overflow: hidden;
}
.--submenu-2.--is-active {
max-height: 100%;
overflow: auto;
}
.--menu-item.--is-active {
z-index: 2;
color: var(--primary);
}
.--menu-item ul {
color: var(--white);
}
.--menu-item-1 {
padding-bottom: 1.25rem;
mix-blend-mode: difference;
}
.--menu-media {
z-index: 1;
transform: scale(1);
will-change: transform, clip-path;
transition: clip-path 600ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 300ms;
clip-path: inset(0 0 100% 0);
}
.--menu-media.--is-active {
z-index: 2;
transform: scale(1.125);
transition: clip-path 600ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 0ms;
clip-path: inset(0 0 0 0);
}
}
@media (max-width: 1200px) {
.menu {
z-index: -1;
position: absolute;
top: -1.75rem;
left: 0;
width: 100%;
padding: 7.5rem 1.25rem 1.875rem 1.25rem;
background-color: var(--white);
border-bottom-right-radius: var(--radius-big);
box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.1);
transform: translate3d(0, -100%, 0);
will-change: transform;
transition: transform 600ms cubic-bezier(0.77, 0, 0.175, 1);
transition-delay: 200ms;
}
.menu__submenu {
padding: 0;
}
.menu__submenu__medias {
display: none;
}
.menu__submenu__title {
display: none;
}
.menu__submenu__inner {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.875rem;
}
}
@media (max-width: 1200px) and (max-width: 600px) {
.menu__submenu__inner {
grid-template-columns: 1fr;
gap: var(--gap);
}
}
@media (max-width: 1200px) {
.menu__submenu__list__item {
margin-bottom: 0.5rem;
}
}
@media (max-width: 1200px) and (max-width: 600px) {
.menu__submenu__list__item {
font-size: 1rem;
}
}
@media (max-width: 1200px) {
.menu .--menu-item-1 {
position: relative;
}
.menu .--menu-item-1:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 0ms cubic-bezier(0.77, 0, 0.175, 1);
}
.menu .--menu-item-1 .title {
margin-bottom: 1rem;
font-size: 1.625rem;
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.02em;
display: block;
margin-bottom: 1.5625rem;
font-weight: 600;
}
}
@media (max-width: 1200px) and (max-width: 1023px) {
.menu .--menu-item-1 .title {
font-size: 1.375rem;
}
}
@media (max-width: 1200px) and (max-width: 600px) {
.menu .--menu-item-1 .title {
font-size: clamp(1rem, 5vw, 1.25rem);
}
}
@media (max-width: 1200px) {
.menu .--menu-item-1 .subtitle {
font-size: 1.25rem;
font-weight: 600;
line-height: 1.2;
display: block;
font-weight: normal;
pointer-events: none;
}
.menu .--menu-item-1.--is-active .title {
color: var(--primary);
}
.menu .--menu-item-1.--is-active:after {
transform: scaleX(1);
transition: transform 600ms cubic-bezier(0.77, 0, 0.175, 1);
}
.menu .--menu-item-1.--has-submenu .title {
pointer-events: none;
}
.menu .--submenu {
display: none;
}
.menu .--submenu.--is-active {
display: block;
margin-bottom: 1.875rem;
padding-bottom: 0.625rem;
}
}
@media (max-width: 1200px) and (max-width: 600px) {
.menu .--submenu-2.--is-active {
margin-bottom: 0;
}
}
@media (max-width: 1200px) {
.menu .--menu-item-1 {
opacity: 0;
will-change: opacity;
transition: opacity 400ms;
transition-delay: 0ms;
}
.menu .--menu-item-1 .title {
overflow: hidden;
}
.menu .--menu-item-1 .title span {
display: flex;
align-items: center;
opacity: 0;
transform: translate3d(0, 100%, 0);
will-change: transform, opacity;
gap: 0.3125rem;
}
.menu .--menu-item-1:nth-child(1n) .title span {
transition: transform 1200ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1200ms;
transition-delay: 0.125s;
}
.menu .--menu-item-1:nth-child(2n) .title span {
transition: transform 1200ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1200ms;
transition-delay: 0.25s;
}
.menu .--menu-item-1:nth-child(3n) .title span {
transition: transform 1200ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1200ms;
transition-delay: 0.375s;
}
.menu .--menu-item-1:nth-child(4n) .title span {
transition: transform 1200ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1200ms;
transition-delay: 0.5s;
}
.menu .--menu-item-1:nth-child(5n) .title span {
transition: transform 1200ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1200ms;
transition-delay: 0.625s;
}
.menu .--menu-item-1:nth-child(6n) .title span {
transition: transform 1200ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1200ms;
transition-delay: 0.75s;
}
.menu .--menu-item-1:nth-child(7n) .title span {
transition: transform 1200ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1200ms;
transition-delay: 0.875s;
}
.menu .--menu-item-1:nth-child(8n) .title span {
transition: transform 1200ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1200ms;
transition-delay: 1s;
}
.menu .--menu-item-1:nth-child(9n) .title span {
transition: transform 1200ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1200ms;
transition-delay: 1.125s;
}
.menu .--menu-item-1:nth-child(10n) .title span {
transition: transform 1200ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1200ms;
transition-delay: 1.25s;
}
.menu .--menu-item-2 {
font-size: 1.25rem;
font-weight: 600;
line-height: 1.2;
}
.menu .--menu-item-2.--is-active .subtitle {
color: var(--primary);
}
.menu.--is-open {
transform: translate3d(0, 0, 0);
transition-delay: 0ms;
}
.menu.--is-open .--menu-item-1 {
opacity: 1;
transition: opacity 400ms;
transition-delay: 500ms;
}
.menu.--is-open .--menu-item-1 .title span {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@media (max-width: 1200px) and (max-width: 600px) {
.menu {
max-height: calc(100vh + 1.75rem);
overflow-y: scroll;
}
}
.breadcrumb {
padding-top: 7.1875rem;
padding-bottom: 0.9375rem;
}
.breadcrumb__inner {
display: flex;
flex-wrap: wrap;
padding: 1.625rem 0 1rem 0;
}
.breadcrumb li {
font-size: 0.75rem;
}
.breadcrumb li:after {
content: "/";
display: inline-block;
margin: 0 0.375rem;
}
.breadcrumb li:last-child {
font-weight: bold;
}
.breadcrumb li:last-child:after {
content: none;
}
@media (max-width: 1279px) {
.breadcrumb {
padding-top: 5.3125rem;
}
}
@media (max-width: 1024px) {
.breadcrumb {
padding-top: 4.6875rem;
}
}
.transition__overlay {
z-index: 999;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
background-color: var(--white);
transform: scaleY(0);
transform-origin: bottom center;
will-change: transform;
}
.pin {
width: 100%;
min-width: 15rem;
max-width: 15rem;
color: var(--black);
}
.pin .button {
margin-top: 1.25rem;
}
.pin__title, .pin__phone {
color: var(--black);
}
div[role=dialog] {
max-width: calc(100vw - 4.375rem) !important;
padding: 1.25rem !important;
overflow: hidden !important;
border-radius: 0.75rem !important;
box-shadow: 0 0.125rem 1.25rem rgba(0, 0, 0, 0.05) !important;
}
.gm-ui-hover-effect {
top: 0 !important;
right: 0 !important;
display: flex;
justify-content: center;
width: 1.875rem !important;
height: 1.875rem !important;
padding: 0.3125rem !important;
filter: unset !important;
}
.gm-ui-hover-effect span {
width: 1.25rem !important;
height: 100% !important;
margin: 0 !important;
}
.gmnoprint {
bottom: 0 !important;
margin: 0 !important;
}
.gm-bundled-control .gmnoprint {
top: auto !important;
right: 0 !important;
transform: translate(-0.9375rem, -0.9375rem) !important;
}
.map__small .pin {
display: none !important;
}
@media (max-width: 600px) {
.map__small.map__small-secondary {
right: 9.25rem !important;
}
}
@media (min-width: 601px) {
.map__small.map__small-secondary {
bottom: 12.375rem !important;
}
}
@media (min-width: 767px) {
.map__small.map__small-secondary {
bottom: 16.125rem !important;
}
}
@media (min-width: 1024px) {
.map__small.map__small-secondary {
bottom: 17.375rem !important;
}
}
.map__small .map__small-title {
position: absolute;
bottom: 0.25rem;
left: 0;
width: 100%;
font-size: 0.75rem;
color: #d7c1a6;
text-align: center;
pointer-events: none;
}
@media (min-width: 767px) {
.map__small .map__small-title {
font-size: 1rem;
}
}
.modal {
z-index: 10;
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
width: 100vw;
height: 100vh;
pointer-events: none;
opacity: 0;
transition: opacity 0ms;
}
.modal .container {
pointer-events: none;
}
.modal__wrapper {
position: relative;
width: 100vw;
height: 100vh;
margin: auto;
overflow: hidden;
pointer-events: none;
}
.modal__cross {
z-index: 2;
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
cursor: pointer;
background-color: var(--white);
}
.modal iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal.--is-active {
pointer-events: all;
opacity: 1;
transition: opacity 0ms;
transition-delay: 0ms;
}
.modal.--is-active .modal__cross {
opacity: 1;
transition: opacity 500ms;
}
.modal.--is-active .modal__wrapper {
pointer-events: all;
}
[data-modal-trigger] {
cursor: pointer;
}
.popin {
position: fixed;
width: 205px;
height: 205px;
border-radius: 100%;
z-index: 1000;
bottom: 1.25rem;
right: 1.25rem;
overflow: hidden;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
@media (min-width: 1024px) {
.popin {
width: 305px;
height: 305px;
}
}
.popin img {
width: 100%;
height: 100%;
object-fit: cover;
}
.popin__link {
position: absolute;
bottom: 2.1875rem;
left: 50%;
width: fit-content;
height: fit-content;
transform: translateX(-50%);
font-size: 0.75rem;
}
@media (min-width: 1024px) {
.popin__link {
bottom: 3.6875rem;
font-size: 1rem;
}
}
.popin__close {
position: absolute;
top: 20%;
right: 30%;
transform: translate(50%, -50%);
}
.default__inner {
max-width: 35rem;
padding-top: 6.25rem;
}
.default form .input__row {
margin-top: 1.875rem;
}
.default form input,
.default form textarea,
.default form select {
width: 100%;
padding: 0.75rem 0;
font-family: var(--font-paragraph);
font-size: 1rem;
color: var(--dark);
resize: none;
border-bottom: solid 0.0625rem var(--dark);
}
.default form input::placeholder,
.default form textarea::placeholder,
.default form select::placeholder {
color: var(--dark);
opacity: 0.6;
}
.default form select {
position: relative;
background-image: url(https://www.interieurs-prives.com/wp-content/themes/ip/dist/images/arrow-link-black.svg);
background-repeat: no-repeat;
background-position: center right;
background-size: 0.75rem;
}
.default form .wpcf7-not-valid-tip {
margin-top: 0.625rem;
font-size: 0.875rem;
}
.default form .wpcf7 form.invalid .wpcf7-response-output {
padding: 0;
font-size: 0.9375rem;
font-weight: bold;
border: none;
margin-inline: 0;
}
.default form button {
margin-top: 1.25rem;
}
.default form br {
display: none;
}
.hero {
position: relative;
display: flex;
align-items: end;
min-height: 100vh;
padding: 8.75rem 0;
overflow: hidden;
color: var(--white);
background-color: var(--black);
border-bottom-right-radius: var(--radius-big);
will-change: transform;
}
.hero::before {
content: none;
}
.hero__grid {
z-index: 2;
position: relative;
display: grid;
grid-template-columns: 1fr 15.625rem;
align-items: end;
padding-right: 8.3333333333%;
gap: 3.75rem;
}
.hero__grid--birthday {
grid-template-columns: 1fr 19.0625rem;
padding-right: 0;
gap: 0;
}
.hero__grid--birthday .hero__inner {
max-width: unset;
}
@media (max-width: 1023px) {
.hero__grid--birthday {
gap: 3.75rem;
grid-template-columns: 1fr;
}
}
@media (max-width: 1200px) {
.hero__grid {
padding-right: 0;
}
}
@media (max-width: 1023px) {
.hero__grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.hero__grid {
gap: 2.5rem;
}
}
.hero__inner {
position: relative;
position: relative;
max-width: 47.5rem;
padding-bottom: 1.875rem;
}
.hero__inner:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.hero__inner.--is-visible:after {
transform: scaleX(1);
}
.hero__inner:after {
width: 50%;
background-color: var(--white);
}
.hero__posts {
position: relative;
max-width: 25rem;
padding: 1.375rem 1.625rem;
overflow: hidden;
border: solid 0.0625rem var(--white-60);
border-radius: var(--radius-small);
backdrop-filter: blur(0.625rem);
}
@supports not (backdrop-filter: blur(0.625rem)) {
.hero__posts:before {
content: "";
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--black);
opacity: 0.3;
}
}
.hero__posts__intro {
margin-bottom: 1.875rem;
padding-right: 3.75rem;
text-transform: uppercase;
}
.hero__posts .flickity-page-dots {
position: absolute;
top: -2.96875rem;
right: 0;
bottom: auto;
display: flex;
align-items: center;
width: auto;
gap: 0.3125rem;
}
.hero__posts .flickity-page-dots .flickity-page-dot {
width: 0.625rem;
height: 0.625rem;
margin: 0;
background-color: var(--white);
outline: 0;
opacity: 0.2;
}
.hero__posts .flickity-page-dots .flickity-page-dot:focus {
border: 0;
outline: 0;
box-shadow: none;
}
.hero__posts .flickity-page-dots .flickity-page-dot.is-selected {
opacity: 1;
}
.hero__post {
width: 100%;
min-height: 100%;
margin-right: var(--gap);
}
.hero__post__title {
position: relative;
margin-bottom: 1.875rem;
padding-bottom: 1.875rem;
font-weight: bold;
}
.hero__post__title:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--white);
}
.hero__image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.hero__image--birthday {
background-position: bottom center;
}
.hero .hero__birthday-video {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
mix-blend-mode: lighten;
}
.hero .hero__birthday-video video {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero .hero__birthday-button:hover {
color: var(--white);
border-color: var(--white);
}
.hero .hero__birthday-video {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
mix-blend-mode: lighten;
}
.hero .hero__birthday-video video {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero .hero__birthday-popin {
position: relative;
max-width: 305px;
max-height: 305px;
border-radius: 100%;
}
.hero .hero__birthday-popin img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero .hero__birthday-popin__link {
position: absolute;
bottom: 3.6875rem;
left: 50%;
width: fit-content;
height: fit-content;
transform: translateX(-50%);
}
@media (min-width: 1023px) {
.hero .hero__birthday-popin {
position: absolute;
top: 30%;
right: 0%;
}
}
@media (min-width: 1200px) {
.hero .hero__birthday-popin {
transform: translateX(10%);
}
}
@media (max-width: 767px) {
.hero {
padding: 10rem 0 6.25rem 0;
}
}
.presentation__trigger {
display: flex;
align-items: center;
margin: -2.5rem 0;
padding: 2.5rem 0;
}
@media (min-width: 768px) {
.presentation__trigger {
min-height: 100vh;
}
}
.presentation__grid {
display: grid;
grid-template-columns: 1fr 0.9fr;
}
@media (max-width: 767px) {
.presentation__grid {
grid-template-columns: 1fr;
gap: 2.8125rem;
}
}
.presentation__intro {
position: relative;
}
.presentation__intro:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.presentation__intro.--is-visible:after {
transform: scaleX(1);
}
.presentation__intro:after {
right: 3.125rem;
bottom: -1.25rem;
left: auto;
width: 50%;
}
@media (min-width: 768px) {
.presentation__intro {
width: 55%;
padding-right: 2.8125rem;
}
}
.presentation__title {
max-width: 28.75rem;
}
.presentation__link {
margin-top: 2.1875rem;
}
.presentation__body {
position: relative;
}
.presentation__body__inner {
margin-top: 3.125rem;
}
@media (min-width: 768px) {
.presentation__body__inner {
max-width: 28.75rem;
margin-top: 12.5rem;
padding-right: 2.8125rem;
}
}
.presentation__body__words {
position: absolute;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 4.375rem;
margin-top: 3.125rem;
overflow: hidden;
text-align: right;
white-space: nowrap;
transform: translateX(50%);
}
.presentation__body__words span {
line-height: 1;
}
.presentation__body__words__word {
padding-bottom: 1.875rem;
}
@media (max-width: 1023px) {
.presentation__body__words {
height: 3.75rem;
}
}
@media (max-width: 767px) {
.presentation__body__words {
display: none;
}
}
.presentation__medias {
position: relative;
max-width: 100%;
overflow: hidden;
border-top-right-radius: var(--radius-medium);
border-bottom-right-radius: var(--radius-medium);
border-bottom-left-radius: var(--radius-medium);
will-change: transform;
aspect-ratio: 1;
}
.presentation__medias__words {
z-index: 999;
position: absolute;
top: 7.5rem;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 4.375rem;
margin-top: 3.125rem;
overflow: hidden;
color: var(--white);
white-space: nowrap;
transform: translateX(-50%);
}
.presentation__medias__words span {
line-height: 1;
}
@media (max-width: 1023px) {
.presentation__medias__words {
height: 3.75rem;
}
}
@media (max-width: 767px) {
.presentation__medias__words {
display: none;
}
}
.presentation__medias__word {
padding-bottom: 1.875rem;
}
@media (min-width: 768px) {
.presentation__medias {
min-height: 37.5rem;
max-height: 80vh;
margin-top: -7.5rem;
aspect-ratio: 680/800;
}
}
.presentation__media {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.presentation__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.--is-media {
clip-path: inset(0 0 0 0);
}
.process {
position: relative;
border-top-right-radius: var(--radius-big);
}
.process__transition {
z-index: -1;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: calc(var(--space) * 2);
transform: translateY(100%);
}
.process__intro {
max-width: 51.25rem;
}
.process__wrapper {
margin-top: 3.75rem;
}
.process__step {
position: relative;
display: block;
transition-delay: 0ms;
}
.process__step:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.process__step.--is-visible:after {
transform: scaleX(1);
}
.process__step:nth-child(1) {
position: relative;
transition-delay: 0ms;
}
.process__step:nth-child(1):before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.process__step:nth-child(1).--is-visible:before {
transform: scaleX(1);
}
.process__step__grid {
display: grid;
grid-template-columns: 1fr 1fr 0.4fr;
}
@media (max-width: 1023px) {
.process__step__grid {
grid-template-columns: 1fr 0.65fr 0.25fr;
}
}
.process__step__body {
position: relative;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
transition-delay: 0ms;
}
.process__step__body:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.process__step__body.--is-visible:before {
transform: scaleX(1);
}
.process__step__body:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.process__step__body.--is-visible:after {
transform: scaleX(1);
}
.process__step__body:before, .process__step__body:after {
width: 0.0625rem;
height: 100%;
transform: scale(1, 0);
transform-origin: top left;
}
@media (max-width: 767px) {
.process__step__body:before, .process__step__body:after {
content: none;
}
}
.process__step__body:after {
right: 0;
left: auto;
}
.process__step__body.--is-visible:before, .process__step__body.--is-visible:after {
transform: scale(1, 1);
}
@media (max-width: 767px) {
.process__step__body {
display: block;
grid-column: 1/-1;
}
}
.process__step__inner {
padding: 2.5rem 1.875rem;
}
@media (max-width: 1023px) {
.process__step__inner {
padding: 1.875rem;
}
}
@media (max-width: 767px) {
.process__step__inner {
padding: 0.625rem 0 1.875rem 0;
}
}
.process__step__image {
position: relative;
display: flex;
align-items: center;
padding: 2.8125rem;
}
.process__step__image:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.process__step__image.--is-visible:after {
transform: scaleX(1);
}
.process__step__image:after {
right: 0;
left: auto;
width: 0.0625rem;
height: 100%;
transform: scale(1, 0);
transform-origin: top left;
}
@media (max-width: 767px) {
.process__step__image:after {
content: none;
}
}
.process__step__image.--is-visible:after {
transform: scale(1, 1);
}
.process__step__image__inner {
position: relative;
overflow: hidden;
border-radius: var(--radius-small);
will-change: transform;
transition: border-radius 400ms cubic-bezier(0.645, 0.045, 0.355, 1);
aspect-ratio: 2/1;
}
.process__step__image__inner img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 1200px) {
.process__step__image__inner {
aspect-ratio: 1/1;
}
}
@media (max-width: 767px) {
.process__step__image {
grid-column: 1/-1;
max-width: 37.5rem;
margin: auto;
padding: 0 0 1.875rem 0;
}
}
@media (max-width: 1023px) {
.process__step__paragraph {
font-size: 0.875rem;
}
}
.process__step__link {
position: relative;
padding: 1.5rem 1.875rem;
}
.process__step__link:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.process__step__link.--is-visible:before {
transform: scaleX(1);
}
.process__step__link__inner {
display: flex;
gap: 0.75rem;
}
.process__step__link .link {
justify-content: end;
width: 100%;
}
.process__step__index {
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
font-size: clamp(3.75rem, 12.5vw, 12.5rem);
font-weight: bold;
line-height: 1;
color: var(--primary);
transform: translateY(5%);
transition: color 400ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media (max-width: 767px) {
.process__step__index {
justify-content: start;
order: -1;
padding: 1.25rem 0 0 0;
}
}
@media (min-width: 768px) {
.process__step:nth-child(even) .process__step__grid {
grid-template-columns: 0.4fr 1fr 1fr;
}
.process__step:nth-child(even) .process__step__body {
order: 3;
}
.process__step:nth-child(even) .process__step__image {
order: 2;
}
.process__step:nth-child(even) .process__step__image:after {
right: auto;
left: 0;
}
.process__step:nth-child(even) .process__step__index {
order: 1;
}
}
@media (min-width: 1025px) {
.process__step:hover .process__step__image__inner {
border-radius: calc(var(--radius-big) * 1.5);
}
.process__step:hover .process__step__index {
color: var(--black);
}
}
.process__slider {
margin: 3.75rem 0 0 calc(100vw - 88.8888888889%);
will-change: transform;
}
@media (max-width: 1024px) {
.process__slider {
margin-left: 1.25rem;
transform: none !important;
}
}
.process__item {
display: flex;
width: clamp(28.125rem, 37.5vw, 37.5rem);
min-height: 100%;
margin-right: var(--gap);
white-space: normal;
border: solid 0.0625rem var(--black);
border-radius: var(--radius-small);
transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
}
.process__item__aside {
display: flex;
flex-direction: column;
align-items: center;
padding: 1.5625rem 1.25rem;
border-right: solid 0.0625rem var(--black);
gap: 0.75rem;
}
@media (max-width: 767px) {
.process__item__aside {
flex-direction: row;
padding: 1.25rem;
border: none;
}
}
.process__item__ontitle {
font-weight: normal;
writing-mode: vertical-lr;
transform: rotate(180deg);
}
@media (max-width: 767px) {
.process__item__ontitle {
writing-mode: unset;
transform: none;
}
}
.process__item__inner {
padding: 1.25rem;
}
@media (max-width: 767px) {
.process__item__inner {
padding: 0 1.25rem 1.25rem 1.25rem;
}
}
.process__item__paragraph {
padding-right: 1.25rem;
}
.process__item__image {
position: relative;
overflow: hidden;
border-radius: var(--radius-small);
aspect-ratio: 420/215;
}
.process__item__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.process__item__title {
margin: 1.875rem 0 0.9375rem 0;
}
.process__item:hover {
background-color: var(--secondary);
}
@media (max-width: 767px) {
.process__item {
flex-direction: column;
width: clamp(16.25rem, 100vw - 2.5rem, 25rem);
}
}
.process__link {
margin-top: 3.75rem;
}
@media (max-width: 767px) {
.process__link {
margin-top: 2.8125rem;
}
}
.process__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-top: 2.5rem;
gap: 2.8125rem;
}
.process__controls {
display: flex;
align-items: center;
gap: var(--gap);
}
.process .slider__next {
transform: rotate(180deg);
}
.process .flickity-viewport {
overflow: visible;
}
.process.--bg-dark .process__item {
border-color: var(--white);
}
.process.--bg-dark .process__item__aside {
border-color: var(--white);
}
.process.--bg-dark .process__item:hover {
background-color: var(--black);
}
.solutions {
position: relative;
border-top-right-radius: var(--radius-big);
}
.solutions__transition {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: calc(var(--space) * 2);
transform: translateY(100%);
}
.solutions__intro {
max-width: 51.25rem;
}
.solutions__wrapper {
margin-top: 3.75rem;
}
.solutions__item {
position: relative;
}
.solutions__item:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.solutions__item.--is-visible:before {
transform: scaleX(1);
}
.solutions__item__body {
position: relative;
width: calc(100% - var(--space));
padding: var(--space) var(--space) var(--space) 0;
}
.solutions__item__body:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.solutions__item__body.--is-visible:after {
transform: scaleX(1);
}
.solutions__item__body:after {
width: 0.0625rem;
height: 100%;
transform: scale(1, 0);
transform-origin: top left;
}
@media (max-width: 767px) {
.solutions__item__body:after {
content: none;
}
}
.solutions__item__body:after {
right: 0;
left: auto;
}
.solutions__item__body.--is-visible:after {
transform: scale(1, 1);
}
@media (max-width: 1100px) {
.solutions__item__body {
width: 100%;
padding-inline: 2.8125rem;
}
}
@media (max-width: 1023px) {
.solutions__item__body {
padding: 3.75rem 1.875rem !important;
}
}
@media (max-width: 767px) {
.solutions__item__body {
padding: 1.25rem 0 !important;
}
}
.solutions__item__wrapper {
display: grid;
grid-template-columns: 1.5fr 1fr;
overflow: hidden;
background-color: var(--secondary);
border-bottom-right-radius: var(--radius-big);
will-change: transform;
transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
gap: 2.8125rem;
}
@media (max-width: 1023px) {
.solutions__item__wrapper {
gap: 1.875rem;
}
}
@media (max-width: 900px) {
.solutions__item__wrapper {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px) {
.solutions__item__wrapper {
grid-template-columns: 1fr;
}
}
@media (min-width: 1025px) {
.solutions__item__wrapper:hover {
background-color: var(--white);
border-top-left-radius: var(--radius-big);
border-bottom-left-radius: var(--radius-big);
}
.solutions__item__wrapper:hover .button {
color: var(--white);
background-color: var(--black);
border-radius: var(--radius-small);
}
.solutions__item__wrapper:hover .button:after {
filter: invert(1);
}
.solutions__item__wrapper:hover .button:after {
transform: translate3d(20%, 0, 0);
}
}
.solutions__item__inner {
display: flex;
flex-direction: column;
justify-content: center;
padding: 4.375rem 2.8125rem 4.375rem 0;
}
@media (max-width: 1023px) {
.solutions__item__inner {
padding: 2.8125rem 1.875rem 2.8125rem 0;
}
}
@media (max-width: 767px) {
.solutions__item__inner {
padding: 0 1.875rem 1.875rem 1.875rem;
}
}
@media (max-width: 450px) {
.solutions__item__inner {
padding: 0 1.25rem 1.875rem 1.25rem;
}
}
.solutions__item__thumb {
position: relative;
min-height: clamp(15.625rem, 50vh, 40.625rem);
overflow: hidden;
}
.solutions__item__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 767px) {
.solutions__item__thumb {
min-height: 0;
aspect-ratio: 1.5/1;
}
}
@media (max-width: 450px) {
.solutions__item__paragraph {
font-size: 0.875rem;
}
}
.solutions__item__button {
position: relative;
margin-top: 1.875rem;
padding-top: 1.875rem;
}
.solutions__item__button:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.solutions__item__button.--is-visible:before {
transform: scaleX(1);
}
@media (min-width: 768px) {
.solutions__item:nth-child(even) .solutions__item__body {
margin-left: auto;
padding: var(--space) 0 var(--space) var(--space);
}
.solutions__item:nth-child(even) .solutions__item__body:after {
right: auto;
left: 0;
}
.solutions__item:nth-child(even) .solutions__item__wrapper {
grid-template-columns: 1fr 1.5fr;
border-bottom-left-radius: var(--radius-big);
}
}
@media (min-width: 768px) and (max-width: 900px) {
.solutions__item:nth-child(even) .solutions__item__wrapper {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 768px) and (min-width: 1025px) {
.solutions__item:nth-child(even) .solutions__item__wrapper:hover {
border-top-left-radius: 0;
border-top-right-radius: var(--radius-big);
border-bottom-right-radius: var(--radius-big);
}
}
@media (min-width: 768px) {
.solutions__item:nth-child(even) .solutions__item__thumb {
order: 2;
}
.solutions__item:nth-child(even) .solutions__item__inner {
padding: 4.375rem 0 4.375rem 2.8125rem;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.solutions__item:nth-child(even) .solutions__item__inner {
padding: 2.8125rem 0 2.8125rem 1.875rem;
}
}
.solutions__link {
position: relative;
display: flex;
width: calc(100% - var(--space));
margin-left: auto;
gap: 1.875rem;
}
.solutions__link:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.solutions__link.--is-visible:before {
transform: scaleX(1);
}
.solutions__link .link {
justify-content: end;
width: max-content;
white-space: nowrap;
}
@media (min-width: 768px) {
.solutions__link .link {
transform: translateY(-50%);
}
}
.solutions__link:before {
position: inherit;
}
@media (max-width: 767px) {
.solutions__link:before {
display: none;
}
}
@media (max-width: 1100px) {
.solutions__link {
width: 100%;
}
}
@media (max-width: 767px) {
.solutions__link {
justify-content: end;
margin-top: 1.25rem;
}
}
.solutions.--is-odd .solutions__link {
margin-left: 0;
}
.solutions.--is-odd .solutions__link:before {
transform-origin: right;
}
.solutions.--is-odd .solutions__link .link {
order: -1;
}
.page-id-211 .solutions__link {
display: none;
}
.cta {
position: relative;
display: flex;
align-items: center;
width: 100vw;
padding: 0;
overflow: hidden;
}
.cta__grid {
display: grid;
grid-template-columns: 52.5vw 1fr;
align-items: center;
overflow: visible;
gap: clamp(2.8125rem, 7%, 7.5rem);
}
@media (max-width: 1440px) {
.cta__grid {
grid-template-columns: 50vw 1fr;
gap: clamp(2.8125rem, 5%, 5.625rem);
}
}
@media (max-width: 1024px) {
.cta__grid {
grid-template-columns: 1fr;
gap: 2.8125rem;
padding: 0 1.25rem;
}
}
.cta__medias {
display: flex;
width: max-content;
gap: var(--gap);
margin-left: -20vw;
overflow: hidden;
}
@media (max-width: 1024px) {
.cta__medias {
margin-left: -10vw;
}
}
@media (max-width: 600px) {
.cta__medias {
margin-left: -40vw;
}
}
.cta__media {
position: relative;
overflow: hidden;
will-change: transform;
}
.cta__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cta__subtitle {
position: relative;
display: flex;
align-items: center;
gap: var(--gap);
}
.cta__subtitle:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.cta__subtitle.--is-visible:after {
transform: scaleX(1);
}
.cta__subtitle p {
width: 75%;
}
.cta__subtitle:after {
position: inherit;
width: 25%;
}
.cta__link {
margin-top: 2.1875rem;
}
@media (min-width: 1025px) {
.cta {
min-height: 100vh;
}
}
@media (max-width: 1024px) {
.cta {
padding: var(--space) 0;
}
}
.--img {
width: 35vw;
height: 45vw;
border-radius: var(--radius-big);
}
@media (max-width: 1024px) {
.--img {
width: 40vw;
height: 50vw;
}
}
@media (max-width: 767px) {
.--img {
width: 45vw;
height: 58vw;
}
}
@media (max-width: 600px) {
.--img {
width: 60vw;
height: 77vw;
}
}
@media (min-width: 1025px) {
[data-animation-trigger=scale-down] .--img:nth-child(1) {
width: 120vw;
height: 100vh;
}
}
@media (min-width: 1025px) {
[data-animation-trigger=scale-down] .--img {
border-radius: 0;
}
}
@media (min-width: 1025px) {
[data-animation-trigger=scale-down] .--body {
transform: translate3d(0, 100vh, 0);
will-change: transform;
}
}
@media (min-width: 1025px) {
[data-animation-trigger=scale-down]:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 20%;
background-color: var(--primary);
}
}
.map {
border-top-right-radius: var(--radius-big);
}
.map:not(.--bg-white) {
color: var(--white);
background-color: var(--dark);
}
.map__intro {
max-width: 51.25rem;
}
.map__wrapper {
position: relative;
}
.map__inner {
height: 40.625rem;
max-height: 80vh;
margin-top: 2.5rem;
overflow: hidden;
border-radius: var(--radius-big);
}
@media (max-aspect-ratio: 1/1) {
.map__inner {
max-height: 55vh;
border-radius: var(--radius-medium);
}
}
.map__title b {
color: var(--primary);
}
.map__small {
position: absolute;
right: 3.125rem;
bottom: 3.125rem;
width: 11.25rem;
height: 11.25rem;
border: solid 0.125rem var(--primary);
border-radius: calc(var(--radius-big) - 3.125rem);
}
@media (max-width: 1023px) {
.map__small {
right: 2.5rem;
bottom: 2.5rem;
border-radius: var(--radius-medium);
}
}
@media (max-width: 767px) {
.map__small {
right: 1.875rem;
bottom: 1.875rem;
width: 8.75rem;
height: 8.75rem;
}
}
@media (max-width: 600px) {
.map__small {
right: 0.9375rem;
bottom: 0.9375rem;
width: 7.5rem;
height: 7.5rem;
}
}
.page-template-shop .map,
.page-template-shops .map {
border-top-right-radius: 0;
}
.intro {
position: relative;
margin-top: -0.9375rem;
padding-top: 3.75rem;
}
.intro__first {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
column-gap: 2.8125rem;
}
.intro__title {
max-width: 31.25rem;
}
.intro__infos {
max-width: 26.25rem;
}
.intro__info {
padding: 1.25rem 0;
}
.intro__info p {
margin-bottom: 0;
font-weight: normal;
}
.intro__info:nth-child(1) {
border-bottom: solid 0.0625rem var(--black);
}
.intro__grid {
display: grid;
grid-template-columns: 0.9fr 2fr;
gap: 1.875rem;
row-gap: 3.125rem;
}
@media (max-width: 1279px) {
.intro__grid {
grid-template-columns: 1fr;
gap: 0;
}
}
.intro__inner {
display: grid;
grid-template-columns: 1fr;
gap: 3.125rem;
}
@media (max-width: 767px) {
.intro__inner {
gap: 2.5rem;
}
}
.intro__paragraphs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.8125rem;
}
@media (max-width: 1023px) {
.intro__paragraphs {
font-size: 0.875rem;
}
}
@media (max-width: 767px) {
.intro__paragraphs {
grid-template-columns: 1fr;
gap: 1.25rem;
order: 2;
}
}
.intro__title {
padding-right: 1.875rem;
}
@media (max-width: 1279px) {
.intro__title {
padding-right: 0;
}
}
.intro__image {
position: relative;
overflow: hidden;
border-radius: var(--radius-small);
aspect-ratio: 960/340;
}
.intro__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.intro__image--large {
aspect-ratio: 1280/400;
grid-column: 1/-1;
}
@media (max-width: 767px) {
.intro__image--large {
order: 2;
margin-bottom: 2.5rem;
}
}
@media (max-width: 600px) {
.intro__image--large {
aspect-ratio: 960/600;
}
}
@media (max-width: 600px) {
.intro__image {
aspect-ratio: 960/600;
}
}
@media (max-width: 1279px) and (min-width: 768px) {
.intro.--image-large .intro__grid {
row-gap: 3.125rem;
}
}
@media (max-width: 767px) {
.intro.--image-large .intro__inner {
order: 3;
}
}
@media (max-width: 600px) {
.intro {
padding-top: 2.8125rem;
}
}
.single-solution .intro {
background-color: var(--primary);
border-top-right-radius: var(--radius-big);
}
.single-solution .intro:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: calc(var(--space) * 2);
background-color: var(--primary);
transform: translateY(100%);
}
.single-post .intro {
position: relative;
position: relative;
padding-top: 2.5rem;
}
.single-post .intro:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.single-post .intro.--is-visible:after {
transform: scaleX(1);
}
.single-post .intro__wrapper {
max-width: 60rem;
}
.single-post .intro__date {
margin-bottom: 1.375rem;
}
.single-post .intro__categories {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 2.8125rem;
}
.single-post .intro__category {
margin-bottom: 1rem;
font-size: 1.625rem;
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.02em;
display: block;
margin-bottom: 0;
padding: 0.75rem 1.375rem 0.75rem 1.375rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
border: solid 0.0625rem var(--black);
border-radius: 2rem;
transition: all 200ms;
color: var(--white);
background-color: var(--black);
}
@media (max-width: 1023px) {
.single-post .intro__category {
font-size: 1.375rem;
}
}
@media (max-width: 600px) {
.single-post .intro__category {
font-size: clamp(1rem, 5vw, 1.25rem);
}
}
.single-realisation .intro {
padding-bottom: 0;
}
.single-realisation .intro__title {
max-width: 100%;
}
.single-realisation .intro__first {
grid-column: 1/-1;
}
.single-post .intro__title {
max-width: 100%;
}
.two-images {
position: relative;
border-top-left-radius: var(--radius-big);
}
.two-images__transition {
z-index: 0;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: calc(var(--space) * 2);
transform: translateY(100%);
}
.two-images__intro__grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 2.8125rem;
align-items: end;
}
@media (max-width: 1200px) {
.two-images__intro__grid {
grid-template-columns: 1.2fr 1fr;
}
}
@media (max-width: 1023px) {
.two-images__intro__grid {
grid-template-columns: 1fr;
gap: 0;
}
}
.two-images__subtitle {
align-self: end;
max-width: 32.5rem;
}
@media (min-width: 1024px) {
.two-images__subtitle {
margin: 0 auto;
}
}
.two-images__title {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 2.8125rem;
}
@media (max-width: 1200px) {
.two-images__title {
grid-template-columns: 1.2fr 1fr;
}
}
@media (max-width: 1023px) {
.two-images__title {
grid-template-columns: 1fr;
}
}
.two-images__wrapper {
display: grid;
grid-template-columns: 0.4805fr 1fr;
gap: 2.5rem;
margin-top: 5rem;
}
@media (max-width: 1280px) {
.two-images__wrapper {
gap: 1.25rem;
}
}
@media (max-width: 1200px) {
.two-images__wrapper {
margin-top: 3.75rem;
}
}
@media (max-width: 767px) {
.two-images__wrapper {
margin-top: 3.125rem;
}
}
@media (max-width: 600px) {
.two-images__wrapper {
grid-template-columns: 1fr;
}
}
.two-images__item {
position: relative;
overflow: hidden;
border-radius: var(--radius-small);
}
.two-images__item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.two-images__item--small {
aspect-ratio: 400/540;
}
@media (max-width: 600px) {
.two-images__item--small {
display: none;
}
}
.two-images__item--large {
aspect-ratio: 840/545;
}
.content-media {
position: relative;
position: relative;
}
.content-media:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.content-media.--is-visible:after {
transform: scaleX(1);
}
.content-media:after {
top: 0;
bottom: auto;
}
.content-media__line {
position: absolute;
top: 0;
}
.content-media__grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 3.75rem;
}
.content-media__grid.--is-full {
grid-template-columns: 1fr;
}
.content-media__grid.--is-full .content-media__intro {
display: grid;
padding-bottom: 0;
}
.content-media__grid.--is-full .content-media__desc {
max-width: 32.5rem;
}
.content-media__grid.--is-full .content-media__image {
order: -1;
margin: 0 0 2.8125rem 0;
}
@media (max-width: 1200px) {
.content-media__grid {
grid-template-columns: 1.4fr 1fr;
gap: 2.8125rem;
}
}
@media (max-width: 900px) {
.content-media__grid {
grid-template-columns: 1fr;
}
}
.content-media__intro {
padding-bottom: 18.75rem;
}
@media (max-width: 900px) {
.content-media__intro {
padding-bottom: 0;
}
}
.content-media__title {
position: relative;
max-width: 30rem;
margin-bottom: 1.875rem;
padding-bottom: 1.25rem;
}
.content-media__title:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.content-media__title.--is-visible:after {
transform: scaleX(1);
}
.content-media__title h2 {
margin-bottom: 0;
font-weight: 600;
}
.content-media__image {
height: max-content;
margin-top: 2.8125rem;
overflow: hidden;
border-radius: var(--radius-small);
}
.content-media__body {
align-self: end;
max-width: 26.25rem;
margin-left: auto;
padding-top: 18.75rem;
}
@media (max-width: 900px) {
.content-media__body {
max-width: 100%;
margin: 0;
padding-top: 0;
}
}
.content-media__button {
margin-top: 1.875rem;
}
@media (min-width: 901px) {
.content-media.--media-right .content-media__grid {
grid-template-columns: 1fr 1.6fr;
}
.content-media.--media-right .content-media__intro {
order: 2;
}
.content-media.--media-right .content-media__body {
margin: 0 auto 0 0;
}
}
.content-media.bloc .content-media__image {
margin-top: 0;
}
.content-media.bloc .content-media__body {
padding-top: 0;
}
@media (min-width: 901px) {
.content-media.--media-right .content-media__image {
order: 2;
}
}
.description__grid {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 2.8125rem;
}
@media (max-width: 1023px) {
.description__grid {
grid-template-columns: 2fr 3fr;
}
}
@media (max-width: 767px) {
.description__grid {
grid-template-columns: 1fr;
gap: 1.875rem;
}
}
.description__body {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2.8125rem;
padding-bottom: 2.8125rem;
}
.description__body:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.description__body.--is-visible:after {
transform: scaleX(1);
}
@media (max-width: 1200px) and (min-width: 768px) {
.description__body {
gap: 1.875rem;
}
}
@media (max-width: 1023px) {
.description__body {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 600px) {
.description__body {
grid-template-columns: 1fr;
gap: 1.875rem;
}
}
@media (max-width: 1023px) {
.description__paragraph:last-child {
grid-column: 1/-1;
}
}
@media (max-width: 1200px) and (min-width: 768px) {
.description__paragraph {
font-size: 0.875rem;
}
}
.archive-solutions {
position: relative;
border-top-left-radius: var(--radius-big);
}
.archive-solutions__transition {
z-index: 0;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: calc(var(--space) * 2);
transform: translateY(100%);
}
.archive-solutions__intro {
max-width: 51.25rem;
}
.archive-solutions__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--gap);
margin-top: 2.8125rem;
}
@media (max-width: 600px) {
.archive-solutions__grid {
grid-template-columns: 1fr;
}
}
.archive-solutions .card-solution:first-of-type {
grid-column: 1/-1;
}
.cover {
margin-top: -0.9375rem;
}
.cover__grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
column-gap: clamp(2.8125rem, 10%, 7.5rem);
}
@media (max-width: 1440px) {
.cover__grid {
grid-template-columns: 1fr 1.333fr;
}
}
@media (max-width: 1023px) {
.cover__grid {
grid-template-columns: 1fr;
}
}
.cover__image {
position: relative;
overflow: hidden;
border-radius: var(--radius-medium);
aspect-ratio: 740/440;
}
.cover__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cover.--is-full {
padding-top: 1.875rem;
}
.cover.--is-full .cover__grid {
grid-template-columns: 1fr;
padding: 0 1.25rem;
}
.cover.--is-full .cover__image {
aspect-ratio: 1410/485;
}
@media (max-width: 600px) {
.cover.--is-full .cover__image {
aspect-ratio: 960/600;
}
}
.archive-shops {
color: var(--secondary);
background-color: var(--dark);
}
.archive-shops__intro {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2.8125rem;
align-items: end;
}
@media (max-width: 1023px) {
.archive-shops__intro {
grid-template-columns: 1fr 1fr;
align-items: start;
}
}
@media (max-width: 600px) {
.archive-shops__intro {
grid-template-columns: 1fr;
gap: 1.875rem;
}
}
.archive-shops__title {
position: relative;
}
.archive-shops__title:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.archive-shops__title.--is-visible:after {
transform: scaleX(1);
}
.archive-shops__title:after {
background-color: var(--secondary);
}
@media (max-width: 1023px) {
.archive-shops__title {
grid-column: 1/-1;
}
}
@media (min-width: 601px) {
.archive-shops__subtitle, .archive-shops__paragraph {
margin-bottom: 1.875rem;
}
}
.archive-shops__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(2.8125rem, 8%, 6.25rem);
row-gap: 5.625rem;
max-width: 75rem;
margin: 7.5rem auto 0 auto;
}
@media (max-width: 1200px) {
.archive-shops__grid {
gap: 2.8125rem;
row-gap: 3.75rem;
}
}
@media (max-width: 1023px) {
.archive-shops__grid {
grid-template-columns: repeat(2, 1fr);
margin-top: 6.25rem;
}
}
@media (max-width: 600px) {
.archive-shops__grid {
grid-template-columns: repeat(1, 1fr);
margin-top: 5rem;
}
}
.content-shop {
position: relative;
padding-top: 1.875rem;
}
.content-shop__grid {
display: grid;
grid-template-columns: 1fr 1fr;
padding-top: 3.75rem;
}
@media (max-width: 1023px) {
.content-shop__grid {
grid-template-columns: 1fr;
padding-top: 0;
}
}
.content-shop__infos {
position: relative;
}
.content-shop__infos:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.content-shop__infos.--is-visible:after {
transform: scaleX(1);
}
.content-shop__infos:after {
right: 0;
left: auto;
width: 0.0625rem;
height: 100%;
transform: scale(1, 0);
transform-origin: top left;
}
@media (max-width: 1023px) {
.content-shop__infos:after {
content: none;
}
}
.content-shop__infos.--is-visible:after {
transform: scale(1, 1);
}
.content-shop__info {
position: relative;
padding: 1.625rem 3.125rem 1.625rem 0;
}
.content-shop__info:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.content-shop__info.--is-visible:before {
transform: scaleX(1);
}
.content-shop__info__title {
margin-bottom: 0.625rem;
}
.content-shop__info__inner {
margin-bottom: 0;
}
.content-shop__info:last-child {
position: relative;
}
.content-shop__info:last-child:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.content-shop__info:last-child.--is-visible:after {
transform: scaleX(1);
}
.content-shop__info:last-child:before {
content: none;
}
@media (max-width: 1200px) {
.content-shop__info {
padding: 1.625rem 1.875rem 1.625rem 0;
}
}
.content-shop__image {
padding: 0 3.125rem 2.5rem 0;
}
.content-shop__image:before {
content: none;
}
.content-shop__image__inner {
position: relative;
overflow: hidden;
border-top-right-radius: var(--radius-big);
border-bottom-right-radius: var(--radius-big);
border-bottom-left-radius: var(--radius-big);
aspect-ratio: 630/540;
}
.content-shop__image__inner img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 1200px) {
.content-shop__image {
padding: 0 1.875rem 2.5rem 0;
}
}
@media (max-width: 1023px) {
.content-shop__image {
padding: 0 0 2.5rem 0;
}
}
.content-shop__email {
display: flex;
align-items: center;
width: 100%;
margin-bottom: 0;
padding: 1.375rem 1.25rem;
color: var(--white);
background-color: var(--primary);
gap: var(--gap);
}
.content-shop__email img {
transform: translateY(-7.5%);
}
.content-shop__body {
position: relative;
display: flex;
flex-direction: column;
margin-top: 5.625rem;
}
.content-shop__body:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.content-shop__body.--is-visible:before {
transform: scaleX(1);
}
.content-shop__body__inner {
position: relative;
padding: 3.125rem;
}
.content-shop__body__inner:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.content-shop__body__inner.--is-visible:after {
transform: scaleX(1);
}
@media (max-width: 1200px) {
.content-shop__body__inner {
padding: 1.875rem;
}
}
@media (max-width: 1023px) {
.content-shop__body__inner {
padding: 1.875rem 0;
}
}
@media (max-width: 1023px) {
.content-shop__body {
margin-top: 0;
}
.content-shop__body:before {
content: none;
}
}
.content-shop__subtitle {
position: relative;
margin-bottom: 1.875rem;
padding-bottom: 0.9375rem;
}
.content-shop__subtitle:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.content-shop__subtitle.--is-visible:after {
transform: scaleX(1);
}
.content-shop__contact {
display: block;
color: var(--secondary);
background-color: var(--black);
}
.content-shop__contact p {
margin-bottom: 0;
padding: 2.5rem 3.125rem;
font-weight: bold;
}
@media (max-width: 1200px) {
.content-shop__contact p {
padding: 1.875rem 2.5rem;
}
}
@media (max-width: 600px) {
.content-shop__contact p {
padding: 1.25rem 1.25rem;
}
}
.content-shop__stories {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.content-shop__story {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
width: 6rem;
}
.content-shop__story div {
overflow: hidden;
border: solid 0.125rem var(--primary);
border-radius: var(--radius-big);
aspect-ratio: 1/1;
}
.content-shop__story div img {
width: 100%;
height: 100%;
object-fit: cover;
}
.content-shop__story p {
font-weight: bold;
}
.archive-posts {
padding-top: 2.5rem;
}
.archive-posts__ontitle, .archive-posts__title {
text-align: center;
}
.archive-posts__paragraph {
max-width: 32.5rem;
}
.archive-posts__filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 3.75rem;
gap: 1.875rem;
row-gap: 1.5625rem;
}
@media (max-width: 767px) {
.archive-posts__filters {
gap: 1.25rem;
}
}
.archive-posts__filter {
margin-bottom: 1rem;
font-size: 1.625rem;
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.02em;
display: block;
margin-bottom: 0;
padding: 0.75rem 1.375rem 0.75rem 1.375rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
border: solid 0.0625rem var(--black);
border-radius: 2rem;
transition: all 200ms;
color: var(--black);
background-color: var(--primary);
}
@media (max-width: 1023px) {
.archive-posts__filter {
font-size: 1.375rem;
}
}
@media (max-width: 600px) {
.archive-posts__filter {
font-size: clamp(1rem, 5vw, 1.25rem);
}
}
.archive-posts__filter[active] {
color: var(--primary);
background-color: var(--black);
}
@media (min-width: 1025px) {
.archive-posts__filter:hover {
background-color: var(--secondary);
}
}
.archive-posts__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.8125rem;
margin-top: 7.5rem;
}
@media (min-width: 1201px) {
.archive-posts__grid.realisation {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1200px) {
.archive-posts__grid {
grid-template-columns: repeat(2, 1fr);
margin-top: 5rem;
}
}
@media (max-width: 1023px) {
.archive-posts__grid {
gap: 1.25rem;
}
}
@media (max-width: 767px) {
.archive-posts__grid {
grid-template-columns: 1fr;
margin-top: 3.75rem;
}
}
.archive-posts__pagination {
display: flex;
justify-content: center;
margin-top: 3.75rem;
}
.archive-posts .no-results {
grid-column: 1/-1;
text-align: center;
}
@media (min-width: 768px) {
.archive-posts .card-post:nth-child(1) {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column: 1/-1;
}
.archive-posts .card-post:nth-child(1) .card-post__image {
max-width: 100%;
min-height: 100%;
border-top-left-radius: var(--radius-medium);
border-top-right-radius: 0;
border-bottom-left-radius: var(--radius-medium);
aspect-ratio: 1/0.65;
}
.archive-posts .card-post:nth-child(1) .card-post__inner {
display: flex;
flex-direction: column;
align-self: end;
justify-content: center;
min-height: 100%;
border-top: solid 0.0625rem var(--black);
border-left: none;
border-top-right-radius: var(--radius-medium);
border-bottom-left-radius: 0;
}
}
@media (min-width: 768px) and (min-width: 1024px) {
.archive-posts .card-post:nth-child(1) .card-post__inner {
padding-inline: 2.5rem;
}
}
@media (min-width: 768px) {
.archive-posts .card-post:nth-child(1) .card-post__title {
margin-bottom: 1.25rem;
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
font-weight: bold;
}
.archive-posts .card-post:nth-child(1) .card-post__title b {
font-weight: 600;
}
}
@media (min-width: 768px) and (max-width: 1200px) {
.archive-posts .card-post:nth-child(1) .card-post__title {
font-size: 2.125rem;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.archive-posts .card-post:nth-child(1) .card-post__title {
font-size: 2rem;
}
}
@media (min-width: 768px) and (max-width: 600px) {
.archive-posts .card-post:nth-child(1) .card-post__title {
font-size: clamp(1.625rem, 8.5vw, 1.875rem);
}
}
.page-template-realisations .archive-posts__ontitle, .page-template-realisations .archive-posts__title {
text-align: left;
}
.cross {
position: relative;
z-index: 2;
}
.cross:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.cross.--is-visible:before {
transform: scaleX(1);
}
.cross__slider {
padding-bottom: 0.625rem;
}
@media (min-width: 2400px) {
.cross__slider {
position: relative;
width: 100%;
max-width: 120rem;
margin: 0 auto;
}
}
@media (min-width: 2400px) and (max-width: 1200px) {
.cross__slider {
width: 100%;
padding: 0 1.25rem;
}
}
.cross .card-post {
width: 40%;
max-width: 37.5rem;
margin-right: 1.875rem;
}
@media (max-width: 1200px) {
.cross .card-post {
width: 45%;
}
}
@media (max-width: 1023px) {
.cross .card-post {
width: 52.5%;
}
}
@media (max-width: 767px) {
.cross .card-post {
width: 60%;
}
}
@media (max-width: 600px) {
.cross .card-post {
width: 80%;
}
}
@media (max-width: 450px) {
.cross .card-post {
width: calc(100% - 1.25rem);
}
}
.cross__controls {
display: flex;
align-items: center;
justify-content: end;
margin-top: 2.5rem;
}
@media (max-width: 767px) {
.cross__controls {
margin-top: 0;
}
}
.cross__prev, .cross__next {
padding: 0.625rem;
}
.cross__prev {
cursor: pointer;
transform: rotate(180deg);
}
.three-cols__grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2.8125rem;
}
@media (max-width: 1200px) {
.three-cols__grid {
gap: 1.875rem;
}
}
@media (max-width: 1023px) {
.three-cols__grid {
grid-template-columns: 1fr;
}
}
@media (min-width: 1024px) {
.two-cols__wrapper {
padding-left: 15%;
}
}
.two-cols__image {
position: relative;
overflow: hidden;
border-radius: var(--radius-medium);
aspect-ratio: 1060/365;
}
.two-cols__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 600px) {
.two-cols__image {
aspect-ratio: 960/600;
}
}
.two-cols__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.8125rem;
margin-top: 3.125rem;
}
@media (max-width: 1023px) {
.two-cols__grid {
gap: 1.875rem;
}
}
@media (max-width: 1023px) and (min-width: 768px) {
.two-cols__grid {
font-size: 0.875rem;
}
}
@media (max-width: 767px) {
.two-cols__grid {
grid-template-columns: 1fr;
}
}
.gallery__slider {
margin-top: 1.875rem;
padding-bottom: 0.625rem;
}
@media (min-width: 2400px) {
.gallery__slider {
position: relative;
width: 100%;
max-width: 120rem;
margin: 0 auto;
}
}
@media (min-width: 2400px) and (max-width: 1200px) {
.gallery__slider {
width: 100%;
padding: 0 1.25rem;
}
}
.gallery__item {
width: 28.5%;
margin-right: 1.875rem;
}
@media (max-width: 1200px) {
.gallery__item {
width: 35%;
}
}
@media (max-width: 1023px) {
.gallery__item {
width: 42.5%;
}
}
@media (max-width: 767px) {
.gallery__item {
width: 50%;
}
}
@media (max-width: 600px) {
.gallery__item {
width: 65%;
}
}
@media (max-width: 450px) {
.gallery__item {
width: 80%;
}
}
.gallery__image {
position: relative;
aspect-ratio: 360/490;
overflow: hidden;
border-radius: var(--radius-small);
}
.gallery__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery__controls {
display: flex;
align-items: center;
justify-content: end;
margin-top: 2.5rem;
}
@media (max-width: 767px) {
.gallery__controls {
margin-top: 1.25rem;
}
}
.gallery__prev, .gallery__next {
padding: 0.625rem;
}
.gallery__prev {
cursor: pointer;
transform: rotate(180deg);
}
.content-center__inner {
max-width: 60rem;
margin: 0 auto;
text-align: center;
}
.contact {
margin-top: -0.9375rem;
}
.contact__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.875rem, 5%, 5.625rem);
}
@media (max-width: 900px) {
.contact__grid {
grid-template-columns: 0.7fr 1fr;
}
}
@media (max-width: 767px) {
.contact__grid {
grid-template-columns: 1fr;
gap: 2.8125rem;
}
}
@media (max-width: 767px) {
.contact__image {
order: 2;
}
}
@media (min-width: 768px) {
.contact__body {
max-width: 31.25rem;
}
}
.contact__form br {
display: none;
}
.contact .input__row {
margin-top: 1.875rem;
}
.contact input,
.contact textarea,
.contact select {
width: 100%;
padding: 0.75rem 0;
font-family: var(--font-paragraph);
font-size: 1rem;
color: var(--dark);
resize: none;
border-bottom: solid 0.0625rem var(--dark);
}
.contact input::placeholder,
.contact textarea::placeholder,
.contact select::placeholder {
color: var(--dark);
opacity: 0.6;
}
.contact select {
position: relative;
background-image: url(https://www.interieurs-prives.com/wp-content/themes/ip/dist/images/arrow-link-black.svg);
background-repeat: no-repeat;
background-position: center right;
background-size: 0.75rem;
}
.contact .wpcf7-not-valid-tip {
margin-top: 0.625rem;
font-size: 0.875rem;
}
.contact .wpcf7 form.invalid .wpcf7-response-output {
padding: 0;
font-size: 0.9375rem;
font-weight: bold;
border: none;
margin-inline: 0;
}
.contact button {
margin-top: 1.25rem;
}
.contact__gdpr {
margin-top: 1.875rem;
font-size: 0.6875rem;
opacity: 0.7;
}
.newsletter {
position: relative;
z-index: 2;
padding: 3.75rem 0;
}
.newsletter:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.0625rem;
background-color: var(--black);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 900ms;
}
.newsletter.--is-visible:before {
transform: scaleX(1);
}
.newsletter__grid {
display: grid;
grid-template-columns: 1.5fr 3fr;
gap: 2.8125rem;
}
@media (max-width: 1200px) {
.newsletter__grid {
grid-template-columns: 1fr 3fr;
}
}
@media (max-width: 1023px) {
.newsletter__grid {
grid-template-columns: 1fr;
gap: 0;
}
}
.newsletter .form__wrapper {
display: flex;
align-items: center;
justify-content: space-between;
overflow: hidden;
border: solid 0.0625rem var(--dark);
border-radius: var(--radius-medium);
}
@media (max-width: 767px) {
.newsletter .form__wrapper {
display: grid;
grid-template-columns: 1fr;
}
}
.newsletter input {
font-size: 1.25rem;
font-weight: 600;
line-height: 1.2;
width: 100%;
margin-bottom: 0;
padding: 1.25rem 2.5rem;
font-weight: normal;
color: var(--black);
}
@media (max-width: 767px) {
.newsletter input {
text-align: center;
}
}
.newsletter button {
font-size: 1.25rem;
font-weight: 600;
line-height: 1.2;
margin-bottom: 0;
padding: 1.25rem 2.5rem;
color: var(--black);
cursor: pointer;
background-color: var(--primary);
}
@media (max-width: 767px) {
.newsletter button {
width: 100%;
}
}
.newsletter__gdpr {
margin-top: 1.875rem;
font-size: 0.6875rem;
}
.newsletter .wpcf7-not-valid-tip {
display: none;
}
.newsletter .wpcf7 form.invalid .wpcf7-response-output {
padding: 0;
font-size: 0.9375rem;
font-weight: bold;
border: none;
margin-inline: 0;
}
.intro-single__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3.125rem;
}
@media (max-width: 767px) {
.intro-single__grid {
grid-template-columns: 1fr;
}
}
.intro-single__body {
max-width: 37.5rem;
}
.intro-single__image {
position: relative;
overflow: hidden;
border-bottom-right-radius: var(--radius-big);
aspect-ratio: 86/54;
}
.intro-single__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.single-solution-custom .intro-single {
background-color: var(--primary);
}
.section1 {
position: relative;
}
.section1:before {
content: "";
z-index: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70%;
background-color: var(--primary);
border-top-left-radius: var(--radius-medium);
}
.section1__title {
max-width: 31.25rem;
}
.section1__paragraph {
max-width: 62.5rem;
}
.section1__image {
position: relative;
margin-top: 3.75rem;
overflow: hidden;
border-bottom-left-radius: var(--radius-big);
aspect-ratio: 1670/620;
}
.section1__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.section2__grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 7.5rem;
}
@media (max-width: 1023px) {
.section2__grid {
gap: 3.75rem;
}
}
@media (max-width: 767px) {
.section2__grid {
grid-template-columns: 1fr;
}
}
.section2__body {
max-width: 40.625rem;
}
.section2__gallery {
position: relative;
height: max-content;
overflow: hidden;
border-radius: var(--radius-medium);
}
@media (max-width: 767px) {
.section2__gallery {
margin-top: 0;
}
}
.section2__image {
width: 100%;
aspect-ratio: 680/770;
}
.section2__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.section2__item {
margin-bottom: 5.625rem;
}
.section2__item:last-child {
margin-bottom: 0;
}
.section2__controls {
position: absolute;
top: 50%;
right: 0;
}
.section2__link {
margin-top: 1.875rem;
}
.section3__title {
margin-bottom: 2.8125rem;
}
.section3__image {
width: 22%;
margin-right: 1.875rem;
overflow: hidden;
border-radius: var(--radius-medium);
aspect-ratio: 1/1;
}
.section3__image img {
object-fit: cover;
width: 100%;
height: 100%;
}
@media (max-width: 767px) {
.section3__image {
width: 35%;
}
}
@media (max-width: 600px) {
.section3__image {
width: 42%;
}
}
@media (max-width: 450px) {
.section3__image {
width: 55%;
}
}
.section3 .flickity-page-dots {
position: unset;
margin-top: 2.5rem;
}
.section3 .flickity-page-dot {
border: none;
outline: none;
box-shadow: none;
}
.section3 .flickity-page-dot:focus {
border: none;
outline: none;
}
.section3__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-top: 2.5rem;
gap: 2.8125rem;
}
.section3__controls {
display: flex;
align-items: center;
gap: var(--gap);
}
.section3 .slider__next {
transform: rotate(180deg);
}
.section4 {
position: relative;
padding-bottom: 0;
}
.section4__grid {
z-index: 2;
position: relative;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 5.625rem;
}
.section4__grid--last {
margin-top: 10rem;
}
.section4__grid--last .section4__left {
margin-top: -5rem;
}
.section4__grid--last .section4__right {
position: relative;
padding: 5.625rem 0;
}
.section4__grid--last .section4__right:after {
content: "";
z-index: -1;
position: absolute;
top: 0;
left: -100vw;
width: 300vw;
height: 100%;
background-color: var(--primary);
}
@media (max-width: 767px) {
.section4__grid--last .section4__right:after {
content: none;
}
}
@media (max-width: 1200px) {
.section4__grid {
gap: 3.75rem;
}
}
@media (max-width: 767px) {
.section4__grid {
grid-template-columns: 1fr;
}
}
.section4__image {
overflow: hidden;
border-top-right-radius: var(--radius-medium);
}
.section4__paragraph2 {
margin-top: 13.75rem;
}
@media (max-width: 767px) {
.section4__paragraph2 {
margin-top: 2.5rem;
}
}
.section5__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3.75rem;
}
@media (max-width: 767px) {
.section5__grid {
grid-template-columns: 1fr;
gap: 2.8125rem;
}
}
.section5__body {
max-width: 28.75rem;
}
.section5__medias {
position: relative;
aspect-ratio: 1/1;
user-select: none;
}
.section5__media {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.section5__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.section5__media--after {
clip-path: inset(0 50% 0 0);
}
.section5__handle {
z-index: 5;
position: absolute;
top: 0;
left: 50%;
width: 0.75rem;
height: 100%;
cursor: ew-resize;
background: var(--primary);
transform: translateX(-50%);
}
.section5__handle:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 3.75rem;
height: 3.75rem;
background-image: url(https://www.interieurs-prives.com/wp-content/themes/ip/dist/images/handle.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transform: translate(-50%, -50%);
}
.section6 {
background-color: var(--primary);
}
.section6__intro {
max-width: 40.625rem;
}
.section6__wrapper {
margin-top: 2.8125rem;
}
.section6__item {
width: 35%;
margin-right: var(--gap);
}
.section6__item__thumb {
position: relative;
margin-bottom: 1.25rem;
overflow: hidden;
border-bottom-right-radius: var(--radius-medium);
aspect-ratio: 1/1;
}
.section6__item__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 1024px) {
.section6__item {
width: 40%;
}
}
@media (max-width: 900px) {
.section6__item {
width: 55%;
}
}
@media (max-width: 600px) {
.section6__item {
width: 75%;
}
}
.section6__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-top: 2.5rem;
gap: 2.8125rem;
}
.section6__controls {
display: flex;
align-items: center;
gap: var(--gap);
}
.section6 .slider__next {
transform: rotate(180deg);
}
.section8__grid {
display: grid;
grid-template-columns: 0.85fr 1fr;
gap: 2.8125rem;
}
@media (max-width: 900px) {
.section8__grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px) {
.section8__grid {
grid-template-columns: 1fr;
}
}
.section8__ontitle {
color: var(--primary);
}
.section8__body {
max-width: 32.5rem;
}
.section8__content {
position: relative;
padding-left: 4.375rem;
}
.section8__content:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 3.125rem;
height: 3.125rem;
background-image: url(https://www.interieurs-prives.com/wp-content/themes/ip/dist/images/quote.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.section8__media {
position: relative;
overflow: hidden;
border-bottom-left-radius: var(--radius-big);
}
@media (min-width: 768px) {
.section8__media {
height: 100%;
}
.section8__media img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.section9 {
background-color: var(--light-grey);
}
.section9__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.8125rem;
align-items: center;
}
@media (max-width: 767px) {
.section9__grid {
grid-template-columns: 1fr;
}
}
.section9__body {
max-width: 28.75rem;
}
.section10 {
border-bottom: solid 0.0625rem var(--black);
}
.section10__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.8125rem;
}
@media (max-width: 767px) {
.section10__grid {
grid-template-columns: 1fr;
}
}
.section10__content {
max-width: 41.25rem;
}
.section11__slider {
margin-top: 2.8125rem;
}
.section11 .card-post {
width: clamp(35%, 31.25rem, 85%);
margin-right: 1.875rem;
}
.section11__controls {
display: flex;
align-items: center;
gap: var(--gap);
margin-top: 2.5rem;
}
.section11 .slider__next {
transform: rotate(180deg);
}
.appointment {
margin-top: -0.9375rem;
}
.appointment__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.875rem, 5%, 5.625rem);
}
@media (max-width: 767px) {
.appointment__grid {
grid-template-columns: 1fr;
gap: 2.8125rem;
}
}
.appointment__infos {
height: max-content;
padding: 3.125rem 2.5rem;
background-color: var(--primary);
border-top-left-radius: var(--radius-medium);
border-bottom-right-radius: var(--radius-medium);
border-bottom-left-radius: var(--radius-medium);
}
.appointment__infos__shop {
display: none;
}
.appointment__infos__shop.--is-active {
display: block;
}
.appointment__infos__inner {
display: grid;
grid-template-columns: 1fr;
margin-top: 1.875rem;
gap: 1.25rem;
}
@media (max-width: 1024px) {
.appointment__infos {
padding: 1.875rem 1.5rem;
}
}
@media (max-width: 767px) {
.appointment__infos {
order: 2;
}
}
.appointment__info.h3 {
margin-bottom: 0;
}
.appointment__image {
position: relative;
overflow: hidden;
border-top-right-radius: var(--radius-medium);
border-bottom-right-radius: var(--radius-medium);
border-bottom-left-radius: var(--radius-medium);
aspect-ratio: 16/9;
}
.appointment__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (min-width: 768px) {
.appointment__body {
max-width: 31.25rem;
}
}
.appointment__form br {
display: none;
}
.appointment .input__row {
margin-top: 1.875rem;
}
.appointment input,
.appointment textarea,
.appointment select {
width: 100%;
padding: 0.75rem 0;
font-family: var(--font-paragraph);
font-size: 1rem;
color: var(--dark);
resize: none;
border-bottom: solid 0.0625rem var(--dark);
}
.appointment input::placeholder,
.appointment textarea::placeholder,
.appointment select::placeholder {
color: var(--dark);
opacity: 0.6;
}
.appointment select {
position: relative;
background-image: url(https://www.interieurs-prives.com/wp-content/themes/ip/dist/images/arrow-link-black.svg);
background-repeat: no-repeat;
background-position: center right;
background-size: 0.75rem;
}
.appointment .wpcf7-not-valid-tip {
margin-top: 0.625rem;
font-size: 0.875rem;
}
.appointment .wpcf7 form.invalid .wpcf7-response-output {
padding: 0;
font-size: 0.9375rem;
font-weight: bold;
border: none;
margin-inline: 0;
}
.appointment button {
margin-top: 1.25rem;
}
.appointment__gdpr {
margin-top: 1.875rem;
font-size: 0.6875rem;
opacity: 0.7;
}
.stories__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5625rem;
margin-top: 2.5rem;
}
@media (max-width: 1024px) {
.stories__grid {
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
}
@media (max-width: 600px) {
.stories__grid {
grid-template-columns: repeat(2, 1fr);
}
}
.stories__item {
position: relative;
overflow: hidden;
border-radius: 1.25rem;
}
.stories__item:before {
content: "";
z-index: 2;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
}
.stories__item:after {
content: "";
z-index: 2;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://www.interieurs-prives.com/wp-content/themes/ip/dist/images/play.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 15%;
}
.stories__item div {
position: relative;
aspect-ratio: 295/525;
}
.stories__item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.stories__item p {
z-index: 3;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 0.375rem 1.875rem;
color: var(--white);
}
@media (max-width: 767px) {
.stories__item p {
padding: 0 1.25rem;
}
}
@media (max-width: 600px) {
.stories__item p {
font-size: 1.125rem;
}
}