/* ==========================================================================
   Home — scroll film + sections
   Pinning = CSS sticky (compositor-driven: no jitter, no CLS). GSAP only maps scroll → film.
   ========================================================================== */

/* ---- Film ---------------------------------------------------------------- */
.film { --film-len: 420svh; --top: var(--wp-admin--admin-bar--height, 0px); position: relative; background: var(--night); color: var(--on-dark); }
@media (max-width: 767px) { .film { --film-len: 360svh; } }
.nv-film .film { height: calc(100svh - var(--top) + var(--film-len)); overflow: clip; }
body.is-home { overflow-x: clip; }

.film__stage { position: relative; height: calc(100svh - var(--top)); min-height: 560px; overflow: hidden; isolation: isolate; }
.nv-film .film__stage { position: sticky; top: var(--top); }

.film__canvas, .film__poster, .film__poster img, .film__dust, .film__blueprint { position: absolute; inset: 0; width: 100%; height: 100%; }
.film__poster img { object-fit: cover; }
.film__canvas { display: none; transform-origin: 50% 55%; will-change: transform; }
.nv-film .film__canvas { display: block; }
.film__poster--end { display: none; }
/* static mode (reduced motion / no JS): the clean final frame */
html:not(.nv-film) .film__poster--start { display: none; }
html:not(.nv-film) .film__poster--end { display: block; }
.nv-film .film.is-first-frame .film__poster--start { visibility: hidden; }

.film__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background:
		linear-gradient(90deg, rgba(20, 10, 26, .82) 0%, rgba(20, 10, 26, .45) 42%, rgba(20, 10, 26, 0) 70%),
		linear-gradient(0deg, rgba(20, 10, 26, .85) 0%, rgba(20, 10, 26, 0) 38%),
		linear-gradient(180deg, rgba(20, 10, 26, .55) 0%, rgba(20, 10, 26, 0) 22%); }

.film__shade--right { opacity: 0; visibility: hidden;
	background: linear-gradient(270deg, rgba(20, 10, 26, .84) 0%, rgba(20, 10, 26, .5) 36%, rgba(20, 10, 26, 0) 62%); }
@media (max-width: 1040px) { .film__shade--right { display: none; } }

