/* Scoped to the original section; public route and homepage use the same four steps. */
#approche[data-jjm="1"]{--jjm-br:#545b60;--jjm-text:#eaebea;--jjm-muted:#adb3b7;scroll-margin-top:90px}
#approche[data-jjm="1"] .jjm-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(30px,6.2vw,100px);align-items:start}
#approche .jjm-grid>.absolute{display:none!important}
#approche .jjm-lane{gap:0;padding:0}
#approche .jjm-row{min-height:clamp(220px,42vh,390px);display:flex;flex-flow:column;justify-content:center;padding:26px 0 26px clamp(22px,3.4vw,49px);position:relative;opacity:1!important;transform:none!important;border-left:1px solid #3c4143}
#approche .jjm-row::before{content:'';position:absolute;left:-4px;top:50%;width:7px;height:7px;border-radius:50%;background:#656b6f;box-shadow:0 0 0 6px #0a0a0a;transition:background-color 200ms}
#approche .jjm-active::before{background:#e8ebed;box-shadow:0 0 0 5px #0a0a0a,0 0 0 6px #5b6164}
#approche .jjm-row>:first-child:not(.jjm-text){display:none!important}
#approche .jjm-text{display:block!important;border:0!important;padding:0!important}
#approche .jjm-text>div>div{opacity:1!important;color:#989da1!important;letter-spacing:.12em!important;font:400 12px/1.4 ui-monospace,monospace!important;margin:0 0 16px!important}
#approche .jjm-text h3{margin:0 0 .5rem!important}
#approche .jjm-text p:not(.jjm-outcome){color:#b2b4b5!important}
#approche .jjm-outcome{display:flex;gap:12px;align-items:baseline;color:#d8dadb;font-size:12px;line-height:1.65;margin:18px 0 0;font-family:Inter,sans-serif}
#approche .jjm-outcome span{font-family:'Inter Tight',sans-serif;font-size:9px;text-transform:uppercase;color:#a8abad;letter-spacing:.13em}
#approche .jjm-plate,#approche .jjm-mini{margin:0;color:var(--jjm-text);background:radial-gradient(ellipse at 50% 29%,#24282b 0%,#191c1e 40%,#121416 81%);border:1px solid #42464a;box-sizing:border-box}
#approche .jjm-plate{position:sticky;top:clamp(78px,calc((100vh - 552px)/2),200px);min-width:0;align-self:start;margin-block:1rem;border-radius:6px;overflow:hidden}
#approche .jjm-overline{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 5%;padding:17px 0 13px;border-bottom:1px solid #3b4145;font:500 9px/1.4 'Inter Tight',sans-serif;letter-spacing:.18em;color:#c2c6c8}
#approche .jjm-overline span:last-child{font-size:8px;color:#a6aaad}
#approche .jjm-stage{position:relative;margin:3px auto 0;width:calc(100% - 8%);aspect-ratio:490/340;max-height:min(40vh,350px)}
#approche .jjm-print{position:absolute;inset:0;display:flex;justify-content:center;opacity:0;transform:translateY(6px);transition:opacity 290ms ease,transform 390ms ease;pointer-events:none}
#approche .jjm-on{opacity:1;transform:translateY(0)}
#approche .jjm-drawing{display:block;width:100%;height:100%;overflow:visible}
#approche .jjm-caption{padding:6px 6% 13px}
#approche .jjm-caption-title{font:450 clamp(19px,2vw,27px)/1.25 'Inter Tight',Inter,sans-serif;letter-spacing:-.018em;color:#e8eaeb;margin:0}
#approche .jjm-caption-words{max-width:46ch;font:350 13px/1.65 Inter,sans-serif;color:#b2b7ba;margin:6px 0 0;min-height:3.3em}
#approche .jjm-nav{display:grid;grid-template-columns:repeat(4,1fr);margin:0 6%;border-top:1px solid #454a4e}
#approche .jjm-nav button{background:transparent;color:#aeb3b7;cursor:pointer;min-height:44px;position:relative;font:400 11px/1 ui-monospace,monospace;letter-spacing:.13em;border:0}
#approche .jjm-nav button[aria-pressed="true"]{color:#fff}
#approche .jjm-nav button[aria-pressed="true"]:before{content:'';position:absolute;left:15%;right:15%;top:-1px;height:2px;background:#d3d7da}
#approche .jjm-nav button:hover{background:#24282b}
#approche .jjm-nav button:focus-visible{outline:2px solid #f1f3f4;outline-offset:-3px}
#approche .jjm-mini{display:none}
@supports (overflow:clip){body:has(#approche[data-jjm="1"]){overflow-x:clip}}
@media(max-width:760px),(max-height:510px){ 
  #approche[data-jjm="1"] .jjm-grid{display:block}
  #approche[data-jjm="1"]>div>div:first-child{margin-bottom:42px}
  #approche .jjm-row{min-height:0;padding:22px 0 32px 18px}
  #approche .jjm-row::before{top:28px}
  #approche .jjm-text>div>div{margin:0 0 9px!important}
  #approche .jjm-plate{display:none}
  #approche .jjm-outcome{margin-top:12px}
  #approche .jjm-mini{display:block;width:min(100%,445px);margin-top:20px;border-radius:5px}
  #approche .jjm-mini .jjm-drawing{height:auto;max-height:235px}
  #approche .jjm-mini figcaption{padding:8px 14px;border-top:1px solid #3b4145;font:400 11px/1.5 'Inter Tight',sans-serif;letter-spacing:.075em;color:#c3c7ca}
}
@media(prefers-reduced-motion:reduce){#approche .jjm-row,#approche .jjm-print,#approche .jjm-row::before{transition:none!important;animation:none!important;transform:none!important}}

/* Each chapter is one accessible disclosure. Its generous hit area includes the short text. */
#approche .jjm-step-v3{overflow-anchor:none}
#approche .jjm-step-v3 .jjm-brief{position:relative;max-width:460px}
#approche .jjm-step-v3 .jjm-step-heading{margin:0 0 10px!important}
#approche .jjm-step-v3 .jjm-expander{display:grid;width:100%;min-height:48px;grid-template-columns:1fr 32px;align-items:center;column-gap:8px;text-align:left;border:none;padding:0;background:none;color:#e8e8e8;cursor:pointer}
#approche .jjm-step-v3 .jjm-expander::after{content:"";position:absolute;inset:0}
#approche .jjm-step-v3 .jjm-expander:focus-visible{outline:1px solid #d1d5d8;outline-offset:6px;border-radius:2px}
#approche .jjm-step-v3 .jjm-ordinal{font:400 12px/1.4 ui-monospace,monospace;letter-spacing:.12em;color:#a8afb4;grid-column:1/-1;margin:0 0 10px}
#approche .jjm-step-v3 .jjm-step-name{font:400 clamp(1.5rem,2.5vw,2rem)/1.15 'Bebas Neue',sans-serif;letter-spacing:.16em;text-transform:uppercase}
#approche .jjm-step-v3 .jjm-toggle-badge{width:30px;height:30px;border:1px solid #555c60;display:grid;place-items:center;border-radius:50%;color:#d6dbde;font:300 18px/1 Inter,sans-serif}
#approche .jjm-step-v3 .jjm-expander:hover .jjm-toggle-badge,#approche .jjm-step-v3 .jjm-expander[aria-expanded="true"] .jjm-toggle-badge{background:#282d30;border-color:#8f969b}
#approche .jjm-step-v3 .jjm-step-brief{font:350 14px/1.8 Inter,sans-serif;margin:0;color:#b2b4b5}
#approche .jjm-step-v3 .jjm-details[hidden]{display:none}
#approche .jjm-step-v3 .jjm-details:not([hidden]){border-top:1px solid #41474b;padding-top:14px;margin-top:16px;max-width:54ch}
#approche .jjm-step-v3 .jjm-details p{font:350 14px/1.75 Inter,sans-serif;margin:0 0 .65em;color:#b9bdc0}
#approche .jjm-step-v3 .jjm-details p:last-child{margin-bottom:0}
#approche .jjm-step-v3 .jjm-outcome{margin:12px 0 0}

@media(min-width:761px) and (min-height:511px){
 #approche .jjm-step-v3.jjm-row{justify-content:flex-start;padding-top:clamp(44px,8vh,90px);padding-bottom:clamp(32px,5vh,56px)}
 #approche .jjm-step-v3.jjm-row::before{top:clamp(48px,calc(8vh + 4px),94px)}
}

#approche .jjm-step-v3 .jjm-ordinal{display:block}
#approche .jjm-step-v3 .jjm-step-heading{margin:2px 0 10px}
#approche .jjm-step-v3 .jjm-expander{position:relative;margin-top:8px;min-height:44px;width:fit-content;max-width:100%;grid-template-columns:minmax(0,1fr) 22px;gap:10px;font:500 13px/1.5 'Inter Tight',sans-serif;color:#ced3d6}
#approche .jjm-step-v3 .jjm-expander::after{display:none}
#approche .jjm-step-v3 .jjm-toggle-badge{width:22px;height:22px;font-size:15px}
#approche .jjm-step-v3 .jjm-expander:hover span:first-child{text-decoration:underline;text-underline-offset:4px}
