*, *::before, *::after { box-sizing: border-box; }
:root { --page: min(100% - 48px, 1320px); --rule: rgba(58, 36, 24, .18); }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--vermillon); outline-offset: 3px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 12px 16px; transform: translateY(-150%); background: var(--brown); color: var(--ivory); }
.skip-link:focus { transform: none; }


.hero { position: relative; width: var(--page); min-height: min(760px, calc(100svh - 79px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(330px, .62fr); border-inline: 1px solid var(--rule); }
.hero-copy { min-width: 0; padding: clamp(48px, 7vh, 82px) clamp(38px, 6vw, 92px) 70px; display: flex; flex-direction: column; justify-content: space-between; gap: 46px; }
.eyebrow, .button, .quick-link, .text-link { font-size: .69rem; letter-spacing: .25em; text-transform: uppercase; }
.eyebrow { margin: 0; color: var(--terracotta-deep); line-height: 1.7; }
.eyebrow-light { color: var(--peach); }
.hero h1 { max-width: 760px; margin: 0; font-family: var(--font-editorial); font-size: clamp(3.15rem, 5.7vw, 6.15rem); font-style: italic; font-weight: 400; line-height: .98; letter-spacing: -.035em; }
.hero h1 em, .reviews h2 em, .approach h2 em { color: var(--vermillon); font-family: var(--font-editorial); font-style: italic; font-weight: 400; }
.hero-lead { max-width: 590px; margin: 30px 0 0; color: rgba(58, 36, 24, .72); font-size: 1.03rem; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.button { min-height: 50px; padding: 16px 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--brown); background: transparent; }
.button-primary { background: var(--brown); color: var(--ivory); }
.button-primary:hover { background: var(--terracotta-deep); border-color: var(--terracotta-deep); }
.quick-link { display: inline-flex; align-items: center; gap: 28px; padding: 15px 0 10px; border-bottom: 1px solid var(--brown); }
.quick-link b { color: var(--vermillon); font-size: 1rem; }
.hero-portrait { position: relative; min-height: 500px; margin: clamp(28px, 4vh, 48px) clamp(24px, 3vw, 44px) clamp(28px, 4vh, 48px) 0; overflow: hidden; background: var(--sand); }
.hero-portrait > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.hero-portrait::after { content: ""; position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(transparent, rgba(58, 36, 24, .48)); pointer-events: none; }
.portrait-caption { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 26px; display: flex; align-items: end; justify-content: space-between; gap: 20px; color: var(--ivory); }
.portrait-caption span { font-family: var(--font-editorial); font-size: 1.75rem; font-style: italic; line-height: 1; }
.portrait-caption small { font-size: .63rem; letter-spacing: .22em; text-transform: uppercase; }
.hero-review { position: absolute; right: calc(clamp(24px, 3vw, 44px) + 28px); bottom: 120px; z-index: 2; width: 142px; height: 142px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: var(--ivory); box-shadow: 0 10px 32px rgba(58, 36, 24, .16); text-align: center; }
.hero-review .stars { color: var(--terracotta); font-size: .75rem; letter-spacing: .08em; }
.hero-review strong { margin-top: 7px; font-family: var(--font-display); font-size: 1.55rem; font-weight: 500; }
.hero-review > span:last-of-type { font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; }
.hero-review i { margin-top: 8px; color: var(--vermillon); font-style: italic; }

.reviews { padding: clamp(82px, 9vw, 132px) max(24px, calc((100% - 1280px) / 2)); background: var(--cream); color: var(--brown); display: block; border-block: 1px solid var(--rule); }
.reviews .eyebrow-light { color: var(--terracotta-deep); }
.reviews-intro { max-width: 920px; margin: 0 auto; padding: 0; text-align: center; }
.reviews h2 { margin: 18px auto 22px; font-family: var(--font-editorial); font-size: clamp(3rem, 5vw, 5rem); font-style: italic; font-weight: 400; line-height: 1.05; letter-spacing: -.025em; text-wrap: balance; }
.reviews-intro > p:not(.eyebrow) { max-width: 620px; margin-inline: auto; color: rgba(58,36,24,.68); line-height: 1.75; }
.review-score { margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 18px; }
.score-number { font-family: var(--font-display); font-size: 3.25rem; line-height: 1; }
.review-score b { display: block; color: var(--terracotta); letter-spacing: .12em; }
.review-score small { display: block; margin-top: 7px; color: rgba(58,36,24,.52); font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; }
.reviews-content { min-width: 0; padding: 0; margin-top: 54px; }
.reviews-toolbar { padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--rule); }
.reviews-toolbar p { margin: 0; color: rgba(58,36,24,.55); font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; }
.review-controls { display: flex; }
.review-controls button { width: 47px; height: 47px; border: 1px solid var(--rule); background: transparent; color: var(--brown); }
.review-controls button + button { border-left: 0; }
.review-controls button:hover { background: var(--brown); color: var(--ivory); }
.review-rail { margin-top: 22px; padding: 1px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, calc((100% - 32px) / 3)); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.review-rail::-webkit-scrollbar { display: none; }
.review-card { min-height: 340px; margin: 0; padding: 30px; display: grid; grid-template-rows: auto 1fr auto; gap: 24px; scroll-snap-align: start; background: var(--ivory); border: 1px solid rgba(58,36,24,.3); }
.review-card-accent, .review-card-soft { background: var(--ivory); }
.review-card-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.review-card-top span { color: var(--terracotta); font-size: .9rem; letter-spacing: .08em; }
.review-card-top b { color: var(--terracotta-deep); font-size: .75rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; }
.review-card blockquote { margin: 0; align-self: center; font-family: var(--font-editorial); font-size: clamp(1.75rem, 1.8vw, 2rem); font-style: italic; line-height: 1.2; }
.review-card figcaption { padding-top: 22px; border-top: 1px solid var(--rule); }
.review-card figcaption strong, .review-card figcaption span { display: block; }
.review-card figcaption strong { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; }
.review-card figcaption span { margin-top: 7px; color: rgba(58,36,24,.52); font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; }
.text-link { display: inline-flex; align-items: center; gap: 16px; padding-bottom: 7px; border-bottom: 1px solid currentColor; }
.light-link { margin-top: 28px; color: var(--terracotta-deep); }

.approach { position: relative; min-height: 700px; padding: clamp(84px, 10vw, 144px) max(24px, calc((100% - 1280px) / 2)); display: grid; grid-template-columns: minmax(240px, .72fr) minmax(380px, 1.08fr) minmax(260px, .7fr); align-items: center; gap: clamp(34px, 5vw, 78px); overflow: hidden; background: var(--sand); isolation: isolate; }
.approach::after { content: ""; position: absolute; z-index: -1; right: max(0px, calc((100% - 1380px) / 2)); bottom: -8%; width: min(35vw, 480px); height: 108%; background: url('../assets/jolyane-portrait.png') right bottom / contain no-repeat; opacity: 1; }
.approach-note { position: relative; z-index: 1; max-width: 420px; padding: 36px 0; font-family: var(--font-editorial); font-size: clamp(2.3rem, 3.7vw, 4.35rem); font-style: italic; font-weight: 400; line-height: 1.08; color: var(--brown); }
.approach-copy { position: relative; z-index: 1; max-width: 600px; grid-column: 2; }
.approach h2 { margin: 18px 0 28px; font-family: var(--font-editorial); font-size: clamp(2.55rem, 3.55vw, 4.15rem); font-style: italic; font-weight: 400; line-height: 1.05; letter-spacing: -.025em; }
.approach-copy > p:not(.eyebrow) { margin: 0 0 32px; color: rgba(58,36,24,.72); line-height: 1.85; }
.approach-custom-image { position: absolute; left: 7%; bottom: 7%; width: 148px; height: 140px; background: url('../assets/approach-overlay.png') center / contain no-repeat; pointer-events: none; }

.listings { padding: clamp(86px, 10vw, 140px) max(24px, calc((100% - 1180px) / 2)); background: var(--ivory); }
.listings-heading { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: clamp(40px, 8vw, 110px); margin-bottom: 52px; }
.listings-heading h2 { max-width: 650px; margin: 14px 0 0; font-family: var(--font-editorial); font-size: clamp(3rem, 5vw, 5.3rem); font-style: italic; font-weight: 400; line-height: 1.05; letter-spacing: -.025em; }
.listings-intro p { margin: 0 0 26px; color: rgba(58,36,24,.68); line-height: 1.75; }
.listings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.listing-placeholder { min-width: 0; }
.listing-image-placeholder { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--rule); background: repeating-linear-gradient(135deg, var(--sand) 0 12px, var(--cream) 12px 24px); }
.listing-image-placeholder span { position: absolute; font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--brown-soft); font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; }
.listing-lines { padding: 20px 0 8px; }
.listing-lines i { display: block; height: 1px; margin-bottom: 13px; background: rgba(58,36,24,.18); }
.listing-lines i:first-child { width: 46%; height: 10px; background: rgba(58,36,24,.28); }
.listing-lines i:nth-child(2) { width: 78%; }
.listing-lines i:nth-child(3) { width: 60%; }
.listings-status { margin: 18px 0 0; color: rgba(58,36,24,.48); font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; }

