html,body{margin:0;padding:0;}

/* Le bloc comprend déjà son propre en-tête et son propre pied de page. */

html {
scroll-behavior: smooth;
}
body.mi-menu-open {
overflow: hidden;
}
#most-interiors {
--mi-black: #0B0909;
--mi-pine: #2E4540;
--mi-teal: #408175;
--mi-lilac: #B5B9F0;
--mi-white: #FFFFFF;
--mi-paper: #F7F8FD;
--mi-line: rgba(11, 9, 9, 0.14);
--mi-shadow: 0 24px 80px rgba(11, 9, 9, 0.12);
position: relative;
width: 100%;
overflow: clip;
color: var(--mi-black);
background: var(--mi-white);
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
#most-interiors *,
#most-interiors *::before,
#most-interiors *::after {
box-sizing: border-box;
}
#most-interiors a {
color: inherit;
text-decoration: none;
}
#most-interiors button,
#most-interiors input,
#most-interiors select,
#most-interiors textarea {
color: inherit;
font: inherit;
}
#most-interiors button {
border: 0;
}
#most-interiors img {
display: block;
width: 100%;
}
#most-interiors h1,
#most-interiors h2,
#most-interiors h3,
#most-interiors p {
margin-top: 0;
}
#most-interiors section[id],
#most-interiors footer[id] {
scroll-margin-top: 92px;
}
#most-interiors .mi-wrap {
width: min(1220px, calc(100% - 64px));
margin: 0 auto;
}
#most-interiors .mi-kicker {
display: inline-flex;
align-items: center;
gap: 12px;
margin: 0 0 22px;
color: var(--mi-teal);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
line-height: 1.3;
text-transform: uppercase;
}
#most-interiors .mi-kicker::before {
width: 34px;
height: 2px;
background: currentColor;
content: "";
}
#most-interiors .mi-kicker--light {
color: var(--mi-lilac);
}
#most-interiors .mi-title {
max-width: 900px;
margin-bottom: 26px;
font-size: clamp(40px, 5vw, 72px);
font-weight: 500;
letter-spacing: -0.055em;
line-height: 0.98;
}
#most-interiors .mi-lead {
max-width: 700px;
margin-bottom: 0;
color: rgba(11, 9, 9, 0.68);
font-size: clamp(18px, 2vw, 21px);
line-height: 1.65;
}
#most-interiors .mi-btn {
display: inline-flex;
min-height: 54px;
align-items: center;
justify-content: center;
gap: 12px;
padding: 14px 24px;
border: 1px solid transparent;
border-radius: 999px;
background: var(--mi-teal);
color: var(--mi-white);
cursor: pointer;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.035em;
line-height: 1.2;
transition: background 180ms ease, color 180ms ease, border-color 180ms ease,
transform 180ms ease;
}
#most-interiors .mi-btn:hover {
background: var(--mi-pine);
transform: translateY(-2px);
}
#most-interiors .mi-btn:focus-visible,
#most-interiors a:focus-visible,
#most-interiors button:focus-visible,
#most-interiors input:focus-visible,
#most-interiors select:focus-visible,
#most-interiors textarea:focus-visible {
outline: 3px solid var(--mi-lilac);
outline-offset: 4px;
}
#most-interiors .mi-btn--light {
background: var(--mi-lilac);
color: var(--mi-black);
}
#most-interiors .mi-btn--light:hover {
background: var(--mi-white);
color: var(--mi-black);
}
#most-interiors .mi-btn--outline {
border-color: rgba(255, 255, 255, 0.48);
background: transparent;
color: var(--mi-white);
}
#most-interiors .mi-btn--outline:hover {
border-color: var(--mi-lilac);
background: var(--mi-lilac);
color: var(--mi-black);
}
#most-interiors .mi-arrow {
display: inline-block;
font-size: 18px;
line-height: 1;
transition: transform 180ms ease;
}
#most-interiors a:hover .mi-arrow,
#most-interiors button:hover .mi-arrow {
transform: translateX(4px);
}
/* En-tête */
#most-interiors .mi-header {
position: fixed;
z-index: 9990;
top: 0;
right: 0;
left: 0;
height: 84px;
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
color: var(--mi-white);
transition: height 200ms ease, background 200ms ease, border-color 200ms ease,
box-shadow 200ms ease;
}
#most-interiors .mi-header.is-scrolled,
#most-interiors .mi-header.is-open {
height: 74px;
border-color: rgba(181, 185, 240, 0.2);
background: rgba(11, 9, 9, 0.96);
box-shadow: 0 12px 40px rgba(11, 9, 9, 0.18);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
#most-interiors .mi-header__inner {
display: flex;
height: 100%;
align-items: center;
justify-content: space-between;
gap: 30px;
}
#most-interiors .mi-brand {
display: inline-flex;
width: 190px;
height: 58px;
min-width: 190px;
align-items: center;
line-height: 1;
}
#most-interiors .mi-brand__logo {
display: block;
width: 190px;
height: 58px;
overflow: hidden;
flex: 0 0 190px;
}
#most-interiors .mi-brand__logo img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
background: transparent;
}
#most-interiors .mi-nav {
display: flex;
align-items: center;
gap: clamp(18px, 2.1vw, 34px);
font-size: 13px;
font-weight: 600;
}
#most-interiors .mi-nav > a:not(.mi-btn) {
position: relative;
padding: 8px 0;
}
#most-interiors .mi-nav > a:not(.mi-btn)::after {
position: absolute;
right: 0;
bottom: 2px;
left: 0;
height: 2px;
background: var(--mi-lilac);
content: "";
transform: scaleX(0);
transform-origin: right;
transition: transform 180ms ease;
}
#most-interiors .mi-nav > a:not(.mi-btn):hover::after {
transform: scaleX(1);
transform-origin: left;
}
#most-interiors .mi-header .mi-btn {
min-height: 44px;
padding: 11px 18px;
}
#most-interiors .mi-language {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 3px;
border: 1px solid rgba(255, 255, 255, 0.32);
border-radius: 999px;
background: rgba(11, 9, 9, 0.18);
}
#most-interiors .mi-language a {
display: inline-flex;
width: 38px;
height: 32px;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1;
transition: background 180ms ease, color 180ms ease;
}
#most-interiors .mi-language a:hover,
#most-interiors .mi-language a.is-active {
background: var(--mi-white);
color: var(--mi-black);
}
#most-interiors .mi-menu-toggle {
display: none;
width: 46px;
height: 46px;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 50%;
background: transparent;
color: var(--mi-white);
cursor: pointer;
}
#most-interiors .mi-menu-toggle span,
#most-interiors .mi-menu-toggle span::before,
#most-interiors .mi-menu-toggle span::after {
display: block;
width: 19px;
height: 2px;
background: currentColor;
content: "";
transition: transform 180ms ease, opacity 180ms ease;
}
#most-interiors .mi-menu-toggle span {
position: relative;
}
#most-interiors .mi-menu-toggle span::before {
position: absolute;
top: -6px;
}
#most-interiors .mi-menu-toggle span::after {
position: absolute;
top: 6px;
}
#most-interiors .mi-menu-toggle[aria-expanded="true"] span {
background: transparent;
}
#most-interiors .mi-menu-toggle[aria-expanded="true"] span::before {
top: 0;
transform: rotate(45deg);
}
#most-interiors .mi-menu-toggle[aria-expanded="true"] span::after {
top: 0;
transform: rotate(-45deg);
}
/* Bannière principale */
#most-interiors .mi-hero {
position: relative;
min-height: 800px;
color: var(--mi-white);
background:
linear-gradient(90deg, rgba(11, 9, 9, 0.9) 0%, rgba(11, 9, 9, 0.68) 48%, rgba(46, 69, 64, 0.32) 100%),
url("/assets/photo-1541888946425-d81bb19240f5.jpg")
center 48% / cover no-repeat;
}
#most-interiors .mi-hero::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 180px;
background: linear-gradient(0deg, rgba(11, 9, 9, 0.48), transparent);
content: "";
pointer-events: none;
}
#most-interiors .mi-hero__inner {
position: relative;
z-index: 1;
display: grid;
min-height: 800px;
align-items: end;
gap: 60px;
grid-template-columns: minmax(0, 1fr) 300px;
padding-top: 180px;
padding-bottom: 76px;
}
#most-interiors .mi-hero__copy {
max-width: 830px;
}
#most-interiors .mi-hero .mi-kicker {
color: var(--mi-lilac);
}
#most-interiors .mi-hero h1 {
max-width: 900px;
margin-bottom: 28px;
font-size: clamp(54px, 7vw, 104px);
font-weight: 500;
letter-spacing: -0.065em;
line-height: 0.91;
}
#most-interiors .mi-hero__text {
max-width: 650px;
margin-bottom: 34px;
color: rgba(255, 255, 255, 0.82);
font-size: clamp(18px, 2vw, 22px);
line-height: 1.6;
}
#most-interiors .mi-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
#most-interiors .mi-hero__note {
position: relative;
z-index: 1;
padding: 25px;
border: 1px solid rgba(181, 185, 240, 0.48);
border-radius: 22px;
background: rgba(11, 9, 9, 0.42);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
#most-interiors .mi-hero__note-top {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 30px;
color: var(--mi-lilac);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
}
#most-interiors .mi-hero__note-top::before {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--mi-teal);
box-shadow: 0 0 0 7px rgba(64, 129, 117, 0.24);
content: "";
}
#most-interiors .mi-hero__note strong {
display: block;
margin-bottom: 10px;
font-size: 25px;
font-weight: 600;
letter-spacing: -0.035em;
line-height: 1.15;
}
#most-interiors .mi-hero__note p {
margin-bottom: 0;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
}
/* Bande de promesse */
#most-interiors .mi-promise {
background: var(--mi-lilac);
}
#most-interiors .mi-promise__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
#most-interiors .mi-promise__item {
display: grid;
min-height: 132px;
align-items: center;
gap: 18px;
grid-template-columns: 44px 1fr;
padding: 26px 36px;
border-left: 1px solid rgba(11, 9, 9, 0.14);
}
#most-interiors .mi-promise__item:last-child {
border-right: 1px solid rgba(11, 9, 9, 0.14);
}
#most-interiors .mi-promise__num {
color: var(--mi-pine);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.1em;
}
#most-interiors .mi-promise__item strong {
display: block;
margin-bottom: 3px;
font-size: 16px;
line-height: 1.3;
}
#most-interiors .mi-promise__item span:last-child {
display: block;
color: rgba(11, 9, 9, 0.66);
font-size: 13px;
line-height: 1.4;
}
/* Introduction */
#most-interiors .mi-intro {
padding: 130px 0;
background: var(--mi-white);
}
#most-interiors .mi-intro__grid {
display: grid;
align-items: start;
gap: 80px;
grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}
#most-interiors .mi-intro__aside {
padding-top: 44px;
}
#most-interiors .mi-intro__aside p {
margin-bottom: 26px;
color: rgba(11, 9, 9, 0.68);
font-size: 19px;
}
#most-interiors .mi-text-link {
display: inline-flex;
align-items: center;
gap: 12px;
padding-bottom: 5px;
border-bottom: 2px solid var(--mi-teal);
color: var(--mi-pine);
font-size: 14px;
font-weight: 700;
}
/* Services */
#most-interiors .mi-services {
padding: 120px 0;
background: var(--mi-paper);
}
#most-interiors .mi-section-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 50px;
margin-bottom: 62px;
}
#most-interiors .mi-section-head .mi-title {
margin-bottom: 0;
}
#most-interiors .mi-section-head__copy {
max-width: 420px;
margin-bottom: 6px;
color: rgba(11, 9, 9, 0.64);
}
#most-interiors .mi-services__grid {
display: grid;
gap: 1px;
grid-template-columns: repeat(3, 1fr);
background: var(--mi-line);
border: 1px solid var(--mi-line);
}
#most-interiors .mi-service {
position: relative;
min-height: 330px;
padding: 38px;
overflow: hidden;
background: var(--mi-white);
transition: background 220ms ease, color 220ms ease, transform 220ms ease;
}
#most-interiors .mi-service::after {
position: absolute;
right: -50px;
bottom: -70px;
width: 170px;
height: 170px;
border: 34px solid var(--mi-lilac);
border-radius: 50%;
content: "";
opacity: 0;
transition: opacity 220ms ease, transform 220ms ease;
}
#most-interiors .mi-service:hover {
z-index: 1;
background: var(--mi-pine);
color: var(--mi-white);
transform: translateY(-6px);
}
#most-interiors .mi-service:hover::after {
opacity: 0.18;
transform: translate(-18px, -18px);
}
#most-interiors .mi-service__top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 72px;
}
#most-interiors .mi-service__num {
color: var(--mi-teal);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
}
#most-interiors .mi-service:hover .mi-service__num {
color: var(--mi-lilac);
}
#most-interiors .mi-service__icon {
display: grid;
width: 48px;
height: 48px;
place-items: center;
border-radius: 50%;
background: rgba(181, 185, 240, 0.45);
color: var(--mi-pine);
font-size: 20px;
font-weight: 700;
}
#most-interiors .mi-service:hover .mi-service__icon {
background: var(--mi-lilac);
color: var(--mi-black);
}
#most-interiors .mi-service h3 {
margin-bottom: 14px;
font-size: 24px;
font-weight: 600;
letter-spacing: -0.035em;
line-height: 1.12;
}
#most-interiors .mi-service p {
position: relative;
z-index: 1;
margin-bottom: 0;
color: rgba(11, 9, 9, 0.62);
font-size: 15px;
}
#most-interiors .mi-service:hover p {
color: rgba(255, 255, 255, 0.7);
}
/* Partenariat */
#most-interiors .mi-bridge {
position: relative;
overflow: hidden;
background: var(--mi-lilac);
}
#most-interiors .mi-bridge__grid {
display: grid;
min-height: 570px;
align-items: center;
gap: 70px;
grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
padding: 96px 0;
}
#most-interiors .mi-bridge .mi-kicker {
color: var(--mi-pine);
}
#most-interiors .mi-bridge__copy h2 {
max-width: 760px;
margin-bottom: 26px;
font-size: clamp(44px, 5.4vw, 78px);
font-weight: 500;
letter-spacing: -0.06em;
line-height: 0.95;
}
#most-interiors .mi-bridge__copy p {
max-width: 690px;
margin-bottom: 0;
color: rgba(11, 9, 9, 0.68);
font-size: 19px;
}
#most-interiors .mi-bridge__visual {
position: relative;
min-height: 360px;
}
#most-interiors .mi-bridge__circle {
position: absolute;
top: 50%;
left: 50%;
display: grid;
width: min(29vw, 350px);
height: min(29vw, 350px);
place-items: center;
border: 50px solid var(--mi-pine);
border-radius: 50%;
transform: translate(-50%, -50%);
}
#most-interiors .mi-bridge__circle::before {
position: absolute;
width: 115%;
height: 58%;
border-bottom: 34px solid var(--mi-teal);
border-radius: 0 0 999px 999px;
content: "";
transform: translateY(-11%);
}
#most-interiors .mi-bridge__circle span {
position: relative;
z-index: 1;
max-width: 140px;
text-align: center;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.13em;
line-height: 1.5;
text-transform: uppercase;
}
#most-interiors .mi-bridge__label {
position: absolute;
padding: 10px 16px;
border: 1px solid rgba(11, 9, 9, 0.18);
border-radius: 999px;
background: rgba(255, 255, 255, 0.36);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
#most-interiors .mi-bridge__label--a {
top: 17px;
left: 0;
}
#most-interiors .mi-bridge__label--b {
right: 0;
bottom: 18px;
}
/* Méthode */
#most-interiors .mi-method {
padding: 130px 0;
color: var(--mi-white);
background: var(--mi-pine);
}
#most-interiors .mi-method__intro {
display: grid;
align-items: end;
gap: 70px;
grid-template-columns: 1fr 0.7fr;
margin-bottom: 72px;
}
#most-interiors .mi-method .mi-title {
margin-bottom: 0;
}
#most-interiors .mi-method__intro p {
margin-bottom: 4px;
color: rgba(255, 255, 255, 0.67);
font-size: 18px;
}
#most-interiors .mi-method__steps {
border-top: 1px solid rgba(181, 185, 240, 0.28);
}
#most-interiors .mi-step {
display: grid;
align-items: center;
gap: 30px;
grid-template-columns: 80px minmax(230px, 0.75fr) 1fr;
padding: 30px 0;
border-bottom: 1px solid rgba(181, 185, 240, 0.28);
transition: padding 180ms ease, background 180ms ease;
}
#most-interiors .mi-step:hover {
padding-right: 20px;
padding-left: 20px;
background: rgba(11, 9, 9, 0.17);
}
#most-interiors .mi-step__num {
color: var(--mi-lilac);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.1em;
}
#most-interiors .mi-step h3 {
margin-bottom: 0;
font-size: 24px;
font-weight: 600;
letter-spacing: -0.035em;
line-height: 1.2;
}
#most-interiors .mi-step p {
margin-bottom: 0;
color: rgba(255, 255, 255, 0.64);
font-size: 15px;
}
/* Espaces */
#most-interiors .mi-spaces {
padding: 130px 0;
background: var(--mi-white);
}
#most-interiors .mi-spaces__grid {
display: grid;
gap: 18px;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 350px 290px;
}
#most-interiors .mi-space {
position: relative;
overflow: hidden;
color: var(--mi-white);
}
#most-interiors .mi-space:nth-child(1) {
grid-column: span 7;
}
#most-interiors .mi-space:nth-child(2) {
grid-column: span 5;
}
#most-interiors .mi-space:nth-child(3) {
grid-column: span 4;
}
#most-interiors .mi-space:nth-child(4) {
grid-column: span 8;
}
#most-interiors .mi-space::after {
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(11, 9, 9, 0.82), transparent 68%);
content: "";
}
#most-interiors .mi-space img {
height: 100%;
object-fit: cover;
transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
#most-interiors .mi-space:hover img {
transform: scale(1.045);
}
#most-interiors .mi-space__caption {
position: absolute;
z-index: 1;
right: 28px;
bottom: 25px;
left: 28px;
display: flex;
align-items: end;
justify-content: space-between;
gap: 20px;
}
#most-interiors .mi-space__caption h3 {
margin-bottom: 4px;
font-size: 25px;
font-weight: 600;
letter-spacing: -0.035em;
line-height: 1.15;
}
#most-interiors .mi-space__caption span {
color: rgba(255, 255, 255, 0.72);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
#most-interiors .mi-space__caption b {
display: grid;
width: 42px;
height: 42px;
flex: 0 0 42px;
place-items: center;
border-radius: 50%;
background: var(--mi-lilac);
color: var(--mi-black);
font-size: 19px;
}
/* Valeurs */
#most-interiors .mi-values {
padding: 120px 0;
background: var(--mi-paper);
}
#most-interiors .mi-values__grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(4, 1fr);
}
#most-interiors .mi-value {
min-height: 280px;
padding: 32px;
border-top: 4px solid var(--mi-teal);
background: var(--mi-white);
}
#most-interiors .mi-value:nth-child(even) {
border-top-color: var(--mi-lilac);
}
#most-interiors .mi-value__num {
display: block;
margin-bottom: 62px;
color: var(--mi-teal);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
}
#most-interiors .mi-value h3 {
margin-bottom: 13px;
font-size: 21px;
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.2;
}
#most-interiors .mi-value p {
margin-bottom: 0;
color: rgba(11, 9, 9, 0.62);
font-size: 14px;
}
/* FAQ */
#most-interiors .mi-faq {
padding: 130px 0;
background: var(--mi-white);
}
#most-interiors .mi-faq__grid {
display: grid;
align-items: start;
gap: 90px;
grid-template-columns: minmax(300px, 0.75fr) minmax(0, 1.25fr);
}
#most-interiors .mi-faq__intro {
position: sticky;
top: 120px;
}
#most-interiors .mi-faq__intro .mi-title {
margin-bottom: 24px;
}
#most-interiors .mi-faq__intro p {
max-width: 450px;
color: rgba(11, 9, 9, 0.62);
}
#most-interiors .mi-faq__list {
border-top: 1px solid var(--mi-line);
}
#most-interiors .mi-faq__item {
border-bottom: 1px solid var(--mi-line);
}
#most-interiors .mi-faq__question {
display: grid;
width: 100%;
align-items: center;
gap: 24px;
grid-template-columns: 1fr 42px;
padding: 26px 0;
background: transparent;
cursor: pointer;
text-align: left;
}
#most-interiors .mi-faq__question span:first-child {
font-size: 19px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.35;
}
#most-interiors .mi-faq__plus {
position: relative;
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(181, 185, 240, 0.4);
}
#most-interiors .mi-faq__plus::before,
#most-interiors .mi-faq__plus::after {
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 2px;
background: var(--mi-pine);
content: "";
transform: translate(-50%, -50%);
transition: transform 180ms ease;
}
#most-interiors .mi-faq__plus::after {
transform: translate(-50%, -50%) rotate(90deg);
}
#most-interiors .mi-faq__question[aria-expanded="true"] .mi-faq__plus {
background: var(--mi-lilac);
}
#most-interiors .mi-faq__question[aria-expanded="true"] .mi-faq__plus::after {
transform: translate(-50%, -50%) rotate(0);
}
#most-interiors .mi-faq__answer {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 220ms ease;
}
#most-interiors .mi-faq__answer > div {
overflow: hidden;
}
#most-interiors .mi-faq__answer p {
max-width: 690px;
margin-bottom: 0;
padding: 0 60px 28px 0;
color: rgba(11, 9, 9, 0.64);
}
#most-interiors .mi-faq__question[aria-expanded="true"] + .mi-faq__answer {
grid-template-rows: 1fr;
}
/* Contact */
#most-interiors .mi-contact {
padding: 120px 0;
color: var(--mi-white);
background: var(--mi-pine);
}
#most-interiors .mi-contact__grid {
display: grid;
align-items: start;
gap: 90px;
grid-template-columns: minmax(0, 0.8fr) minmax(440px, 1.2fr);
}
#most-interiors .mi-contact h2 {
max-width: 520px;
margin-bottom: 26px;
font-size: clamp(48px, 5.5vw, 80px);
font-weight: 500;
letter-spacing: -0.06em;
line-height: 0.94;
}
#most-interiors .mi-contact__intro > p {
max-width: 500px;
margin-bottom: 38px;
color: rgba(255, 255, 255, 0.68);
font-size: 18px;
}
#most-interiors .mi-contact__details {
display: grid;
gap: 14px;
}
#most-interiors .mi-contact__details a,
#most-interiors .mi-contact__details span {
display: flex;
align-items: center;
gap: 12px;
font-size: 15px;
}
#most-interiors .mi-contact__details i {
display: grid;
width: 36px;
height: 36px;
flex: 0 0 36px;
place-items: center;
border-radius: 50%;
background: var(--mi-lilac);
color: var(--mi-black);
font-size: 13px;
font-style: normal;
font-weight: 700;
}
#most-interiors .mi-form {
padding: 42px;
border-radius: 28px;
background: var(--mi-white);
color: var(--mi-black);
box-shadow: var(--mi-shadow);
}
#most-interiors .mi-form__grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(2, 1fr);
}
#most-interiors .mi-field {
display: grid;
gap: 8px;
}
#most-interiors .mi-field--full {
grid-column: 1 / -1;
}
#most-interiors .mi-field label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
#most-interiors .mi-field input,
#most-interiors .mi-field select,
#most-interiors .mi-field textarea {
width: 100%;
border: 1px solid rgba(11, 9, 9, 0.18);
border-radius: 12px;
outline: 0;
background: var(--mi-paper);
}
#most-interiors .mi-field input,
#most-interiors .mi-field select {
height: 52px;
padding: 0 15px;
}
#most-interiors .mi-field textarea {
min-height: 120px;
padding: 14px 15px;
resize: vertical;
}
#most-interiors .mi-field input:focus,
#most-interiors .mi-field select:focus,
#most-interiors .mi-field textarea:focus {
border-color: var(--mi-teal);
box-shadow: 0 0 0 4px rgba(64, 129, 117, 0.13);
}
#most-interiors .mi-form__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
margin-top: 24px;
}
#most-interiors .mi-form__note {
max-width: 290px;
margin-bottom: 0;
color: rgba(11, 9, 9, 0.53);
font-size: 11px;
line-height: 1.45;
}
/* Pied de page */
#most-interiors .mi-footer {
padding: 80px 0 30px;
color: var(--mi-white);
background: var(--mi-black);
}
#most-interiors .mi-footer__top {
display: grid;
gap: 70px;
grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(150px, 0.45fr));
padding-bottom: 70px;
}
#most-interiors .mi-footer .mi-brand {
margin-bottom: 28px;
}
#most-interiors .mi-footer__brand p {
max-width: 430px;
margin-bottom: 0;
color: rgba(255, 255, 255, 0.57);
font-size: 15px;
}
#most-interiors .mi-footer__affiliation {
display: inline-grid;
gap: 5px;
margin-top: 26px;
padding-top: 18px;
border-top: 1px solid rgba(181, 185, 240, 0.2);
}
#most-interiors .mi-footer__affiliation span {
color: rgba(255, 255, 255, 0.48);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.15em;
line-height: 1.3;
text-transform: uppercase;
}
#most-interiors .mi-footer__affiliation strong {
color: var(--mi-white);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1.3;
}
#most-interiors .mi-footer__col h3 {
margin-bottom: 20px;
color: var(--mi-lilac);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
}
#most-interiors .mi-footer__links {
display: grid;
gap: 11px;
}
#most-interiors .mi-footer__links a,
#most-interiors .mi-footer__links span {
color: rgba(255, 255, 255, 0.67);
font-size: 14px;
}
#most-interiors .mi-footer__links a:hover {
color: var(--mi-lilac);
}
#most-interiors .mi-footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-top: 26px;
border-top: 1px solid rgba(181, 185, 240, 0.18);
color: rgba(255, 255, 255, 0.43);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* WhatsApp flottant */
#most-interiors .mi-whatsapp {
position: fixed;
z-index: 9980;
right: 22px;
bottom: 22px;
display: flex;
width: 58px;
height: 58px;
align-items: center;
justify-content: center;
border: 2px solid var(--mi-white);
border-radius: 50%;
background: var(--mi-teal);
color: var(--mi-white);
box-shadow: 0 12px 34px rgba(11, 9, 9, 0.24);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
transition: background 180ms ease, transform 180ms ease;
}
#most-interiors .mi-whatsapp:hover {
background: var(--mi-lilac);
color: var(--mi-black);
transform: translateY(-4px);
}
/* Animation discrète */
#most-interiors [data-mi-reveal] {
opacity: 0;
transform: translateY(24px);
transition: opacity 650ms ease, transform 650ms ease;
}
#most-interiors [data-mi-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
#most-interiors *,
#most-interiors *::before,
#most-interiors *::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
#most-interiors [data-mi-reveal] {
opacity: 1;
transform: none;
}
}
@media (max-width: 1100px) {
#most-interiors .mi-nav {
gap: 16px;
}
#most-interiors .mi-nav > a:not(.mi-btn) {
display: none;
}
#most-interiors .mi-hero__inner {
grid-template-columns: 1fr 260px;
}
#most-interiors .mi-services__grid {
grid-template-columns: repeat(2, 1fr);
}
#most-interiors .mi-values__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 860px) {
#most-interiors .mi-wrap {
width: min(100% - 40px, 720px);
}
#most-interiors .mi-header,
#most-interiors .mi-header.is-scrolled,
#most-interiors .mi-header.is-open {
height: 72px;
}
#most-interiors .mi-header.is-open {
border-color: rgba(181, 185, 240, 0.2);
background: #0B0909;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
#most-interiors .mi-menu-toggle {
display: flex;
}
#most-interiors .mi-nav {
position: fixed;
z-index: 9988;
top: 72px;
right: 0;
bottom: 0;
left: 0;
display: flex;
visibility: hidden;
width: 100%;
height: calc(100vh - 72px);
height: calc(100dvh - 72px);
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: 4px;
padding: 36px;
overflow-y: auto;
background-color: #0B0909 !important;
background-image: none !important;
opacity: 0;
overscroll-behavior: contain;
pointer-events: none;
transform: translateY(-12px);
transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}
#most-interiors .mi-nav.is-open {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
#most-interiors .mi-nav > a:not(.mi-btn) {
display: block;
padding: 11px 0;
border-bottom: 1px solid rgba(181, 185, 240, 0.16);
background-color: #0B0909;
font-size: clamp(25px, 6vw, 38px);
font-weight: 500;
letter-spacing: -0.035em;
}
#most-interiors .mi-nav > a:not(.mi-btn)::after {
display: none;
}
#most-interiors .mi-nav .mi-btn {
align-self: flex-start;
margin-top: 18px;
}
#most-interiors .mi-nav .mi-language {
align-self: flex-start;
margin-top: 18px;
background: transparent;
}
#most-interiors .mi-header__inner > .mi-btn {
display: none;
}
#most-interiors .mi-hero,
#most-interiors .mi-hero__inner {
min-height: 760px;
}
#most-interiors .mi-hero__inner {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-end;
padding-top: 150px;
padding-bottom: 44px;
}
#most-interiors .mi-hero__note {
display: none;
}
#most-interiors .mi-promise__grid {
grid-template-columns: 1fr;
}
#most-interiors .mi-promise__item,
#most-interiors .mi-promise__item:last-child {
min-height: auto;
padding: 24px 0;
border-right: 0;
border-bottom: 1px solid rgba(11, 9, 9, 0.14);
border-left: 0;
}
#most-interiors .mi-intro,
#most-interiors .mi-services,
#most-interiors .mi-method,
#most-interiors .mi-spaces,
#most-interiors .mi-values,
#most-interiors .mi-faq,
#most-interiors .mi-contact {
padding: 90px 0;
}
#most-interiors .mi-intro__grid,
#most-interiors .mi-method__intro,
#most-interiors .mi-faq__grid,
#most-interiors .mi-contact__grid {
gap: 44px;
grid-template-columns: 1fr;
}
#most-interiors .mi-intro__aside {
padding-top: 0;
}
#most-interiors .mi-section-head {
display: grid;
gap: 22px;
margin-bottom: 44px;
}
#most-interiors .mi-bridge__grid {
grid-template-columns: 1fr;
padding: 90px 0;
}
#most-interiors .mi-bridge__visual {
min-height: 320px;
}
#most-interiors .mi-bridge__circle {
width: 290px;
height: 290px;
border-width: 40px;
}
#most-interiors .mi-spaces__grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 300px);
}
#most-interiors .mi-space:nth-child(n) {
grid-column: span 1;
}
#most-interiors .mi-faq__intro {
position: static;
}
#most-interiors .mi-contact__grid {
grid-template-columns: 1fr;
}
#most-interiors .mi-footer__top {
grid-template-columns: 1fr 1fr;
}
#most-interiors .mi-footer__brand {
grid-column: 1 / -1;
}
}
@media (max-width: 620px) {
#most-interiors {
font-size: 16px;
}
#most-interiors .mi-wrap {
width: calc(100% - 32px);
}
#most-interiors .mi-brand {
width: 164px;
height: 50px;
min-width: 0;
max-width: calc(100vw - 100px);
}
#most-interiors .mi-brand__logo {
width: 164px;
height: 50px;
flex-basis: 164px;
}
#most-interiors .mi-hero {
background-position: 60% center;
}
#most-interiors .mi-hero h1 {
font-size: clamp(46px, 14vw, 68px);
}
#most-interiors .mi-hero__text {
font-size: 17px;
}
#most-interiors .mi-hero__actions {
align-items: stretch;
flex-direction: column;
}
#most-interiors .mi-hero__actions .mi-btn {
width: 100%;
}
#most-interiors .mi-title,
#most-interiors .mi-bridge__copy h2,
#most-interiors .mi-contact h2 {
font-size: 42px;
}
#most-interiors .mi-services__grid,
#most-interiors .mi-values__grid {
grid-template-columns: 1fr;
}
#most-interiors .mi-service {
min-height: 300px;
padding: 30px;
}
#most-interiors .mi-service__top {
margin-bottom: 58px;
}
#most-interiors .mi-bridge__grid {
gap: 30px;
}
#most-interiors .mi-bridge__visual {
min-height: 285px;
}
#most-interiors .mi-bridge__circle {
width: 245px;
height: 245px;
border-width: 34px;
}
#most-interiors .mi-bridge__circle::before {
border-bottom-width: 26px;
}
#most-interiors .mi-step {
gap: 9px;
grid-template-columns: 46px 1fr;
}
#most-interiors .mi-step p {
grid-column: 2;
}
#most-interiors .mi-step:hover {
padding-right: 0;
padding-left: 0;
}
#most-interiors .mi-spaces__grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: none;
}
#most-interiors .mi-space {
height: 320px;
}
#most-interiors .mi-space:nth-child(n) {
grid-column: auto;
}
#most-interiors .mi-value {
min-height: 245px;
}
#most-interiors .mi-form {
padding: 26px 20px;
border-radius: 20px;
}
#most-interiors .mi-form__grid {
grid-template-columns: 1fr;
}
#most-interiors .mi-field--full {
grid-column: auto;
}
#most-interiors .mi-form__footer {
align-items: stretch;
flex-direction: column;
}
#most-interiors .mi-form__footer .mi-btn {
width: 100%;
}
#most-interiors .mi-faq__answer p {
padding-right: 0;
}
#most-interiors .mi-footer {
padding-top: 64px;
}
#most-interiors .mi-footer__top {
gap: 42px;
grid-template-columns: 1fr;
}
#most-interiors .mi-footer__brand {
grid-column: auto;
}
#most-interiors .mi-footer__bottom {
align-items: flex-start;
flex-direction: column;
}
#most-interiors .mi-whatsapp {
right: 14px;
bottom: 14px;
width: 52px;
height: 52px;
}
}