/* Homepage: original orbit, one focused scene per step, no nested cards. */
#methode.method-human { overflow-anchor: none; }
#methode.method-human .method-orbit__sky,
#methode.method-human .method-orbit__sky::after { border-width: 2px; }
#methode.method-human .method-orbit__badge { transition: none; }
#methode.method-human .method-orbit__navigation { display: none; }
.method-focus { max-width: 68rem; margin-inline: auto; text-align: left; }
.method-focus__scene { display: grid; grid-template-columns: 2fr 3fr; gap: 3.5rem; align-items: center; }
.method-focus__scene[hidden] { display: none; }
.method-focus[data-enhanced] .method-focus__scene { min-height: 19rem; }
.method-focus__scene + .method-focus__scene { margin-top: 2rem; }
.method-focus[data-enhanced] .method-focus__scene { margin-top: 0; }
.method-focus__copy h4 { font-size: clamp(1.75rem,2.7vw,2.5rem); line-height: 1.08; letter-spacing: -.04em; font-weight: 500; text-wrap: balance; max-width: 20ch; }
.method-focus__description { font-size: 1rem; line-height: 1.5; color: var(--ed-muted); margin-top: 1rem; max-width: 38ch; }
.method-focus__visual { margin: 0; min-width: 0; height: 19rem; position: relative; }
.method-focus__photo { overflow: hidden; border-radius: 8px; }
.method-focus__photo img { width: 100%; height: 100%; object-fit: cover; }
.method-focus__product { overflow: hidden; border-radius: 8px; }
.method-focus__product img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.method-focus__product figcaption { position: absolute; bottom: .75rem; left: .75rem; padding: .5rem .75rem; background: var(--ed-canvas); color: var(--ed-ink); font-size: .8125rem; }
.method-map ol { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.method-map li { position: relative; padding: .75rem 0 .75rem 2rem; font-size: 1.0625rem; }
/* A quiet, content-width selector; the orbit carries the phase numbers. */
.method-focus__choices { display: flex; justify-content: center; gap: 1.5rem; width: 30rem; max-width: 100%; margin: 2rem auto 0; }
.method-focus__choices[hidden] { display: none; }
.method-focus__choices button { position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; padding: .625rem .5rem 1rem; min-height: 44px; color: var(--ed-muted); font-size: 1rem; line-height: 1.25; white-space: nowrap; cursor: pointer; }
.method-focus__choices button::before, .method-focus__choices button::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--ed-line); }
.method-focus__choices button::after { background: var(--brand); transform: scaleX(0); transform-origin: left; }
.method-focus__choices button[aria-selected="true"] { color: var(--brand); }
.method-focus__choices button[aria-selected="true"]::after { transform: scaleX(var(--step-progress, 0)); }
.method-focus__choices button:hover { color: var(--brand); }
.method-focus__choices button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
/* Compact only when measurement says the complete stage needs it. */
#methode.method-human[data-compact] { --method-arc-top: 3.5rem; }
#methode.method-human[data-compact] .method-scroll__stage { padding-block: .5rem; }
#methode.method-human[data-compact] .ed-heading h2 { font-size: 2rem; }
#methode.method-human[data-compact] .method-orbit[data-enhanced] .method-orbit__panels { padding-top: 3.5rem; }
#methode.method-human[data-compact] .method-orbit__navigation { padding-top: .625rem; padding-bottom: .375rem; }
#methode.method-human[data-compact] .method-focus[data-enhanced] .method-focus__scene { min-height: 14.5rem; }
#methode.method-human[data-compact] .method-focus__visual { height: 14.5rem; }
#methode.method-human[data-compact] .method-focus__copy h4 { font-size: 2rem; }
#methode.method-human[data-compact] .method-focus__description { font-size: .9375rem; margin-top: .75rem; }
#methode.method-human[data-compact] .method-map li { padding-block: .5rem; font-size: .9375rem; }
#methode.method-human[data-compact] .method-focus__choices { margin-top: 1rem; }

@media (max-width:899px) {
 .method-focus { max-width: 38rem; display: flex; flex-direction: column; }
 .method-focus__scene { grid-template-columns: 1fr; gap: 1.5rem; }
 .method-focus[data-enhanced] .method-focus__copy { min-height: 16rem; }
 .method-focus__copy h4 { font-size: 2rem; }
 .method-focus__description { font-size: .9375rem; }
 .method-focus__visual { height: 20rem; }
 .method-focus__choices { gap: .25rem; width: 100%; order: -1; margin: 0 0 1.5rem; position: sticky; top: 72px; z-index: 2; background: var(--ed-canvas); }
 .method-focus__choices button { flex: 1; padding-inline: .25rem; font-size: .875rem; }
}

