@import url('/site-nav.css');
/* Employeur Plus — midnight editorial dossier */
:root{
  --interior-paper:#111111;
  --interior-surface:#1d1d1d;
  --interior-blush:#1d1d1d;
  --interior-ink:#ffffff;
  --interior-body:#ded8db;
  --interior-plum:#d9b8c9;
  --interior-brand:#1d1d1d;
  --interior-rule:#4a3b43;
  --ink:#ffffff;
  --ink-soft:#1d1d1d;
  --paper:#111111;
  --plum:#d9b8c9;
  --plum-deep:#271822;
  --rose:#d9b8c9;
  --mist:#1d1d1d;
  --text:#ffffff;
  --body:#ded8db;
  --line:#4a3b43;
  --light-line:#4a3b43;
  --muted:#c3b9be;
  --dark-muted:#ded8db;
  --gutter:clamp(22px,5vw,76px);
}
html{scroll-behavior:smooth}
body{background:var(--interior-paper);color:var(--interior-ink);font-size:16px;line-height:1.68;overflow-x:clip}
main,section,header,footer,article,aside,figure{min-width:0}
h1,h2,h3,p,blockquote{overflow-wrap:break-word}
a:focus-visible,button:focus-visible{outline:2px solid var(--interior-plum);outline-offset:4px}
::selection{background:#d8a9bf;color:#141114}
.skip{
  position:absolute;top:-100px;left:16px;z-index:20;
  background:var(--interior-ink);color:var(--interior-paper);
  padding:10px 16px;text-decoration:none;font-weight:700
}
.skip:focus,.skip:focus-visible{top:12px}
.topline{
  height:auto;min-height:78px;padding:17px var(--gutter);background:var(--interior-paper);
  color:var(--interior-ink);border-bottom:1px solid var(--interior-rule);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.topline .logo,.topline .brand img,.footer img{filter:brightness(0) invert(1)}
.topline .logo,.topline .brand img{width:172px;max-width:100%}
.nav{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px clamp(12px,1.6vw,25px)}
.nav a{font-size:13px;color:var(--interior-ink);text-decoration:none}
.nav a:hover,.nav .active,.nav .current{color:var(--interior-plum)}
.nav .portal{border:1px solid var(--interior-rule);color:var(--interior-body);border-radius:3px;padding:9px 12px}
.nav .portal:hover{color:var(--interior-plum);border-color:var(--interior-plum)}
.nav .button,.nav .nav-contact{background:#65163f;color:var(--interior-ink);border:1px solid #65163f;border-radius:3px;padding:10px 15px}
.nav .button:hover,.nav .nav-contact:hover{background:#803059;color:#fff}
.mono,.label,.eyebrow,.section-head .mono,.section-top>.label,.section-head>.mono,
.section-head .mono,.section-top .label,.hero-panel .count,.panel-head,.panel-note,
.closing .mono,.closing .label,.thesis .label,.story-label,.chapter-number{
  color:var(--interior-plum);letter-spacing:.12em
}
.eyebrow:before,.eyebrow::before{width:23px;background:var(--interior-plum)}
.hero{
  min-height:0;display:block;background:var(--interior-paper);color:var(--interior-ink);
  border-bottom:1px solid var(--interior-rule);padding:0 var(--gutter)
}
.hero-copy{
  min-height:0;padding:clamp(62px,7vw,104px) 0 clamp(32px,4vw,60px);
  max-width:1060px;display:block;animation:none;transform:none;opacity:1
}
.hero h1,.hero-copy h1,h1{
  font-size:clamp(38px,4.6vw,62px);line-height:1.11;letter-spacing:-.052em;
  font-weight:700;color:var(--interior-ink);max-width:1000px;margin:24px 0 26px
}
.hero h1 span,.hero-copy h1 span{color:var(--interior-plum)}
.hero .lead,.hero .hero-lead,.hero .hero-subtitle,.hero-intro p{
  color:var(--interior-body);font-size:clamp(17px,1.45vw,19px);line-height:1.7;
  max-width:760px;margin:0
}
.hero-copy>.lead,.hero-copy>.hero-subtitle,.hero-copy>.hero-intro{margin-top:22px}
.hero-bottom{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:20px}
.hero-panel,.hero-art{
   min-height:0;background:var(--interior-brand);color:var(--interior-ink);
  padding:28px 32px;border-top:1px solid var(--interior-rule);
  display:block;overflow:visible;animation:none;transform:none;opacity:1
}
.hero-panel p,.hero-panel blockquote,.hero-art .art-message p{
  color:var(--interior-ink);font-size:clamp(21px,2.5vw,30px);font-weight:600;
  letter-spacing:-.035em;line-height:1.32;max-width:850px;margin:8px 0
}
.hero-panel .note,.hero-panel p:not(:first-child),.hero-art .art-message p strong{color:var(--interior-body)}
.hero-panel .note{font-size:15px;line-height:1.65;font-weight:400;letter-spacing:0}
.hero-panel p:before{display:none}
.hero-art .orbit,.hero-art .orbit-node,.hero-art .art-path,.hero-art .art-inner,.hero-art .art-node,
.hero-art::before,.hero-art::after,.panel-main::before{display:none}
.hero-art .art-head,.hero-art .art-foot,.hero-art .art-caption{
  position:static;color:var(--interior-plum);border-color:var(--interior-rule)
}
.hero-art .art-message{padding:20px 0 6px;max-width:880px}
.hero-art .art-message .small{color:var(--interior-plum);margin-bottom:9px}
.hero-art .art-foot{padding-top:13px}
.hero-art .art-caption{padding-top:12px}
.hero-intro p{margin:0 0 18px}
.hero-panel .panel-head{border-bottom:1px solid var(--interior-rule);padding-bottom:13px;color:var(--interior-plum)}
.hero-panel .panel-main{padding:20px 0}
.hero-panel .panel-main .large{font-size:clamp(38px,5vw,58px);letter-spacing:-.06em;line-height:1.1;color:var(--interior-plum)}
.hero-panel .panel-main h2{font-size:clamp(21px,2.3vw,29px);line-height:1.25;margin:10px 0;color:var(--interior-ink)}
.hero-panel .panel-note{border-top:1px solid var(--interior-rule);padding-top:12px;color:var(--interior-body)}
.hero-panel .panel-note p{font-size:15px;font-weight:400;letter-spacing:0;color:var(--interior-body);margin:0}
.hero-panel .panel-note span{color:var(--interior-plum)}
.section,.principles,.promise,.intro,.steps,.app-showcase,.choice,.result,
.story,.continuation,.closing,.thesis{
  background:var(--interior-paper);color:var(--interior-ink);
  padding:clamp(64px,7vw,100px) var(--gutter);border-bottom:1px solid var(--interior-rule)
}
.section:nth-of-type(even),.principles,.app-showcase,.choice,.continuation,
.section.light,.section.benefits,.journey,.terms,.pilot{background:var(--interior-surface);color:var(--interior-ink)}
.section h2,.section-head h2,.section-top h2,.intro h2,.showcase-head h2,.choice h2,
.promise h2,.result h2,.closing h2,.cta h2,.role h2,.governance h2,.pilot h2,
.thesis p,.opening{
  color:var(--interior-ink);font-size:clamp(30px,3.3vw,45px);font-weight:650;
  line-height:1.18;letter-spacing:-.045em
}
.section h2 em,.section-top h2 em,.section-head h2 em,.intro h2 span,
.role h2 span,.thesis p span{color:var(--interior-plum)}
.section p,.section-head p,.section-top p,.promise-copy p,.result-lead,
.context-bottom p,.governance-copy>p,.coordination-copy>p,.split-copy p,.role-copy p,
.model-copy,.model-copy p,.chapter p,.question p,.audience p,.strategy-card p,
.result-item p,.opening,.closing p,.cta p{
  color:var(--interior-body)
}
.section-head,.section-top,.showcase-head,.intro,.choice-head{
  grid-template-columns:minmax(120px,170px) minmax(0,1fr);gap:clamp(20px,3vw,44px);
  margin-bottom:36px
}
.section-head .mono,.section-top>.label,.showcase-head .mono,.intro .mono,.choice-head .mono{padding-top:7px;color:var(--interior-plum)}
.section-head p,.section-top p{font-size:17px;margin-top:19px}
.section .mono,.section .label,.section .num,.section .number,
.principles .num,.step-num,.result-item span,.chapter-number,.story-label{color:var(--interior-plum)}
.section h3,.card h3,.benefit h3,.choice-card h3,.step h3,.question h3,
.audience h3,.strategy-card h3,.included-list h3,.term h3{
  color:var(--interior-ink);font-size:clamp(21px,2.1vw,29px);
  line-height:1.25;letter-spacing:-.035em
}
.section strong,.model-copy strong,.role-copy strong,.chapter p strong{color:var(--interior-ink)}
.card,.benefit,.program,.case,.segment,.use,.step,.choice-card,.strategy-card,
.audience,.included-feature,.calculation,.app-frame{
  background:transparent;color:var(--interior-ink);border-color:var(--interior-rule);
  box-shadow:none
}
.card:nth-child(2),.card:nth-child(3),.benefit:nth-child(2),.benefit:nth-child(3),
.step:nth-child(2),.step:nth-child(3),.audience:nth-child(2),.audience:nth-child(3){
  background:transparent;color:var(--interior-ink)
}
.card p,.card:nth-child(3) p,.benefit p,.program p,.case p,.segment p,.use p,
.step p,.choice-card p,.audience p,.included-feature p{color:var(--interior-body)}
.card,.benefit,.program,.case,.segment,.use,.choice-card,.audience,.strategy-card{min-height:0;padding:26px}
.card h3,.benefit h3,.program h3,.case h3,.segment h3,.use h3,.choice-card h3,.audience h3,
.strategy-card h3{margin:22px 0 9px}
.step{min-height:0}
.step h3{margin:0}
.step-copy p{color:var(--interior-body)}
.tag{border-color:var(--interior-rule);border-radius:3px}
.app-showcase{background:var(--interior-surface)}
.app-frame{background:#fbf9f6;color:#292127;border-radius:5px;overflow:hidden}
.app-bar,.app-side,.screen-caption,.mock-card{background:#fbf9f6}
.app-body{background:#f4f0ed}
.screen-caption p{color:#544f51}
.screen-caption span{color:#713a56}
.model-body,.included-layout,.strategy-grid,.terms-list{margin-left:0;margin-top:42px}
.model-copy{font-size:17px;line-height:1.75}
.calculation{background:var(--interior-blush);padding:30px}
.calculation h3{margin:18px 0}
.included-feature{min-height:0;background:var(--interior-blush);padding:30px;gap:25px}
.included-feature .infinity{font-size:70px;line-height:1;color:var(--interior-plum)}
.included-feature .mono,.included-feature h3{color:var(--interior-ink)}
.strategy-grid,.included-list,.terms-list,.term,.math-row,.included-list li,
.result-list,.result-item,.chapter,.chapters,.question-list,.question,.journey-list,
.journey-list li,.pilot-list,.rule,.rules{border-color:var(--interior-rule)}
.strategy-card .mono,.term h3{color:var(--interior-ink)}
.story-grid{max-width:1150px;grid-template-columns:170px minmax(0,1fr);gap:clamp(20px,3vw,44px)}
.story .opening{font-size:clamp(22px,2.6vw,32px);line-height:1.42;margin-bottom:45px}
.chapter{padding:26px 0;grid-template-columns:45px minmax(0,1fr)}
.chapter p,.continuation .chapter p,.closing .chapter p{font-size:17px;line-height:1.75;letter-spacing:0;color:var(--interior-body);font-weight:400}
.continuation .chapter,.closing .chapter{border-color:var(--interior-rule);padding:26px 0}
.closing .story-label,.closing .chapter-number{color:var(--interior-plum)}
.closing .chapter p{max-width:850px}
.thesis{background:var(--interior-blush)}
.thesis p{max-width:1000px;margin:18px 0 0}
.context-bottom,.benefit-grid,.question-list,.journey-list,.journey-end{margin-left:0}
.context-bottom .context-note,.role-pull{border-color:var(--interior-plum);color:var(--interior-ink)}
.benefit-grid,.question-list,.audience-grid{margin-top:42px;border-color:var(--interior-rule)}
.question,.benefit,.audience{border-color:var(--interior-rule)}
.question p:before{color:var(--interior-plum)}
.journey-list li,.journey-list{border-color:var(--interior-rule)}
.journey-list li::before,.journey-end{color:var(--interior-plum)}
.role{background:var(--interior-paper);border-color:var(--interior-rule)}
.role .label,.role-copy strong{color:var(--interior-plum)}
.role-copy{padding-top:0}
.cta,.closing:not(.story .closing){
  background:var(--interior-blush);color:var(--interior-ink);
  padding:clamp(56px,6vw,86px) var(--gutter);border-bottom:1px solid var(--interior-rule)
}
.cta h2,.closing h2{font-size:clamp(30px,3.3vw,45px);line-height:1.18;letter-spacing:-.045em;margin:0;max-width:850px}
.closing h2{margin:13px 0 17px}
.closing p{font-size:16px}
.round,.circle-link,.closing .circle-link,.btn,.closing-actions .btn{
  width:auto;min-width:0;height:auto;min-height:44px;display:inline-flex;place-items:unset;
  justify-content:center;align-items:center;flex:none;text-align:center;
   border:1px solid #65163f;border-radius:3px;
    padding:11px 18px;background:#65163f;color:var(--interior-ink);
  font-size:13px;line-height:1.35;font-weight:700;text-decoration:none;transform:none
}
.round:hover,.circle-link:hover,.btn:hover,.btn-primary:hover{
    background:#803059;color:#fff;transform:none
}
.btn-outline{background:transparent;color:var(--interior-ink);border-color:var(--interior-plum)}
.btn-outline:hover{background:#65163f;color:var(--interior-ink)}
.footer{
    background:#111111;color:var(--interior-ink);padding:48px var(--gutter) 55px;
  grid-template-columns:1.3fr 1fr 1fr;gap:clamp(22px,4vw,55px)
}
.footer img{width:185px}
.footer h2,.footer h3{color:var(--interior-plum)}
.footer a,.footer a:not(.brand),.footer span{color:var(--interior-body)}
.footer a:hover,.footer a[aria-current="page"]{color:var(--interior-plum)}
.copyright{color:#a99da4;margin-top:26px}
/* Keep the faux product interface light, but all editorial content dark. */
.calculation .mono,.calculation h3,.calculation .math-row strong{color:var(--interior-ink)}
.calculation .math-row{color:var(--interior-body);border-color:var(--interior-rule)}
.calculation p,.term p,.included-list p{color:var(--interior-body)}
.included-feature p,.strategy-card p,.choice-card p{color:var(--interior-body)}
.app-frame .app-main,.app-frame .app-main h3,.app-frame .app-main strong,
.app-frame .mock-card,
.app-frame .screen-caption{color:#292127}
.app-frame .mock-button,.app-frame .bubble.user,.app-frame .schedule-tabs .active,
.app-frame .slots .active{color:#fbf9f6}
.app-frame .screen-caption p{color:#544f51}
.app-frame .screen-caption span{color:#713a56}
.reveal,.reveal.on{opacity:1;transform:none}
body.motion-ready .reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s ease,transform .7s ease;
  transition-delay:var(--reveal-delay,0ms)
}
body.motion-ready .reveal.on{opacity:1;transform:translateY(0)}
/* Editorial treatments by page family */
body:has(.story-grid) .hero-art{display:none}
body:has(.story-grid) .hero-copy{max-width:850px;padding-bottom:67px}
body:has(.story-grid) .continuation{background:var(--interior-surface)}
body:has(.story-grid) .closing{background:var(--interior-blush)}
body:has(.story-grid) .closing .chapter{border-top:1px solid var(--interior-rule)}
body:has(.story-grid) .story-label{padding-top:7px}
body:has(.principles) .hero-panel{background:var(--interior-surface)}
body:has(.principles) .principles .grid{gap:0;border-top:1px solid var(--interior-rule)}
body:has(.principles) .principles .card{border:0;border-bottom:1px solid var(--interior-rule);padding:25px 22px;min-height:0}
body:has(.principles) .promise{border-top:1px solid var(--interior-rule);gap:45px}
body:has(.steps) .intro{background:var(--interior-blush)}
body:has(.steps) .step{grid-template-columns:58px minmax(180px,.8fr) minmax(240px,1fr);gap:25px;border-color:var(--interior-rule);padding:30px 0}
body:has(.steps) .result{background:var(--interior-surface);gap:55px}
body:has(.steps) .result-item{grid-template-columns:42px 1fr}
body:has(.calculation) .hero-panel{border-left:3px solid var(--interior-plum)}
body:has(.calculation) .model{background:var(--interior-paper)}
body:has(.calculation) .included{background:var(--interior-surface)}
body:has(.calculation) .strategy{background:var(--interior-paper)}
body:has(.calculation) .terms{background:var(--interior-surface)}
body:has(.calculation) .included-layout{grid-template-columns:minmax(245px,.65fr) minmax(0,1.35fr)}
body:has(.calculation) .included-feature{border-left:3px solid var(--interior-plum)}
body:has(.calculation) .strategy-card{min-height:0}
body:has(.hero-art) .hero-art{border-left:3px solid var(--interior-plum)}
body:has(.hero-art) .context-bottom{margin-top:38px}
body:has(.hero-art) .benefit-grid{border-left:0;border-right:0}
body:has(.hero-art) .benefit{min-height:0}
body:has(.hero-art) .question-list{margin-top:38px}
body:has(.hero-art) .audience{min-height:0}
.list,.roles,.role-list{border-color:var(--interior-rule)}
.item,.rule{border-color:var(--interior-rule)}
.item p,.rule p,.role-list p,.split-copy>p,.coordination-copy>p{color:var(--interior-body)}
.role-list p{border-color:var(--interior-rule)}
.role+.role{background:var(--interior-blush);border-color:var(--interior-rule)}
.roles .role{background:transparent;color:var(--interior-ink);min-height:0;padding:28px}
.roles .role+.role{background:var(--interior-blush)}
.roles .role h3{font-size:clamp(22px,2.3vw,30px);line-height:1.25;margin:14px 0 22px;color:var(--interior-ink)}
.cases{grid-template-columns:repeat(4,minmax(0,1fr))}
.cases .case{min-height:115px;padding:22px;gap:12px}
.cases .case h3{font-size:18px;line-height:1.3}
.programs,.segments,.uses{gap:12px}
.program,.segment,.use{border:1px solid var(--interior-rule)}
.model-lead,.measure-lead,.pilot-lead{color:var(--interior-body)}
.section.model h2,.section.measure h2,.section.pilot h2{font-size:clamp(30px,3.3vw,45px);line-height:1.18;letter-spacing:-.045em}
.model-list,.measure-list,.pilot-list{border-color:var(--interior-rule)}
.model-list p,.measure-list p,.pilot-list p{border-color:var(--interior-rule);color:var(--interior-body)}
.section.governance,.section.coordination,.section.split{gap:clamp(30px,5vw,75px)}
.section.governance h2,.section.coordination h2,.section.split h2{margin:14px 0}
.section.governance .rule span,.section.coordination .rule span,.section.split .item span{color:var(--interior-plum)}
.section:has(.model) .step{border-color:var(--interior-rule);background:transparent;min-height:0;padding:25px}
.section:has(.model) .step h3{margin:22px 0 10px}
.section:has(.model) .step p{color:var(--interior-body)}
.section:has(.model) .step .num{color:var(--interior-plum)}
@media(max-width:1000px){
  .topline{display:block}
  .topline>a{display:inline-flex}
  .nav{justify-content:flex-start;margin-top:15px}
  .section-head,.section-top,.showcase-head,.intro,.choice-head{grid-template-columns:130px minmax(0,1fr)}
  .hero,.hero-copy{min-height:0}
  body:has(.steps) .step{grid-template-columns:48px minmax(0,1fr)}
  body:has(.steps) .step-copy{grid-column:2}
}
@media(max-width:760px){
  .topline{padding:17px var(--gutter)}
  .topline .logo,.topline .brand img{width:157px}
  .nav{display:flex;gap:7px 14px}
  .nav a,.nav a:not(.button){display:inline-flex;font-size:12px;white-space:normal}
  .nav .portal,.nav .button,.nav .nav-contact{padding:7px 9px}
  .hero{display:block}
  .hero-copy{padding:55px 0 30px;gap:0}
  .hero h1,.hero-copy h1,h1{font-size:clamp(34px,9vw,38px);line-height:1.15;margin:19px 0 20px}
  .hero .lead,.hero .hero-lead,.hero .hero-subtitle,.hero-intro p{font-size:16px}
  .hero-panel,.hero-art{min-height:0;padding:23px 20px}
  .hero-panel p,.hero-panel blockquote,.hero-art .art-message p{font-size:21px}
  .section,.principles,.promise,.intro,.steps,.app-showcase,.choice,.result,
  .story,.continuation,.closing,.thesis,.cta{padding:58px var(--gutter)}
  .section h2,.section-head h2,.section-top h2,.intro h2,.showcase-head h2,.choice h2,
  .promise h2,.result h2,.closing h2,.cta h2,.role h2,.governance h2,.pilot h2,
  .thesis p{font-size:clamp(29px,7.7vw,36px)}
  .section-head,.section-top,.showcase-head,.intro,.choice-head,.story-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:25px}
  .section-head .mono,.section-top>.label,.showcase-head .mono,.intro .mono,.choice-head .mono{padding:0}
  .model-body,.included-layout,.strategy-grid,.terms-list,.context-bottom,.benefit-grid,
  .question-list,.journey-list,.journey-end{margin-left:0;margin-top:30px}
  .model-body,.included-layout,.strategy-grid,.term,.promise,.result,.governance,
  .coordination,.pilot,.role,.split,.closing,.choice-grid,.showcase-grid,
  .benefits,.grid,.model,.programs,.cases,.segments,.uses,.roles,.audience-grid{
    grid-template-columns:minmax(0,1fr)
  }
  body:has(.calculation) .included-layout{grid-template-columns:minmax(0,1fr)}
  body:has(.steps) .step{grid-template-columns:32px minmax(0,1fr);gap:10px 15px}
  body:has(.steps) .step-copy{grid-column:2}
  .cases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cases .case{border-left:0;border-top:1px solid var(--interior-rule)}
  .roles .role{padding:24px}
  .roles .role+.role{border-left:0;border-top:1px solid var(--interior-rule)}
  .section.governance,.section.coordination,.section.split{gap:26px}
  .section:has(.model) .step{display:block}
  .section:has(.model) .step h3{margin:15px 0 8px}
  .card,.benefit,.program,.case,.segment,.use,.choice-card,.audience,.strategy-card{min-height:0;padding:23px}
  .benefit,.audience,.strategy-card{border-left:1px solid var(--interior-rule)}
  .strategy-card+.strategy-card,.audience+.audience{border-left:1px solid var(--interior-rule)}
  .step{grid-template-columns:34px minmax(0,1fr);gap:10px 15px;padding:25px 0}
  .step-copy{grid-column:2}
  .question,.journey-list li{grid-template-columns:35px minmax(0,1fr)}
  .question p,.journey-list li span{grid-column:2}
  .chapter{grid-template-columns:35px minmax(0,1fr);gap:13px}
  .closing,.cta{display:flex;flex-direction:column;align-items:flex-start;gap:23px}
  .footer{grid-template-columns:1fr;gap:24px;padding:43px var(--gutter)}
  .footer>div:first-child{grid-column:auto}
}
@media(max-width:400px){
  .nav{gap:6px 11px}
  .nav a,.nav a:not(.button){font-size:11px}
  .app-body{grid-template-columns:60px minmax(0,1fr)}
  .app-side{padding:10px 5px}
  .app-main{padding:13px 9px}
  .app-frame{max-width:100%;margin-left:0;margin-right:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-copy,.hero-panel,.hero-art{animation:none}
}

/* Reading system: an opening spread, followed by alternating evidence, sequences and conclusions. */
body{font-family:"Plus Jakarta Sans",sans-serif;line-height:1.72}
main{isolation:isolate}
.topline{position:relative;z-index:3}
.nav a{line-height:1.4}
.nav a[aria-disabled="true"]{opacity:.65;cursor:not-allowed}
.hero{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.68fr);padding:0;min-height:0}
.hero-copy{padding:clamp(55px,6vw,86px) clamp(28px,5vw,76px) clamp(48px,5vw,72px) var(--gutter);max-width:none;display:flex;flex-direction:column;justify-content:center;gap:25px}
.hero-copy>div:first-child{max-width:900px}
.hero h1,.hero-copy h1{font-size:clamp(38px,4.4vw,64px);line-height:1.12;letter-spacing:-.055em;max-width:850px;margin:23px 0 0}
.hero .lead,.hero .hero-lead,.hero .hero-subtitle,.hero-intro p{font-size:clamp(16px,1.4vw,19px);line-height:1.73;max-width:690px}
.hero-panel,.hero-art{
  border-top:0;border-left:1px solid var(--interior-rule);
   background:var(--interior-brand);padding:clamp(30px,3.7vw,55px);
  display:flex;flex-direction:column;justify-content:center;gap:18px
}
.hero-panel p,.hero-panel blockquote,.hero-art .art-message p{
   font-family:"Plus Jakarta Sans",sans-serif;font-size:clamp(25px,2.6vw,38px);
   font-weight:600;letter-spacing:-.04em;line-height:1.25;margin:0
}
.hero-panel .note,.hero-panel p:not(:first-child){font-family:"Plus Jakarta Sans",sans-serif;font-size:14px;line-height:1.75;font-weight:400;letter-spacing:0;margin:0}
.hero-panel .note{border-top:1px solid var(--interior-rule);padding-top:19px}
.hero-panel .panel-main{padding:10px 0}
.hero-panel .panel-main .large{font-family:"Plus Jakarta Sans",sans-serif;font-size:clamp(66px,7vw,104px);font-weight:700;letter-spacing:-.06em}
.hero-panel .panel-main h2{font-size:clamp(19px,2vw,26px);font-weight:600;letter-spacing:-.025em;line-height:1.35}
.hero-panel .panel-head,.hero-panel .panel-note{width:100%}
.hero-panel .panel-note p{font-size:14px}
.hero-bottom{align-items:flex-start;gap:19px}
.hero-bottom .circle-link{margin-top:5px}
.hero-art{align-items:stretch;justify-content:space-between}
.hero-art .art-message{padding:32px 0}
.hero-art .art-message p strong{font-weight:400;color:var(--interior-plum)}
.hero-art .art-head,.hero-art .art-foot{font-size:11px}
.hero:has(.hero-art[aria-hidden="true"]){display:block}
.hero:has(.hero-art[aria-hidden="true"]) .hero-copy{max-width:1100px;padding-right:var(--gutter)}
.hero:has(.hero-art[aria-hidden="true"]) .hero-art{display:none}
.section,.principles,.promise,.intro,.steps,.app-showcase,.choice,.result,
.story,.continuation,.closing,.thesis{padding-top:clamp(70px,7.5vw,112px);padding-bottom:clamp(75px,8vw,120px)}
.section-head,.section-top,.showcase-head,.choice-head{margin-bottom:clamp(34px,4vw,58px)}
.section h2,.section-head h2,.section-top h2,.intro h2,.showcase-head h2,.choice h2,
.promise h2,.result h2,.closing h2,.cta h2,.role h2,.governance h2,.pilot h2,
.section.model h2,.section.measure h2,.section.pilot h2{
  font-size:clamp(30px,3.25vw,48px);line-height:1.18;letter-spacing:-.045em;
  max-width:850px;font-weight:650
}
.section-head p,.section-top p{max-width:660px;font-size:16px;line-height:1.75}
.section h3,.card h3,.benefit h3,.choice-card h3,.step h3,.question h3,
.audience h3,.strategy-card h3,.included-list h3,.term h3{font-size:clamp(19px,1.8vw,25px)}
.mono,.label,.eyebrow,.section .mono,.section .label{font-size:11px;font-weight:700;line-height:1.5;letter-spacing:.13em;text-transform:uppercase}
.section-head>.mono,.section-top>.label,.showcase-head>.mono,.choice-head>.mono{border-top:1px solid var(--interior-plum);padding-top:12px}
.section-head:has(h2),.section-top:has(h2){align-items:start}
.cta,.closing:not(.story .closing){border-top:1px solid var(--interior-rule)}
.cta h2,.closing h2{font-size:clamp(30px,3.25vw,46px)}
.round,.circle-link,.closing .circle-link,.btn,.closing-actions .btn,.nav .button,.nav .nav-contact{
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease
}
.round:hover,.circle-link:hover,.btn:hover,.nav .button:hover,.nav .nav-contact:hover{transform:translateY(-2px)}
.footer{border-top:1px solid var(--interior-rule)}
.footer a:not(.brand){text-underline-offset:4px}
.footer h2 a[href="/nous-joindre/index.html"]{display:inline;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;margin:0;text-decoration:none}
.footer h2 a[href="/nous-joindre/index.html"]:hover{color:#fff;text-decoration:underline}

/* The origin reads like a short essay: lead, numbered paragraphs, a pause, then conclusion. */
body:has(.story-grid) .hero-copy{padding-top:70px;padding-bottom:67px}
body:has(.story-grid) .hero h1{max-width:900px}
body:has(.story-grid) .hero-subtitle{
   font-family:"Plus Jakarta Sans",sans-serif;font-size:clamp(22px,2.3vw,32px);font-weight:600;
  color:var(--interior-plum);line-height:1.25;letter-spacing:-.01em
}
.story-grid{grid-template-columns:150px minmax(0,800px);gap:clamp(25px,5vw,90px)}
.story .opening{font-family:"Plus Jakarta Sans",sans-serif;font-size:clamp(27px,3.1vw,43px);line-height:1.33;color:var(--interior-ink);font-weight:600;letter-spacing:-.04em;margin-bottom:clamp(45px,5vw,80px)}
.chapter{grid-template-columns:45px minmax(0,1fr);gap:25px;padding:32px 0}
.chapter p,.continuation .chapter p,.closing .chapter p{max-width:720px;font-size:16px;line-height:1.85}
body:has(.story-grid) .continuation .chapter p{font-family:"Plus Jakarta Sans",sans-serif;font-size:clamp(22px,2.3vw,31px);font-weight:600;line-height:1.42;color:var(--interior-ink)}
body:has(.story-grid) .closing .chapter p{font-family:"Plus Jakarta Sans",sans-serif;font-size:clamp(24px,2.7vw,35px);font-weight:600;line-height:1.35;color:var(--interior-ink)}

/* Mission: three clear tenets and a quiet editorial commitment. */
body:has(.principles) .hero-panel{background:var(--interior-brand)}
body:has(.principles) .principles .grid{grid-template-columns:repeat(3,minmax(0,1fr));border:0;gap:0}
body:has(.principles) .principles .card{padding:28px 32px;border:0;border-top:1px solid var(--interior-rule);border-bottom:1px solid var(--interior-rule);display:flex;flex-direction:column;min-height:230px}
body:has(.principles) .principles .card+.card{border-left:1px solid var(--interior-rule)}
body:has(.principles) .principles .card h3{margin:38px 0 10px}
body:has(.principles) .promise{grid-template-columns:minmax(230px,.8fr) minmax(0,1fr);gap:clamp(40px,8vw,130px)}
body:has(.principles) .promise-copy{border-top:1px solid var(--interior-rule);padding-top:22px}
body:has(.principles) .promise-copy p:first-child{font-family:"Plus Jakarta Sans",sans-serif;font-size:clamp(22px,2.3vw,31px);font-weight:600;line-height:1.4;color:var(--interior-ink)}

/* Process: a numbered vertical route. Product illustrations remain supporting evidence. */
body:has(.steps) .intro{display:grid;grid-template-columns:170px minmax(0,1fr);background:var(--interior-blush)}
body:has(.steps) .steps{padding-top:44px;padding-bottom:85px}
body:has(.steps) .step{grid-template-columns:65px minmax(220px,.85fr) minmax(260px,1fr);gap:clamp(16px,3vw,48px);padding:32px 0}
body:has(.steps) .step-num{font-family:"Plus Jakarta Sans",sans-serif;font-size:32px;font-weight:700;line-height:1}
body:has(.steps) .step h3{font-size:clamp(21px,2vw,29px)}
body:has(.steps) .step-copy p{font-size:16px;line-height:1.7}
.tag{color:var(--interior-plum);background:var(--interior-blush)}
.app-showcase .showcase-head{display:grid}
.showcase-grid{gap:16px}
.app-frame{border:1px solid var(--interior-rule)}
.screen-caption{min-height:98px}
.choice-card{border-top:2px solid var(--interior-plum);min-height:215px}
.choice-card h3{margin:24px 0 10px}
body:has(.steps) .result{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}

/* Pricing: the explanatory calculation is the visual anchor, never a fictional price. */
body:has(.calculation) .model-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.8fr);gap:clamp(36px,6vw,90px);align-items:start}
body:has(.calculation) .model-copy{font-size:17px;max-width:640px}
body:has(.calculation) .model-copy p:first-child{font-size:clamp(18px,1.75vw,23px);line-height:1.6;color:var(--interior-ink)}
body:has(.calculation) .calculation{border:1px solid var(--interior-rule);border-top:2px solid var(--interior-plum)}
body:has(.calculation) .calculation h3{font-size:clamp(23px,2.2vw,30px);margin:25px 0}
body:has(.calculation) .included-layout{gap:clamp(30px,5vw,75px)}
body:has(.calculation) .included-feature{min-height:300px}
body:has(.calculation) .strategy-grid{border:0;gap:16px}
body:has(.calculation) .strategy-card{border:1px solid var(--interior-rule);border-top:2px solid var(--interior-plum);min-height:245px}
body:has(.calculation) .strategy-card+.strategy-card{border-left:1px solid var(--interior-rule)}
body:has(.calculation) .term{grid-template-columns:minmax(170px,.7fr) minmax(0,1.3fr);gap:35px}

/* Sector pages: benefits are an annotated index, not a uniform wall of cards. */
body:has(.section.light) .section.light{background:var(--interior-surface)}
body:has(.section.light) .benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--interior-rule);background:transparent}
body:has(.section.light) .benefits .benefit{
  display:grid;grid-template-columns:32px minmax(0,1fr);align-content:start;gap:20px;
  padding:30px clamp(18px,3vw,44px) 32px 0;border:0;border-bottom:1px solid var(--interior-rule);min-height:0
}
body:has(.section.light) .benefits .benefit:nth-child(even){border-left:1px solid var(--interior-rule);padding-left:clamp(18px,3vw,44px)}
body:has(.section.light) .benefits .benefit h3{margin:0 0 8px}
body:has(.section.light) .benefits .benefit p{font-size:15px;line-height:1.72}
body:has(.section.light) .split,body:has(.section.light) .governance,body:has(.section.light) .coordination{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(35px,7vw,105px);background:var(--interior-paper)
}
body:has(.section.light) .split-copy>p,body:has(.section.light) .governance-copy>p,body:has(.section.light) .coordination-copy>p{font-size:17px;max-width:720px;line-height:1.78}
body:has(.section.light) .item,body:has(.section.light) .rule{padding:16px 0}
body:has(.section.light) .item p,body:has(.section.light) .rule p{margin:0}
body:has(.section.light) .programs,body:has(.section.light) .segments,body:has(.section.light) .uses{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px
}
body:has(.section.light) .program,body:has(.section.light) .segment,body:has(.section.light) .use{
  border:1px solid var(--interior-rule);border-top:2px solid var(--interior-plum);
  padding:25px clamp(22px,2.5vw,36px);min-height:0;background:var(--interior-paper)
}
body:has(.section.light) .program h3,body:has(.section.light) .segment h3,body:has(.section.light) .use h3{margin:18px 0 9px}
body:has(.section.light) .program li{padding:4px 0;color:var(--interior-body)}
body:has(.section.light) .cases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:0;gap:0}
body:has(.section.light) .cases .case{display:block;border:0!important;border-top:1px solid var(--interior-rule)!important;padding:22px 18px;min-height:116px}
body:has(.section.light) .cases .case h3{font-size:17px;margin:10px 0 0}
body:has(.section.light) .model-list p,body:has(.section.light) .measure-list p,body:has(.section.light) .pilot-list p{padding:15px 0;margin:0}
body:has(.section.light) .model-list p::before,body:has(.section.light) .measure-list p::before,body:has(.section.light) .pilot-list p::before{content:"—";color:var(--interior-plum);margin-right:14px}
body:has(.section.light) .section.model,body:has(.section.light) .section.measure,body:has(.section.light) .section.pilot{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(35px,7vw,105px);background:var(--interior-blush)}
body:has(.section.light) .section:has(.model) .model{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
body:has(.section.light) .section:has(.model) .step{border:1px solid var(--interior-rule);border-top:2px solid var(--interior-plum);padding:24px;display:block}
body:has(.section.light) .section:has(.model) .step h3{margin:20px 0 8px}
body:has(.section.light) .roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
body:has(.section.light) .roles .role{display:block;border:1px solid var(--interior-rule);border-top:2px solid var(--interior-plum);background:var(--interior-blush)}
body:has(.section.light) .roles .role+.role{border-left:1px solid var(--interior-rule)}

/* Professional-services page: its decision examples are the narrative hinge. */
body:has(.benefit-grid) .hero-art{background:var(--interior-blush)}
body:has(.benefit-grid) .context-bottom{max-width:1070px}
body:has(.benefit-grid) .context-note{font-family:"Plus Jakarta Sans",sans-serif;font-size:clamp(20px,2vw,28px);line-height:1.4;font-weight:600;padding-left:23px}
body:has(.benefit-grid) .benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr));border:0;gap:0}
body:has(.benefit-grid) .benefit{border:0;border-top:1px solid var(--interior-rule);padding:26px 32px 30px 0;min-height:215px;gap:20px}
body:has(.benefit-grid) .benefit:nth-child(even){border-left:1px solid var(--interior-rule);padding-left:32px}
body:has(.benefit-grid) .benefit h3{margin:0 0 8px}
body:has(.benefit-grid) .question{grid-template-columns:50px minmax(0,1.15fr) minmax(0,.85fr);gap:22px}
body:has(.benefit-grid) .question h3{font-family:"Plus Jakarta Sans",sans-serif;font-size:clamp(21px,2.2vw,30px);font-weight:600;letter-spacing:-.04em}
body:has(.benefit-grid) .thesis{background:var(--interior-blush)}
body:has(.benefit-grid) .thesis p{font-family:"Plus Jakarta Sans",sans-serif;font-size:clamp(29px,3.3vw,46px);line-height:1.3;letter-spacing:-.045em;font-weight:600;max-width:1000px}
body:has(.benefit-grid) .audience-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
body:has(.benefit-grid) .audience{min-height:290px;gap:28px}

@media(max-width:1050px){
  .hero{grid-template-columns:minmax(0,1.3fr) minmax(255px,.7fr)}
  .hero-copy{padding-right:30px}
  body:has(.section.light) .section.model,body:has(.section.light) .section.measure,body:has(.section.light) .section.pilot{grid-template-columns:1fr;gap:25px}
  body:has(.section.light) .cases{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .hero{display:block}
  .hero-copy{padding:48px var(--gutter) 37px;gap:22px}
  .hero h1,.hero-copy h1{font-size:clamp(35px,8.5vw,48px);margin-top:18px}
  .hero-panel,.hero-art{border-left:0;border-top:1px solid var(--interior-rule);padding:24px var(--gutter);gap:14px}
  .hero-panel p,.hero-panel blockquote,.hero-art .art-message p{font-size:clamp(25px,7vw,34px)}
  .hero-art .art-message{padding:16px 0}
  .section,.principles,.promise,.intro,.steps,.app-showcase,.choice,.result,.story,.continuation,.closing,.thesis,.cta{padding-top:58px;padding-bottom:65px}
  .section-head,.section-top,.showcase-head,.choice-head{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:30px}
  .section-head>.mono,.section-top>.label,.showcase-head>.mono,.choice-head>.mono{border:0;padding:0}
  .section h2,.section-head h2,.section-top h2,.intro h2,.showcase-head h2,.choice h2,.promise h2,.result h2,.closing h2,.cta h2,.role h2,.governance h2,.pilot h2,.section.model h2,.section.measure h2,.section.pilot h2{font-size:clamp(29px,7.3vw,38px)}
  .story-grid{grid-template-columns:1fr}
  body:has(.story-grid) .hero-copy{padding:55px var(--gutter) 50px}
  body:has(.principles) .principles .grid,body:has(.principles) .promise{grid-template-columns:1fr}
  body:has(.principles) .principles .card{min-height:0;padding:20px 0;border-left:0!important}
  body:has(.principles) .principles .card+.card{border-top:0}
  body:has(.principles) .principles .card h3{margin:12px 0 7px}
  body:has(.steps) .intro{grid-template-columns:1fr}
  body:has(.steps) .steps{padding-top:20px;padding-bottom:55px}
  body:has(.steps) .step{grid-template-columns:38px minmax(0,1fr);gap:7px 13px;padding:24px 0}
  body:has(.steps) .step-copy{grid-column:2}
  body:has(.steps) .step-num{font-size:25px}
  body:has(.steps) .result{grid-template-columns:1fr}
  body:has(.calculation) .model-body,body:has(.calculation) .included-layout,body:has(.calculation) .strategy-grid{grid-template-columns:1fr}
  body:has(.calculation) .term{grid-template-columns:1fr;gap:8px}
  body:has(.section.light) .split,body:has(.section.light) .governance,body:has(.section.light) .coordination{grid-template-columns:1fr;gap:22px}
  body:has(.section.light) .section:has(.model) .model{grid-template-columns:1fr}
  body:has(.section.light) .roles{grid-template-columns:1fr}
  body:has(.section.light) .roles .role+.role{border-top:2px solid var(--interior-plum)}
  body:has(.benefit-grid) .audience-grid{grid-template-columns:1fr}
  body:has(.benefit-grid) .audience{min-height:0}
  body:has(.benefit-grid) .question{grid-template-columns:32px minmax(0,1fr)}
  body:has(.benefit-grid) .question p{grid-column:2}
}
@media(max-width:560px){
  .nav{gap:8px 13px}
  .nav a,.nav a:not(.button){font-size:11px}
  .hero-copy{padding-top:44px}
  body:has(.section.light) .benefits,body:has(.section.light) .programs,body:has(.section.light) .segments,body:has(.section.light) .uses,body:has(.section.light) .cases,body:has(.benefit-grid) .benefit-grid{grid-template-columns:1fr}
  body:has(.section.light) .benefits .benefit,body:has(.section.light) .benefits .benefit:nth-child(even),body:has(.benefit-grid) .benefit,body:has(.benefit-grid) .benefit:nth-child(even){border-left:0;padding:22px 0;min-height:0}
  body:has(.section.light) .program,body:has(.section.light) .segment,body:has(.section.light) .use{padding:22px}
  body:has(.calculation) .included-feature{min-height:250px}
  .footer{gap:22px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
  body.motion-ready .reveal,body.motion-ready .reveal.on{opacity:1;transform:none;transition:none}
  .round:hover,.circle-link:hover,.btn:hover,.nav .button:hover,.nav .nav-contact:hover{transform:none}
}

/* The process reads as one continuous route rather than stacked panels. */
body:has(.steps) .intro{
  background:var(--interior-paper);
  border-bottom:0;
  padding-bottom:clamp(42px,5vw,70px);
}
body:has(.steps) .intro .mono::before{
  content:"";
  display:block;
  width:42px;
  height:1px;
  margin-bottom:17px;
  background:var(--interior-plum);
}
body:has(.steps) .steps{
  position:relative;
  isolation:isolate;
  padding-top:44px;
}
body:has(.steps) .steps::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:44px;
  bottom:85px;
  left:50%;
  width:1px;
  background:var(--interior-rule);
}
body:has(.steps) .steps>.step{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr);
  grid-template-rows:auto;
  align-items:start;
  gap:12px clamp(18px,3vw,44px);
  padding:0 0 clamp(56px,7vw,92px);
  border:0;
}
body:has(.steps) .steps>.step:last-child{padding-bottom:0}
body:has(.steps) .steps>.step::before{
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  left:50%;
  width:18px;
  height:18px;
  border:1px solid var(--interior-plum);
  border-radius:50%;
  background:var(--interior-paper);
  transform:translateX(-50%);
}
body:has(.steps) .steps>.step>.step-num{
  z-index:1;
  grid-column:2;
  grid-row:1;
  justify-self:center;
  margin-top:26px;
  padding:8px 0;
  background:var(--interior-paper);
  font-size:18px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.08em;
  line-height:1;
}
body:has(.steps) .steps>.step>h3{
  grid-row:1;
  max-width:470px;
  margin:17px 0 0;
  font-size:clamp(22px,2.25vw,31px);
  line-height:1.23;
}
body:has(.steps) .steps>.step>.step-copy{
  grid-row:1;
  max-width:470px;
  padding-top:19px;
}
body:has(.steps) .steps>.step:nth-child(odd)>h3,
body:has(.steps) .steps>.step:nth-child(even)>.step-copy{
  grid-column:1;
  justify-self:end;
  text-align:right;
}
body:has(.steps) .steps>.step:nth-child(even)>h3,
body:has(.steps) .steps>.step:nth-child(odd)>.step-copy{
  grid-column:3;
  justify-self:start;
  text-align:left;
}
body:has(.steps) .steps>.step .step-copy p{margin-bottom:18px}
body:has(.steps) .steps>.step:nth-child(odd) .tags{justify-content:flex-start}
body:has(.steps) .steps>.step:nth-child(even) .tags{justify-content:flex-end}
body:has(.steps) .steps>.step .tag{border-radius:999px;padding:6px 12px}

@media(max-width:760px){
  body:has(.steps) .intro{padding-bottom:42px}
  body:has(.steps) .steps{padding-top:25px}
  body:has(.steps) .steps::before{
    top:25px;
    bottom:55px;
    left:calc(var(--gutter) + 12px);
  }
  body:has(.steps) .steps>.step{
    grid-template-columns:24px minmax(0,1fr);
    grid-template-rows:auto auto;
    gap:8px 14px;
    padding-bottom:36px;
  }
  body:has(.steps) .steps>.step::before{
    left:12px;
    width:13px;
    height:13px;
  }
  body:has(.steps) .steps>.step>.step-num{
    grid-column:1;
    grid-row:1 / span 2;
    justify-self:start;
    margin-top:20px;
    font-size:15px;
    letter-spacing:.02em;
  }
  body:has(.steps) .steps>.step>h3,
  body:has(.steps) .steps>.step>.step-copy,
  body:has(.steps) .steps>.step:nth-child(odd)>h3,
  body:has(.steps) .steps>.step:nth-child(odd)>.step-copy,
  body:has(.steps) .steps>.step:nth-child(even)>h3,
  body:has(.steps) .steps>.step:nth-child(even)>.step-copy{
    grid-column:2;
    justify-self:stretch;
    max-width:none;
    text-align:left;
  }
  body:has(.steps) .steps>.step>h3{grid-row:1;margin-top:14px;font-size:clamp(21px,5.8vw,26px)}
  body:has(.steps) .steps>.step>.step-copy{grid-row:2;padding-top:0}
  body:has(.steps) .steps>.step:nth-child(odd) .tags,
  body:has(.steps) .steps>.step:nth-child(even) .tags{justify-content:flex-start}
}