.film__blueprint { z-index: 3; pointer-events: none; opacity: 0; color: #f3ecf7; }
.film__blueprint .bp-sm, .film__blueprint.is-sm .bp-lg { display: none; }
.film__blueprint.is-sm .bp-sm { display: inline; }
.film__blueprint text { paint-order: stroke; stroke: rgba(20, 10, 26, .55); stroke-width: 4px; stroke-linejoin: round; }
.film__blueprint path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.film__blueprint .bp-dash { stroke-dasharray: .012 .01; stroke-dashoffset: 0; opacity: .5; }
.film__blueprint circle { fill: none; stroke: var(--green-hi); stroke-width: 2; vector-effect: non-scaling-stroke; }
.film__blueprint text { fill: currentColor; font: 600 17px var(--f-body); letter-spacing: .06em; text-transform: uppercase; opacity: 0; }
.film__blueprint .bp-v { writing-mode: vertical-rl; }
/* The top dimension line sits where the HUD goes on tablets / phones (HUD moves to the top ≤ 1040px). */
@media (max-width: 1040px) { .film__blueprint .bp-top { display: none; } }
.film__blueprint .bp-grid path { opacity: .55; }

.film__dust { z-index: 4; pointer-events: none; opacity: 0; mix-blend-mode: screen; }
.film__sweep { position: absolute; inset: -10% 0; z-index: 5; pointer-events: none; opacity: 0; mix-blend-mode: screen;
	background: linear-gradient(100deg, transparent 0%, transparent 35%, rgba(255, 255, 255, .0) 40%, rgba(232, 255, 214, .55) 49%, rgba(255, 255, 255, .9) 50%, rgba(232, 255, 214, .5) 51%, transparent 62%, transparent 100%);
	transform: translateX(-120%); }

.film__copy { position: absolute; inset: 0; z-index: 6; margin: 0 auto; pointer-events: none; }
.film__beat { position: absolute; left: var(--gutter); right: var(--gutter); pointer-events: auto; }
.film__beat--intro { bottom: clamp(64px, 12vh, 140px); max-width: 820px; }
.film__beat--chapter { top: 50%; transform: translateY(-50%); max-width: 470px; }
.film__beat--right { left: auto; right: var(--gutter); text-align: left; }
.film__beat--final { bottom: clamp(56px, 10vh, 120px); max-width: 860px; }
.nv-film .film__beat--chapter, .nv-film .film__beat--final { visibility: hidden; opacity: 0; }
html:not(.nv-film) .film__beat--chapter, html:not(.nv-film) .film__beat--final, html:not(.nv-film) .film__hud, html:not(.nv-film) .film__scroll { display: none; }

.film__title { margin: 0; }
.film__title .eyebrow { display: flex; color: var(--on-dark-2); margin-bottom: 22px; font-family: var(--f-body); letter-spacing: .2em; }
.film__title-main { display: block; font: 850 clamp(2.6rem, .8rem + 4.6vw, 6.2rem)/.9 var(--f-display); font-stretch: 112%; letter-spacing: -.04em; text-transform: uppercase; }
.film__title-main em { font-style: normal; color: var(--green-hi); }
/* entrance from the first paint, CSS only (transform: the text is painted at once, never hidden) */
@keyframes nvRise { from { transform: translateY(22px); } }
.nv-film .film__beat--intro .eyebrow, .nv-film .film__title-main, .nv-film .film__beat--intro .lede, .nv-film .film__beat--intro .btn-row { animation: nvRise 1.1s var(--ease) both; }
.nv-film .film__title-main { animation-delay: .05s; }
.nv-film .film__beat--intro .lede { animation-delay: .12s; }
.nv-film .film__beat--intro .btn-row { animation-delay: .18s; }
.film__beat--intro .lede { margin: 26px 0 30px; max-width: 46ch; color: var(--on-dark-2); }

.film__num { display: block; font: 800 clamp(4.5rem, 3rem + 6vw, 9rem)/.8 var(--f-display); font-stretch: 120%; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(247, 245, 240, .55); margin-bottom: 14px; }
.film__kicker { margin: 0 0 12px; font: 650 .8rem/1 var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--green-hi); }
.film__h { margin: 0 0 16px; font: 800 clamp(2rem, 1.3rem + 2.8vw, 3.9rem)/.98 var(--f-display); font-stretch: 108%; letter-spacing: -.03em; }
.film__h--xl { font-size: clamp(2.6rem, 1.4rem + 4.8vw, 6.4rem); text-transform: uppercase; line-height: .9; }
.film__h em { font-style: normal; color: var(--green-hi); }
.film__p { color: var(--on-dark-2); font-size: 1.08rem; max-width: 40ch; }
.film__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.film__tags li { padding: 8px 14px; border-radius: 99px; background: rgba(20, 10, 26, .5); box-shadow: inset 0 0 0 1px rgba(247, 245, 240, .22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-weight: 600; font-size: .92rem; }
.film__beat--final .btn-row { margin-top: 28px; }
.film__proof { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 26px 0 0; padding: 0; list-style: none; color: var(--on-dark-2); font-size: .93rem; }
.film__proof li { display: inline-flex; align-items: center; gap: 8px; }
.film__proof .icon { color: var(--green-hi); }
.film__proof b { color: var(--on-dark); }

.film__hud { position: absolute; z-index: 7; right: var(--gutter); bottom: clamp(56px, 10vh, 120px); width: 230px; text-align: right; pointer-events: none; }
.film__progress { display: flex; justify-content: flex-end; align-items: baseline; gap: 4px; }
.film__progress b { font: 800 4.2rem/.9 var(--f-display); font-stretch: 115%; letter-spacing: -.04em; }
.film__progress span { font: 700 1.4rem/1 var(--f-display); color: var(--green-hi); }
.film__hud > p { margin: 6px 0 16px; font: 600 .72rem/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--on-dark-3); }
.film__chapters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.film__chapters li { position: relative; padding-top: 10px; font: 700 .72rem/1.1 var(--f-body); letter-spacing: .05em; text-transform: uppercase; text-align: left; color: var(--on-dark-2); transition: color .4s; }
.film__chapters li::before, .film__chapters li::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 2px; background: rgba(247, 245, 240, .18); }
.film__chapters li::after { background: var(--green-hi); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.film__chapters li.is-active { color: var(--on-dark); }

.film__scroll { position: absolute; z-index: 7; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; font: 600 .7rem/1 var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--on-dark-3); }
.film__scroll i { width: 1px; height: 42px; background: linear-gradient(var(--on-dark-2), transparent); animation: drip 2.2s var(--ease-io) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

@media (max-width: 1040px) {
	.film__hud { width: auto; left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + 8px); bottom: auto; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 16px; text-align: left; }
	.film__progress { justify-content: flex-start; }
	.film__progress b { font-size: 2rem; }
	.film__progress span { font-size: .9rem; }
	.film__hud > p { display: none; }
	.film__beat--right { left: var(--gutter); }
}
@media (max-width: 767px) {
	.film__shade { background: linear-gradient(0deg, rgba(20, 10, 26, .92) 0%, rgba(20, 10, 26, .55) 45%, rgba(20, 10, 26, .1) 70%), linear-gradient(180deg, rgba(20, 10, 26, .7) 0%, rgba(20, 10, 26, 0) 25%); }
	.film__beat--chapter { top: auto; bottom: 120px; transform: none; }
	.film__beat--intro { bottom: 110px; }
	.film__beat--final { bottom: 104px; }
	.film__beat--intro .btn-row .btn--ghost, .film__beat--final .btn-row .btn--ghost { display: none; }
	.film__beat .btn-row .btn { width: 100%; }
	.film__num { font-size: 3.6rem; margin-bottom: 8px; }
	.film__blueprint text { font-size: 15px; }
	.film__scroll { display: none; }
	.film__proof { gap: 8px 16px; font-size: .84rem; }
}
@media (max-height: 640px) and (min-width: 768px) {
	.film__beat--intro .lede { display: none; }
}