#methode.method-human .method-focus__phase-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; padding: 0; }
.method-focus { padding-top: 5.5rem; }
.method-concepts ul, .method-map ol { height: 100%; display: flex; flex-direction: column; justify-content: center; list-style: none; padding: 0; margin: 0; }
.method-concepts li, #methode.method-human .method-map li { font-size: clamp(1.5rem,2.5vw,2.25rem); line-height: 1.15; letter-spacing: -.03em; padding: 1rem 0; color: var(--ed-ink); }
.method-concepts li + li, .method-map li + li { border-top: 1px solid var(--ed-line); }
.method-concepts li:first-child, #methode.method-human .method-map li:first-child { color: var(--brand); }
#methode.method-human[data-compact] .method-focus__copy h4 { font-size: 2.25rem; }
#methode.method-human[data-compact] .method-focus__description { font-size: 1rem; }
.method-focus__product figcaption { font-size: .9375rem; }
@media (max-width:899px) {
 .method-focus { padding-top: 1rem; }
 .method-focus[data-enhanced] .method-focus__copy { min-height: 11rem; }
 .method-concepts li, #methode.method-human .method-map li { font-size: 1.625rem; }
}

/* Finish the blue arc within the method; the rest of the page stays white. */
#methode.method-human, #methode.method-human ~ .ed-section, .home-editorial > .footer { --ed-canvas: #fff; background: #fff; }
#methode.method-human .method-scroll__stage { background: #fff; }

/* The process at a glance: four drawings, a clear reading direction. */
.method-flow { display: flex; align-items: center; }
.method-flow ol { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.5rem; width: 100%; margin: 0; padding: 0; list-style: none; }
.method-flow li { --flow-tint: #f1f3f7; position: relative; display: flex; flex-direction: column; align-items: center; gap: .875rem; color: #737b88; text-align: center; }
.method-flow li[aria-current="step"] { --flow-tint: #e5edff; color: var(--brand); }
.method-flow__number { font-size: 1.125rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.method-flow__drawing { width: 100%; max-width: 6rem; height: auto; }
.method-flow__label { font-size: 1rem; line-height: 1.25; color: var(--ed-ink); }
.method-flow li[aria-current="step"] .method-flow__label { color: var(--brand); }
.method-flow__arrow { position: absolute; width: 1.75rem; height: 1rem; top: 50%; left: calc(100% - .125rem); color: #a2abba; transform: translateY(-50%); }
@media (max-width:899px) {
 .method-flow ol { gap: 1rem; }
 .method-flow li { gap: .75rem; }
 .method-flow__drawing { max-width: 4.5rem; }
 .method-flow__label { font-size: .8125rem; }
 .method-flow__arrow { width: 1.125rem; left: calc(100% - .0625rem); }
}

/* Make a substep change perceptible, even when its flow stays familiar. */
.method-flow__number { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; }
.method-flow li[aria-current="step"] .method-flow__number { color: #fff; background: var(--brand); }
.method-flow li[aria-current="step"] .method-flow__drawing { transform: scale(1.1); }
.method-flow li:not([aria-current="step"]) .method-flow__drawing { opacity: .55; }
.method-flow li[aria-current="step"] .method-flow__label { font-weight: 600; }
.method-focus__choices button[aria-selected="true"] { font-weight: 600; }
@media (prefers-reduced-motion:no-preference) {
 .method-focus[data-enhanced] .method-focus__scene:not([hidden]) .method-focus__copy { animation: method-copy-enter 420ms cubic-bezier(.22,1,.36,1) both; }
 .method-focus[data-enhanced] .method-focus__scene:not([hidden]) .method-focus__visual { animation: method-visual-enter 520ms cubic-bezier(.22,1,.36,1) 60ms both; }
 .method-focus__scene:not([hidden]) .method-flow li[aria-current="step"] .method-flow__drawing { animation: method-step-arrive 580ms cubic-bezier(.22,1,.36,1) 100ms both; }
}
@keyframes method-copy-enter {
 from { opacity: 0; transform: translateY(18px); }
 to { opacity: 1; transform: translateY(0); }
}
@keyframes method-visual-enter {
 from { opacity: 0; transform: translateX(28px); }
 to { opacity: 1; transform: translateX(0); }
}
@keyframes method-step-arrive {
 from { transform: scale(.88); }
 65% { transform: scale(1.16); }
 to { transform: scale(1.1); }
}

