/* Trenca Paysage — feuille de style partagée, DOM unique responsive */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; width: 100%; max-width: 100%; overflow-x: hidden; background: #eee7de; }
body { min-width: 320px; font-family: Poppins, 'Century Gothic', sans-serif; -webkit-font-smoothing: antialiased; color: #2b2921; }
img, video, svg { max-width: 100%; }
a { color: #5d6536; text-decoration: none; }
a:hover { color: #a4b359; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }

.shell { width: min(100% - 34px, 720px); margin-inline: auto; }

/* ============ HEADER / NAV ============ */
.site-header { position: relative; z-index: 20; }
.logo { display: inline-flex; flex-direction: column; line-height: 1; }
.logo strong { font-weight: 300; font-size: clamp(21px, 6.3vw, 28px); letter-spacing: .17em; }
.logo span { margin-top: 7px; font-size: 7px; font-weight: 300; letter-spacing: .69em; }
.logo-img { display: block; height: 34px; width: auto; }
.logo-badge { display: inline-flex; align-items: center; padding: 8px 13px; background: #1d220f; border-radius: 5px; }
.logo-badge .logo-img { height: 26px; }

.nav-toggle-group { position: relative; z-index: 4; background: #0f120a; }
.nav-toggle-group summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 15px 17px; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #eee9da; }
.nav-toggle-group summary::-webkit-details-marker { display: none; }
.nav-toggle-group summary::after { content: '+'; font-size: 16px; font-weight: 300; color: #a4b359; }
.nav-toggle-group[open] summary::after { content: '\2013'; }
.nav-toggle-panel { padding: 4px 17px 18px; display: flex; flex-direction: column; }
.nav-toggle-panel a { padding: 9px 0; font-size: 12px; font-weight: 400; letter-spacing: .03em; color: #cfc8b8; border-top: 1px solid rgba(244,239,226,.1); }

.desktop-nav { display: none; }

/* ============ HERO ============ */
.hero { position: relative; min-height: clamp(620px, 172vw, 780px); overflow: hidden; color: #f8f2e9; background: #0b0d08; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 58% center; filter: brightness(.78) saturate(.92); z-index: 0; }
.hero img.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: 0; }
.hero-img-static { position: absolute; inset: 0; background-size: cover; }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(96deg, rgba(9,11,7,.96) 0%, rgba(9,11,7,.84) 31%, rgba(9,11,7,.48) 58%, rgba(9,11,7,.08) 100%); z-index: 1; pointer-events: none; }
.hero::after { content: ''; position: absolute; left: -7%; right: -7%; bottom: -49px; height: 118px; background: #eee7de; transform: rotate(-5.7deg); transform-origin: 50% 50%; z-index: 2; pointer-events: none; }
.hero-nav { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; padding-top: 24px; }
.hero-nav .logo { color: #f8f3ea; }
.hero-nav .logo span { color: #cfc8b8; }
.hero-quote-badge { min-width: 92px; height: 38px; padding: 0 13px; border: 1px solid rgba(244,239,226,.48); display: inline-flex; align-items: center; justify-content: center; color: #eee8dc; font-size: 8px; font-weight: 400; letter-spacing: .13em; text-transform: uppercase; }
.hero-copy { position: relative; z-index: 3; width: min(88%, 520px); padding-top: clamp(105px, 28vw, 145px); padding-bottom: 145px; }
.hero-kicker { margin: 0 0 10px; font-size: 12px; font-weight: 300; letter-spacing: .24em; text-transform: uppercase; color: #ece7dc; }
.hero-title { margin: 0; font-weight: 300; font-size: clamp(49px, 15.4vw, 86px); letter-spacing: -.018em; line-height: .88; }
.hero-script { display: block; margin-top: -7px; margin-left: 2px; font-family: Allura, cursive; font-size: clamp(78px, 24vw, 132px); line-height: .72; color: #a4b359; font-weight: 400; }
.hero-location { margin: 31px 0 0; font-size: 11px; font-weight: 300; letter-spacing: .19em; text-transform: uppercase; color: #e7e1d3; }
.hero-intro { width: min(100%, 320px); margin: 23px 0 0; font-size: 16px; font-weight: 300; line-height: 1.65; color: rgba(243,239,230,.88); }
.hero-phone { display: block; margin-top: 14px; font-size: 12px; font-weight: 500; letter-spacing: .08em; color: #e7e1d3; }
.hero-review { margin-top: 18px; padding: 16px 18px; background: rgba(20,22,14,0.55); border: 1px solid rgba(244,241,232,.22); max-width: 320px; }
.hero-review-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.hero-review-stars { display: flex; gap: 2px; }
.hero-review-stars svg { width: 10px; height: 10px; color: #a4b359; }
.hero-review-badge { font-size: 8px; font-weight: 500; letter-spacing: .06em; color: #c9c4b3; }
.hero-review-quote { margin: 0 0 8px; font-size: 11px; font-weight: 300; font-style: italic; line-height: 1.5; color: rgba(238,236,224,.95); }
.hero-review-author { margin: 0; font-size: 9.5px; font-weight: 500; letter-spacing: .04em; color: #a9b47c; }

/* ============ BUTTON ============ */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; margin-top: 26px; background: #5f6626; color: #f4efe2 !important; font-size: 12px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; border: none; }
.btn:hover { background: #6d7530; }
.btn::after { content: '\27f6'; margin-left: 14px; font-size: 16px; font-weight: 300; }
.btn-full { width: 100%; }

/* ============ SERVICES (home) ============ */
.services { position: relative; min-height: 1135px; padding: 10px 0 70px; background: #eee7de; overflow: hidden; }
.service-collage { position: absolute; left: 0; top: 0; width: 100%; height: 560px; z-index: 0; pointer-events: none; }
.service-collage img { position: absolute; object-fit: cover; box-shadow: 0 10px 24px rgba(25,22,16,.08); }
.service-collage .p { left: 0; top: 0; width: 58%; height: 244px; clip-path: polygon(0 0,100% 0,88% 100%,0 100%); object-position: 40% 55%; }
.service-collage .b { left: 0; top: 262px; width: 48%; height: 282px; clip-path: polygon(0 0,100% 6%,88% 100%,0 95%); object-position: 32% 54%; }
.service-collage .c { left: 18%; top: 286px; width: 46%; height: 244px; clip-path: polygon(12% 0,100% 4%,88% 100%,0 95%); object-position: 68% 48%; }
.services-panel { position: relative; z-index: 2; width: calc(100% - 16px); margin-left: 16px; margin-top: 112px; min-height: 790px; padding: 58px 20px 48px 118px; background: #eee7de; clip-path: polygon(18% 0,100% 0,100% 96%,0 100%,8% 48%); }
.eyebrow { margin: 0 0 7px; color: #635f47; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.heading { margin: 0; font-size: clamp(27px, 8.3vw, 43px); font-weight: 300; line-height: .93; color: #33301e; letter-spacing: -.015em; }
.heading-script { display: block; margin-top: -5px; font-family: Allura, cursive; font-size: clamp(51px, 15vw, 78px); line-height: .77; color: #5d6536; font-weight: 400; }
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 15px; row-gap: 0; margin: 34px 0 0; }
.service-item { min-width: 0; min-height: 103px; padding: 19px 3px 18px 0; border-bottom: 1px solid #d7d0c4; display: flex; align-items: flex-start; gap: 10px; }
.service-item svg { width: 26px; height: 26px; flex: none; color: #4a4736; margin-top: 1px; }
.service-item b { font-size: 13px; line-height: 1.5; letter-spacing: .02em; font-weight: 500; color: #2b2921; }
.text-link { display: inline-flex; align-items: center; gap: 9px; margin: 26px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #2b2921; }
.text-link::after { content: '\27f6'; color: #6c6852; font-size: 17px; font-weight: 300; }

/* ============ ENGAGEMENT ============ */
.engagement { position: relative; min-height: 680px; margin-top: -18px; background: #171b0b; color: #f4f1e8; overflow: hidden; }
.engagement-image { position: absolute; z-index: 0; right: -6%; top: 0; width: 52%; height: 100%; max-width: none; object-fit: cover; object-position: 70% center; filter: brightness(.67) saturate(.85); clip-path: polygon(18% 0,100% 4%,100% 100%,0 100%); }
.engagement-card { position: absolute; z-index: 2; left: 0; top: 0; width: 88%; height: 100%; padding: 72px 88px 48px 30px; background: linear-gradient(120deg,#22270f 0%,#171b0b 70%); clip-path: polygon(0 0,82% 0,100% 100%,0 95%); }
.engagement .eyebrow { color: #899457; }
.engagement .heading { max-width: 255px; color: #f4f1e8; font-size: clamp(22px, 6.6vw, 34px); line-height: 1.1; }
.engagement .heading-script { color: #a4b359; font-size: clamp(44px, 12.6vw, 62px); margin-top: 2px; }
.engagement-copy { max-width: 255px; width: auto; margin: 24px 0 0; color: rgba(238,236,224,.85); font-size: 14px; font-weight: 300; line-height: 1.7; }
.values { display: flex; flex-wrap: wrap; gap: 13px 14px; margin-top: 27px; max-width: 270px; }
.value { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 9px; letter-spacing: .04em; color: #e8e4d5; white-space: nowrap; }
.value svg { width: 23px; height: 23px; color: #e2dfcc; }
.engagement .text-link { margin-left: 0; margin-top: 27px; color: #eee9da; }
.engagement .text-link::after { color: #d8d4c2; }

/* ============ FOOTER ============ */
.site-footer { position: relative; background: #ece5da; padding: 40px 0 34px; color: #615c53; }
.footer-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 23px 18px; align-items: center; }
.site-footer .logo { color: #3a3529; }
.site-footer .logo span { color: #615c53; }
.footer-contact { font-size: 12px; line-height: 1.8; }
.footer-contact a { display: block; margin-top: 5px; color: #615c53; }
.footer-cta { grid-column: 1 / -1; width: 100%; margin-top: 0; background: #1d220f; }
.footer-legal { text-align: center; padding: 14px 20px 0; font-size: 11px; color: #615c53; }
.footer-legal a { color: #615c53; text-decoration: underline; }

/* ============ GENERIC CONTENT SECTIONS ============ */
.section { padding: 60px 0; background: #eee7de; }
.section.on-dark { background: #1d220f; }
.section.alt { background: #e6ddcf; }
.section-eyebrow { margin: 0 0 9px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #635f47; }
.section-eyebrow.on-dark { color: #899457; }
.section-heading { margin: 0; font-size: clamp(23px, 7vw, 34px); font-weight: 300; line-height: 1.15; color: #33301e; }
.section-heading.on-dark { color: #f4f1e8; }
.section-script { display: block; margin-top: 2px; font-family: Allura, cursive; font-size: clamp(36px, 11vw, 56px); line-height: 1; color: #5d6536; font-weight: 400; }
.section-script.on-dark { color: #a4b359; }
.section-body { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.7; color: #4a4736; }
.section-body.on-dark { color: rgba(238,236,224,.88); }
.section-body + .section-body { margin-top: 14px; }
.section-note { margin: 14px 0 0; font-size: 16px; font-weight: 300; font-style: italic; line-height: 1.6; color: #66614d; }
.section-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: #2b2921; }
.section-link.on-dark { color: #eee9da; }
.section-link svg { width: 32px; height: 7px; flex: none; }
.section-row { margin-top: 42px; }
.section-row-num { font-family: Allura, cursive; font-size: 28px; color: #a9b47c; line-height: 1; display: block; margin-bottom: 6px; }
.section-h3 { margin: 0 0 10px; font-size: 18px; font-weight: 400; line-height: 1.3; color: #2b2921; }
.section-row-image { margin-top: 16px; height: 200px; overflow: hidden; }
.section-row-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.section-cards { display: flex; flex-direction: column; gap: 16px; margin-top: 26px; }
.section-card { background: rgba(244,241,232,.04); border: 1px solid rgba(244,241,232,.18); padding: 22px 20px; }
.section-stars { display: flex; gap: 4px; margin: 0 0 12px; }
.section-stars svg { width: 12px; height: 12px; color: #a4b359; }
.section-quote { margin: 0; font-size: 16px; font-weight: 300; font-style: italic; line-height: 1.6; color: rgba(238,236,224,.92); }
.section-quote-author { margin: 14px 0 0; font-size: 12px; font-weight: 500; letter-spacing: .04em; color: #a9b47c; }
.section-chips { display: flex; flex-wrap: wrap; gap: 9px 10px; margin-top: 22px; }
.section-chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid #d5cdc0; font-size: 12px; font-weight: 500; color: #2b2921; }
.section-chip svg { width: 11px; height: 11px; color: #5d6536; flex: none; }
.section-chip.is-hq { border-color: #5d6536; background: rgba(93,101,54,.08); }
.section-ul { list-style: none; margin: 18px 0 0; padding: 0; }
.section-ul li { position: relative; padding-left: 20px; margin-top: 12px; font-size: 16px; font-weight: 300; line-height: 1.6; color: #4a4736; }
.section-ul li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; background: #5d6536; border-radius: 50%; }

.faq-item { padding: 20px 0; }
.faq-item + .faq-item { border-top: 1px solid #d5cdc0; }
.faq-q { margin: 0 0 8px; font-size: 17px; font-weight: 500; color: #2b2921; }
.faq-a { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.6; color: #4a4736; }

.cta-band { background: #1d220f; padding: 54px 0 58px; text-align: center; }
.cta-band .section-body { margin-top: 16px; }

/* ============ BREADCRUMB ============ */
.breadcrumb { padding: 14px 0; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; gap: 6px; font-size: 12px; color: #615c53; }
.breadcrumb li { display: flex; align-items: center; gap: 6px; }
.breadcrumb li:not(:last-child)::after { content: '/'; color: #b7ae9b; }
.breadcrumb a { color: #5d6536; }
.breadcrumb span[aria-current] { color: #615c53; }

/* ============ FORMS ============ */
.field-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.field-input { height: 50px; padding: 0 16px; border: 1px solid #d5cdc0; background: #fff; font-family: inherit; font-size: 16px; color: #2b2921; width: 100%; }
.field-textarea { padding: 12px 16px; border: 1px solid #d5cdc0; background: #fff; font-family: inherit; font-size: 16px; color: #2b2921; resize: vertical; width: 100%; }
.field-group { display: flex; flex-direction: column; gap: 14px; }
.consent-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: 14px; font-weight: 300; font-style: italic; line-height: 1.5; color: #66614d; cursor: pointer; }
.consent-row input { margin-top: 3px; flex: none; width: 18px; height: 18px; }

/* ============ NAV DROPDOWN (desktop) ============ */
.nav-dd { position: relative; display: inline-block; }
.nav-dd > button { font: inherit; background: none; border: none; padding: 0; color: inherit; display: inline-flex; align-items: center; cursor: pointer; }
.nav-dd > button::after { content: '\25be'; font-size: 9px; margin-left: 5px; }
.nav-dd-panel { position: absolute; top: 26px; left: -20px; min-width: 300px; background: #1d220f; border: 1px solid rgba(244,239,226,.16); padding: 10px 0; z-index: 80; box-shadow: 0 20px 44px rgba(0,0,0,.4); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.nav-dd:hover .nav-dd-panel, .nav-dd:focus-within .nav-dd-panel { opacity: 1; visibility: visible; transition: opacity .2s ease; }
.nav-dd-panel a { display: block; padding: 9px 22px; font-size: 13px; font-weight: 400; letter-spacing: .04em; color: #d9d4c7 !important; white-space: nowrap; }
.nav-dd-panel a:hover { background: rgba(244,239,226,.08); color: #f4efe2 !important; }

/* ============ STICKY MOBILE BAR ============ */
.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; box-shadow: 0 -4px 16px rgba(0,0,0,.18); }
.sticky-bar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.sticky-call { background: #2b2921; color: #f4efe2 !important; }
.sticky-devis { background: #5f6626; color: #f4efe2 !important; }
.site-footer { padding-bottom: 78px; }

@media (max-width: 699px) {
  .hero-copy { width: min(92%, 520px); }
  .services { min-height: 1160px; }
  .services-panel { padding-top: 60px; }
  .engagement-card { padding-right: 94px; }
}

@media (min-width: 700px) {
  .shell { width: min(100% - 64px, 900px); }
  .hero { min-height: 720px; }
  .hero-copy { padding-top: 145px; }
  .services { min-height: 940px; }
  .services-panel { width: 71%; margin-left: 29%; margin-top: 84px; padding-left: 70px; padding-right: 48px; }
  .service-collage { width: 56%; height: 760px; }
  .service-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .engagement-card { width: 66%; padding-left: 60px; }
  .engagement-image { width: 61%; }
  .values { gap: 25px; }
}

@media (max-width: 370px) {
  .shell { width: min(100% - 26px, 720px); }
  .services-panel { width: calc(100% - 12px); margin-left: 12px; padding-left: 90px; padding-right: 16px; }
  .service-grid { column-gap: 10px; margin-left: 0; }
  .service-item svg { width: 23px; height: 23px; }
  .engagement-card { width: 84%; padding-left: 24px; padding-right: 68px; }
  .values { gap: 9px; }
}

/* ================================================================ */
/* ============ DESKTOP ENHANCEMENTS (>= 1024px) ================== */
/* ================================================================ */
@media (min-width: 1024px) {
  .shell { width: min(100% - 96px, 1200px); }

  .nav-toggle-group, .sticky-bar { display: none; }
  .desktop-nav { display: flex; align-items: center; gap: 34px; font-size: 13px; font-weight: 400; letter-spacing: .06em; }
  .desktop-nav > a, .desktop-nav .nav-dd > button { color: #d9d4c7; }
  .hero-nav .desktop-nav > a:first-child { color: #e3ded1; }
  .site-footer .desktop-nav { display: none; }

  .hero .shell { position: relative; }
  .hero-copy { width: min(52%, 620px); padding-top: 165px; padding-bottom: 0; }
  .hero-title { font-size: clamp(58px, 5.6vw, 74px); white-space: nowrap; }
  .hero-script { font-size: clamp(84px, 8vw, 108px); }
  .hero-intro { width: min(100%, 420px); font-size: 17px; }
  .hero-review { position: absolute; right: 0; top: 56%; width: 360px; max-width: 360px; margin-top: 0; z-index: 3; padding: 20px 24px; }
  .hero-review-quote { font-size: 13px; }
  .logo-badge { padding: 12px 20px; }
  .logo-badge .logo-img { height: 54px; }

  .services { min-height: 800px; padding: 40px 0 90px; }
  /* Proportions ported 1:1 from the original desktop artboard (746x830 bounding
     box), converted to percentages so the same angled, overlapping silhouette
     scales with the container instead of the old fixed 1440px canvas. */
  .service-collage { position: relative; width: 46%; height: auto; aspect-ratio: 746 / 830; float: left; }
  .service-collage .p { position: absolute; left: 0%; top: 0%; width: 100%; height: 66%; clip-path: polygon(0% 30%, 100% 0%, 84% 79%, 0% 100%); object-position: 50% 46%; }
  .service-collage .b { position: absolute; left: 0%; top: 59.5%; width: 39.3%; height: 40.5%; clip-path: polygon(0% 17%, 100% 1%, 73% 94%, 0% 100%); object-position: 60% 40%; }
  .service-collage .c { position: absolute; left: 28.4%; top: 52%; width: 55.4%; height: 45.7%; clip-path: polygon(19% 17%, 100% 1%, 76% 93%, 0% 100%); object-position: 50% 38%; }
  .services-panel { float: right; width: 48%; margin: 40px 0 0; padding: 0; clip-path: none; min-height: 0; }
  .service-grid { grid-template-columns: repeat(3,minmax(0,1fr)); column-gap: 24px; row-gap: 6px; }
  .heading { font-size: clamp(34px, 3vw, 46px); }

  .engagement { min-height: 560px; margin-top: 0; }
  .engagement-card { width: 50%; padding: 90px 70px 60px 90px; clip-path: polygon(0 0,88% 0,100% 100%,0 100%); }
  .engagement-image { width: 55%; right: 0; clip-path: polygon(10% 0,100% 0,100% 100%,0 100%); }
  .engagement .heading { max-width: 420px; font-size: clamp(30px, 2.6vw, 40px); }
  .engagement .heading-script { font-size: clamp(60px, 5.6vw, 80px); }
  .engagement-copy { max-width: 400px; font-size: 15px; }
  .values { max-width: 440px; }

  .section-inner-wide { max-width: 1000px; }
  .section-row-wide { display: flex; align-items: center; gap: 64px; }
  .section-row-wide.reverse { flex-direction: row-reverse; }
  .section-row-wide .section-row-text { flex: 0 0 54%; }
  .section-row-wide .section-row-image { flex: 1 1 auto; height: 380px; margin-top: 0; clip-path: polygon(6% 0, 100% 7%, 94% 100%, 0 93%); }
  .section-heading { font-size: clamp(30px, 2.6vw, 40px); }
  .section-script { font-size: clamp(56px, 5vw, 72px); }
  .section-cards-wide { display: flex; flex-direction: row; gap: 28px; }
  .section-cards-wide .section-card { flex: 1; }
  .section-chips { gap: 12px 14px; }

  .faq-item { padding: 26px 0; }
  .faq-q { font-size: 18px; }

  .footer-grid { grid-template-columns: 1fr 1.4fr 1fr auto; gap: 24px; }
  .footer-cta { grid-column: auto; width: auto; }
  .footer-legal { text-align: left; padding-left: 0; }
}