/* Visible navigation and editorial rhythm below the hero. */
#systeme,#solutions,#avis{scroll-margin-top:110px}
.manifesto{padding:110px 0 70px}
.manifesto h2{font-size:clamp(40px,5.2vw,68px);max-width:850px;line-height:1.04}
.product{padding-bottom:110px}
.demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
.demo-heading h3{font-size:30px;letter-spacing:-.045em;margin:0 0 8px}
.demo-heading p{font-size:15px;color:#aaa;margin:0}
.demo-controls{display:flex;align-items:center;gap:8px}
.demo-status{font-size:12px;font-variant-numeric:tabular-nums;color:#a5a5a5;margin-right:8px;white-space:nowrap}
.demo-controls button{min-width:44px;min-height:44px;padding:10px 14px;border:1px solid #ffffff25;border-radius:50px;background:#161716;color:#eee;font:inherit;font-size:13px;cursor:pointer}
.demo-controls button:hover{background:#292a29}
.demo-controls button:focus-visible,.solution a:focus-visible{outline:2px solid white;outline-offset:4px}
.product>.feature-nav{position:relative;left:auto;bottom:auto;transform:none;display:flex;width:fit-content;max-width:100%;margin:0 auto 24px;gap:5px;padding:6px;border:1px solid #ffffff20;border-radius:22px;background:#141514;overflow-x:auto}
.product>.feature-nav button,.product>.feature-nav button.active{width:auto;height:auto;min-height:44px;border-radius:16px;padding:12px 20px;color:#aaa;font:inherit;font-size:14px;white-space:nowrap;background:transparent;overflow:hidden;flex-shrink:0}
.product>.feature-nav button.active{background:#f0f0ed;color:#111}
.product>.feature-nav button::after{display:none}
.product>.feature-nav.is-running button.active::after{display:block;left:0;top:auto;bottom:0;width:100%;height:3px;background:#5395f9;transform-origin:left;animation:demo-progress 6.5s linear forwards;border-radius:0}
@keyframes demo-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.demo-heading p::after{content:" · Défilement automatique";color:#b4c8e8}
.demo-toolbar[data-mode="manual"] .demo-heading p::after{content:" · Choisis une vue"}
.solutions{padding-bottom:110px}
.heading{gap:45px;margin-bottom:45px}
.heading h2{font-size:clamp(38px,4.8vw,62px);max-width:650px}
.solution-list{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.solution{display:flex;flex-direction:column;gap:22px;padding:30px 0;border-bottom:0}
.solution h3{font-size:30px;line-height:1.13;letter-spacing:-.035em}
.solution p{font-size:16px}
.solution a{display:inline-flex;color:#ddd;font-size:14px;margin-top:auto;padding:12px 0;border-bottom:1px solid #ffffff25}
.solution a:hover{color:#fff;border-color:#fff}
.reviews{padding-bottom:110px}
.reviews h2{font-size:clamp(36px,4.5vw,60px);letter-spacing:-.05em;text-align:center;margin:0 20px 48px}
.review-track:hover{animation-play-state:paused}
@media(max-width:800px){
 .demo-toolbar{align-items:flex-start;flex-direction:column;gap:18px}
 .demo-heading h3{font-size:27px}.demo-heading p{font-size:14px;line-height:1.6}
 .demo-heading p::after{display:block}
 .product>.feature-nav{width:100%;justify-content:center;flex-wrap:wrap;border-radius:18px}
 .product>.feature-nav button,.product>.feature-nav button.active{padding:12px 13px;flex:1 0 auto;font-size:13px}
 .product-stage{padding-bottom:22px}
 .solution-list{grid-template-columns:1fr;gap:0}
 .solution{padding:30px 0;border-bottom:1px solid #ffffff20}
 .solution h3{font-size:30px}.solution a{margin-top:0}
 .manifesto{padding:85px 0 55px}.product,.solutions{padding-bottom:80px}
 .foot div{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.product>.feature-nav.is-running button.active::after{display:none}}

/* Dark glass segmented control: quiet pearlescent progress, no extra chrome. */
.feature-glass-pill{
 position:absolute;left:0;top:0;pointer-events:none;border-radius:19px;
 background:linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.065));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.08),0 3px 10px rgba(0,0,0,.18);
 transition:transform .55s cubic-bezier(.22,1,.36,1),width .55s cubic-bezier(.22,1,.36,1),height .55s cubic-bezier(.22,1,.36,1);
 will-change:transform;
}
.product>.feature-nav{
 gap:5px;padding:7px;margin-bottom:30px;border-radius:26px;
 border:1px solid rgba(255,255,255,.19);
 background:linear-gradient(140deg,rgba(255,255,255,.11),rgba(255,255,255,.025) 48%,rgba(255,255,255,.055));
 backdrop-filter:blur(28px) saturate(140%);-webkit-backdrop-filter:blur(28px) saturate(140%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(255,255,255,.035),0 12px 38px rgba(0,0,0,.2);
}
.product>.feature-nav button,.product>.feature-nav button.active{
 border-radius:19px;padding:15px 23px 19px;color:#a7a8a5;
 transition:color .3s,background .3s,box-shadow .3s;
}
.product>.feature-nav button:hover{color:#f2f2ef;background:rgba(255,255,255,.05)}
.product>.feature-nav button.active{
 color:#f7f7f4;background:transparent;box-shadow:none;
}
.product>.feature-nav.is-running button.active::after{
 left:18px;bottom:8px;width:calc(100% - 36px);height:2px;border-radius:2px;
 background:linear-gradient(90deg,rgba(231,230,221,.35),#eeeDE6);
 box-shadow:0 0 6px rgba(255,255,245,.16);
}
@media(max-width:800px){
 .product>.feature-nav{border-radius:23px;gap:4px}
 .product>.feature-nav button,.product>.feature-nav button.active{padding:14px 12px 19px;border-radius:17px}
 .feature-glass-pill{border-radius:17px}
}
@media(prefers-reduced-motion:reduce){.feature-glass-pill{transition:none}}
/* Quiet, native FAQ: keyboard accessible without extra scripts. */
.faq{display:grid;grid-template-columns:1fr 1.35fr;gap:70px;padding-bottom:110px;scroll-margin-top:110px}
.faq h2{font-size:clamp(34px,4vw,52px);line-height:1.08;letter-spacing:-.05em;margin:0 0 18px;text-wrap:balance}
.faq-intro>p{color:var(--muted);line-height:1.6;margin:0}
.faq-list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:25px 0;font-size:17px;font-weight:500;line-height:1.45}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:24px;font-weight:400;color:#a6a7a1;flex-shrink:0}
.faq details[open] summary::after{content:'−'}
.faq summary:hover{color:#fff}
.faq summary:focus-visible,.faq a:focus-visible{outline:2px solid #e5e5df;outline-offset:5px;border-radius:4px}
.faq-answer{padding:0 32px 25px 0;color:var(--muted);font-size:15px;line-height:1.75}
.faq-answer p{margin:0}.faq-answer a{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
@media(max-width:800px){.faq{grid-template-columns:1fr;gap:30px;padding-bottom:80px}.faq summary{font-size:16px;padding:22px 0}.faq-answer{padding-right:12px}}