/* Approved Regards croisés, scoped to the third landing section. */
.regards-symbols{position:absolute;width:0;height:0;overflow:hidden}
#metiers{--bg:#0a0a0a;--paper:#f7f5f0;--muted:#b2ab9e;--dim:#9e978b;--amber:#c6a365;--line:#ffffff20;--ease:cubic-bezier(.2,.65,.3,1);max-width:1440px;margin:0 auto;padding:32px 4.6% 80px;scroll-margin-top:28px;color:var(--paper);font:14px/1.6 'Public Sans',sans-serif}
#metiers svg{stroke-width:1.3}
#metiers button,#metiers a{-webkit-tap-highlight-color:transparent}
#metiers button:focus-visible,#metiers a:focus-visible{outline:2px solid #dfb966;outline-offset:5px}
#metiers .section-heading{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:6%;margin:30px 0 26px}
#metiers .section-heading h2{font:500 clamp(28px,3.25vw,47px)/1.16 Manrope,sans-serif;letter-spacing:-.04em;margin:0;color:#aba599;text-wrap:balance}
#metiers .section-heading h2 span{color:var(--paper);font-weight:620}
#metiers .section-heading>p{font-size:14px;line-height:1.85;color:#bdb6a9;margin:0;max-width:45ch}
#metiers .perspective-scene{position:relative;isolation:isolate;overflow:clip;border:1px solid #494135;background:#121210;border-radius:12px;box-shadow:0 22px 50px #0005}
#metiers .text-link{font-size:12px;display:flex;gap:9px;align-items:center;white-space:nowrap;border-bottom:1px solid #74664e;padding:7px 0}
#metiers .text-link svg{width:15px;height:15px}
#metiers .text-link:hover{color:#e6c993}
#metiers .section-tail{display:flex;gap:30px;align-items:center;justify-content:space-between;margin-top:18px}
#metiers .section-tail>p{font-size:12px;color:var(--muted);margin:0;max-width:66ch}
#metiers .perspective-scene{height:443px;display:grid;grid-template-columns:22% 43% 35%;align-items:center;padding:18px 3% 38px;background:radial-gradient(ellipse at 48% 45%,#715b3421,transparent 58%),#10110e}
#metiers .perspective-people{display:flex;flex-direction:column;gap:15px;z-index:4}
#metiers .perspective-people button{text-align:left;display:flex;gap:10px;align-items:center;padding:12px 0;color:#b2aa9a;transition:color .6s}
#metiers .perspective-people button>svg{width:34px;height:34px;padding:7px;border:1px solid #62563e;border-radius:50%;transition:background .6s,border-color .6s}
#metiers .perspective-people button>span{font-size:13px}
#metiers .perspective-people small{display:block;font-size:11px;color:#a29885;margin-top:2px}
#metiers .perspective-people button[aria-pressed=true]{color:#f0dcba}
#metiers .perspective-people button[aria-pressed=true]>svg{border-color:#c6a365;background:#68502a30}
#metiers .perspective-lens{position:relative;aspect-ratio:1;max-width:405px;width:100%;justify-self:center;border-radius:50%;padding:19px}
#metiers .lens-rim{position:absolute;inset:0;border-radius:50%;border:1px solid #71603f;box-shadow:0 20px 40px #0005,inset 0 0 0 8px #211f1755}
#metiers .lens-rim::before,#metiers .lens-rim::after{content:"";position:absolute;inset:8px;border-radius:50%;border:1px solid #a78b5433}
#metiers .lens-rim::after{inset:-9px;border:1px solid #8e784320;border-left-color:#cbb17a55}
#metiers .lens-inner{height:100%;width:100%;border-radius:50%;background:radial-gradient(ellipse at 30% 10%,#2e2c23,#161711 80%);border:1px solid #8e785230;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:clip}
#metiers .lens-focus{position:absolute;width:12px;height:12px;background:#cbb07b;border:3px solid #15160f;border-radius:50%;top:50%;left:-5px;transform-origin:calc(min(40vw,405px)/2 + 5px) 0;transition:top 1.2s var(--ease),left 1.2s var(--ease)}
#metiers .perspective-scene[data-step="1"] .lens-focus{top:-5px;left:50%}
#metiers .perspective-scene[data-step="2"] .lens-focus{top:50%;left:calc(100% - 7px)}
#metiers .perspective-reading{padding:0 0 0 29px;z-index:3}
#metiers .reading-label{font-size:11px;color:#c8ad78}
#metiers .perspective-reading h3{font:500 clamp(20px,2.1vw,30px)/1.3 Manrope,sans-serif;letter-spacing:-.025em;margin:13px 0 16px;min-height:3.9em}
#metiers .perspective-reading>p{font-size:12px;line-height:1.8;color:#bfb4a2;min-height:5.4em;margin:0}
#metiers .perspective-prompt{margin-top:23px;padding-top:15px;border-top:1px solid #ffffff20}
#metiers .perspective-prompt>span{font-size:11px;color:#a7977d}
#metiers .perspective-prompt p{font-size:13px;color:#deceb1;margin:7px 0 0;min-height:3.2em}
#metiers .perspective-bottom{position:absolute;bottom:15px;left:3%;right:3%;display:flex;gap:15px;justify-content:space-between;font-size:11px;color:#b9ad97}
#metiers .perspective-bottom>span:last-child{font-size:11px;color:#a59b8a}
@media(min-width:1380px){
#metiers .perspective-scene{height:480px}
}
@media(max-width:1000px){
#metiers .section-heading{gap:5%;grid-template-columns:1.2fr 1fr}
#metiers .section-heading>p{font-size:13px}
#metiers .perspective-scene{grid-template-columns:21% 41% 38%;padding-inline:2%}
#metiers .perspective-people button{gap:7px}
#metiers .perspective-people button>svg{width:29px;height:29px;padding:5px}
#metiers .perspective-people button>span{font-size:12px}
#metiers .perspective-people small{font-size:11px}
#metiers .perspective-reading{padding-left:20px}
#metiers .perspective-lens{padding:15px}
}
@media(max-width:700px){
#metiers .section-heading{grid-template-columns:1fr;gap:16px;margin:25px 0 22px}
#metiers .section-heading h2{font-size:31px;line-height:1.19}
#metiers .section-heading h2 br{display:none}
#metiers .section-heading h2 span{display:inline}
#metiers .section-heading>p{font-size:13px;line-height:1.8;max-width:45ch}
#metiers .perspective-scene{border-radius:9px}
#metiers .section-tail{align-items:flex-start;flex-direction:column;gap:10px;margin-top:16px}
#metiers .section-tail>p{font-size:12px}
#metiers .text-link{font-size:11px}
#metiers .perspective-scene{height:auto;min-height:764px;display:flex;flex-direction:column;align-items:stretch;padding:17px 20px 62px;gap:20px}
#metiers .perspective-people{flex-direction:row;gap:5px;justify-content:space-between}
#metiers .perspective-people button{display:block;text-align:center;padding:0;flex:1}
#metiers .perspective-people button>svg{width:31px;height:31px;padding:6px;margin-bottom:6px}
#metiers .perspective-people button>span{display:block;font-size:11px}
#metiers .perspective-people small{display:none}
#metiers .perspective-lens{width:88%;max-width:340px;align-self:center;padding:14px}
#metiers .perspective-reading{padding:0 2px}
#metiers .reading-label{font-size:11px}
#metiers .perspective-reading h3{font-size:25px;min-height:0;margin:10px 0 12px}
#metiers .perspective-reading>p{font-size:12px;min-height:0}
#metiers .perspective-prompt{margin-top:17px;padding-top:13px}
#metiers .perspective-prompt p{font-size:12px;min-height:0}
#metiers .perspective-bottom{left:22px;right:22px;bottom:17px;flex-direction:column;gap:5px;font-size:11px}
#metiers .perspective-bottom>span:last-child{font-size:11px}
}
#metiers .product-mark{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:#ded4bf;font-weight:500}
#metiers .product-mark img{width:18px;height:18px;flex:none}
#metiers .evidence-link{font-size:11px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#a7916655;color:#cbb790;line-height:1.7}
#metiers .evidence-link:hover{color:#f4deb5;text-decoration-color:currentColor}
#metiers .demo-context{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-top:16px;padding-top:13px;color:#b2ab9e;font-size:11px}
#metiers .demo-context a{border-bottom:1px solid #6d6046;padding-bottom:3px;white-space:nowrap}
#metiers .demo-context a:hover{color:#e5c78f}
#metiers .section-heading>p strong{color:#ece5d7;font-weight:500}
#metiers .perspective-scene{height:484px}
#metiers .lens-inner{padding:45px 14%;overflow:visible}
#metiers .lens-analysis{text-align:center;width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
#metiers .lens-analysis .product-mark{font-size:12px}
#metiers .lens-analysis .product-mark img{width:20px;height:20px}
#metiers .lens-analysis h3{font:600 clamp(19px,2.1vw,27px)/1.22 Manrope,sans-serif;letter-spacing:-.025em;margin:0}
#metiers .lens-analysis h3>span{display:block;color:#dbc28f;font-weight:500;margin-top:5px}
#metiers .lens-analysis>p{font-size:11px;color:#bcae95;margin:0;max-width:23ch;line-height:1.7}
#metiers .lens-analysis .evidence-link{font-size:11px}
#metiers .lens-analysis-limit{width:100%;padding-top:11px;border-top:1px solid #79623c66;font-size:11px;line-height:1.6;color:#d4bc90}
#metiers .perspective-reading h3{font-size:clamp(20px,2.05vw,29px);min-height:3.9em}
#metiers .perspective-reading>p{min-height:5.4em}
#metiers .perspective-prompt p{min-height:3.2em}
#metiers .perspective-people button>span{font-size:12px}
#metiers .perspective-people small{font-size:11px}
#metiers .perspective-scene[data-step="1"] .lens-analysis h3>span{color:#f1d8a6}
#metiers .perspective-scene[data-step="2"] .lens-analysis-limit{color:#f0d9b0}
@media(min-width:1380px){
#metiers .perspective-scene{height:500px}
}
@media(max-width:1000px){
#metiers .perspective-scene{height:490px;grid-template-columns:21% 42% 37%}
#metiers .lens-inner{padding:28px 12%}
#metiers .lens-analysis{gap:9px}
#metiers .lens-analysis h3{font-size:22px}
#metiers .lens-analysis>p{font-size:11px}
#metiers .lens-analysis-limit{font-size:11px}
#metiers .perspective-people small{font-size:11px}
}
@media(max-width:700px){
#metiers .section-heading>p{font-size:13px}
#metiers .demo-context{align-items:flex-start;flex-direction:column;gap:9px;font-size:11px}
#metiers .demo-context a{white-space:normal}
#metiers .section-tail{gap:12px}
#metiers .perspective-scene{height:auto;min-height:810px;padding:20px 18px 77px;gap:23px}
#metiers .perspective-people button>span{font-size:11px}
#metiers .perspective-lens{width:100%;max-width:330px;aspect-ratio:1}
#metiers .lens-inner{padding:35px 12%}
#metiers .lens-analysis{gap:10px}
#metiers .lens-analysis h3{font-size:25px}
#metiers .lens-analysis>p{font-size:11px}
#metiers .lens-analysis-limit{font-size:11px;padding-top:10px}
#metiers .perspective-reading h3{font-size:25px;min-height:0}
#metiers .perspective-reading>p{font-size:12px;min-height:0}
#metiers .perspective-prompt p{min-height:0;font-size:12px}
#metiers .perspective-bottom{font-size:11px;bottom:17px}
}
/* The chosen composition stays fixed; only the window of professions moves. */
#metiers .perspective-cases{--row:84px;display:block;position:relative;height:252px;overflow:clip;isolation:isolate;mask-image:linear-gradient(to bottom,transparent,#000 10px,#000 calc(100% - 10px),transparent)}
#metiers .perspective-cases button{position:absolute;inset:0 0 auto;width:100%;height:var(--row);padding:12px 5px;display:flex;gap:10px;align-items:center;text-align:left;transform:translateY(calc(var(--slot)*var(--row)));opacity:.66;transition:transform 750ms cubic-bezier(.16,1,.3,1),opacity 450ms,color 450ms;will-change:auto}
#metiers .perspective-cases button[data-visible="false"]{opacity:0;pointer-events:none}
#metiers .perspective-cases button[data-visible="true"]{opacity:.85}
#metiers .perspective-cases button[aria-pressed="true"]{opacity:1}
#metiers .perspective-cases button>svg{flex:none}
#metiers .perspective-cases button>span{line-height:1.45}
#metiers .perspective-cases small{line-height:1.5;color:#b1a48d}
#metiers .perspective-cases button:focus-visible{outline-offset:-3px;border-radius:5px}
#metiers .lens-analysis{gap:9px}
#metiers .lens-analysis h3{min-height:2.55em;display:flex;flex-direction:column;justify-content:center}
#metiers [data-case-fact]{color:#ece4d6;font-weight:600;margin-top:0}
#metiers .lens-analysis>p{min-height:3.4em;display:flex;align-items:center;justify-content:center}
#metiers .lens-analysis-limit{min-height:3.9em}
#metiers .perspective-reading{align-self:center}
#metiers .perspective-reading h3{min-height:5.2em}
#metiers .perspective-reading>p{min-height:7.2em}
#metiers .perspective-prompt p{min-height:4.8em}
#metiers .perspective-scene{min-height:535px;height:auto}
#metiers .perspective-scene[data-step="3"] .lens-focus{top:50%;left:-5px}
#metiers .perspective-scene[data-step="4"] .lens-focus{top:-5px;left:50%}
#metiers .perspective-scene[data-step="5"] .lens-focus{top:50%;left:calc(100% - 7px)}
@media(max-width:1000px) and (min-width:701px){
 #metiers .perspective-cases button{gap:7px;padding-inline:3px}
 #metiers .perspective-cases button>span{font-size:11px}
 #metiers .perspective-cases small{font-size:10px}
 #metiers .lens-analysis{gap:8px}
 #metiers .lens-analysis h3{font-size:21px}
}
@media(max-width:700px){
 #metiers .perspective-cases{--row:0px;width:100%;height:119px;mask-image:linear-gradient(to right,transparent,#000 5px,#000 calc(100% - 5px),transparent)}
 #metiers .perspective-cases button{width:33.333%;height:114px;display:flex;flex-direction:column;justify-content:flex-start;gap:4px;padding:7px 4px;transform:translateX(calc(var(--slot)*100%));text-align:center}
 #metiers .perspective-cases button>svg{width:31px;height:31px;margin:0 0 3px}
 #metiers .perspective-cases button>span{font-size:11px;line-height:1.4}
 #metiers .perspective-cases small{display:block;font-size:10px;margin-top:3px;line-height:1.4}
 #metiers .perspective-scene{min-height:1000px;gap:20px}
 #metiers .perspective-reading{align-self:stretch}
 #metiers .perspective-reading h3{min-height:5.2em}
 #metiers .perspective-reading>p{min-height:7.2em}
 #metiers .perspective-prompt p{min-height:4.8em}
}
@media(prefers-reduced-motion:reduce){#metiers .perspective-cases button{transition:none}}

#metiers .section-heading{margin-top:0}
#metiers .perspective-scene[data-step] .lens-analysis h3>[data-case-fact]{color:#ece4d6;font-weight:600;margin-top:0}
@media(max-width:700px){#metiers{padding:26px 6% 52px}#metiers .demo-context{gap:8px}}
@media(prefers-reduced-motion:reduce){#metiers *,#metiers *::before,#metiers *::after{animation:none!important;transition:none!important}}