.paths { width: min(100% - 48px, 1180px); margin: 0 auto; padding: clamp(86px, 10vw, 140px) 0; }
.paths-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 52px; }
.paths-heading h2 { margin: 0; font-family: var(--font-editorial); font-size: clamp(3rem, 5vw, 5.3rem); font-style: italic; font-weight: 400; letter-spacing: -.025em; line-height: 1.05; white-space: nowrap; }
.paths-heading .eyebrow { order: 2; }
.path { min-height: 144px; display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 30px; border-top: 1px solid var(--rule); transition: background-color .2s ease; }
.path:last-child { border-bottom: 1px solid var(--rule); }
.path:hover { background: var(--cream); }
.path-number { color: var(--terracotta); font-family: var(--font-display); font-size: 1.1rem; }
.path-copy strong { display: block; font-family: var(--font-editorial); font-size: clamp(1.75rem, 3vw, 2.6rem); font-style: italic; font-weight: 400; line-height: 1.12; }
.path-copy small { display: block; margin-top: 8px; color: rgba(58,36,24,.62); font-size: .85rem; line-height: 1.5; }
.path-arrow { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 50%; color: var(--vermillon); font-size: 1.3rem; }

.contact { display: grid; grid-template-columns: 1fr 1fr; background: var(--terracotta-deep); color: var(--ivory); }
.contact-intro, .contact-form { padding: clamp(72px, 8vw, 120px) max(24px, calc((100vw - 1180px) / 2)); }
.contact-intro { padding-right: clamp(40px, 7vw, 110px); }
.contact-intro h2 { margin: 18px 0 28px; font-family: var(--font-editorial); font-size: clamp(3rem, 5vw, 5.4rem); font-style: italic; font-weight: 400; line-height: 1.05; letter-spacing: -.025em; }
.contact-intro > p:not(.eyebrow) { max-width: 560px; color: rgba(250,243,230,.72); line-height: 1.8; }
.direct-contact { margin-top: 48px; border-top: 1px solid rgba(250,243,230,.25); }
.direct-contact a { padding: 18px 0; display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(250,243,230,.25); }
.direct-contact small { color: rgba(250,243,230,.62); font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; }
.direct-contact strong { font-weight: 400; }
.contact-form { padding-left: clamp(40px, 6vw, 90px); background: var(--terracotta); border-left: 1px solid rgba(250,243,230,.24); }
.contact-form label { display: block; margin-bottom: 24px; color: rgba(250,243,230,.72); font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; min-height: 48px; margin-top: 8px; padding: 10px 0; border: 0; border-bottom: 1px solid rgba(250,243,230,.4); border-radius: 0; outline: 0; background: transparent; color: var(--ivory); font-size: 1rem; letter-spacing: 0; text-transform: none; }
.contact-form select option { color: var(--brown); }
.contact-form textarea { resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-bottom-color: var(--ivory); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.button-light { margin-top: 8px; border-color: var(--ivory); background: var(--ivory); color: var(--terracotta-deep); }
.button-light:hover { background: transparent; color: var(--ivory); }


@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr minmax(320px, .62fr); }
  .hero-copy { padding-inline: 42px 60px; }
  .hero-review { right: 56px; bottom: 110px; }
  .approach { grid-template-columns: .7fr 1.08fr .58fr; gap: 32px; }
  .approach h2 { font-size: clamp(2.45rem, 4vw, 3.6rem); }
  .approach-custom-image { display: none; }
}

@media (max-width: 820px) {
  :root { --page: calc(100% - 32px); }
  .hero { width: 100%; min-height: auto; display: flex; flex-direction: column; border: 0; }
  .hero-copy { padding: 44px 24px 38px; gap: 30px; }
  .hero h1 { font-size: clamp(3.1rem, 14.5vw, 5.3rem); }
  .hero-lead { margin-top: 24px; font-size: 1rem; }
  .hero-actions { gap: 22px; }
  .hero-portrait { width: calc(100% - 48px); min-height: 390px; height: 46svh; max-height: 470px; margin: 0 24px 38px; }
  .hero-review { right: 12px; bottom: 350px; width: 118px; height: 118px; padding: 12px; }
  .hero-review strong { font-size: 1.25rem; }
  .hero-review i { display: none; }
  .reviews { padding: 80px 24px; display: block; }
  .reviews-intro { padding: 0 0 52px; border-right: 0; }
  .reviews h2 { font-size: clamp(3.25rem, 14vw, 5rem); }
  .review-score { margin-top: 40px; }
  .reviews-content { padding: 0; }
  .reviews-toolbar { padding-right: 0; }
  .reviews-toolbar p { max-width: 190px; line-height: 1.5; }
  .review-rail { grid-auto-columns: minmax(270px, 82vw); padding-right: 0; }
  .review-card { min-height: 330px; padding: 28px; }
  .review-card blockquote { font-size: 1.75rem; line-height: 1.18; }
  .approach { padding: 92px 24px; display: block; }
  .approach::after { right: -3%; left: auto; bottom: auto; top: 0; width: 58%; height: 48%; background-position: right top; opacity: .9; }
  .approach-note { max-width: 52%; margin-bottom: 78px; padding: 18px 0; font-size: clamp(2.55rem, 11vw, 4.5rem); }
  .approach h2 { font-size: clamp(3rem, 13vw, 4.7rem); }
  .listings { padding: 90px 24px; }
  .listings-heading { display: block; margin-bottom: 42px; }
  .listings-heading h2 { font-size: clamp(3.1rem, 13vw, 5rem); }
  .listings-intro { margin-top: 28px; }
  .listings-grid { grid-template-columns: 1fr; gap: 34px; }
  .listing-placeholder:nth-child(n+3) { display: none; }
  .paths { width: calc(100% - 48px); padding: 90px 0; }
  .paths-heading { display: flex; gap: 15px; }
  .paths-heading h2 { font-size: clamp(1.75rem, 8.4vw, 4rem); line-height: 1; }
  .path { min-height: 160px; grid-template-columns: 42px 1fr auto; gap: 14px; }
  .path-copy small { padding-right: 6px; }
  .path-arrow { width: 42px; height: 42px; }
  .contact { display: block; }
  .contact-intro, .contact-form { padding: 82px 24px; }
  .contact-intro h2 { font-size: clamp(3.35rem, 14vw, 5rem); }
  .contact-form { border-top: 1px solid rgba(250,243,230,.22); border-left: 0; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .direct-contact a { flex-direction: column; gap: 7px; }
  .direct-contact strong { overflow-wrap: anywhere; }
}

@media (max-width: 430px) {
  .hero-copy { padding-top: 36px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .quick-link { align-self: flex-start; }
  .hero-portrait { min-height: 340px; height: 43svh; max-height: 410px; }
  .hero-review { bottom: 304px; }
  .portrait-caption { left: 20px; right: 20px; bottom: 20px; align-items: start; flex-direction: column; gap: 3px; }
  .review-controls { display: none; }
  .review-rail { grid-auto-columns: calc(100vw - 64px); }
  .approach-note { margin-bottom: 72px; }
  .path { grid-template-columns: 35px 1fr; }
  .path-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }

/* Chrome partagé (site/site.css) : ajustements accueil */
.site-footer { margin-top: 0; }
.contact-form .privacy-note, .contact-form .form-status { color: rgba(250,243,230,.8); font-style: normal; text-transform: none; letter-spacing: 0; }
.contact-form .form-status { margin-top: 14px; font-size: .85rem; text-align: left; }