/* Accueil Créabais : composition éditoriale et transition claustra. */
:root {
	--home-ink: #17130f;
	--home-paper: #f3eee4;
	--home-sand: #d6b078;
	--home-clay: #9c6034;
	--home-muted: #766e65;
	--home-rule: rgba(23, 19, 15, .16);
}

.home-main { overflow: visible; background: var(--home-paper); color: var(--home-ink); }
.home-shell { width: min(100% - 40px, 1320px); margin-inline: auto; }
.home-section { padding: clamp(76px, 12vw, 176px) 0; }
.home-kicker { margin: 0 0 18px; color: var(--home-clay); font-size: .72rem; font-weight: 800; letter-spacing: .15em; line-height: 1.3; text-transform: uppercase; }
.home-main h1, .home-main h2, .home-main h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.045em; }
.home-main h2 { font-size: clamp(2.35rem, 5.2vw, 5.8rem); line-height: .97; }
.home-main h3 { font-size: clamp(1.25rem, 2.2vw, 1.8rem); }
.home-main p { color: inherit; }

.home-hero { position: relative; display: grid; min-height: calc(100svh - 72px); min-height: 680px; overflow: hidden; background: #19130f; color: #fffaf0; isolation: isolate; }
.home-hero__media, .home-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-hero__media img { object-fit: cover; object-position: 58% 50%; }
.home-hero__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(14,10,7,.82) 0%, rgba(14,10,7,.53) 42%, rgba(14,10,7,.08) 76%), linear-gradient(0deg, rgba(14,10,7,.54), transparent 43%); }
.home-hero__content { position: relative; z-index: 2; align-self: end; padding-block: clamp(90px, 17vh, 190px) clamp(84px, 12vh, 132px); }
.home-hero .home-kicker { color: #e9c995; }
.home-hero h1 { max-width: 11ch; margin: 0; color: #fffaf0; font-size: clamp(3.65rem, 8.3vw, 8.8rem); line-height: .86; }
.home-hero__lead { max-width: 39rem; margin: 32px 0 0; color: #f2e8d9; font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.5; }
.home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 36px; }
.home-button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 50px; padding: 13px 20px; border: 1px solid currentColor; font-size: .86rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; transition: background .25s ease, color .25s ease, transform .25s ease; }
.home-button:hover, .home-button:focus-visible { transform: translateY(-3px); }
.home-button--light { background: #fffaf0; color: #1b140e; }
.home-button--light:hover, .home-button--light:focus-visible { background: var(--home-sand); }
.home-button--dark { background: var(--home-ink); color: #fffaf0; }
.home-button--dark:hover, .home-button--dark:focus-visible { background: var(--home-clay); }
.home-link-light { color: #fffaf0; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.home-scroll-cue { position: absolute; z-index: 2; right: 30px; bottom: 30px; display: inline-flex; align-items: center; gap: 11px; color: #fffaf0; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.home-scroll-cue span { display: block; width: 44px; height: 1px; background: currentColor; }

.home-intro { background: var(--home-paper); padding-bottom: clamp(42px, 7vw, 96px); }
.home-intro__grid { display: grid; gap: 30px; }
.home-intro__grid > :first-child { align-self: start; }
.home-intro h2 { max-width: 13ch; margin: 0; }
.home-intro__copy { max-width: 48rem; font-size: clamp(1.12rem, 1.65vw, 1.5rem); line-height: 1.55; }
.home-intro__copy p + p { color: var(--home-muted); }

.home-claustra { --claustra-night: 0; position: relative; height: 172svh; height: 172dvh; background: var(--home-paper); }
.home-claustra__sticky { position: sticky; top: 0; height: 100svh; height: 100dvh; overflow: hidden; isolation: isolate; background: var(--home-paper); }
.home-claustra__sticky::after { position: absolute; z-index: 0; inset: 0; content: ""; opacity: var(--claustra-night); background: #19140f; transition: opacity .12s linear; pointer-events: none; }
.home-claustra__panel { --claustra-depth: 18px; --claustra-shadow: .42; position: absolute; z-index: 1; top: 50%; left: 50%; width: 600px; height: 2200px; transform: translate(-50%, -50%) scale(.36); transform-origin: 50% 50%; box-shadow: calc(var(--claustra-depth) * .55) var(--claustra-depth) calc(var(--claustra-depth) * 1.15) rgba(0,0,0,var(--claustra-shadow)); will-change: transform, opacity; }
.home-claustra__panel::before { content: none; }
.home-claustra__fallback, .home-claustra__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.home-claustra__canvas { display: none; }
.home-claustra.is-ready .home-claustra__fallback { display: none; }
.home-claustra.is-ready .home-claustra__canvas { display: block; }
.home-claustra__copy { position: absolute; z-index: 2; top: clamp(88px, 17vh, 190px); left: max(20px,calc((100% - 1320px)/2 + 20px)); width: min(24rem, calc(100% - 40px)); color: var(--home-ink); pointer-events: none; }
.home-claustra__copy .home-kicker { color: var(--home-clay); }
.home-claustra__copy h2 { margin: 0 0 14px; color: var(--home-ink); font-size: clamp(2.8rem, 6vw, 6.4rem); }
.home-claustra__copy p:last-child { max-width: 24rem; color: #51463b; font-size: 1.1rem; }

.home-section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 78px); }
.home-section-head h2 { margin: 0 0 20px; }
.home-section-head > p:last-child { max-width: 38rem; color: var(--home-muted); font-size: 1.1rem; }
.home-univers { background: #19140f; color: #fffaf0; }
.home-univers .home-kicker { color: #eac58b; }
.home-univers .home-section-head > p:last-child { color: #d7cdc0; }
.home-univers__editorial { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.home-universe { min-height: 300px; overflow: hidden; background: #302217; }
.home-universe a { position: relative; display: block; width: 100%; height: 100%; color: #fffaf0; }
.home-universe picture, .home-universe img { width: 100%; height: 100%; }
.home-universe img { object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .6s ease; }
.home-universe a::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(9,7,5,.84), transparent 55%); }
.home-universe:hover img, .home-universe a:focus-visible img { transform: scale(1.045); filter: saturate(1.08); }
.home-universe__label { position: absolute; z-index: 1; right: 24px; bottom: 22px; left: 24px; display: grid; gap: 2px; }
.home-universe__label strong { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.35rem, 2.3vw, 2.2rem); font-weight: 500; line-height: 1; }
.home-universe__label small { color: #e8dccd; font-size: .83rem; }
.home-universe--wide { grid-column: span 8; min-height: 460px; }
.home-universe--tall { grid-column: span 4; grid-row: span 2; min-height: 640px; }
.home-universe--detail { grid-column: span 5; min-height: 360px; }
.home-universe--small { grid-column: span 3; min-height: 360px; }
.home-universe--lettering { grid-column: span 6; min-height: 340px; }
.home-universe--lettering img { object-fit: contain; object-position: center; background: #302217; }

.home-selection { background: #d7c5ad; }
.home-selection__layout { display: grid; align-items: center; gap: clamp(36px, 8vw, 130px); }
.home-selection__image { max-width: 520px; overflow: hidden; }
.home-selection__image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.home-selection__text { max-width: 42rem; }
.home-selection__text h2 { margin: 0 0 26px; }
.home-selection__text p { font-size: 1.16rem; line-height: 1.65; }
.home-text-link { display: inline-flex; gap: 14px; margin-top: 14px; padding-bottom: 4px; border-bottom: 1px solid currentColor; font-size: .83rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

.home-materials { background: #ebe5db; }
.home-section-head--split { display: grid; gap: 28px; max-width: none; }
.home-section-head--split > p { align-self: end; max-width: 29rem; margin: 0; color: var(--home-muted); font-size: 1.08rem; }
.home-materials__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-bottom: 34px; }
.home-materials__grid article { padding-bottom: 8px; border-bottom: 1px solid var(--home-rule); }
.home-materials__grid img { width: 100%; aspect-ratio: 1.1 / 1; object-fit: cover; margin-bottom: 20px; mix-blend-mode: multiply; }
.home-materials__grid h3 { margin: 0 0 8px; }
.home-materials__grid p { color: var(--home-muted); }

.home-about { background: var(--home-paper); }
.home-about__grid { display: grid; align-items: center; gap: clamp(40px, 8vw, 130px); }
.home-about__media { position: relative; min-height: 440px; }
.home-about__media > picture:first-child img { width: min(100%, 470px); aspect-ratio: 4 / 5; object-fit: cover; }
.home-about__inset { position: absolute; right: 0; bottom: 4%; width: 52%; padding: 9px; background: var(--home-paper); box-shadow: 0 20px 45px rgba(46,30,18,.18); }
.home-about__inset img { width: 100%; aspect-ratio: 1.28 / 1; object-fit: cover; }
.home-about__text { max-width: 39rem; }
.home-about__text h2 { margin: 0 0 26px; }
.home-about__text p { font-size: 1.1rem; line-height: 1.7; }

.home-method { background: #2a211a; color: #fffaf0; }
.home-method .home-kicker { color: #eac58b; }
.home-method h2 { max-width: 12ch; color: #fffaf0; margin: 0 0 58px; }
.home-method__steps { display: grid; counter-reset: steps; list-style: none; padding: 0; }
.home-method__steps li { display: grid; grid-template-columns: 52px 1fr; gap: 8px 18px; padding: 20px 0; border-top: 1px solid rgba(255,250,240,.22); }
.home-method__steps li::before { content: counter(steps, decimal-leading-zero); counter-increment: steps; color: #e8c182; font-size: .78rem; font-weight: 800; letter-spacing: .08em; }
.home-method__steps strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; font-weight: 500; }
.home-method__steps span { grid-column: 2; color: #d7ccc0; }

.home-future { padding-block: clamp(72px, 11vw, 150px); background: #c47b48; color: #1c120c; }
.home-future__inner { max-width: 920px; }
.home-future h2 { margin: 0 0 22px; }
.home-future p:last-child { max-width: 42rem; font-size: 1.14rem; }
.home-contact { padding: clamp(86px, 13vw, 180px) 0; background: #11100e; color: #fffaf0; }
.home-contact__inner { max-width: 940px; }
.home-contact .home-kicker { color: #e5bd7d; }
.home-contact h2 { margin: 0 0 36px; color: #fffaf0; }

@media (min-width: 740px) {
	.home-intro__grid { grid-template-columns: .75fr 1.6fr 1.15fr; align-items: start; }
	.home-selection__layout { grid-template-columns: minmax(280px,.85fr) 1.2fr; }
	.home-section-head--split { grid-template-columns: 1fr .72fr; align-items: end; }
	.home-about__grid { grid-template-columns: .9fr 1fr; }
	.home-method__steps { grid-template-columns: repeat(5, 1fr); }
	.home-method__steps li { grid-template-columns: 1fr; min-height: 190px; padding: 20px 18px 20px 0; border-top: 1px solid rgba(255,250,240,.22); border-right: 1px solid rgba(255,250,240,.22); }
	.home-method__steps li:last-child { border-right: 0; padding-right: 0; }
	.home-method__steps span { grid-column: auto; }
}

@media (max-width: 739px) {
	.home-shell { width: min(100% - 32px, 1320px); }
	.home-hero { min-height: calc(100svh - 72px); }
	.home-hero__content { padding-block: 120px 112px; }
	.home-hero h1 { font-size: clamp(3.25rem, 16vw, 5.4rem); }
	.home-hero__media img { object-position: 72% 50%; }
	.home-scroll-cue { right: 16px; bottom: 19px; }
	/* Le texte reste dans le flux : sa hauteur est réinjectée dans la piste de
	 * scroll afin de ne pas raccourcir la traversée du panneau. */
	.home-claustra { height: calc(156svh + var(--claustra-copy-height, 0px)); height: calc(156dvh + var(--claustra-copy-height, 0px)); }
	.home-claustra__panel { transform: translate(-50%, -50%) scale(.27); }
	.home-claustra__copy { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: min(100% - 32px, 1320px); margin: 0 auto; padding: 24px 0 30px; pointer-events: auto; }
	.home-claustra__copy h2 { max-width: 9ch; font-size: clamp(2rem, 10vw, 3rem); }
	.home-claustra__copy p:last-child { display: none; }
	.home-univers__editorial { grid-template-columns: 1fr; gap: 12px; }
	.home-universe, .home-universe--wide, .home-universe--tall, .home-universe--detail, .home-universe--small { grid-column: auto; grid-row: auto; min-height: 310px; }
	.home-universe--tall { min-height: 390px; }
	.home-universe--lettering { min-height: 0; }
	.home-universe--lettering img { object-fit: contain; }
	.home-universe--lettering a { display: grid; height: auto; background: #302217; }
	.home-universe--lettering picture { height: auto; }
	.home-universe--lettering img { width: 100%; height: auto; aspect-ratio: auto; }
	.home-universe--lettering .home-universe__label { position: static; padding: 18px 20px 20px; background: #302217; }
	.home-materials__grid { grid-template-columns: 1fr; gap: 36px; }
	.home-materials__grid article { display: grid; grid-template-columns: minmax(100px,.68fr) 1fr; gap: 0 20px; }
	.home-materials__grid picture { grid-row: span 2; }
	.home-materials__grid img { margin: 0; aspect-ratio: 1 / 1.1; }
	.home-materials__grid h3 { align-self: end; }
	.home-materials__grid p { margin: 0; }
	.home-about__media { min-height: 360px; }
}

@media (prefers-reduced-motion: reduce) {
	.home-universe img, .home-button { transition: none; }
	.home-claustra { height: auto; min-height: 720px; }
	.home-claustra__sticky { position: relative; min-height: 720px; height: auto; }
	.home-claustra__copy { opacity: 1 !important; }
}