/* ---- Pillars ------------------------------------------------------------- */
.pillars { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .pillars { display: flex; height: min(64vh, 560px); } }
.pillar { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; min-height: 380px; padding: clamp(22px, 2.6vw, 38px); border-radius: var(--r-xl); overflow: hidden; isolation: isolate; color: var(--on-dark); text-decoration: none; background: var(--night); transition: flex-grow .9s var(--ease); container-type: inline-size; }
@media (min-width: 900px) { .pillar:hover { flex-grow: 1.4; } }
.pillar__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.4s var(--ease); }
.pillar:hover .pillar__img { transform: scale(1.1); }
.pillar::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(20, 10, 26, .94) 8%, rgba(20, 10, 26, .2) 62%, rgba(20, 10, 26, .45)); }
.pillar:nth-child(2)::after { background: linear-gradient(0deg, rgba(61, 16, 80, .95) 6%, rgba(20, 10, 26, .15) 62%, rgba(20, 10, 26, .4)); }
.pillar__meta { align-self: flex-start; padding: 8px 13px; border-radius: 99px; background: rgba(247, 245, 240, .14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 700 .78rem/1 var(--f-body); letter-spacing: .06em; }
.pillar__title { display: block; font: 850 clamp(2.4rem, 13cqi, 5.4rem)/.88 var(--f-display); font-stretch: 80%; letter-spacing: -.02em; text-transform: uppercase; overflow-wrap: anywhere; }
.pillar__text { display: block; max-width: 36ch; margin-top: 12px; font-size: 1.04rem; color: var(--on-dark-2); }
.pillar__list { display: block; margin-top: 14px; font-size: .86rem; color: var(--on-dark-3); }
.pillar__go { position: absolute; top: clamp(22px, 2.6vw, 38px); right: clamp(22px, 2.6vw, 38px); width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: var(--ink); transition: transform .7s var(--ease); }
.pillar:hover .pillar__go { transform: rotate(45deg) scale(1.08); }

/* ---- Bento --------------------------------------------------------------- */
.bento { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); }
@media (min-width: 1000px) { .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 218px; } }
.bento__tile { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 20px; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; text-decoration: none; background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px var(--rule); transition: transform .7s var(--ease), box-shadow .5s var(--ease); }
.bento__tile:hover { transform: translateY(-3px); box-shadow: 0 0 0 1.5px var(--plum-2), var(--shadow); }
.bento__tile .tile-icon { margin-bottom: auto; }
.bento__tile--photo { color: var(--on-dark); background: var(--night); box-shadow: none; }
.bento__tile--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(20, 10, 26, .9), rgba(20, 10, 26, .1) 70%); }
.bento__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.bento__tile:hover .bento__img { transform: scale(1.06); }
.bento__tile--dark { background: var(--night); color: var(--on-dark); box-shadow: none; }
.bento__tile--dark .tile-icon { background: rgba(247, 245, 240, .08); color: var(--green-hi); }
.bento__tile--cta { background: var(--green); color: var(--ink); box-shadow: none; }
.bento__count { margin-bottom: auto; font: 850 4.2rem/.9 var(--f-display); font-stretch: 80%; letter-spacing: -.03em; }
@media (min-width: 1000px) {
	.bento__tile--xl { grid-column: span 2; grid-row: span 2; }
	.bento__tile--tall { grid-row: span 2; }
}
@media (max-width: 999px) { .bento__tile--xl { grid-column: span 2; min-height: 280px; } }
.bento__title { display: block; font: 800 1.3rem/1.08 var(--f-display); font-stretch: 88%; letter-spacing: -.01em; }
.bento__tile--xl .bento__title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); }
.bento__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font-size: .9rem; opacity: .78; line-height: 1.45; }
.bento__go { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--paper-2); color: var(--ink); transition: transform .6s var(--ease), background-color .3s; }
.bento__tile--photo .bento__go, .bento__tile--dark .bento__go { background: rgba(20, 10, 26, .55); color: var(--on-dark); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(247, 245, 240, .25); }
.bento__tile--cta .bento__go { background: rgba(23, 18, 27, .1); }
.bento__tile:hover .bento__go { transform: rotate(45deg); background: var(--green); color: var(--ink); box-shadow: none; }
@media (max-width: 520px) { .bento { grid-template-columns: 1fr; } .bento__tile--xl { grid-column: auto; } }

