@charset "UTF-8";
@import url(main.css);
.animated-border-button:after { background-color: #19263D; }

h1.display-4.fw-bold.bandeauTitre.titles.text-color-seventh { color: #000 !important; }

a.button_homepageDoubleScreen.first-banner-seo-page-button.text-color-fourth.p-3.fs-6.fw-bold.m-2 { border-radius: 0px !important; }

a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2 { border-radius: 0px !important; }

h2.display-6.fw-bold.p-3.pt-lg-3.m-0.titles { color: #000 !important; }

a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.my-2.my-lg-1.p-2.rounded-pill.text-decoration-none.button-header-telephone { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; min-width: 220px; min-height: 48px; padding: 14px 22px !important; background: #C89D63 !important; border: 1px solid #C89D63 !important; border-radius: 0 !important; color: #19263D !important; font-weight: 500 !important; line-height: 1; text-align: center; text-decoration: none !important; box-shadow: none !important; transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease; }

/* Cadre bleu nuit décalé */
a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.my-2.my-lg-1.p-2.rounded-pill.text-decoration-none.button-header-telephone::before { content: ""; position: absolute; top: 7px; right: 8px; bottom: -7px; left: -7px; z-index: -1; border: 1px solid #19263D; pointer-events: none; transition: top 0.25s ease, right 0.25s ease, bottom 0.25s ease, left 0.25s ease; }

@media (hover: hover) and (pointer: fine) { a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.my-2.my-lg-1.p-2.rounded-pill.text-decoration-none.button-header-telephone:hover { background: #B58247 !important; border-color: #B58247 !important; color: #19263D !important; transform: translateY(-2px); } a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.my-2.my-lg-1.p-2.rounded-pill.text-decoration-none.button-header-telephone:hover::before { top: 9px; right: 6px; bottom: -9px; left: -9px; } }

@media (max-width: 767px) { a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.my-2.my-lg-1.p-2.rounded-pill.text-decoration-none.button-header-telephone { min-width: 190px; min-height: 44px; padding: 12px 18px !important; } a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.my-2.my-lg-1.p-2.rounded-pill.text-decoration-none.button-header-telephone::before { top: 5px; right: 6px; bottom: -5px; left: -5px; } }

.card.card-cover.h-100.overflow-hidden.rounded-4.shadow-lg { border-radius: 0px !important; }

.mx-auto.first-activity-div.col-lg-11.px-4.py-4.mb-5.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative { position: relative; overflow: visible; box-shadow: none !important; }

/* Trait décalé vers le haut / droite */
.mx-auto.first-activity-div.col-lg-11.px-4.py-4.mb-5.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative::before { content: ""; position: absolute; top: -12px; right: -12px; bottom: 12px; left: 12px; border: 1px solid rgba(25, 38, 61, 0.55); border-radius: inherit; pointer-events: none; z-index: 2; }

/* Deuxième trait décalé vers le bas / gauche */
.mx-auto.first-activity-div.col-lg-11.px-4.py-4.mb-5.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative::after { content: ""; position: absolute; top: 12px; right: 12px; bottom: -12px; left: -12px; border: 1px solid rgba(200, 157, 99, 0.65); border-radius: inherit; pointer-events: none; z-index: 2; }

@media (max-width: 767px) { .mx-auto.first-activity-div.col-lg-11.px-4.py-4.mb-5.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative::before { top: -7px; right: -7px; bottom: 7px; left: 7px; } .mx-auto.first-activity-div.col-lg-11.px-4.py-4.mb-5.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative::after { top: 7px; right: 7px; bottom: -7px; left: -7px; } }

.mx-auto.second-activity-div.col-lg-11.px-4.py-4.mb-5.mt-5.rounded-3.shadow-lg.bg-primaryColor.text-color-primary.position-relative, .mx-auto.third-activity-div.col-lg-11.px-4.py-4.mb-4.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative { position: relative; overflow: visible; box-shadow: none !important; }

/* Cadre décalé haut / droite */
.mx-auto.second-activity-div.col-lg-11.px-4.py-4.mb-5.mt-5.rounded-3.shadow-lg.bg-primaryColor.text-color-primary.position-relative::before, .mx-auto.third-activity-div.col-lg-11.px-4.py-4.mb-4.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative::before { content: ""; position: absolute; top: -12px; right: -12px; bottom: 12px; left: 12px; border: 1px solid rgba(25, 38, 61, 0.55); border-radius: 0px !important; pointer-events: none; z-index: 2; }

/* Cadre décalé bas / gauche */
.mx-auto.second-activity-div.col-lg-11.px-4.py-4.mb-5.mt-5.rounded-3.shadow-lg.bg-primaryColor.text-color-primary.position-relative::after, .mx-auto.third-activity-div.col-lg-11.px-4.py-4.mb-4.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative::after { content: ""; position: absolute; top: 12px; right: 12px; bottom: -12px; left: -12px; border: 1px solid rgba(200, 157, 99, 0.65); border-radius: 0px !important; pointer-events: none; z-index: 2; }

@media (max-width: 767px) { .mx-auto.second-activity-div.col-lg-11.px-4.py-4.mb-5.mt-5.rounded-3.shadow-lg.bg-primaryColor.text-color-primary.position-relative::before, .mx-auto.third-activity-div.col-lg-11.px-4.py-4.mb-4.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative::before { top: -7px; right: -7px; bottom: 7px; left: 7px; } .mx-auto.second-activity-div.col-lg-11.px-4.py-4.mb-5.mt-5.rounded-3.shadow-lg.bg-primaryColor.text-color-primary.position-relative::after, .mx-auto.third-activity-div.col-lg-11.px-4.py-4.mb-4.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative::after { top: 7px; right: 7px; bottom: -7px; left: -7px; } }

/*************************************************************************** HERO **********************************************************************************************/
.design-hero { box-sizing: border-box; width: 100%; padding: 40px 42px; background: #F7F6F3; }

.design-hero-card { position: relative; width: 100%; max-width: 1700px; min-height: 740px; margin: 0 auto; overflow: hidden; background-size: cover; background-position: center center; background-repeat: no-repeat; border-radius: 26px; }

.design-hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(16, 26, 44, 0.56) 0%, rgba(16, 26, 44, 0.45) 24%, rgba(16, 26, 44, 0.28) 44%, rgba(16, 26, 44, 0.12) 63%, rgba(16, 26, 44, 0.02) 82%, rgba(16, 26, 44, 0) 100%); }

.design-hero-inner { position: relative; z-index: 2; box-sizing: border-box; display: flex; flex-direction: column; min-height: 740px; padding: 112px 52px 54px; }

/* ========================================================= LOGO ========================================================= */
.design-hero-logo { width: 330px; margin-left: 4px; }

.design-hero-logo img { display: block; width: 100%; height: auto; object-fit: contain; }

/* ========================================================= CONTENU ========================================================= */
.design-hero-content { display: flex; flex-direction: column; align-items: flex-start; width: 760px; max-width: 58%; margin-top: 24px; }

.design-hero-title { width: 100%; max-width: 750px; margin: 0; color: #F7F3EA; font-size: 59px; font-weight: 400; line-height: 1.04; letter-spacing: -1.7px; }

.design-hero-description { width: 640px; max-width: 100%; margin: 20px 0 0; color: rgba(247, 246, 243, 0.93); font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: 0.1px; }

/* ========================================================= CTA ========================================================= */
.design-hero-button { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: space-between; gap: 38px; min-width: 270px; margin-top: 28px; padding: 15px 18px 15px 22px; background: #F7F6F3; border: 1px solid #F7F6F3; color: #19263D; font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease; }

/* Cadre décalé comme sur le visuel */
.design-hero-button::before { content: ""; position: absolute; top: 7px; right: 8px; bottom: -7px; left: -7px; z-index: -1; border: 1px solid rgba(247, 246, 243, 0.95); pointer-events: none; transition: top 0.25s ease, right 0.25s ease, bottom 0.25s ease, left 0.25s ease; }

.design-hero-button-text { white-space: nowrap; }

/* ========================================================= FLÈCHE CTA ========================================================= */
.design-hero-arrow { display: flex; align-items: center; flex-shrink: 0; width: 46px; height: 18px; }

.design-hero-arrow span { position: relative; display: block; width: 42px; height: 1px; background: #19263D; transition: width 0.25s ease, transform 0.25s ease; }

.design-hero-arrow span::before, .design-hero-arrow span::after { content: ""; position: absolute; right: -1px; width: 10px; height: 1px; background: #19263D; transform-origin: right center; }

.design-hero-arrow span::before { top: -4px; transform: rotate(40deg); }

.design-hero-arrow span::after { bottom: -4px; transform: rotate(-40deg); }

/* ========================================================= HOVER ========================================================= */
@media (hover: hover) and (pointer: fine) { .design-hero-button:hover { background: #EDE7DE; border-color: #EDE7DE; color: #19263D; transform: translateY(-2px); } .design-hero-button:hover::before { top: 9px; right: 6px; bottom: -9px; left: -9px; } .design-hero-button:hover .design-hero-arrow span { width: 46px; transform: translateX(2px); } }

/* ========================================================= GRAND ÉCRAN ========================================================= */
@media screen and (min-width: 1800px) { .design-hero { padding: 52px 64px; } .design-hero-card { max-width: 1880px; min-height: 830px; border-radius: 30px; } .design-hero-inner { min-height: 830px; padding: 128px 66px 62px; } .design-hero-logo { width: 375px; } .design-hero-content { width: 850px; max-width: 57%; margin-top: 28px; } .design-hero-title { max-width: 840px; font-size: 67px; letter-spacing: -2px; } .design-hero-description { width: 700px; font-size: 17px; } .design-hero-button { min-width: 290px; margin-top: 31px; padding: 16px 20px 16px 24px; font-size: 15px; } }

/* ========================================================= TRÈS GRAND ÉCRAN ========================================================= */
@media screen and (min-width: 2200px) { .design-hero { padding: 70px 80px; } .design-hero-card { max-width: 2100px; min-height: 930px; border-radius: 34px; } .design-hero-inner { min-height: 930px; padding: 145px 80px 72px; } .design-hero-logo { width: 430px; } .design-hero-content { width: 960px; max-width: 56%; margin-top: 30px; } .design-hero-title { max-width: 950px; font-size: 76px; letter-spacing: -2.2px; } .design-hero-description { width: 790px; font-size: 19px; } .design-hero-button { min-width: 310px; padding: 17px 21px 17px 25px; font-size: 16px; } }

/* ========================================================= LAPTOP ========================================================= */
@media screen and (max-width: 1400px) { .design-hero { padding: 30px; } .design-hero-card { min-height: 660px; } .design-hero-inner { min-height: 660px; padding: 92px 40px 42px; } .design-hero-logo { width: 290px; } .design-hero-content { width: 670px; max-width: 57%; margin-top: 22px; } .design-hero-title { max-width: 650px; font-size: 51px; } .design-hero-description { width: 560px; font-size: 15px; } .design-hero-button { min-width: 255px; font-size: 13px; } }

/* ========================================================= TABLETTE ========================================================= */
@media screen and (max-width: 991px) { .design-hero { padding: 20px; } .design-hero-card { min-height: 640px; border-radius: 22px; background-position: 61% center; } .design-hero-inner { min-height: 640px; padding: 74px 30px 38px; } .design-hero-overlay { background: linear-gradient(90deg, rgba(16, 26, 44, 0.66) 0%, rgba(16, 26, 44, 0.52) 37%, rgba(16, 26, 44, 0.27) 68%, rgba(16, 26, 44, 0.05) 100%); } .design-hero-logo { width: 250px; } .design-hero-content { width: 600px; max-width: 70%; margin-top: 22px; } .design-hero-title { max-width: 590px; font-size: 45px; letter-spacing: -1.3px; } .design-hero-description { width: 510px; font-size: 15px; } }

/* ========================================================= MOBILE ========================================================= */
@media screen and (max-width: 767px) { .design-hero { padding: 10px; } .design-hero-card { min-height: 650px; border-radius: 18px; background-position: 64% center; } .design-hero-inner { min-height: 650px; padding: 56px 22px 32px; } .design-hero-overlay { background: linear-gradient(90deg, rgba(16, 26, 44, 0.7) 0%, rgba(16, 26, 44, 0.58) 43%, rgba(16, 26, 44, 0.34) 72%, rgba(16, 26, 44, 0.14) 100%); } .design-hero-logo { width: 225px; } .design-hero-content { width: 100%; max-width: 100%; margin-top: 22px; margin-bottom: 24px; } .design-hero-title { width: 100%; max-width: 520px; font-size: 40px; line-height: 1.06; letter-spacing: -1px; } .design-hero-description { width: 100%; max-width: 460px; margin-top: 18px; font-size: 15px; line-height: 1.5; } .design-hero-button { gap: 28px; min-width: 240px; margin-top: 24px; padding: 14px 15px 14px 18px; font-size: 12px; } .design-hero-arrow { width: 38px; } .design-hero-arrow span { width: 36px; } }

/* ========================================================= PETIT MOBILE ========================================================= */
@media screen and (max-width: 480px) { .design-hero-card, .design-hero-inner { min-height: 600px; } .design-hero-card { background-position: 62% center; } .design-hero-inner { padding: 48px 18px 27px; } .design-hero-logo { width: 205px; } .design-hero-content { margin-top: 20px; margin-bottom: 16px; } .design-hero-title { max-width: 390px; font-size: 34px; line-height: 1.07; letter-spacing: -0.8px; } .design-hero-description { max-width: 360px; font-size: 14px; line-height: 1.47; } .design-hero-button { width: auto; min-width: 225px; } }

/*************************************************************************** INTRO **********************************************************************************************/
.design-about { width: 100%; overflow: hidden; padding: 78px 70px 88px; background: #F7F6F3; }

.design-about-container { display: grid; grid-template-columns: 1.08fr 0.92fr; align-items: center; gap: 72px; width: 100%; max-width: 1560px; margin: 0 auto; }

.design-about-left { width: 100%; }

.design-about-heading { width: 100%; margin-bottom: 48px; }

.design-about-title { width: 100%; max-width: 820px; margin: 0; color: #19263D !important; font-size: 56px; font-weight: 400; line-height: 1.02; letter-spacing: -1.6px; }

.design-about-text { max-width: 590px; }

.design-about-subtitle { margin: 0 0 22px; color: #19263D; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 4px; text-transform: uppercase; }

.design-about-description { margin: 0 0 10px; color: #6F7379 !important; font-size: 15px; font-weight: 400; line-height: 1.74; }

.design-about-description strong { color: #2C3036 !important; font-weight: 600; }

.design-about-button { position: relative; display: inline-flex; align-items: center; gap: 24px; margin-top: 26px; padding: 13px 18px; background: #C89D63; border: 1px solid #C89D63; color: #19263D !important; font-size: 12px; font-weight: 500; line-height: 1; text-decoration: none; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; }

.design-about-button::before { content: ""; position: absolute; top: 5px; left: -5px; right: 5px; bottom: -5px; z-index: 0; border: 1px solid #19263D; }

.design-about-button-line { position: relative; display: block; width: 34px; height: 1px; background: #F7F6F3; }

.design-about-button-line::before, .design-about-button-line::after { content: ""; position: absolute; right: -1px; width: 7px; height: 1px; background: #F7F6F3; transform-origin: right center; }

.design-about-button-line::before { top: -3px; transform: rotate(40deg); }

.design-about-button-line::after { bottom: -3px; transform: rotate(-40deg); }

@media (hover: hover) and (pointer: fine) { .design-about-button:hover { background: #19263D; border-color: #19263D; color: #fff !important; transform: translateY(-2px); } .design-about-button:hover .design-about-button-line, .design-about-button:hover .design-about-button-line::before, .design-about-button:hover .design-about-button-line::after { background: #F7F6F3; } }

.design-about-gallery { display: grid; grid-template-columns: 0.72fr 1fr; align-items: center; gap: 22px; width: 100%; }

.design-about-small-images { display: flex; flex-direction: column; gap: 22px; padding-top: 48px; }

.design-about-image { position: relative; z-index: 1; }

.design-about-image img { position: relative; z-index: 2; display: block; width: 100%; height: 100%; object-fit: cover; }

.design-about-image::before { content: ""; position: absolute; z-index: 0; border: 1px solid #19263D; pointer-events: none; }

.design-about-image-top { height: 178px; }

.design-about-image-top::before { top: -8px; right: -10px; bottom: 10px; left: 8px; }

.design-about-image-bottom { height: 250px; }

.design-about-image-bottom::before { top: -8px; right: -10px; bottom: 11px; left: 9px; }

.design-about-image-main { height: 488px; }

.design-about-image-main::before { top: -10px; right: -11px; bottom: 13px; left: 10px; }

/* GRAND ÉCRAN */
@media screen and (min-width: 1800px) { .design-about { padding: 95px 105px 105px; } .design-about-container { max-width: 1750px; gap: 90px; } .design-about-title { max-width: 930px; font-size: 63px; } .design-about-text { max-width: 640px; } .design-about-description { font-size: 16px; } .design-about-image-top { height: 205px; } .design-about-image-bottom { height: 285px; } .design-about-image-main { height: 560px; } }

/* TRÈS GRAND ÉCRAN */
@media screen and (min-width: 2200px) { .design-about { padding: 115px 145px 125px; } .design-about-container { max-width: 1960px; gap: 110px; } .design-about-title { max-width: 1030px; font-size: 70px; } .design-about-text { max-width: 700px; } .design-about-subtitle { font-size: 15px; } .design-about-description { font-size: 17px; } .design-about-image-top { height: 235px; } .design-about-image-bottom { height: 320px; } .design-about-image-main { height: 625px; } }

/* LAPTOP */
@media screen and (max-width: 1400px) { .design-about { padding: 68px 50px 76px; } .design-about-container { max-width: 1380px; gap: 55px; } .design-about-title { max-width: 720px; font-size: 49px; } .design-about-heading { margin-bottom: 38px; } .design-about-text { max-width: 520px; } .design-about-description { font-size: 14px; } .design-about-gallery { gap: 18px; } .design-about-small-images { gap: 18px; padding-top: 40px; } .design-about-image-top { height: 156px; } .design-about-image-bottom { height: 222px; } .design-about-image-main { height: 430px; } }

/* TABLETTE */
@media screen and (max-width: 991px) { .design-about { padding: 60px 38px 68px; } .design-about-container { grid-template-columns: 1fr; gap: 55px; } .design-about-left { max-width: 780px; margin: 0 auto; } .design-about-title { max-width: 720px; font-size: 47px; } .design-about-text { max-width: 620px; } .design-about-gallery { max-width: 760px; margin: 0 auto; } .design-about-small-images { padding-top: 38px; } .design-about-image-top { height: 190px; } .design-about-image-bottom { height: 258px; } .design-about-image-main { height: 500px; } }

/* MOBILE */
@media screen and (max-width: 767px) { .design-about { padding: 52px 24px 60px; } .design-about-container { gap: 44px; } .design-about-heading { margin-bottom: 30px; } .design-about-title { max-width: 100%; font-size: 38px; line-height: 1.05; letter-spacing: -1px; } .design-about-subtitle { margin-bottom: 18px; font-size: 12px; letter-spacing: 2.8px; } .design-about-description { font-size: 14px; line-height: 1.65; } .design-about-button { gap: 18px; margin-top: 22px; padding: 12px 15px; font-size: 12px; } .design-about-button-line { width: 28px; } .design-about-gallery { grid-template-columns: 0.74fr 1fr; gap: 15px; } .design-about-small-images { gap: 15px; padding-top: 30px; } .design-about-image-top { height: 140px; } .design-about-image-bottom { height: 195px; } .design-about-image-main { height: 360px; } .design-about-image-top::before, .design-about-image-bottom::before { top: -6px; right: -7px; bottom: 7px; left: 6px; } .design-about-image-main::before { top: -8px; right: -8px; bottom: 10px; left: 7px; } }

/* PETIT MOBILE */
@media screen and (max-width: 480px) { .design-about { padding: 46px 18px 52px; } .design-about-title { font-size: 32px; letter-spacing: -0.8px; } .design-about-subtitle { font-size: 11px; letter-spacing: 2.2px; } .design-about-description { font-size: 13px; } .design-about-gallery { gap: 12px; } .design-about-small-images { gap: 12px; padding-top: 24px; } .design-about-image-top { height: 120px; } .design-about-image-bottom { height: 170px; } .design-about-image-main { height: 310px; } }

/*************************************************************************** PRESTATIONS **********************************************************************************************/
.design-services-steps { position: relative; overflow: hidden; width: 100%; padding: 105px 56px 150px; background: #0B1420; }

.design-services-steps-container { position: relative; z-index: 2; width: 100%; max-width: 1860px; margin: 0 auto; }

/* ========================= EN-TÊTE CENTRÉ ========================= */
.design-services-steps-top { display: flex; flex-direction: column; align-items: center; width: 100%; margin-bottom: 85px; text-align: center; }

.design-services-steps-eyebrow { margin-bottom: 18px; color: #C89D63; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 3.5px; text-transform: uppercase; }

.design-services-steps-title { width: 100%; max-width: 1100px; margin: 0; color: #F7F6F3; font-size: 74px; font-weight: 400; line-height: 1; letter-spacing: -2.2px; }

.design-services-steps-intro { max-width: 680px; margin: 26px 0 0; color: rgba(247, 246, 243, 0.68); font-size: 15px; font-weight: 400; line-height: 1.8; }

/* ========================= CARTES ========================= */
.design-services-steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; row-gap: 96px; }

.design-services-steps-card { position: relative; min-height: 340px; padding: 36px 32px 34px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.015) 0%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0.015) 100%); border: 1px solid rgba(200, 157, 99, 0.14); transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; }

.design-services-steps-card-lowered { transform: translateY(46px); }

.design-services-steps-number { margin-bottom: 26px; color: rgba(247, 246, 243, 0.28); font-size: 48px; font-weight: 300; line-height: 1; letter-spacing: -1px; }

.design-services-steps-line { width: 42px; height: 1px; margin-bottom: 28px; background: rgba(200, 157, 99, 0.72); }

.design-services-steps-card-title { max-width: 255px; margin: 0 0 18px; color: #F7F6F3; font-size: 26px; font-weight: 500; line-height: 1.15; }

.design-services-steps-card-text { max-width: 320px; margin: 0; color: rgba(247, 246, 243, 0.68); font-size: 14px; font-weight: 400; line-height: 1.85; }

/* ========================= CADRES DÉCALÉS ========================= */
.design-services-steps-card-frame-top-right::before, .design-services-steps-card-frame-bottom-left::before { content: ""; position: absolute; z-index: -1; pointer-events: none; border: 1px solid rgba(200, 157, 99, 0.34); }

.design-services-steps-card-frame-top-right::after, .design-services-steps-card-frame-bottom-left::after { content: ""; position: absolute; pointer-events: none; background: rgba(200, 157, 99, 0.62); }

.design-services-steps-card-frame-top-right::before { top: -18px; right: -18px; bottom: 18px; left: 18px; }

.design-services-steps-card-frame-top-right::after { top: 20px; right: 20px; width: 32px; height: 1px; }

.design-services-steps-card-frame-bottom-left::before { top: 18px; right: 18px; bottom: -18px; left: -18px; }

.design-services-steps-card-frame-bottom-left::after { bottom: 20px; left: 20px; width: 32px; height: 1px; }

/* ========================= HOVER ========================= */
@media (hover: hover) and (pointer: fine) { .design-services-steps-card:hover { border-color: rgba(200, 157, 99, 0.26); background: linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.022) 100%); } .design-services-steps-card:hover:not(.design-services-steps-card-lowered) { transform: translateY(-6px); } .design-services-steps-card.design-services-steps-card-lowered:hover { transform: translateY(40px); } }

/* ========================= TRÈS GRAND ÉCRAN ========================= */
@media screen and (min-width: 1800px) { .design-services-steps { padding: 125px 80px 175px; } .design-services-steps-container { max-width: 1980px; } .design-services-steps-top { margin-bottom: 100px; } .design-services-steps-title { max-width: 1250px; font-size: 84px; } .design-services-steps-intro { max-width: 750px; margin-top: 30px; font-size: 16px; } .design-services-steps-grid { column-gap: 34px; row-gap: 110px; } .design-services-steps-card { min-height: 370px; padding: 40px 36px 36px; } .design-services-steps-card-lowered { transform: translateY(54px); } .design-services-steps-number { font-size: 54px; } .design-services-steps-card-title { max-width: 280px; font-size: 29px; } .design-services-steps-card-text { max-width: 340px; font-size: 15px; } }

/* ========================= LAPTOP ========================= */
@media screen and (max-width: 1400px) { .design-services-steps { padding: 84px 34px 118px; } .design-services-steps-top { margin-bottom: 68px; } .design-services-steps-title { max-width: 900px; font-size: 60px; } .design-services-steps-intro { max-width: 620px; margin-top: 22px; font-size: 14px; } .design-services-steps-grid { column-gap: 20px; row-gap: 82px; } .design-services-steps-card { min-height: 290px; padding: 28px 24px 24px; } .design-services-steps-card-lowered { transform: translateY(34px); } .design-services-steps-number { margin-bottom: 22px; font-size: 38px; } .design-services-steps-card-title { max-width: 210px; font-size: 22px; } .design-services-steps-card-text { font-size: 13px; line-height: 1.75; } }

/* ========================= TABLETTE ========================= */
@media screen and (max-width: 991px) { .design-services-steps { padding: 72px 24px 92px; } .design-services-steps-top { margin-bottom: 58px; } .design-services-steps-title { max-width: 720px; font-size: 50px; } .design-services-steps-intro { max-width: 600px; font-size: 14px; } .design-services-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; row-gap: 58px; } .design-services-steps-card { min-height: 270px; } .design-services-steps-card-lowered { transform: translateY(26px); } }

/* ========================= MOBILE ========================= */
@media screen and (max-width: 767px) { .design-services-steps { padding: 58px 18px 68px; } .design-services-steps-top { margin-bottom: 42px; } .design-services-steps-eyebrow { margin-bottom: 13px; font-size: 10px; letter-spacing: 2.4px; } .design-services-steps-title { font-size: 39px; line-height: 1.04; letter-spacing: -1.2px; } .design-services-steps-intro { margin-top: 20px; font-size: 13px; line-height: 1.7; } .design-services-steps-grid { grid-template-columns: 1fr; row-gap: 18px; } .design-services-steps-card, .design-services-steps-card-lowered { min-height: auto; padding: 24px 18px 22px; transform: translateY(0); } .design-services-steps-card-frame-top-right::before, .design-services-steps-card-frame-bottom-left::before { display: none; } .design-services-steps-number { margin-bottom: 18px; font-size: 32px; } .design-services-steps-line { margin-bottom: 22px; } .design-services-steps-card-title { max-width: 100%; font-size: 21px; } .design-services-steps-card-text { max-width: 100%; font-size: 12px; line-height: 1.7; } }

/*************************************************************************** REALISATIONS **********************************************************************************************/
.design-realisations { width: 100%; overflow: hidden; padding: 95px 70px; background: #F7F6F3; }

.design-realisations-container { display: grid; grid-template-columns: 48% 52%; align-items: center; gap: 90px; width: 100%; max-width: 1650px; margin: 0 auto; }

/* ========================= VISUEL ========================= */
.design-realisations-visual { position: relative; display: flex; align-items: center; gap: 22px; width: 100%; min-height: 560px; }

.design-realisations-image-main { position: relative; width: 76%; height: 510px; }

.design-realisations-image-main::before { content: ""; position: absolute; top: -10px; right: -8px; bottom: 10px; left: -10px; border: 1px solid rgba(25, 38, 61, 0.7); pointer-events: none; }

.design-realisations-image-main img { position: relative; z-index: 2; display: block; width: 100%; height: 100%; object-fit: cover; }

/* Même image affichée dans une bande verticale */
.design-realisations-image-slice { position: relative; width: 18%; height: 390px; margin-top: 55px; }

.design-realisations-image-slice::before { content: ""; position: absolute; top: -8px; right: -8px; bottom: 8px; left: -8px; border: 1px solid rgba(25, 38, 61, 0.7); pointer-events: none; }

.design-realisations-image-slice img { position: relative; z-index: 2; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }

/* ========================= CONTENU ========================= */
.design-realisations-content { width: 100%; max-width: 650px; }

.design-realisations-eyebrow { margin-bottom: 14px; color: #C89D63; font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: 3px; text-transform: uppercase; }

.design-realisations-title { max-width: 620px; margin: 0 0 38px; color: #19263D; font-size: 58px; font-weight: 400; line-height: 1.02; letter-spacing: -1.7px; }

/* ========================= ENCADRÉ SOMBRE ========================= */
.design-realisations-panel { position: relative; isolation: isolate; width: 100%; padding: 27px 30px 30px; background: #19263D; border: 1px solid #19263D; color: #F7F6F3; }

.design-realisations-panel::before { content: ""; position: absolute; top: -7px; right: -7px; bottom: 7px; left: 7px; z-index: -1; border: 1px solid rgba(25, 38, 61, 0.55); pointer-events: none; }

.design-realisations-panel-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; margin-bottom: 15px; }

.design-realisations-panel-title { margin: 0; color: #F7F6F3; font-size: 25px; font-weight: 400; line-height: 1.2; }

.design-realisations-panel-arrow { flex-shrink: 0; color: #C89D63; font-size: 17px; line-height: 1; }

.design-realisations-description { max-width: 530px; margin: 0; color: rgba(247, 246, 243, 0.76); font-size: 14px; font-weight: 400; line-height: 1.75; }

/* ========================= CTA ========================= */
.design-realisations-cta { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: space-between; gap: 42px; min-width: 285px; margin-top: 32px; padding: 15px 18px 15px 23px; background: #C89D63; border: 1px solid #C89D63; color: #19263D; font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease; }

/* Cadre fin décalé derrière */
.design-realisations-cta::before { content: ""; position: absolute; top: 6px; right: 8px; bottom: -6px; left: -6px; z-index: -1; border: 1px solid #19263D; pointer-events: none; transition: top 0.25s ease, right 0.25s ease, bottom 0.25s ease, left 0.25s ease; }

.design-realisations-cta-text { white-space: nowrap; }

/* ========================= FLÈCHE CTA ========================= */
.design-realisations-cta-arrow { display: flex; align-items: center; flex-shrink: 0; width: 48px; height: 18px; }

.design-realisations-cta-arrow-line { position: relative; display: block; width: 44px; height: 1px; background: #F7F6F3; transition: width 0.25s ease, transform 0.25s ease; }

.design-realisations-cta-arrow-line::before, .design-realisations-cta-arrow-line::after { content: ""; position: absolute; right: -1px; width: 10px; height: 1px; background: #F7F6F3; transform-origin: right center; }

.design-realisations-cta-arrow-line::before { top: -4px; transform: rotate(40deg); }

.design-realisations-cta-arrow-line::after { bottom: -4px; transform: rotate(-40deg); }

/* ========================= HOVER ========================= */
@media (hover: hover) and (pointer: fine) { .design-realisations-cta:hover { background: #B58247; border-color: #B58247; transform: translateY(-2px); } .design-realisations-cta:hover::before { top: 8px; right: 6px; bottom: -8px; left: -8px; } .design-realisations-cta:hover .design-realisations-cta-arrow-line { width: 48px; transform: translateX(2px); } }

/* ========================= TRÈS GRAND ÉCRAN ========================= */
@media screen and (min-width: 1800px) { .design-realisations { padding: 120px 100px; } .design-realisations-container { max-width: 1850px; gap: 120px; } .design-realisations-visual { min-height: 640px; } .design-realisations-image-main { height: 590px; } .design-realisations-image-slice { height: 450px; margin-top: 65px; } .design-realisations-content { max-width: 720px; } .design-realisations-title { max-width: 690px; font-size: 66px; } .design-realisations-panel-title { font-size: 28px; } .design-realisations-description { font-size: 15px; } .design-realisations-cta { min-width: 310px; margin-top: 36px; padding: 17px 20px 17px 25px; font-size: 15px; } }

/* ========================= LAPTOP ========================= */
@media screen and (max-width: 1400px) { .design-realisations { padding: 78px 50px; } .design-realisations-container { gap: 65px; } .design-realisations-visual { min-height: 490px; } .design-realisations-image-main { height: 445px; } .design-realisations-image-slice { height: 335px; margin-top: 45px; } .design-realisations-title { max-width: 540px; font-size: 49px; } .design-realisations-panel { padding: 24px 25px 26px; } .design-realisations-panel-title { font-size: 22px; } .design-realisations-description { font-size: 13px; } .design-realisations-cta { min-width: 265px; margin-top: 28px; font-size: 13px; } }

/* ========================= TABLETTE ========================= */
@media screen and (max-width: 991px) { .design-realisations { padding: 70px 35px; } .design-realisations-container { grid-template-columns: 1fr; gap: 65px; } .design-realisations-visual { max-width: 760px; min-height: 520px; margin: 0 auto; } .design-realisations-image-main { height: 490px; } .design-realisations-image-slice { height: 365px; } .design-realisations-content { max-width: 720px; margin: 0 auto; } .design-realisations-title { max-width: 650px; font-size: 52px; } }

/* ========================= MOBILE ========================= */
@media screen and (max-width: 767px) { .design-realisations { padding: 55px 22px; } .design-realisations-container { gap: 50px; } .design-realisations-visual { gap: 14px; min-height: 390px; } .design-realisations-image-main { width: 76%; height: 365px; } .design-realisations-image-slice { width: 19%; height: 270px; margin-top: 38px; } .design-realisations-title { margin-bottom: 30px; font-size: 40px; line-height: 1.05; letter-spacing: -1.1px; } .design-realisations-eyebrow { font-size: 11px; letter-spacing: 2.5px; } .design-realisations-panel { padding: 22px 20px 23px; } .design-realisations-panel-title { font-size: 20px; } .design-realisations-description { font-size: 13px; line-height: 1.65; } .design-realisations-cta { gap: 28px; min-width: 255px; margin-top: 27px; padding: 14px 16px 14px 19px; font-size: 13px; } .design-realisations-cta-arrow { width: 40px; } .design-realisations-cta-arrow-line { width: 38px; } }

/* ========================= PETIT MOBILE ========================= */
@media screen and (max-width: 480px) { .design-realisations { padding: 48px 17px; } .design-realisations-visual { gap: 11px; min-height: 330px; } .design-realisations-image-main { height: 305px; } .design-realisations-image-slice { height: 225px; margin-top: 32px; } .design-realisations-title { font-size: 34px; } .design-realisations-panel-title { font-size: 19px; } .design-realisations-cta { width: 100%; min-width: 0; } }

/*************************************************************************** CARTE **********************************************************************************************/
.carre-constru-offers { width: 100%; padding: 95px 24px 105px; background: #F7F6F3; }

.carre-constru-offers, .carre-constru-offers *, .carre-constru-offers *::before, .carre-constru-offers *::after { box-sizing: border-box; }

.carre-constru-offers-container { width: 100%; max-width: 1240px; margin: 0 auto; text-align: center; }

/* ========================================================= EN-TÊTE ========================================================= */
.carre-constru-offers-eyebrow { display: inline-block; margin-bottom: 12px; color: #C89D63; font-size: 12px; line-height: 1.4; font-weight: 700 !important; letter-spacing: 2.8px; text-transform: uppercase; }

.carre-constru-offers-title { margin: 0 0 70px; color: #19263D; font-size: 52px; line-height: 1.08; font-weight: 500 !important; }

/* ========================================================= GRILLE ========================================================= */
.carre-constru-offers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

/* ========================================================= CARTES ========================================================= */
.carre-constru-offer-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 350px; padding: 38px 28px 34px; border: 1px solid rgba(25, 38, 61, 0.2); background: #F7F6F3; transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease; }

/* ========================================================= CARTE CENTRALE / CADRE DÉCALÉ ========================================================= */
.carre-constru-offer-card-featured::before { content: ""; position: absolute; top: -11px; right: -11px; bottom: 11px; left: 11px; border: 1px solid #19263D; pointer-events: none; }

/* ========================================================= ICÔNES ========================================================= */
.carre-constru-offer-icon { display: flex; align-items: center; justify-content: center; width: 74px; height: 74px; margin-bottom: 22px; color: #C89D63; }

.carre-constru-offer-icon svg { width: 54px; height: 54px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ========================================================= PETITS TITRES ========================================================= */
.carre-constru-offer-card-eyebrow { display: block; margin-bottom: 14px; color: #C89D63; font-size: 11px; line-height: 1.5; font-weight: 700 !important; letter-spacing: 1.9px; text-transform: uppercase; }

/* ========================================================= TITRES CARTES ========================================================= */
.carre-constru-offer-card-title { margin: 0 0 16px; color: #19263D; font-size: 34px; line-height: 1.08; font-weight: 500 !important; text-transform: uppercase; }

/* ========================================================= TEXTES ========================================================= */
.carre-constru-offer-card-text { max-width: 270px; margin: 0; color: #6F7379; font-size: 14px; line-height: 1.7; font-weight: 400 !important; }

/* ========================================================= HOVER ========================================================= */
@media (hover: hover) and (pointer: fine) { .carre-constru-offer-card:hover { border-color: rgba(200, 157, 99, 0.65); background: #EDE7DE; transform: translateY(-4px); } }

/* ========================================================= TRÈS GRAND ÉCRAN ========================================================= */
@media (min-width: 1700px) { .carre-constru-offers { padding: 115px 32px 125px; } .carre-constru-offers-container { max-width: 1380px; } .carre-constru-offers-title { margin-bottom: 82px; font-size: 58px; } .carre-constru-offers-grid { gap: 30px; } .carre-constru-offer-card { min-height: 390px; padding: 44px 34px 38px; } .carre-constru-offer-icon { width: 82px; height: 82px; margin-bottom: 25px; } .carre-constru-offer-icon svg { width: 60px; height: 60px; } .carre-constru-offer-card-title { font-size: 38px; } .carre-constru-offer-card-text { max-width: 300px; font-size: 15px; } }

/* ========================================================= TABLETTE ========================================================= */
@media (max-width: 991px) { .carre-constru-offers { padding: 80px 22px 90px; } .carre-constru-offers-title { margin-bottom: 55px; font-size: 42px; } .carre-constru-offers-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; gap: 24px; } .carre-constru-offer-card { min-height: auto; padding: 34px 24px 30px; } .carre-constru-offer-card-featured::before { top: -8px; right: -8px; bottom: 8px; left: 8px; } }

/* ========================================================= MOBILE ========================================================= */
@media (max-width: 575px) { .carre-constru-offers { padding: 65px 16px 75px; } .carre-constru-offers-eyebrow { font-size: 10px; letter-spacing: 2px; } .carre-constru-offers-title { margin-bottom: 42px; font-size: 32px; } .carre-constru-offer-card { padding: 28px 18px 24px; } .carre-constru-offer-icon { width: 62px; height: 62px; margin-bottom: 18px; } .carre-constru-offer-icon svg { width: 46px; height: 46px; } .carre-constru-offer-card-eyebrow { font-size: 10px; letter-spacing: 1.6px; } .carre-constru-offer-card-title { font-size: 28px; } .carre-constru-offer-card-text { font-size: 13px; line-height: 1.65; } }

/*************************************************************************** CTA **********************************************************************************************/
.design-cta-image { position: relative; overflow: hidden; width: 100%; padding: 82px 40px; background: #F7F6F3; }

.design-cta-image-bg { position: absolute; inset: 0; z-index: 1; }

.design-cta-image-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }

.design-cta-image-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(25, 38, 61, 0.48) 0%, rgba(16, 26, 44, 0.56) 100%); }

.design-cta-image-container { position: relative; z-index: 3; width: 100%; max-width: 1600px; margin: 0 auto; }

.design-cta-image-panel { position: relative; max-width: 920px; margin: 0 auto; padding: 60px 70px 54px; text-align: center; background: rgba(25, 38, 61, 0.72); border: 1px solid rgba(247, 246, 243, 0.24); backdrop-filter: blur(4px); }

.design-cta-image-panel::before { content: ""; position: absolute; top: -16px; right: -16px; bottom: 16px; left: 16px; border: 1px solid rgba(200, 157, 99, 0.45); pointer-events: none; }

.design-cta-image-eyebrow { margin-bottom: 18px; color: #C89D63; font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: 3.2px; text-transform: uppercase; }

.design-cta-image-title { max-width: 760px; margin: 0 auto 24px; color: #F7F6F3; font-size: 60px; font-weight: 400; line-height: 1.05; letter-spacing: -1.7px; }

.design-cta-image-text { max-width: 700px; margin: 0 auto 18px; color: rgba(247, 246, 243, 0.88); font-size: 16px; font-weight: 400; line-height: 1.9; }

.design-cta-image-subtext { max-width: 640px; margin: 0 auto; color: rgba(247, 246, 243, 0.74); font-size: 14px; font-weight: 400; line-height: 1.85; }

.design-cta-image-button { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: space-between; gap: 42px; min-width: 280px; margin-top: 34px; padding: 16px 19px 16px 24px; background: #C89D63; border: 1px solid #C89D63; color: #19263D; font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease; }

.design-cta-image-button::before { content: ""; position: absolute; top: 7px; right: 8px; bottom: -7px; left: -7px; z-index: -1; border: 1px solid rgba(247, 246, 243, 0.72); pointer-events: none; transition: top 0.25s ease, right 0.25s ease, bottom 0.25s ease, left 0.25s ease; }

.design-cta-image-button-text { white-space: nowrap; }

.design-cta-image-button-arrow { display: flex; align-items: center; flex-shrink: 0; width: 48px; height: 18px; }

.design-cta-image-button-arrow span { position: relative; display: block; width: 44px; height: 1px; background: #F7F6F3; transition: width 0.25s ease, transform 0.25s ease; }

.design-cta-image-button-arrow span::before, .design-cta-image-button-arrow span::after { content: ""; position: absolute; right: -1px; width: 10px; height: 1px; background: #F7F6F3; transform-origin: right center; }

.design-cta-image-button-arrow span::before { top: -4px; transform: rotate(40deg); }

.design-cta-image-button-arrow span::after { bottom: -4px; transform: rotate(-40deg); }

@media (hover: hover) and (pointer: fine) { .design-cta-image-button:hover { background: #B58247; border-color: #B58247; transform: translateY(-2px); } .design-cta-image-button:hover::before { top: 9px; right: 6px; bottom: -9px; left: -9px; } .design-cta-image-button:hover .design-cta-image-button-arrow span { width: 48px; transform: translateX(2px); } }

@media screen and (min-width: 1800px) { .design-cta-image { padding: 105px 70px; } .design-cta-image-panel { max-width: 1040px; padding: 72px 85px 66px; } .design-cta-image-title { max-width: 840px; font-size: 68px; } .design-cta-image-text { max-width: 760px; font-size: 17px; } }

@media screen and (max-width: 1400px) { .design-cta-image { padding: 72px 30px; } .design-cta-image-panel { max-width: 860px; padding: 50px 48px 46px; } .design-cta-image-title { font-size: 50px; } .design-cta-image-text { font-size: 15px; } }

@media screen and (max-width: 991px) { .design-cta-image { padding: 62px 24px; } .design-cta-image-panel { max-width: 100%; padding: 44px 34px 40px; } .design-cta-image-panel::before { top: -12px; right: -12px; bottom: 12px; left: 12px; } .design-cta-image-title { font-size: 44px; } .design-cta-image-text { font-size: 15px; line-height: 1.8; } .design-cta-image-subtext { font-size: 13px; } }

@media screen and (max-width: 767px) { .design-cta-image { padding: 50px 18px; } .design-cta-image-panel { padding: 38px 22px 34px; } .design-cta-image-panel::before { top: -8px; right: -8px; bottom: 8px; left: 8px; } .design-cta-image-eyebrow { margin-bottom: 14px; font-size: 11px; letter-spacing: 2.5px; } .design-cta-image-title { font-size: 35px; line-height: 1.08; letter-spacing: -1px; } .design-cta-image-text { font-size: 14px; line-height: 1.75; } .design-cta-image-subtext { font-size: 13px; line-height: 1.7; } .design-cta-image-button { gap: 28px; min-width: 245px; margin-top: 28px; padding: 14px 16px 14px 19px; font-size: 13px; } .design-cta-image-button-arrow { width: 40px; } .design-cta-image-button-arrow span { width: 38px; } }

@media screen and (max-width: 480px) { .design-cta-image-panel { padding: 34px 18px 30px; } .design-cta-image-title { font-size: 30px; } .design-cta-image-button { width: 100%; min-width: 0; } }

/*************************************************************************** PAGE HERO **********************************************************************************************/
/* ========================================================= WRAPPER / MARGES AUTOUR DU HERO ========================================================= */
.moy-build-hero-wrapper { width: 100%; padding: 34px 42px; background: #F4F0EA; box-sizing: border-box; }

/* ========================================================= HERO ========================================================= */
.moy-build-hero { position: relative; width: 100%; min-height: 590px; overflow: hidden; background-color: #211F1D; background-size: cover; background-position: center center; background-repeat: no-repeat; border: 1px solid rgba(216, 198, 174, 0.22); border-radius: 24px; }

.moy-build-hero, .moy-build-hero * { box-sizing: border-box; }

/* ========================================================= OVERLAY ========================================================= */
.moy-build-hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(24, 23, 22, 0.78) 0%, rgba(24, 23, 22, 0.6) 31%, rgba(24, 23, 22, 0.28) 58%, rgba(24, 23, 22, 0.08) 82%, rgba(24, 23, 22, 0.14) 100%), linear-gradient(180deg, rgba(24, 23, 22, 0.1) 0%, rgba(24, 23, 22, 0.26) 100%); }

/* ========================================================= INNER ========================================================= */
.moy-build-hero-inner { position: relative; z-index: 2; display: flex; align-items: center; width: 100%; max-width: 1500px; min-height: 590px; margin: 0 auto; padding: 55px 58px; }

/* ========================================================= CONTENU ========================================================= */
.moy-build-hero-content { width: 100%; max-width: 700px; }

/* ========================================================= LOGO ========================================================= */
.moy-build-hero-logo { display: block; width: 190px; max-width: 100%; height: auto; margin-bottom: 32px; object-fit: contain; }

/* ========================================================= SURTITRE ========================================================= */
.moy-build-hero-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; color: rgba(244, 240, 234, 0.82); font-size: 13px; line-height: 1; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600 !important; }

.moy-build-hero-eyebrow::before { content: ""; width: 36px; height: 1px; background: #A88A6B; }

/* ========================================================= TITRE ========================================================= */
.moy-build-hero-title { max-width: 690px; margin: 0 0 32px; color: #F4F0EA; font-size: 60px; line-height: 0.98; letter-spacing: -1.6px; text-transform: uppercase; font-weight: 600 !important; }

/* ========================================================= BOUTON ========================================================= */
.moy-build-hero-button { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 48px; padding: 0 18px 0 22px; border: 1px solid rgba(244, 240, 234, 0.88); background: rgba(24, 23, 22, 0.12); color: #FFFFFF !important; text-decoration: none; font-size: 11px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600 !important; backdrop-filter: blur(3px); transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }

.moy-build-hero-button-arrow { position: relative; display: block; width: 35px; height: 1px; background: #FFFFFF; transition: width 0.3s ease; }

.moy-build-hero-button-arrow::before, .moy-build-hero-button-arrow::after { content: ""; position: absolute; right: 0; width: 8px; height: 1px; background: #FFFFFF; transform-origin: right center; }

.moy-build-hero-button-arrow::before { top: -3px; transform: rotate(38deg); }

.moy-build-hero-button-arrow::after { bottom: -3px; transform: rotate(-38deg); }

@media (hover: hover) and (pointer: fine) { .moy-build-hero-button:hover { background: rgba(168, 138, 107, 0.22); border-color: #D8C6AE; transform: translateY(-2px); } .moy-build-hero-button:hover .moy-build-hero-button-arrow { width: 42px; } }

/* ========================================================= TRÈS GRAND ÉCRAN ========================================================= */
@media (min-width: 1700px) { .moy-build-hero-wrapper { padding: 44px 64px; } .moy-build-hero { min-height: 660px; border-radius: 28px; } .moy-build-hero-inner { max-width: 1640px; min-height: 660px; padding: 68px 72px; } .moy-build-hero-content { max-width: 780px; } .moy-build-hero-logo { width: 220px; margin-bottom: 36px; } .moy-build-hero-eyebrow { font-size: 14px; } .moy-build-hero-title { max-width: 750px; font-size: 68px; } }

/* ========================================================= TRÈS TRÈS GRAND ÉCRAN ========================================================= */
@media (min-width: 2200px) { .moy-build-hero-wrapper { padding: 55px 90px; } .moy-build-hero { max-width: 2100px; min-height: 740px; margin: 0 auto; border-radius: 32px; } .moy-build-hero-inner { max-width: 1850px; min-height: 740px; padding: 80px 85px; } .moy-build-hero-logo { width: 250px; } .moy-build-hero-content { max-width: 850px; } .moy-build-hero-title { max-width: 820px; font-size: 76px; } }

/* ========================================================= ORDINATEUR ========================================================= */
@media (max-width: 1400px) { .moy-build-hero-wrapper { padding: 28px 32px; } .moy-build-hero { min-height: 525px; border-radius: 21px; } .moy-build-hero-inner { min-height: 525px; padding: 45px 46px; } .moy-build-hero-logo { width: 165px; margin-bottom: 27px; } .moy-build-hero-eyebrow { font-size: 12px; } .moy-build-hero-title { max-width: 620px; font-size: 53px; } }

/* ========================================================= TABLETTE ========================================================= */
@media (max-width: 991px) { .moy-build-hero-wrapper { padding: 22px; } .moy-build-hero { min-height: 480px; border-radius: 19px; background-position: 58% center; } .moy-build-hero-inner { min-height: 480px; padding: 40px 32px; } .moy-build-hero-content { max-width: 580px; } .moy-build-hero-logo { width: 150px; margin-bottom: 24px; } .moy-build-hero-eyebrow { margin-bottom: 13px; font-size: 11px; } .moy-build-hero-title { max-width: 550px; font-size: 46px; line-height: 1; letter-spacing: -1.1px; } }

/* ========================================================= MOBILE ========================================================= */
@media (max-width: 767px) { .moy-build-hero-wrapper { padding: 12px; } .moy-build-hero { min-height: 430px; border-radius: 16px; background-position: 60% center; } .moy-build-hero-inner { min-height: 430px; padding: 34px 24px; } .moy-build-hero-overlay { background: linear-gradient(90deg, rgba(24, 23, 22, 0.74) 0%, rgba(24, 23, 22, 0.55) 55%, rgba(24, 23, 22, 0.3) 100%), linear-gradient(180deg, rgba(24, 23, 22, 0.18) 0%, rgba(24, 23, 22, 0.42) 100%); } .moy-build-hero-content { max-width: 100%; } .moy-build-hero-logo { width: 135px; margin-bottom: 22px; } .moy-build-hero-eyebrow { margin-bottom: 12px; font-size: 10px; } .moy-build-hero-eyebrow::before { width: 28px; } .moy-build-hero-title { max-width: 510px; margin-bottom: 25px; font-size: 36px; line-height: 1.04; letter-spacing: -0.7px; } .moy-build-hero-button { min-height: 44px; gap: 20px; padding: 0 15px 0 18px; font-size: 10px; } .moy-build-hero-button-arrow { width: 30px; } }

/* ========================================================= PETITS MOBILES ========================================================= */
@media (max-width: 480px) { .moy-build-hero-wrapper { padding: 8px; } .moy-build-hero { min-height: 395px; border-radius: 14px; } .moy-build-hero-inner { min-height: 395px; padding: 28px 20px; } .moy-build-hero-logo { width: 125px; margin-bottom: 19px; } .moy-build-hero-eyebrow { font-size: 9px; } .moy-build-hero-title { font-size: 30px; line-height: 1.06; } }

/*************************************************************************** INTRO **********************************************************************************************/
/*************************************************************************** INTRO **********************************************************************************************/

/*# sourceMappingURL=custom.css.map */