/* L'identité publique : volumes mesurés, dessin au trait et couleurs de matière. */
:root {
  --color-background: #f4efe6;
  --color-surface: #e8eadf;
  --color-text: #283b33;
  --color-text-muted: #66776c;
  --color-accent: #ad5b40;
  --color-dark: #4a302e;
  --color-border: #c9c9bc;
  --container-width: 1280px;
}
html { scroll-padding-top: calc(var(--header-height, 76px) + 16px); }
body { background: var(--color-background); }
.wrap { width: min(calc(100% - clamp(2.5rem, 8vw, 8rem)), var(--container-width)); }
.site-header { position: sticky; top: 0; z-index: 30; min-height: 76px; padding: .8rem clamp(1.25rem, 4vw, 4rem); background: rgba(244,239,230,.93); border-color: rgba(78,87,69,.2); backdrop-filter: blur(18px); }
.brand { font-size: 2.4rem; letter-spacing: -.065em; }
.brand small { font-size: .47rem; margin-top: .58rem; letter-spacing: .16em; }
.site-nav { gap: clamp(.7rem, 1.8vw, 2rem); font-size: .77rem; letter-spacing: .035em; }
.site-nav a { white-space: nowrap; }
.site-nav a.is-active:not(.nav-contact) { color: var(--color-accent); }
.site-nav a.is-active:not(.nav-contact)::after { content: ''; display: block; width: 100%; margin-top: .15rem; border-top: 1px solid currentColor; }
.site-nav .nav-contact { padding: .62rem .95rem; border: 1px solid var(--color-text); border-radius: 100px; }
.nav-contact span { margin-left: .35rem; }
.site-footer { position: relative; isolation: isolate; overflow: hidden; padding: clamp(3rem, 6vw, 6rem) clamp(1.25rem, 5vw, 5rem) 1.8rem; background: linear-gradient(135deg, #dedbcc, #d6d4c4); }
.footer-scene { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.footer-top, .footer-bottom { position: relative; z-index: 1; }
.footer-top { padding-bottom: clamp(3.5rem, 7vw, 7rem); }
.footer-statement { font-size: clamp(2.7rem, 6.6vw, 6.4rem); }
.circle-link { width: clamp(4rem, 7vw, 7rem); font-size: 2rem; }
.footer-bottom { font-size: .75rem; }
.experience { overflow: clip; }
.experience section { position: relative; isolation: isolate; scroll-margin-top: calc(var(--header-height, 76px) + 16px); }
.scene-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: var(--scene-opacity, .55); }
.scene-layer svg { display: block; width: 100%; height: 100%; opacity: var(--scene-visibility, 1); transform: translate3d(0, var(--scene-drift, 0px), 0) scale(1.09); transform-origin: center; will-change: transform, opacity; }
.experience.motion-ready .scene-draw { stroke-dasharray: 1; stroke-dashoffset: var(--draw-offset, 0); }
.hero-scene { --scene-opacity: .44; }
.intro-scene { --scene-opacity: .42; }
.yoga-scene { --scene-opacity: .48; }
.cycles-scene { --scene-opacity: .46; }
.massage-scene { --scene-opacity: .58; }
.about-scene { --scene-opacity: .45; }
.contact-scene { --scene-opacity: .42; }
.experience-hero-inner, .experience-intro > .section-number, .experience-intro > .intro-content, .experience-section-grid, .experience-about > .section-number, .experience-about > .about-content, .contact-layout { position: relative; z-index: 1; }
.experience h1, .experience h2 { overflow-wrap: normal; font-weight: 400; letter-spacing: -.052em; }
.experience em { font-weight: 400; color: var(--color-accent); }
.scroll-progress { position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: 2px; transform: scaleX(var(--scroll-progress, 0)); transform-origin: left; background: var(--color-accent); pointer-events: none; }
.experience-kicker, .section-number { font: 700 .66rem/1.4 var(--font-body); text-transform: uppercase; letter-spacing: .19em; }
.experience-kicker { margin-bottom: 1.45rem; }
.kicker-dot { display: inline-block; width: 7px; height: 7px; margin-right: .65rem; border-radius: 50%; background: currentColor; vertical-align: .1em; }
.experience-link { display: inline-flex; justify-content: space-between; gap: 3rem; width: fit-content; min-width: 12rem; padding: .65rem 0; border-bottom: 1px solid currentColor; font-size: .82rem; font-weight: 600; transition: gap .35s ease, color .35s ease; }
.experience-link:hover { gap: 3.7rem; color: var(--color-accent); }
.experience-hero { min-height: min(740px, calc(100svh - 76px)); position: relative; display: grid; align-items: center; background: #e8dfd1; isolation: isolate; }
.experience-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .75; background: radial-gradient(circle at 82% 47%, #f6e4cf 0, transparent 40%), linear-gradient(115deg,#e9e0d3,#eee6d7 50%,#e0d6c4); }
.hero-grain { position: absolute; inset: 0; z-index: -1; opacity: .25; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.4' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); pointer-events: none; }
.experience-hero-inner { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 2vw; padding-block: 3rem 3.5rem; }
.experience-hero-copy { position: relative; z-index: 2; padding-block: 2rem; }
.experience-hero h1 { max-width: 9.5ch; margin: 0 0 1.6rem; font-size: clamp(3.55rem, 6.35vw, 6.2rem); line-height: .99; }
.experience-lead { max-width: 26rem; margin-bottom: 2.3rem; font-size: clamp(1rem, 1.28vw, 1.2rem); line-height: 1.55; color: #46564c; }
.hero-illustration { position: relative; max-width: 550px; width: 100%; aspect-ratio: 580 / 610; justify-self: center; }
.hero-illustration svg, .yoga-art svg, .massage-art svg, .about-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-disc { position: absolute; inset: 9% 9% 14%; border-radius: 50%; background: #c78465; box-shadow: inset -18px -16px 0 rgba(124,66,49,.12); transform: translate3d(0, calc(var(--art-drift, 0px) * -.55), 0); }
.hero-orbit { position: absolute; inset: 0; }
.figure-image { position: relative; z-index: 1; display: block; max-width: none; height: auto; object-fit: contain; transform: translate3d(0, var(--art-drift, 0px), 0); will-change: transform; }
.hero-figure { position: absolute; height: 109%; width: auto; max-width: none; left: 50%; bottom: -8%; transform: translate3d(-50%, var(--art-drift, 0px), 0); }
.experience-intro { display: grid; grid-template-columns: 27% 1fr; gap: 2rem; padding-block: clamp(6rem, 11vw, 11rem); }
.section-number { display: flex; justify-content: space-between; gap: 1rem; width: 100%; padding-top: .9rem; border-top: 1px solid currentColor; color: var(--color-text-muted); }
.section-number span:first-child { color: var(--color-accent); }
.intro-content { position: relative; max-width: 710px; padding-left: 3vw; }
.experience-intro h2, .experience-about h2 { margin: 0 0 2.2rem; font-size: clamp(2.9rem, 5.1vw, 5.1rem); line-height: 1.05; }
.intro-content > p:not(.intro-ornament) { max-width: 37rem; margin-bottom: 1.2rem; font-size: clamp(1.04rem, 1.45vw, 1.3rem); line-height: 1.65; }
.intro-content .intro-aside { max-width: 25rem !important; margin-top: 2rem; margin-left: 20%; color: var(--color-text-muted); font-size: .96rem !important; }
.experience-yoga { background: #dfe5d9; }
.experience-section-grid { display: grid; grid-template-columns: 46% 1fr; gap: clamp(3rem, 8vw, 8rem); align-items: center; padding-block: clamp(5rem, 9vw, 9rem); }
.yoga-art { position: relative; max-width: 510px; width: 100%; aspect-ratio: 520 / 620; justify-self: center; }
.yoga-art::before { content: ''; position: absolute; inset: 12% 9% 8%; border-radius: 48% 48% 2% 2%; background: #e7e9d9; }
.yoga-arch { position: absolute; inset: 0; }
.yoga-figure { position: absolute; height: 96%; width: auto; left: 50%; bottom: 2%; transform: translate3d(-50%, var(--art-drift, 0px), 0); }
.experience-cycles { background: #ebe2d6; }
.cycles-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 52%); padding-block: clamp(5rem, 8vw, 8rem); }
.cycles-art { position: relative; width: 100%; max-width: 640px; aspect-ratio: 620 / 470; justify-self: center; }
.cycles-art::before { content: ''; position: absolute; inset: 8% 4% 6%; border-radius: 50%; background: #dcc7b5; opacity: .6; }
.cycles-orbit { position: absolute; inset: 0; width: 100%; height: 100%; }
.cycles-figure { position: absolute; left: -5%; bottom: 3%; width: 110%; }
.cycles-signature { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; max-width: 30rem; margin: 0 0 1.7rem; padding-top: 1.1rem; border-top: 1px solid rgba(96,82,68,.4); color: #775a4d; font: 700 .67rem/1.5 var(--font-body); text-transform: uppercase; letter-spacing: .13em; }
.cycles-signature span + span::before { content: '·'; margin-right: 1.2rem; }
.experience-section-copy .section-number { margin-bottom: clamp(3rem, 5vw, 5rem); }
.experience-section-copy h2, .experience-contact h2 { margin: 0 0 1.8rem; font-size: clamp(3.15rem, 5vw, 5rem); line-height: 1.03; }
.section-description { max-width: 31rem; margin-bottom: 2.1rem; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.7; }
.experience-offerings { margin-bottom: 2rem; border-top: 1px solid currentColor; }
.offering { display: grid; grid-template-columns: minmax(8rem, .7fr) 1fr; gap: 1.2rem; padding: 1rem 0; border-bottom: 1px solid currentColor; align-items: baseline; }
.offering-name { font: 400 clamp(1.07rem, 1.7vw, 1.45rem)/1.2 var(--font-display); }
.offering-detail { font-size: .76rem; line-height: 1.5; opacity: .8; }
.breath-interval { position: relative; height: clamp(160px, 24vw, 300px); display: flex; justify-content: center; align-items: center; gap: clamp(2rem, 8vw, 8rem); background: linear-gradient(180deg, #dfe5d9 0%, #eee9de 56%, #e5d8cc 100%); color: #987461; font: italic clamp(1.3rem, 2vw, 2rem) var(--font-display); }
.breath-interval::before, .breath-interval::after { content: ''; position: absolute; top: 50%; width: min(24vw, 340px); border-top: 1px solid rgba(151,112,91,.3); }
.breath-interval::before { left: 0; transform: translateY(calc(-50% + var(--breath-shift, 0px))) rotate(-7deg); }
.breath-interval::after { right: 0; transform: translateY(calc(-50% - var(--breath-shift, 0px))) rotate(7deg); }
.breath-symbol { display: block; width: clamp(5rem, 10vw, 9rem); height: auto; flex: none; transform: scale(var(--breath-scale, 1)); }
.breath-ring, .breath-fill, .breath-center { transform-origin: 90px 90px; animation-duration: 8s; animation-timing-function: cubic-bezier(.42,0,.58,1); animation-iteration-count: infinite; animation-play-state: paused; }
.breath-ring-outer { animation-name: breathe-outer; }
.breath-ring-inner { animation-name: breathe-inner; }
.breath-fill { animation-name: breathe-fill; }
.breath-center { animation-name: breathe-center; }
.breath-interval span { opacity: .48; animation-duration: 8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-play-state: paused; }
.breath-in { animation-name: breathe-in-label; }
.breath-out { animation-name: breathe-out-label; }
.breath-interval.is-breath-visible .breath-ring, .breath-interval.is-breath-visible .breath-fill, .breath-interval.is-breath-visible .breath-center, .breath-interval.is-breath-visible span { animation-play-state: running; }
@keyframes breathe-outer { 0%, 100% { transform: scale(.83); opacity: .45; } 46%, 54% { transform: scale(1.06); opacity: 1; } }
@keyframes breathe-inner { 0%, 100% { transform: scale(.88); opacity: .35; } 46%, 54% { transform: scale(1.04); opacity: .8; } }
@keyframes breathe-fill { 0%, 100% { transform: scale(.75); opacity: .3; } 46%, 54% { transform: scale(1.02); opacity: .8; } }
@keyframes breathe-center { 0%, 100% { transform: scale(.9); } 46%, 54% { transform: scale(1.35); } }
@keyframes breathe-in-label { 0%, 8%, 46% { opacity: 1; } 55%, 100% { opacity: .4; } }
@keyframes breathe-out-label { 0%, 46% { opacity: .4; } 55%, 92% { opacity: 1; } 100% { opacity: .4; } }
.experience-massage { position: relative; background: #563934; color: #f6e9d9; }
.experience-massage::before { content: ''; position: absolute; inset: 0; opacity: .35; background: radial-gradient(ellipse at 73% 51%, #895743, transparent 54%); pointer-events: none; }
.massage-layout { position: relative; grid-template-columns: 1fr 46%; }
.experience-massage .section-number { color: #dfc9b8; }
.experience-massage .section-number span:first-child, .experience-massage em { color: #e8b08d; }
.experience-massage .section-description { color: #ebdcd0; }
.experience-massage .offering { border-color: rgba(246,233,217,.38); }
.massage-focus { max-width: 31rem; margin: -.4rem 0 2rem; padding-left: 1.25rem; border-left: 1px solid #d99f81; }
.massage-focus span { display: block; margin-bottom: .45rem; color: #f4c7a8; font: italic 1.45rem/1.2 var(--font-display); }
.massage-focus p { margin: 0; color: #ebdcd0; font-size: .9rem; line-height: 1.65; }
.massage-art { position: relative; max-width: 500px; width: 100%; aspect-ratio: 1; justify-self: center; }
.massage-plate { position: absolute; inset: 5%; border-radius: 50%; background: #a9654f; box-shadow: inset -16px -22px 0 rgba(72,35,29,.18); }
.massage-figure { position: absolute; z-index: 1; top: 50%; left: -3%; width: 106%; mask-image: radial-gradient(ellipse 48% 48% at 50% 50%, #000 53%, transparent 100%); transform: translate3d(0, calc(-50% + var(--art-drift, 0px)), 0); }
.massage-orbit { position: absolute; inset: 0; }
.experience-about { padding-block: clamp(6rem, 11vw, 11rem); }
.about-content { display: grid; grid-template-columns: 40% 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; padding-top: clamp(3rem, 7vw, 7rem); }
.about-art { position: relative; width: min(100%, 420px); justify-self: center; }
.about-art::before { content: ''; position: absolute; inset: 8% 5% 2%; border-radius: 49% 49% 3% 3%; background: #e8dfd0; }
.about-portrait { width: 100%; }
.about-content .section-description { max-width: 36rem; margin-bottom: 1rem; }
.about-long { max-width: 34rem; color: var(--color-text-muted); font-size: .94rem; line-height: 1.75; }
.about-instagram { margin-top: 1.4rem; }
.experience-contact { padding-block: clamp(5rem, 9vw, 9rem); background: #d6d8ca; }
.contact-layout { display: grid; grid-template-columns: .8fr 1fr; gap: clamp(3rem, 9vw, 9rem); }
.contact-layout .section-number { margin-bottom: clamp(3rem, 6vw, 6rem); }
.contact-layout .direct-email, .contact-layout .direct-phone { display: block; width: fit-content; margin: 1rem 0; border-bottom: 1px solid currentColor; font: 400 clamp(1.2rem, 2vw, 1.8rem) var(--font-display); }
.contact-layout .direct-phone { font-size: 1.2rem; }
.contact-form-panel { padding: clamp(1.5rem, 3vw, 3rem); background: #f4f0e8; box-shadow: 0 18px 60px rgba(40,59,51,.06); }
.contact-form label { margin-bottom: 1.5rem; font-size: .75rem; }
.contact-form input:not([type=checkbox]), .contact-form textarea { padding: .6rem 0; }
.contact-form textarea { resize: vertical; min-height: 7rem; }
.experience-submit { display: inline-flex; align-items: center; justify-content: space-between; gap: 3rem; padding: .85rem 1.2rem; border: 1px solid var(--color-text); border-radius: 100px; background: var(--color-text); color: #fffaf0; font-size: .8rem; transition: background .25s, color .25s, transform .25s; }
.experience-submit:hover { background: transparent; color: var(--color-text); transform: translateY(-2px); }
.contact-form-panel .success { padding: 2rem; background: #e4e8dc; }
.contact-form-panel .success h3 { margin-bottom: 1rem; font: 400 2rem var(--font-display); }
.catalog-image, .service-image, .detail-image, .about-page-art { background: #e2e6d9; overflow: hidden; }
.service-image { background: #b67860; }
.catalog-image img, .service-image img, .detail-image img, .about-page-art img { object-fit: contain; }
.service-image img { padding: 5%; }
.experience [data-reveal] { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.experience.motion-ready [data-reveal].will-reveal:not(.is-visible) { opacity: .65; transform: translateY(18px); }
.experience.motion-ready .experience-section-copy.will-reveal:not(.is-visible),
.experience.motion-ready .intro-content.will-reveal:not(.is-visible),
.experience.motion-ready .contact-layout [data-reveal].will-reveal:not(.is-visible),
.experience.motion-ready .about-content.will-reveal:not(.is-visible) { transform: none; }
.experience.motion-ready .will-reveal:not(.is-visible) .figure-image { clip-path: inset(12% 0 88%); opacity: .55; }
.experience.motion-ready .figure-image { clip-path: inset(0 0 0); opacity: 1; transition: clip-path 1.15s cubic-bezier(.24,.74,.25,1), opacity .8s ease, transform .1s linear; }
@media (max-width: 1050px) {
  .site-nav { gap: .9rem; }
  .site-nav a:first-child { display: none; }
  .experience-hero { min-height: 620px; }
  .experience-section-grid { gap: 3rem; }
}
@media (max-width: 850px) and (min-width: 701px) {
  .experience-hero-inner { grid-template-columns: 1fr .9fr; gap: 1rem; }
  .experience-hero h1 { font-size: clamp(3.4rem, 6vw, 4.6rem); }
  .experience-section-grid { grid-template-columns: 42% 1fr; gap: 2rem; }
  .cycles-layout { grid-template-columns: 1fr 48%; }
  .cycles-signature span + span::before { margin-right: .65rem; }
  .massage-layout { grid-template-columns: 1fr 42%; }
  .offering { grid-template-columns: 1fr; gap: .3rem; }
  .contact-layout { gap: 2rem; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 16px; }
  .site-header { position: relative; min-height: 0; flex-direction: row; align-items: center; gap: .7rem; padding: 1.15rem 1.25rem; }
  .brand { font-size: 2.1rem; }
  .brand small { display: none; }
  .site-nav { width: auto; justify-content: flex-end; gap: .55rem 1rem; font-size: .71rem; }
  .site-nav a:first-child, .site-nav a:nth-child(4) { display: none; }
  .site-nav .nav-contact { padding: .45rem .65rem; }
  .experience section { scroll-margin-top: 1rem; }
  .experience-hero { min-height: 0; }
  .scene-layer svg { transform: translate3d(0, var(--scene-drift, 0px), 0) scale(1.2); }
  .hero-scene { --scene-opacity: .3; }
  .intro-scene { --scene-opacity: .25; }
  .yoga-scene { --scene-opacity: .32; }
  .cycles-scene { --scene-opacity: .3; }
  .massage-scene { --scene-opacity: .35; }
  .about-scene { --scene-opacity: .28; }
  .contact-scene { --scene-opacity: .2; }
  .experience-hero-inner { grid-template-columns: 1fr; gap: 0; padding-block: 3rem 2rem; }
  .experience-hero-copy { padding: 0; }
  .experience-hero h1 { max-width: 10ch; font-size: clamp(3.25rem, 11vw, 5rem); margin-bottom: 1.1rem; }
  .experience-lead { max-width: 23rem; margin-bottom: 1.2rem; font-size: 1rem; }
  .hero-illustration { width: min(100%, 370px); margin-top: 1rem; }
  .breath-interval { gap: clamp(.65rem, 4vw, 2rem); height: 210px; font-size: clamp(1.1rem, 4.5vw, 1.5rem); }
  .breath-interval::before, .breath-interval::after { width: 10vw; }
  .breath-symbol { width: clamp(5.5rem, 26vw, 8rem); }
  .experience-intro { grid-template-columns: 1fr; gap: 2.2rem; padding-block: 5rem; }
  .intro-content { padding-left: 0; }
  .experience-intro h2, .experience-about h2 { font-size: clamp(2.7rem, 9vw, 4.3rem); }
  .intro-content .intro-aside { margin-left: 9%; }
  .experience-section-grid, .massage-layout, .cycles-layout { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 4.5rem; }
  .yoga-art { width: min(100%, 390px); }
  .cycles-art { width: min(100%, 490px); }
  .experience-section-copy .section-number { margin-bottom: 3rem; }
  .experience-section-copy h2, .experience-contact h2 { font-size: clamp(2.9rem, 9.5vw, 4.5rem); }
  .massage-art { grid-row: 1; width: min(100%, 390px); }
  .about-content { grid-template-columns: 1fr; gap: 2rem; padding-top: 3.5rem; }
  .about-art { width: min(75%, 290px); justify-self: center; }
  .experience-about { padding-block: 5rem; }
  .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-layout .section-number { margin-bottom: 3rem; }
  .contact-form-panel { padding: 1.4rem; }
  .footer-top { align-items: end; }
  .footer-statement { font-size: clamp(2.7rem, 9vw, 4.5rem); }
}
@media (max-width: 420px) {
  .wrap { width: calc(100% - 2.5rem); }
  .site-header { flex-wrap: wrap; }
  .site-nav { width: 100%; justify-content: space-between; }
  .experience-hero h1 { font-size: 3.45rem; overflow-wrap: break-word; }
  .offering { grid-template-columns: 1fr; gap: .35rem; }
  .form-two { grid-template-columns: 1fr; gap: 0; }
  .footer-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .cycles-signature { display: grid; gap: .35rem; }
  .cycles-signature span + span::before { content: none; }
}
@media (prefers-reduced-motion: reduce) {
  .experience [data-reveal], .experience .draw-path { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; transition: none !important; }
  .scene-layer { opacity: var(--scene-opacity, .55) !important; transition: none !important; }
  .scene-layer svg, .figure-image, .hero-disc, .about-art, .breath-symbol { transition: none !important; }
  .figure-image { clip-path: none !important; opacity: 1 !important; }
  .hero-figure, .yoga-figure { transform: translateX(-50%) !important; }
  .massage-figure { transform: translateY(-50%) !important; }
  .scene-draw { stroke-dashoffset: 0 !important; transition: none !important; }
  .breath-ring, .breath-fill, .breath-center, .breath-interval span { animation: none !important; opacity: 1; }
}