/* ---- Method -------------------------------------------------------------- */
.method__grid { display: grid; gap: 36px; }
@media (min-width: 960px) { .method__grid { grid-template-columns: .9fr 1.1fr; gap: 80px; } .method__intro { position: sticky; top: calc(var(--header-h) + 48px); align-self: start; } }
.method__bar { height: 3px; border-radius: 3px; background: var(--line-dark); margin-bottom: 28px; overflow: hidden; }
.method__bar i { display: block; height: 100%; background: var(--green-hi); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.method__steps { list-style: none; margin: 0; padding: 0; }
.method__step { display: grid; grid-template-columns: 84px 1fr; gap: 18px; padding: 28px 0; border-top: 1px solid var(--line-dark); }
.method__step .h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; color: var(--on-dark-3); transition: color .6s var(--ease); }
.method__step.is-active .h3, html:not(.js) .method__step .h3 { color: var(--on-dark); }
.method__num { font: 850 3.2rem/.9 var(--f-display); font-stretch: 80%; color: transparent; -webkit-text-stroke: 1.2px var(--plum-soft); }
.method__step.is-active .method__num { color: var(--green-hi); -webkit-text-stroke: 0; }
.method__step .h3 .icon { color: var(--green-hi); }
.method__step p { color: var(--on-dark-2); margin: 0; max-width: 48ch; }
@media (max-width: 600px) { .method__step { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; } .method__num { font-size: 2.2rem; } }

/* ---- Avant / Après showcase ----------------------------------------------- */
.tx-section .tx__steps { margin-top: 18px; }
.tx-section .link-arrow { margin-top: 10px; }

/* ---- Réalisations rail ---------------------------------------------------- */
.works__rail { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; padding: 0 var(--gutter) 8px; }
.works__rail::-webkit-scrollbar { display: none; }
.works__track { display: flex; gap: 18px; width: max-content; padding-inline: max(0px, calc((100vw - var(--maxw)) / 2 - var(--gutter))); }
.work-card { width: min(80vw, 420px); scroll-snap-align: start; flex: none; }
.work-card .rcard__media { aspect-ratio: 4 / 5; }
.work-card--more { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 4 / 5; height: auto; align-self: flex-start; padding: 30px; border-radius: var(--r-lg); background: var(--night); color: var(--on-dark); text-decoration: none; }
.work-card__go { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: var(--ink); transition: transform .6s var(--ease); }
.work-card--more:hover .work-card__go { transform: translateX(8px); }
/* pinned (desktop pointer): the track moves with GSAP; the rail itself must clip, never overflow the page */
.js .works.is-pinned .works__rail { overflow: hidden; scroll-snap-type: none; }

/* ---- Reviews + numbers (plum surface) --------------------------------------- */
.reviews-score { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.reviews-score__n { font: 850 4.4rem/.9 var(--f-display); font-stretch: 80%; letter-spacing: -.03em; color: var(--green-hi); }
.reviews-score small { display: block; margin-top: 4px; color: var(--on-dark-2); font-size: .85rem; }
.numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 clamp(28px, 4vw, 48px); padding: 0; list-style: none; border-top: 1px solid var(--rule-dark); }
@media (min-width: 900px) { .numbers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.numbers li { display: grid; gap: 6px; align-content: start; padding: 20px 20px 4px 0; }
.numbers li + li { padding-left: 20px; border-left: 1px solid var(--rule-dark); }
@media (max-width: 899px) { .numbers li:nth-child(3) { padding-left: 0; border-left: 0; } .numbers li:nth-child(n+3) { border-top: 1px solid var(--rule-dark); } }
.numbers b { font: 850 clamp(2.6rem, 1.8rem + 3vw, 4.6rem)/.9 var(--f-display); font-stretch: 80%; letter-spacing: -.03em; color: var(--on-dark); }
.numbers span { color: var(--on-dark-2); font-weight: 600; max-width: 24ch; }
.reviews-rail { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.reviews-track { display: flex; width: max-content; animation: marquee 70s linear infinite; }
.reviews-rail:hover .reviews-track { animation-play-state: paused; }
.reviews-group { display: flex; gap: 16px; padding-right: 16px; }
.section--plum .review { box-shadow: none; }

/* ---- Area ---------------------------------------------------------------- */
.area { display: grid; gap: 36px; align-items: center; }
@media (min-width: 960px) { .area { grid-template-columns: 1fr 1fr; gap: 72px; } }
.area__map { color: var(--plum); background: var(--white); border-radius: var(--r-xl); box-shadow: 0 0 0 1px var(--rule); padding: 10px; }
.area-map { width: 100%; height: auto; }
.area-map__ring { fill: none; stroke: var(--plum-2); stroke-opacity: .25; stroke-dasharray: 4 6; }
.area-map__km { font: 600 12px var(--f-body); fill: var(--plum-2); opacity: .7; }
.area-map__river { fill: none; stroke: #9fc6e8; stroke-width: 7; stroke-linecap: round; opacity: .45; }
.area-map__town circle { fill: var(--plum-2); }
.area-map__town text { font: 600 13px var(--f-body); fill: var(--ink-2); }
.area-map__town.is-big text { font: 750 16px var(--f-display); fill: var(--ink); }
.area-map__home circle { fill: var(--green); }
.area-map__home text { font: 800 19px var(--f-display); fill: var(--ink); }
@media (max-width: 600px) { .area-map__town text { font-size: 19px; } .area-map__town.is-big text { font-size: 22px; } .area-map__home text { font-size: 25px; } .area-map__km { font-size: 16px; } }
.area-map__pulse { fill: var(--green) !important; opacity: .35; transform-origin: center; transform-box: fill-box; animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(3.2); opacity: 0; } }
.area__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }