:root{
  color-scheme: dark;
  --ink:#1D1F1E;          /* fond principal (Delyos) */
  --ink-2:#232625;        /* panneaux */
  --ink-3:#2B2F2D;        /* panneaux relevés */
  --line:rgba(255,248,237,.09);
  --line-2:rgba(255,248,237,.16);
  --cream:#FFF8ED;        /* texte / sections claires (Delyos) */
  --cream-2:#F3EBDD;
  --mute:#A1A6A4;         /* gris Delyos */
  --mute-2:#757A78;
  --mint:#70E2AB;         /* accent Delyos */
  --mint-deep:#3FBF84;
  --mint-ghost:rgba(112,226,171,.12);
  --on-cream:#1D1F1E;
  --on-cream-mute:#5E6360;
  --warn:#F2B66D;
  --fg:#FFF8ED; --fg-inv:#1D1F1E; --mint-ink:#70E2AB; --warn-ink:#F2B66D;
  --btn-hover:#fff; --nav-bg:rgba(29,31,30,.78); --grid:rgba(255,248,237,.035);
  --app-a:#262A28; --app-b:#202322; --app-shadow:0 40px 120px -40px rgba(0,0,0,.7), 0 0 0 8px rgba(255,248,237,.025);
  --sunk:rgba(0,0,0,.14); --band:#FFF8ED; --logo-filter:none;
  --r-s:10px; --r-m:16px; --r-l:24px;
  --display:"Sora", "Segoe UI", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(88px + env(safe-area-inset-top,0px))}
body{
  margin:0; background:var(--ink); color:var(--fg);
  font-family:var(--display); font-size:16px; line-height:1.6; font-weight:300;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{max-width:1180px; margin-inline:auto; padding-inline:24px}
@media (max-width:560px){.wrap{padding-inline:16px}}
h1,h2,h3{font-weight:600; line-height:1.08; letter-spacing:-.025em; text-wrap:balance; margin:0}
p{margin:0}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mint-ink)}
.eyebrow.eyebrow-q{font-family:var(--display); font-size:14px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--mute);
  display:flex; align-items:center; gap:14px; margin-bottom:40px}
.eyebrow.eyebrow-q::after{content:""; flex:1; height:1px; background:var(--line-2)}
.cream .eyebrow.eyebrow-q{color:var(--mute)}
.lead{color:var(--mute); font-size:17px; max-width:60ch}
.lead b{color:var(--fg); font-weight:500}
:focus-visible{outline:2px solid var(--mint); outline-offset:3px; border-radius:6px}

/* ---------- boutons ---------- */
.btn{display:inline-flex; align-items:center; gap:14px; text-decoration:none; font-weight:500; font-size:15px;
  padding:8px 8px 8px 22px; border-radius:14px; border:1px solid var(--line-2); transition:transform .2s, background .2s, border-color .2s; cursor:pointer}
.btn .arr{display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--ink-3); transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.btn-primary{background:var(--fg); color:var(--fg-inv); border-color:var(--fg)}
.btn-primary .arr{background:var(--mint); color:var(--on-cream)}
.btn-primary:hover{background:var(--btn-hover)}
.btn-ghost{background:transparent; color:var(--fg)}
.btn-ghost:hover{border-color:var(--mute)}
.btn-ghost .arr{background:transparent; border:1px solid var(--line-2)}

/* ---------- nav ---------- */
header.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--nav-bg); backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .3s}
header.nav.scrolled{border-bottom-color:var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:20px; height:72px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; font-size:20px; letter-spacing:-.02em}
.logo svg{width:26px; height:23px}
.nav-links{display:flex; gap:20px; font-size:13.5px; font-weight:400; white-space:nowrap}
.nav-links a{text-decoration:none; color:var(--mute); transition:color .2s}
.nav-links a:hover{color:var(--fg)}
.nav-cta{display:flex; align-items:center; gap:10px}
.lang{font-family:var(--mono); font-size:11px; display:flex; border:1px solid var(--line-2); border-radius:10px; padding:3px}
.lang span{padding:4px 8px; border-radius:7px; color:var(--mute-2)}
.lang span.on{background:var(--fg); color:var(--fg-inv)}
.btn-sm{padding:6px 6px 6px 16px; font-size:14px; border-radius:12px}
.btn-sm .arr{width:30px; height:30px; border-radius:8px}
@media (max-width:1240px){.lang{display:none}}
@media (max-width:1100px){.nav-links{display:none}}

/* ---------- hero ---------- */
.hero{padding-block:56px 40px; position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:-20% -10% auto auto; width:720px; height:720px; background:radial-gradient(closest-side, rgba(112,226,171,.13), transparent 70%); pointer-events:none}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(circle, rgba(112,226,171,.22) 1px, transparent 1.6px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:96px 96px, 48px 48px, 48px 48px;
  background-position:-1px -1px, -1px -1px, -1px -1px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 72% 30%, #000 20%, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 72% 30%, #000 20%, transparent 75%)}
.hero > .wrap{position:relative; z-index:1}
.hero-grid{display:grid; grid-template-columns:1fr; gap:48px; position:relative}
.pill-row{display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px}
.pill{display:inline-flex; align-items:center; gap:10px; padding:7px 14px; border:1px solid var(--line-2); border-radius:999px; font-size:13px; font-weight:500; background:var(--ink-2)}
.dot{width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px var(--mint-ghost)}
.pill-row .aside{font-size:13px; color:var(--mute)}
.hero h1{font-size:clamp(28px, 5.4vw, 48px); margin-top:0; max-width:14ch}
.hero h1 em{font-style:normal; color:var(--mint-ink)}
.hero h1{max-width:none}
.hero h1 .l1{white-space:nowrap}
.hero h1 em{display:block}
@media (max-width:560px){.hero h1 .l1{white-space:normal}}
.hero .lead{margin-top:24px}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hero-grid > div:not(.hero-bg){position:relative; z-index:1}
/* illustration animée du hero */
.hero-art{display:flex; justify-content:center}
.hero-art > svg{width:100%; max-width:480px; height:auto; overflow:visible}
.hero-art .src rect{fill:var(--ink-2); stroke:var(--line-2)}
.hero-art .src text{font:400 10.5px var(--mono); fill:var(--mute)}
.hero-art .wire{fill:none; stroke:var(--line-2); stroke-width:1}
.hero-art .out{fill:none; stroke:var(--mint); stroke-width:1.2; stroke-dasharray:3 5; opacity:.7}
.hero-art .core{fill:var(--ink-2); stroke:var(--mint); stroke-width:1.2}
.hero-art .ring{fill:none; stroke:var(--mint); opacity:0; transform-box:fill-box; transform-origin:center}
.hero-art .lbl{font:500 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; fill:var(--mute-2)}
.hero-art .dash{fill:var(--ink-2); stroke:var(--line-2)}
.hero-art .bar{fill:var(--mint); opacity:.55; transform-box:fill-box; transform-origin:bottom}
.hero-art .bar.hi{opacity:1}
.hero-art .ag{font:500 10px var(--mono); fill:var(--mint)}
.hero-art .pulse{fill:var(--mint)}
@media (prefers-reduced-motion:no-preference){
  .hero-art .out{animation:flow 1.2s linear infinite}
  .hero-art .ring{animation:ring 3.2s ease-out infinite}
  .hero-art .bar{animation:grow 4.8s ease-in-out infinite}
  .hero-art .bar:nth-of-type(2){animation-delay:.3s}.hero-art .bar:nth-of-type(3){animation-delay:.6s}
  .hero-art .bar:nth-of-type(4){animation-delay:.9s}.hero-art .bar:nth-of-type(5){animation-delay:1.2s}
  .hero-art .pulse{animation:blink 2.4s ease-in-out infinite}
  @keyframes flow{to{stroke-dashoffset:-16}}
  @keyframes ring{0%{opacity:.5; transform:scale(1)}70%,100%{opacity:0; transform:scale(1.35)}}
  @keyframes grow{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
  @keyframes blink{50%{opacity:.3}}
}
@media (min-width:980px){.hero-grid{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr); align-items:center}.hero h1{font-size:clamp(32px,3.6vw,47px)}}
@media (max-width:640px){.hero-art{display:none}}
.trio{list-style:none; padding:0 0 0 4px; display:flex; flex-wrap:wrap; gap:12px 32px; margin:36px 0 0}
.trio li{display:flex; align-items:center; gap:12px; font-size:15px; font-weight:400; color:var(--fg)}

/* ---------- démo app (socle + sur-mesure) ---------- */
.demo{margin-top:56px}
.seg{display:flex; justify-content:center; margin-bottom:18px}
.seg-in{display:inline-flex; gap:4px; padding:4px; border-radius:14px; background:var(--ink-2); border:1px solid var(--line); flex-wrap:wrap; justify-content:center}
.seg button{font:500 13px var(--display); color:var(--mute); background:none; border:0; padding:9px 16px; border-radius:10px; cursor:pointer; transition:background .25s, color .25s}
.seg button[aria-pressed="true"]{background:var(--mint); color:var(--on-cream)}
.app{border-radius:var(--r-l); border:1px solid var(--line-2); background:linear-gradient(180deg,var(--app-a),var(--app-b)); box-shadow:var(--app-shadow); overflow:hidden}
.app-bar{display:flex; align-items:center; gap:14px; padding:12px 18px; border-bottom:1px solid var(--line)}
.lights{display:flex; gap:6px}.lights span{width:10px; height:10px; border-radius:50%; background:var(--ink-3)}
.lights span:nth-child(1){background:#FF5F57}.lights span:nth-child(2){background:#FEBC2E}.lights span:nth-child(3){background:#28C840}
.url{flex:1; max-width:360px; margin-inline:auto; font-family:var(--mono); font-size:11px; color:var(--mute-2); background:var(--ink); border-radius:8px; padding:6px 12px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sample{font:400 12px var(--display); color:var(--mute-2); letter-spacing:0; text-transform:none}
.app-body{display:grid; grid-template-columns:230px 1fr; min-height:440px}
.side{border-right:1px solid var(--line); padding:18px 14px; display:flex; flex-direction:column; gap:18px}
.client-logo{display:flex; align-items:center; gap:10px; font-size:13px; font-weight:500}
.client-logo i{width:28px; height:28px; border-radius:8px; background:var(--ink-3); border:1px dashed var(--line-2); display:grid; place-items:center; font-style:normal; font-size:10px; color:var(--mute-2)}
.client-logo i.has{background:none; border:0; padding:0}
.client-logo i svg{width:28px; height:28px; display:block}
.client-logo i.has.wide{background:#FFF8ED; border-radius:8px; width:auto; padding:0 8px}
.client-logo i.wide img{height:15px; width:auto; display:block}
.side h4{margin:0 0 8px; font:500 10px var(--mono); letter-spacing:.12em; text-transform:uppercase; display:flex; align-items:center; gap:8px}
.side h4.custom{color:var(--mint-ink)}
.side h4.base{color:var(--mute-2)}
.side ul{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.side li{font-size:13px; padding:7px 10px; border-radius:8px; color:var(--mute); display:flex; justify-content:space-between; align-items:center}
.side li.on{background:var(--mint-ghost); color:var(--fg)}
.side .custom-list li::before{content:""; width:6px; height:6px; border-radius:2px; background:var(--mint); margin-right:10px; flex:none}
.side .custom-list li{justify-content:flex-start}
.side .base-list li{font-size:12px; color:var(--mute-2)}
.side .base-list li::after{content:"✓"; font-size:11px; color:var(--mute-2)}
.base-box{margin-top:auto; border:1px solid var(--line); border-radius:12px; padding:10px; background:var(--sunk)}
.main{padding:22px 24px; display:grid; gap:18px; align-content:start; min-width:0}
.hello{display:flex; justify-content:space-between; gap:16px; align-items:flex-start; flex-wrap:wrap}
.hello h3{font-size:20px; font-weight:500; letter-spacing:-.01em}
.hello p{color:var(--mute); font-size:13px}
.chip{font:500 12px var(--display); color:var(--mint-ink); border:1px solid rgba(112,226,171,.35); border-radius:999px; padding:5px 10px; display:inline-flex; gap:8px; align-items:center; white-space:nowrap}
.chip::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--mint)}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.kpi{background:var(--ink-2); border:1px solid var(--line); border-radius:14px; padding:14px 16px}
.kpi small{display:block; font-size:12px; color:var(--mute)}
.kpi strong{display:block; font-size:26px; font-weight:500; letter-spacing:-.02em; margin-top:6px; font-variant-numeric:tabular-nums}
.kpi .delta{font:500 11px var(--mono); color:var(--mint-ink)}
.kpi .delta.down{color:var(--warn-ink)}
.lower{display:grid; grid-template-columns:1.6fr 1fr; gap:12px}
.panel{background:var(--ink-2); border:1px solid var(--line); border-radius:14px; padding:16px}
.panel-h{display:flex; justify-content:space-between; align-items:baseline; font-size:13px; margin-bottom:12px}
.panel-h span{color:var(--mute); font-size:12px}
.bars{display:flex; align-items:flex-end; gap:6px; height:120px}
.bars div{flex:1; background:linear-gradient(180deg, rgba(112,226,171,.55), rgba(112,226,171,.12)); border-radius:5px 5px 2px 2px; transition:height .6s cubic-bezier(.2,.8,.2,1)}
.bars div.hi{background:var(--mint)}
.months{display:flex; gap:6px; margin-top:6px}.months span{flex:1; text-align:center; font:10px var(--mono); color:var(--mute-2)}
.agent li{display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--mute); padding:8px 0; border-top:1px solid var(--line)}
.agent li:first-child{border-top:0; padding-top:0}
.agent ul{list-style:none; margin:0; padding:0}
.agent .st{font:500 11px var(--display); padding:3px 7px; border-radius:6px; background:var(--mint-ghost); color:var(--mint-ink); white-space:nowrap; flex:none}
.agent .st.wait{background:rgba(242,182,109,.12); color:var(--warn-ink)}
.agent .who{color:var(--fg)}
/* pas d'empilement sur petit écran : la maquette est mise à l'échelle (voir .app-fit) */
.demo-caption{display:flex; justify-content:center; gap:22px; flex-wrap:wrap; margin-top:16px; font-size:12.5px; color:var(--mute)}
.demo-caption span{display:inline-flex; align-items:center; gap:8px}
.sw{width:10px; height:10px; border-radius:3px}
.sw.m{background:var(--mint)} .sw.b{background:transparent; border:1px solid var(--mute-2)}

/* ---------- logos ---------- */
.trust{margin-top:56px}
.trust-in{display:grid; grid-template-columns:minmax(0,1fr) 1px minmax(0,1.2fr); gap:20px 32px; align-items:center;
  padding:24px clamp(18px,3vw,32px); border:1px solid var(--line); border-radius:var(--r-l);
  background:radial-gradient(120% 140% at 0% 0%, rgba(112,226,171,.07), transparent 55%), var(--ink-2)}
.trust-copy{display:grid; gap:8px}
.trust-h{font-size:clamp(20px,2.2vw,26px); font-weight:600; letter-spacing:-.025em; line-height:1.12}
.trust-h em{display:block; font-style:normal; font-weight:400; color:var(--mint-ink)}
.trust-figs{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.trust-figs span{display:inline-flex; align-items:baseline; gap:8px; font-size:12px; color:var(--mute); padding:5px 12px; border:1px solid var(--line-2); border-radius:999px}
.trust-figs b{font-weight:600; font-size:13px; color:var(--fg); font-variant-numeric:tabular-nums}
.reviews{display:grid; gap:8px; min-width:0}
.rv-head{display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:12px; color:var(--mute)}
.rv-head b{color:var(--fg); font-weight:600}
.rv-head .g{display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--fg); color:var(--fg-inv); font:700 11px var(--display); margin-right:2px}
.stars{color:var(--mint-ink); letter-spacing:2px; font-size:13px}
.stars.sm{font-size:11px; letter-spacing:1px}
.reel-stage.rv-stage{width:100%; height:104px; -webkit-mask-image:none; mask-image:none}
.reel-stage.rv-stage figure{display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:6px; text-align:left}
.reel-stage.rv-stage figure.on{opacity:1}
.rv-top{display:flex; align-items:center; gap:10px}
.rv-ex{font:500 9.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--warn-ink); border:1px solid rgba(242,182,109,.4); border-radius:6px; padding:2px 6px}
.rv-stage blockquote{margin:0; font-size:14px; line-height:1.45; color:var(--fg); font-weight:300; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.rv-stage blockquote::before{content:none}
.rv-stage figcaption{font-size:12px; color:var(--mute)}
.rv-stage figcaption b{color:var(--fg); font-weight:500}
.reviews .reel-ticks{justify-content:flex-start}
@media (max-width:1060px){.trust-in{grid-template-columns:1fr 1fr}.trust-sep{display:none}.trust-copy{grid-column:1/-1}}
.trust-sep{align-self:stretch; background:linear-gradient(180deg,transparent,var(--line-2),transparent)}
.reel{display:grid; justify-items:center; gap:10px}
.reel-stage{position:relative; width:min(100%,420px); height:110px; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.reel-stage figure{position:absolute; inset:0; margin:0; display:grid; place-items:center; opacity:0; transform:translateY(70%); filter:blur(4px);
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1), opacity 1.1s ease, filter 1.1s ease}
.reel-stage figure.on{opacity:.88; transform:none; filter:none}
.reel-stage figure.out{opacity:0; transform:translateY(-70%); filter:blur(4px)}
.reel-stage img{filter:var(--logo-filter); max-height:72px; max-width:300px; width:auto; height:auto; display:block}
.reel-ticks{display:flex; gap:6px}
.reel-ticks span{width:14px; height:2px; border-radius:2px; background:var(--line-2); transition:background .6s}
.reel-ticks span.on{background:var(--mint)}
@media (prefers-reduced-motion:reduce){.reel-stage figure{transform:none!important; filter:none!important}}
@media (max-width:760px){.trust-in{grid-template-columns:1fr}.trust-sep{display:none}}

/* ---------- sections génériques ---------- */
section.block{padding-block:112px}
.sec-head{display:grid; gap:18px; max-width:720px; margin-bottom:56px}
.sec-head h2{font-size:clamp(32px, 4.4vw, 52px)}
.sec-head h2.h2-sm{font-size:clamp(26px,3vw,36px)}
.sec-head h2 em{font-style:normal; color:var(--mint-ink)}
.cream{--ink:var(--band); --ink-2:#FFFFFF; --ink-3:#EFE9DD;
  --line:rgba(29,31,30,.10); --line-2:rgba(29,31,30,.18);
  --fg:#1D1F1E; --fg-inv:#FFF8ED; --mute:#5E6360; --mute-2:#858A87;
  --mint-ink:#1E9A62; --mint-ghost:rgba(47,174,114,.12); --warn-ink:#A8641A;
  background:var(--band); color:var(--fg)}
.cream .lead{color:var(--on-cream-mute)}
.cream .eyebrow{color:var(--mint-deep)}
.cream .sec-head h2 em{color:var(--mint-deep)}

/* ---------- socle + sur-mesure ---------- */
.stack{display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center}
@media (max-width:900px){.stack{grid-template-columns:1fr}}
.layers{display:grid; gap:12px}
.layer{border-radius:var(--r-m); padding:22px 24px; display:grid; gap:14px}
.layer header{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.layer h3{font-size:19px; letter-spacing:-.01em}
.layer .tag{font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase}
.layer .tags{display:flex; flex-wrap:wrap; gap:8px}
.layer .tags span{font-size:13px; padding:6px 12px; border-radius:999px}
.layer.custom{background:var(--ink-2); color:var(--fg); border:1px solid var(--line-2)}
.layer.custom .tag{color:var(--mint-ink)}
.layer.custom .tags span{background:var(--mint-ghost); color:var(--mint-ink); border:1px solid rgba(112,226,171,.25)}
.layer.base{background:transparent; border:1px dashed var(--line-2)}
.layer.base .tag{color:var(--mute)}
.layer.base .tags span{background:var(--line); color:var(--fg)}
.layer p{font-size:14px; line-height:1.55}
.layer.custom p{color:var(--mute)} .layer.base p{color:var(--mute)}
.stack-copy{display:grid; gap:28px}
.stack-copy .pair{display:grid; gap:6px; padding-top:22px; border-top:1px solid var(--line-2)}
.stack-copy .pair b{font-weight:600; font-size:17px; letter-spacing:-.01em}
.stack-copy .pair p{color:var(--mute); font-size:15px}

/* ---------- situations ---------- */
.situations{isolation:isolate; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden}
@media (max-width:1000px){.situations{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.situations{grid-template-columns:1fr}}
.sit{background:var(--ink); padding:36px 32px; display:grid; gap:14px; align-content:start; transition:background .25s}
.sit:hover{background:var(--ink-2)}
.sit .n{font:500 12px var(--mono); color:var(--mute-2)}
.sit h3{font-size:19px; font-weight:500; letter-spacing:-.01em; line-height:1.3; text-wrap:pretty}
.sit{padding:28px 26px; min-height:170px}
.sit-top{display:flex; align-items:center; justify-content:space-between}
.sit .ico{display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--mint-ghost); color:var(--mint-ink); transition:background .25s, color .25s, transform .25s}
.sit .ico svg{width:24px!important; height:24px!important; flex:none}
.sit .n{font:500 12px var(--mono); color:var(--mute-2); letter-spacing:.06em}
.sit:hover .ico{background:var(--mint); color:#1D1F1E; transform:rotate(-6deg)}
.sit-cta{background:#1D1F1E!important; color:#FFF8ED; text-decoration:none; position:relative; overflow:hidden; gap:8px!important}
.sit-cta::before{content:""; position:absolute; right:-60px; top:-60px; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(112,226,171,.35), transparent 70%); transition:transform .5s}
.sit-cta:hover::before{transform:scale(1.25)}
.sit-cta .cta-k{font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#70E2AB; position:relative}
.sit-cta h3{font-size:30px; font-weight:600; letter-spacing:-.02em; color:#FFF8ED; position:relative}
.sit.sit-cta p{font-size:13.5px; color:#C9CDCB; max-width:22ch; position:relative}
.sit-cta .go{position:absolute; right:22px; bottom:22px; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:#70E2AB; color:#1D1F1E; font-size:18px; transition:transform .25s}
.sit-cta:hover .go{transform:translateX(4px)}
.sit:not(.sit-cta){grid-template-columns:42px 1fr; column-gap:14px; align-items:center; position:relative; min-height:128px; padding:26px 30px 26px 22px}
.sit:not(.sit-cta) .sit-top{display:contents}
.sit:not(.sit-cta) .ico{grid-column:1; grid-row:1; align-self:start}
.sit:not(.sit-cta) h3{grid-column:2; grid-row:1; font-size:14.5px; font-weight:300; letter-spacing:0; line-height:1.55; align-self:start; padding-top:1px}
.sit:not(.sit-cta) .n{position:absolute; top:12px; right:14px; font-size:10.5px}
.sit.sit-cta{min-height:128px}
.sit-cta h3{font-size:22px!important; font-weight:500!important; letter-spacing:-.01em!important}

.sit p{color:var(--mute); font-size:15px; max-width:46ch}
.sit a{font-size:14px; color:var(--mint-ink); text-decoration:none; display:inline-flex; gap:8px; margin-top:6px}
.sit a:hover{text-decoration:underline; text-underline-offset:4px}
.sit-foot.sit-bridge{margin-top:56px; text-align:center; margin-bottom:-24px}
.sit-foot{margin-top:28px; color:var(--mute); font-size:15px}
.sit-foot b{color:var(--fg); font-weight:500}

/* ---------- bento IA ---------- */
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.card{background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-l); padding:28px; display:grid; gap:12px; align-content:start; overflow:hidden; position:relative}
.card .eyebrow{font-size:11px}
.card h3{font-size:24px; letter-spacing:-.02em}
.card p{color:var(--mute); font-size:14.5px}
.c-a{grid-column:span 3}.c-b{grid-column:span 3}.c-c{grid-column:span 2}.c-d{grid-column:span 2}.c-e{grid-column:span 2}
@media (max-width:900px){.bento{grid-template-columns:1fr}.bento>*{grid-column:auto!important}}
.feed{margin-top:10px; display:grid; gap:8px}
.feed div{display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--ink); border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:13px}
.feed small{display:block; font:11px var(--mono); color:var(--mute-2)}
.feed .st{font:500 11px var(--display); padding:4px 8px; border-radius:6px; background:var(--mint-ghost); color:var(--mint-ink); white-space:nowrap}
.feed .st.wait{background:rgba(242,182,109,.12); color:var(--warn-ink)}
.hand{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap}
.hand span{flex:1; min-width:120px; border-radius:12px; padding:14px; font-size:13px; border:1px solid var(--line)}
.hand span b{display:block; font:500 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px}
.hand .ag{background:var(--ink)} .hand .ag b{color:var(--mute)}
.hand .hu{background:var(--mint); color:var(--on-cream); border-color:var(--mint-ink)} .hand .hu b{color:var(--on-cream)}
.sov{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.sov span{font:500 11px var(--mono); padding:6px 10px; border-radius:8px; border:1px solid var(--line-2); color:var(--fg)}
.big{font-size:44px; font-weight:600; letter-spacing:-.03em; line-height:1; color:var(--fg)}
.big em{font-style:normal; color:var(--mint-ink)}

/* ---------- méthode ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
.step{border-radius:var(--r-l); padding:30px 28px; display:grid; gap:14px; align-content:start; background:var(--ink-2); border:1px solid var(--line); color:var(--fg)}
.step.entry{background:var(--ink-2); color:var(--fg); border-color:rgba(112,226,171,.45)}
.step .top{display:flex; justify-content:space-between; align-items:center}
.step .n{font:500 12px var(--mono); color:var(--mute)}
.step.entry .n{color:var(--mute)}
.step .badge{font:500 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; background:var(--mint); color:var(--on-cream); padding:4px 8px; border-radius:6px}
.step h3{font-size:24px; letter-spacing:-.02em}
.step p{font-size:14.5px; color:var(--mute)}
.step.entry p{color:var(--mute)}
.step ul{margin:0; padding:0; list-style:none; display:grid; gap:8px; font-size:14px}
.step li{display:flex; gap:10px}
.step li::before{content:"—"; color:var(--mint-ink)}
.step.entry li::before{color:var(--mint-ink)}
.price{margin-top:auto; padding-top:18px; border-top:1px solid var(--line)}
.step.entry .price{border-top-color:var(--line)}
.price strong{display:block; font-size:22px; font-weight:600; letter-spacing:-.02em}
.price small{font-size:13px; color:var(--mute)}
.step.entry .price small{color:var(--mute)}
.steps-note{margin-top:22px; display:flex; flex-wrap:wrap; gap:10px 32px; font-size:14px; color:var(--mute)}
.steps-note b{color:var(--fg); font-weight:500}

/* ---------- engagements ---------- */
.promises{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line)}
@media (max-width:980px){.promises{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.promises{grid-template-columns:1fr}}
.promise{padding:28px 24px 8px 0; display:grid; gap:12px; align-content:start}
.promise .when{font:500 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mint-ink)}
.promise h3{font-size:19px; letter-spacing:-.01em; line-height:1.25}
.promise p{color:var(--mute); font-size:14px}

/* ---------- preuve / équipe ---------- */
.proof{display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:start}
@media (max-width:900px){.proof{grid-template-columns:1fr}}
blockquote{margin:0; font-size:clamp(24px,3vw,34px); line-height:1.25; letter-spacing:-.02em; font-weight:400; text-wrap:balance}
blockquote::before{content:"“"; display:block; color:var(--mint-ink); font-size:64px; line-height:.6; margin-bottom:14px}
.quote-by{margin-top:24px; color:var(--mute); font-size:14px}
.stats{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border-radius:var(--r-l); overflow:hidden; border:1px solid var(--line)}
.stat{background:var(--ink); padding:26px 24px}
.stat strong{display:block; font-size:44px; font-weight:600; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums}
.stat strong em{font-style:normal; color:var(--mint-ink)}
.stat span{display:block; margin-top:10px; font-size:14px; color:var(--fg)}
.stat small{display:block; font-size:12.5px; color:var(--mute)}
.team{margin-top:72px; display:grid; grid-template-columns:repeat(7,1fr); gap:12px}
@media (max-width:980px){.team{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.team{grid-template-columns:1fr 1fr}}
.member{display:grid; gap:10px; align-content:start}
.avatar{aspect-ratio:1; max-width:100%; border-radius:var(--r-m); background:var(--ink-2); border:1px solid var(--line); display:grid; place-items:center; font-size:22px; font-weight:500; color:var(--mute); position:relative}
.member.contact .avatar{background:var(--mint); color:var(--on-cream); border-color:var(--mint-ink)}
.member.contact .avatar::after{content:"Votre contact"; position:absolute; bottom:10px; font:500 9.5px var(--mono); letter-spacing:.08em; text-transform:uppercase}
.member b{font-weight:500; font-size:14px; line-height:1.3}
.member p{font-size:12.5px; color:var(--mute); line-height:1.45}
.team-note{margin-top:28px; display:flex; flex-wrap:wrap; gap:10px; }
.team-note span{font-size:13px; padding:7px 14px; border:1px solid var(--line-2); border-radius:999px; color:var(--mute)}
.team-note span b{color:var(--fg); font-weight:500}

/* ---------- CTA final ---------- */
.final{padding-block:40px 112px}
.final-card{border-radius:32px; background:var(--mint); color:var(--on-cream); padding:clamp(28px,5vw,64px); display:grid; grid-template-columns:1.2fr 1fr; gap:48px; position:relative; overflow:hidden}
@media (max-width:900px){.final-card{grid-template-columns:1fr}}
.final-card h2{font-size:clamp(34px,4.6vw,56px)}
.final-card .lead{color:rgba(29,31,30,.72); margin-top:18px}
.final-card .btn-primary{background:#1D1F1E; color:#FFF8ED; border-color:#1D1F1E; margin-top:28px}
.final-card .btn-primary .arr{background:var(--mint); color:var(--on-cream)}
.twenty{list-style:none; margin:0; padding:0; display:grid; gap:12px; align-content:start}
.twenty li{background:rgba(255,248,237,.55); border-radius:16px; padding:16px 18px; display:grid; grid-template-columns:auto 1fr; gap:14px; font-size:15px; line-height:1.45}
.twenty li b{font:500 12px var(--mono); padding-top:3px}
.contact-line{margin-top:18px; font-size:14px; display:flex; flex-wrap:wrap; gap:6px 20px; color:rgba(29,31,30,.8)}
.contact-line b{font-weight:600; color:var(--on-cream)}

footer{border-top:1px solid var(--line); padding-block:40px; font-size:13px; color:var(--mute)}
.foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; align-items:center}
.foot nav{display:flex; flex-wrap:wrap; gap:20px}
.foot a{text-decoration:none}.foot a:hover{color:var(--fg)}

/* ---------- apparition douce (visible au repos) ---------- */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
  .d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}.d4{animation-delay:.32s}
  @keyframes rise{from{transform:translateY(14px); opacity:.001}to{transform:none; opacity:1}}
  .live{animation:pulse 2.4s infinite}
  @keyframes pulse{50%{box-shadow:0 0 0 7px rgba(112,226,171,0)}}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto!important}}

/* ---------- cases cliquables ---------- */
.sit-link{text-decoration:none; color:inherit; cursor:pointer}
.sit-link .sim-go{grid-column:2; font:500 11px var(--mono); letter-spacing:.06em; color:var(--mint-ink); opacity:0; transform:translateX(-4px); transition:opacity .2s, transform .2s; margin-top:6px}
.sit-link:hover .sim-go, .sit-link:focus-visible .sim-go{opacity:1; transform:none}
@media (hover:none){.sit-link .sim-go{opacity:1; transform:none}}

/* ---------- simulateur ---------- */
.sim{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:18px; align-items:start}
@media (max-width:900px){.sim{grid-template-columns:1fr}}
.sim-in,.sim-out{border-radius:var(--r-l); border:1px solid var(--line); background:var(--ink-2); padding:28px}
.sim-in{display:grid; gap:30px}
.sim-step{display:grid; gap:14px}
.sim-k{font:500 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mint-ink)}
.sim-chips{display:flex; flex-wrap:wrap; gap:7px 6px}
.sim-chip{font:400 12.5px var(--display); color:var(--mute); background:transparent; border:1px solid var(--line-2); border-radius:999px; padding:7px 11px; white-space:nowrap; cursor:pointer; transition:background .2s, color .2s, border-color .2s}
@media (max-width:1180px) and (min-width:901px){.sim-chip{font-size:11px; padding:6px 8px}}
.sim-chip:hover{border-color:var(--mute); color:var(--fg)}
.sim-chip[aria-pressed="true"]{background:var(--mint); border-color:var(--mint); color:#1D1F1E; font-weight:500}
.sim-range{display:grid; grid-template-columns:1fr auto; gap:8px 16px; align-items:center; font-size:14px; color:var(--fg)}
.sim-range output{font:500 14px var(--mono); color:var(--fg); font-variant-numeric:tabular-nums}
.sim-range input{grid-column:1/-1; width:100%; accent-color:var(--mint); height:22px; cursor:pointer}
.sim-hint{font-size:12.5px; color:var(--mute)}
.sim-out{display:grid; gap:20px; position:sticky; top:96px; background:radial-gradient(120% 90% at 100% 0%, rgba(112,226,171,.10), transparent 60%), var(--ink-2)}
.sim-big{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.sim-big strong{font-size:clamp(38px,4.4vw,52px); font-weight:600; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums}
.sim-big small{font-size:14px; color:var(--mute)}
.sim-sub{display:flex; flex-wrap:wrap; gap:8px}
.sim-sub span{font-size:12.5px; color:var(--mute); border:1px solid var(--line-2); border-radius:999px; padding:5px 12px}
.sim-sub b{color:var(--fg); font-weight:500; font-variant-numeric:tabular-nums}
.sim-sol{display:grid; gap:10px; padding-top:18px; border-top:1px solid var(--line)}
.sim-sol ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.sim-sol li{display:flex; gap:10px; font-size:14px; line-height:1.45; color:var(--fg); font-weight:300}
.sim-sol li::before{content:""; flex:none; width:6px; height:6px; margin-top:8px; border-radius:2px; background:var(--mint)}
.sim-sol li.empty{color:var(--mute)} .sim-sol li.empty::before{background:var(--line-2)}
.sim-first{padding:16px 18px; border-radius:14px; border:1px solid rgba(112,226,171,.35); background:var(--mint-ghost)}
.sim-first div{display:grid; gap:4px}
.sim-first b{font-weight:500; font-size:15px}
.sim-first small{font-size:12.5px; color:var(--mute)}
.sim-cta{justify-self:start}
.sim-note{font-size:11.5px; color:var(--mute-2)}
/* ---------- nos solutions ---------- */
.sols{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden}
@media (max-width:900px){.sols{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.sols{grid-template-columns:1fr}}
.sol{background:var(--ink); padding:30px 28px; display:grid; gap:10px; align-content:start; transition:background .25s}
.sol:hover{background:var(--ink-2)}
.sol-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.sol .ico{display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--mint-ghost); color:var(--mint-ink); transition:background .25s, color .25s, transform .25s}
.sol .ico svg{width:22px; height:22px}
.sol:hover .ico{background:var(--mint); color:#1D1F1E; transform:rotate(-6deg)}
.sol .n{font:500 11px var(--mono); color:var(--mute-2); letter-spacing:.06em}
.sol h3{font-size:19px; font-weight:500; letter-spacing:-.01em}
.sol p{font-size:14.5px; font-weight:300; line-height:1.55; color:var(--mute); max-width:34ch}
.sol-ref{margin-top:8px; font:500 10.5px var(--mono); letter-spacing:.06em; color:var(--mute-2)}
.sol-link{text-decoration:none; color:inherit; cursor:pointer; position:relative}
.sol-link .sim-go{font:500 11px var(--mono); letter-spacing:.06em; color:var(--mint-ink); opacity:0; transform:translateX(-4px); transition:opacity .2s, transform .2s}
.sol-link:hover .sim-go, .sol-link:focus-visible .sim-go{opacity:1; transform:none}
@media (hover:none){.sol-link .sim-go{opacity:1; transform:none}}
.sol{position:relative}
.sol::after{content:""; position:absolute; inset:5px; border-radius:18px; border:2px solid #70E2AB; box-shadow:0 0 0 4px rgba(112,226,171,.15), inset 0 0 24px rgba(112,226,171,.10); opacity:0; pointer-events:none; transition:opacity .3s}
.sol.flash::after{animation:solring 2.4s ease-out}
.sol.flash{background:var(--ink-2)}
.sol.flash .ico{background:var(--mint); color:#1D1F1E}
@keyframes solring{0%{opacity:0}12%,65%{opacity:1}100%{opacity:0}}
/* ---------- passerelle problèmes → solutions ---------- */
#socle{position:relative}
.bridge{position:absolute; left:50%; top:0; transform:translate(-50%,-50%); z-index:2; display:grid; justify-items:center; text-decoration:none; color:#70E2AB; width:max-content; max-width:calc(100vw - 32px)}
.bridge-line{position:relative; width:1.5px; height:44px; overflow:hidden; background:linear-gradient(180deg, rgba(112,226,171,.9), rgba(112,226,171,.35))}
.bridge-line.top{height:56px; background:linear-gradient(180deg, rgba(29,31,30,0), rgba(29,31,30,.4))}
.bridge-line:not(.top)::after{content:""; position:absolute; left:0; top:-40%; width:1.5px; height:40%; background:linear-gradient(180deg,transparent,#fff)}
.bridge-chev{width:18px; height:12px; margin-top:-4px}
.bridge-pill{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; text-align:center; padding:14px 22px; border-radius:999px; background:#1D1F1E; border:1px solid rgba(112,226,171,.4);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.55), 0 0 0 6px rgba(112,226,171,.06); transition:border-color .25s, transform .25s}
.bridge:hover .bridge-pill{border-color:#70E2AB; transform:translateY(-2px)}
.bp-k{font:500 10.5px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#1D1F1E; background:#70E2AB; padding:4px 9px; border-radius:999px}
.bp-t{font-size:15px; font-weight:300; color:#FFF8ED}
.bp-t b{font-weight:500; color:#70E2AB}
@media (max-width:640px){.bridge-pill{border-radius:18px; padding:14px 16px}.bp-t{font-size:14px}#socle{padding-top:150px}}
@media (prefers-reduced-motion:no-preference){
  .bridge-line:not(.top)::after{animation:bline 2.6s cubic-bezier(.5,0,.5,1) infinite}
  @keyframes bline{to{top:100%}}
}
/* ---------- fond pointillé + effet curseur (Vos enjeux, Nos solutions) ---------- */
:root{--dot:rgba(255,248,237,.10); --dot-lit:#70E2AB; --glow:rgba(112,226,171,.10)}
:root[data-mode="light"]{--dot:rgba(29,31,30,.14); --dot-lit:#3FBF84; --glow:rgba(63,191,132,.14)}
.cream{--dot:rgba(29,31,30,.16); --dot-lit:#3FBF84; --glow:rgba(63,191,132,.14)}
#situations{overflow:hidden}
.spot{position:relative}
.spot::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s;
  background-image:radial-gradient(circle, var(--dot-lit) 1.3px, transparent 1.9px), radial-gradient(420px circle at var(--mx,50%) var(--my,50%), var(--glow), transparent 60%);
  background-size:24px 24px, 100% 100%; background-position:12px calc(12px + var(--oy,0px)), 0 0;
  -webkit-mask-image:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), #000, transparent 70%);
          mask-image:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), #000, transparent 70%)}
.spot.lit::after{opacity:1}
.spot > .wrap{position:relative; z-index:1}

/* ---------- cas client ---------- */
.case{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; align-items:center}
@media (max-width:980px){.case{grid-template-columns:1fr; gap:36px}}
.case-copy{display:grid; gap:32px}
.case-part{display:grid; gap:12px}
.case h3, .case-res h3{font-size:17px; font-weight:500; letter-spacing:-.01em; color:var(--mint-ink)}
.case-part p{font-size:15px; font-weight:300; line-height:1.65; color:var(--fg); max-width:56ch}
.case-did{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.case-did li{display:flex; gap:12px; font-size:15px; font-weight:300; line-height:1.5}
.case-did li::before{content:""; flex:none; width:14px; height:1px; margin-top:.8em; background:var(--mint-ink)}
.case-shot{margin:0; position:relative}
.case-shot::before{content:""; position:absolute; inset:8% 4% 0 10%; border-radius:40px; background:radial-gradient(closest-side, rgba(124,77,255,.16), transparent 75%); filter:blur(20px); z-index:0}
.case-shot img{position:relative; z-index:1; display:block; width:100%; height:auto; filter:drop-shadow(0 24px 40px rgba(29,31,30,.14)); transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.case-shot:hover img{transform:scale(1.02)}
.case-res{margin-top:48px; padding-top:28px; border-top:1px solid var(--line-2); display:grid; grid-template-columns:auto 1fr; gap:16px 48px; align-items:start}
@media (max-width:860px){.case-res{grid-template-columns:1fr}}
.case-res ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px 32px}
@media (max-width:860px){.case-res ul{grid-template-columns:1fr}}
.case-res li{display:flex; gap:12px; font-size:15px; font-weight:300; line-height:1.5}
.case-res li svg{flex:none; width:24px; height:24px; color:var(--mint-ink); margin-top:-1px}
.case-shot.one::before{inset:6% 0 -4% 6%}
.case-shot.one .win{position:relative; z-index:1; border-radius:14px; overflow:hidden; background:#fff; border:1px solid rgba(29,31,30,.12); box-shadow:0 30px 60px -24px rgba(29,31,30,.35); transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.case-shot.one .win-bar{display:flex; gap:6px; padding:9px 12px; background:#F3F1EC; border-bottom:1px solid rgba(29,31,30,.08)}
.case-shot.one .win-bar span{width:9px; height:9px; border-radius:50%}
.case-shot.one .win-bar span:nth-child(1){background:#FF5F57}.case-shot.one .win-bar span:nth-child(2){background:#FEBC2E}.case-shot.one .win-bar span:nth-child(3){background:#28C840}
.case-shot.one img{filter:none; transform:none!important}
.case-shot.one:hover .win{transform:translateY(-4px)}
/* ---------- avant / après ---------- */
.ba{position:relative; aspect-ratio:1440/1024; overflow:hidden; user-select:none; touch-action:pan-y; background:#fff}
.ba-after{position:absolute; inset:0; width:100%; height:100%; display:block}
.ba-before{position:absolute; inset:0; z-index:2; clip-path:inset(0 calc(100% - var(--x)) 0 0); overflow:hidden}
.ba-scale{width:1440px; height:1024px; transform-origin:0 0; transform:scale(var(--s,.45))}
.ba-lbl{position:absolute; bottom:12px; font:500 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; padding:5px 9px; border-radius:6px; pointer-events:none; z-index:3}
.ba-lbl.l{left:12px; background:rgba(29,31,30,.78); color:#FFF8ED}
.ba-lbl.r{right:12px; background:#70E2AB; color:#1D1F1E}
.ba-handle{position:absolute; top:0; bottom:0; left:var(--x); width:2px; margin-left:-1px; background:#3FBF84; z-index:4; pointer-events:none}
.ba-handle span{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; border-radius:50%; background:#fff; color:#1D1F1E; display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.2); border:1px solid rgba(29,31,30,.1)}
.ba-handle span svg{width:18px; height:18px}
.ba-range{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:5}
.ba-range:focus-visible ~ .ba-handle span, .ba:has(.ba-range:focus-visible) .ba-handle span{outline:2px solid #3FBF84; outline-offset:3px}
.ba-cap{margin-top:12px; font-size:12.5px; color:var(--mute); text-align:center}
/* ancien ERP (fictif) */
.old input, .old textarea, .old button{color:#000; color-scheme:light; -webkit-text-fill-color:#000}
.old input.o-warn{-webkit-text-fill-color:#A00}
.old{position:relative; width:1440px; height:1024px; background:#D4D0C8; color:#000; font:15px Tahoma,Verdana,"DejaVu Sans",Geneva,sans-serif; display:flex; flex-direction:column; line-height:1.25}
.o-title{height:36px; flex:none; background:linear-gradient(90deg,#0A246A,#3A6EA5 60%,#A6CAF0); color:#fff; font-weight:bold; display:flex; align-items:center; gap:10px; padding:0 8px}
.o-ico{width:18px; height:18px; background:#E8C547; border:1px solid #8a6d00}
.o-winbtn{margin-left:auto; display:flex; gap:3px}
.o-winbtn i{width:26px; height:22px; background:#D4D0C8; color:#000; font-style:normal; display:grid; place-items:center; border:2px outset #fff; font-size:13px}
.o-menu{display:flex; gap:24px; padding:7px 12px; border-bottom:1px solid #808080; flex:none}
.o-tool{display:flex; gap:4px; padding:6px 8px; align-items:center; border-bottom:1px solid #808080; border-top:1px solid #fff; flex:none}
.o-tool b{min-width:32px; height:30px; display:grid; place-items:center; border:2px outset #fff; font-weight:normal; font-size:14px; padding:0 4px}
.o-tool i{width:2px; height:28px; border-left:1px solid #808080; border-right:1px solid #fff; margin:0 6px}
.o-rec,.o-sel{background:#fff; border:2px inset #fff; padding:3px 8px; font-size:14px}
.o-sel{margin-left:6px}
.o-tabs{display:flex; gap:2px; padding:10px 8px 0; flex:none}
.o-tabs span{padding:6px 12px; border:1px solid #808080; border-bottom:0; background:#C8C4BC; font-size:14px}
.o-tabs span.on{background:#D4D0C8; font-weight:bold; position:relative; top:1px}
.o-body{flex:1; display:grid; grid-template-columns:1fr 1fr 380px; grid-template-rows:auto 1fr auto; gap:10px; padding:12px; border-top:1px solid #808080; min-height:0}
.o-fs{border:2px groove #fff; margin:0; padding:8px 10px 10px; display:grid; gap:6px 8px; align-content:start; min-width:0}
.o-fs legend{padding:0 4px; font-size:14px}
.o-fs label{font-size:14px; align-self:center; white-space:nowrap}
.o-fs input{font:inherit; font-size:14px; height:26px; padding:0 5px; background:#fff; border:2px inset #fff; min-width:0; width:100%}
.o-fs input.o-warn{background:#FFD6D6; color:#A00}
.o-id{grid-column:1/3; grid-template-columns:auto 1fr auto 1fr}
.o-side{grid-column:3; grid-row:1/3; grid-template-columns:auto 1fr}
.o-grid{grid-column:1/3; overflow:hidden}
.o-val{grid-column:1; grid-template-columns:auto 1fr auto 1fr}
.o-notes{grid-column:2/4}
.o-grid table{border-collapse:collapse; width:100%; font-size:14px; background:#fff}
.o-grid th{background:#E4E0D8; font-weight:normal; border:1px solid #A0A0A0; padding:3px 6px; text-align:left}
.o-grid td{border:1px solid #C0C0C0; padding:3px 6px; text-align:right}
.o-grid td:first-child, .o-grid td:last-child{text-align:left}
.o-grid tr.hl td{background:#FFFFC0}
.o-btns{grid-column:1/-1; display:flex; gap:6px; flex-wrap:wrap; margin-top:10px}
.o-btns button, .o-err button{font:inherit; font-size:14px; background:#D4D0C8; border:2px outset #fff; padding:4px 12px}
.o-notes textarea{font:inherit; font-size:14px; height:92px; resize:none; border:2px inset #fff; background:#FFFFE8; padding:4px}
.o-err{position:absolute; left:560px; top:560px; width:560px; background:#D4D0C8; border:2px outset #fff; box-shadow:4px 4px 0 rgba(0,0,0,.35); display:grid; grid-template-columns:repeat(3,auto) 1fr; gap:12px 8px; padding:0 14px 14px; font-size:14px}
.o-err b{grid-column:1/-1; margin:0 -14px; padding:6px 10px; background:linear-gradient(90deg,#0A246A,#A6CAF0); color:#fff}
.o-err span{grid-column:1/-1}
.o-status{display:flex; gap:3px; padding:3px; border-top:1px solid #fff; flex:none}
.o-status span{border:1px inset #fff; border-color:#808080 #fff #fff #808080; padding:3px 10px; font-size:13px}
.o-status span:first-child{flex:1}
.case.case-duo{grid-template-columns:1fr 1fr; gap:28px; align-items:start}
@media (max-width:900px){.case.case-duo{grid-template-columns:1fr}}
.ba-cap b{color:var(--fg); font-weight:500}
.ba-after{object-fit:cover}
.ba-hint{font:500 11px var(--mono); letter-spacing:.08em; color:var(--mint-ink)}
/* tableur (fictif) */
.xl{width:1440px; height:1024px; background:#fff; color:#1b1b1b; font:17px Calibri,Carlito,"Segoe UI",Arial,sans-serif; display:flex; flex-direction:column}
.xl *{-webkit-text-fill-color:currentColor}
.x-top{display:flex; align-items:center; gap:14px; padding:12px 18px; background:#F3F2F1; border-bottom:1px solid #E1DFDD}
.x-logo{width:30px; height:30px; border-radius:6px; background:#107C41; color:#fff; font-weight:700; display:grid; place-items:center}
.x-file{font-size:18px; background:#fff; border:1px solid #E1DFDD; border-radius:6px; padding:5px 12px}
.x-ro{margin-left:auto; font-size:14px; color:#A4262C; background:#FDE7E9; padding:5px 10px; border-radius:6px}
.x-rib{display:flex; gap:26px; padding:10px 18px; font-size:15px; color:#444; border-bottom:1px solid #E1DFDD}
.x-rib .on{color:#107C41; font-weight:600; border-bottom:2px solid #107C41; padding-bottom:4px}
.x-fx{display:flex; align-items:center; gap:10px; padding:6px 10px; border-bottom:1px solid #E1DFDD; font-size:15px}
.x-cell{width:70px; border:1px solid #D0D0D0; padding:3px 6px}
.x-f{color:#777; font-style:italic}
.x-form{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:Consolas,"DejaVu Sans Mono",monospace; font-size:14px; color:#333}
.x-grid{flex:1; overflow:hidden}
.x-grid table{border-collapse:collapse; width:100%; table-layout:fixed}
.x-grid th{background:#F3F2F1; color:#666; font-weight:400; font-size:14px; border:1px solid #E1DFDD; height:26px}
.x-grid td{border:1px solid #E1DFDD; padding:0 7px; height:34px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.x-grid .x-n{width:46px; background:#F3F2F1; color:#666; text-align:center; font-size:14px}
.x-grid tr.x-h td{font-weight:700}
.x-grid tr.x-hl td:not(.x-n){background:#FFF4CE}
.x-grid td.x-red{color:#C50F1F; font-weight:600}
.x-tabs{display:flex; gap:4px; padding:8px 12px; background:#F3F2F1; border-top:1px solid #E1DFDD; font-size:15px; color:#555}
.x-tabs span{padding:4px 12px}
.x-tabs .on{background:#fff; color:#107C41; font-weight:600; border-bottom:2px solid #107C41}
.h2-num{display:flex; align-items:center; gap:20px}
.sec-head:has(.h2-num){max-width:none}
.h2-num .sec-num{margin-left:5px}
.sec-num{flex:none; position:relative; display:grid; place-items:center; width:50px; height:50px; border-radius:14px; border:1.5px solid var(--mint-ink); color:var(--mint-ink);
  background:var(--ink); overflow:hidden; font:600 17px var(--display); letter-spacing:-.02em; isolation:isolate}
.sec-num::before{content:""; position:absolute; left:0; right:0; bottom:0; height:0; background:linear-gradient(180deg, rgba(112,226,171,.55), rgba(112,226,171,.85)); z-index:-1; transition:height 1.2s cubic-bezier(.2,.8,.2,1) .15s}
.sec-num.in::before{height:var(--p)}
.sec-num.hi.in{color:#1D1F1E; transition:color .4s 1s}
.sec-num::after{content:""; position:absolute; inset:0; border-radius:12px; box-shadow:inset 0 0 0 3px var(--ink); pointer-events:none}
.h2-num .sec-num{box-shadow:0 0 0 5px var(--mint-ghost)}
.sec-num.on-mint{border-color:#1D1F1E; color:#FFF8ED; background:#1D1F1E}
.sec-num.on-mint::after{box-shadow:none}
.final-card h2.h2-num{align-items:flex-start}
.final-card h2.h2-num .sec-num{margin-top:.2em}
.proof .h2-num{margin-bottom:0}
.lead.lead-sm{font-size:14.5px; max-width:none}
@media (min-width:760px){.lead.lead-sm{white-space:nowrap}}
/* ---------- notre méthode ---------- */
.msteps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; position:relative; counter-reset:m}
.msteps::before{content:""; position:absolute; left:24px; right:24px; top:24px; height:1px; background:linear-gradient(90deg, var(--mint), rgba(112,226,171,.15))}
.mstep{display:grid; gap:18px; grid-template-rows:auto 1fr; position:relative}
.m-node{width:48px; height:48px; border-radius:50%; background:var(--ink); border:1.5px solid var(--mint-ink); display:grid; place-items:center; position:relative; z-index:1; box-shadow:0 0 0 6px var(--ink)}
.m-node span{font:500 13px var(--mono); color:var(--mint-ink)}
.m-node{transition:background .45s, border-color .45s, transform .45s}
.m-node span{transition:color .45s}
.m-node.done{background:#70E2AB; border-color:#70E2AB}
.m-node.done span{color:#1D1F1E}
.m-node.pop{transform:scale(1.14)}
.mstep.on .m-card{border-color:rgba(112,226,171,.45)}
.m-track{position:absolute; left:24px; right:24px; top:24px; height:0; pointer-events:none; z-index:0; list-style:none}
.m-fill{position:absolute; left:0; top:-1px; height:2px; width:0; background:#70E2AB; box-shadow:0 0 12px rgba(112,226,171,.6)}
.m-bubble{position:absolute; left:0; top:0; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:#70E2AB; box-shadow:0 0 0 5px rgba(112,226,171,.2), 0 0 18px rgba(112,226,171,.8); opacity:0}
.msteps.run .m-bubble{opacity:1}
@media (max-width:1000px){.m-track{display:none}}
.m-card{border:1px solid var(--line); border-radius:var(--r-l); background:var(--ink-2); padding:24px 22px; display:grid; gap:10px; align-content:start; height:100%; transition:border-color .25s, transform .25s}
.mstep:hover .m-card{border-color:rgba(112,226,171,.4); transform:translateY(-3px)}
.m-tag{justify-self:start; display:inline-flex; align-items:center; gap:7px; font:500 12.5px var(--display); letter-spacing:0; text-transform:none; color:var(--mint-ink); background:var(--mint-ghost); padding:5px 11px 5px 9px; border-radius:999px}
.m-tag::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--mint-ink)}
.m-card h3{font-size:19px; font-weight:500; letter-spacing:-.01em}
.m-card p{font-size:14px; font-weight:300; line-height:1.55; color:var(--mute)}
.m-card ul{list-style:none; margin:6px 0 0; padding:14px 0 0; border-top:1px solid var(--line); display:grid; gap:8px}
.m-card li{display:flex; gap:10px; font-size:13.5px; font-weight:300; line-height:1.45; color:var(--fg)}
.m-card li::before{content:""; flex:none; width:10px; height:1px; margin-top:.75em; background:var(--mint-ink)}
.m-note{margin-top:28px; font-size:14px; color:var(--mute); font-weight:300}
.m-note b{color:var(--fg); font-weight:500}
@media (max-width:1000px){.msteps{grid-template-columns:1fr 1fr}.msteps::before{display:none}}
@media (max-width:560px){.msteps{grid-template-columns:1fr}}
.sim-k.sim-kn{display:flex; align-items:center; gap:10px; font:500 15.5px var(--display); letter-spacing:-.005em; text-transform:none; color:var(--fg)}
.sim-kn i{font-style:normal; display:grid; place-items:center; width:24px; height:24px; border-radius:7px; border:1.5px solid var(--mint-ink); color:var(--mint-ink); font:600 12px var(--display)}
.sim-cost{padding-top:26px; border-top:1px solid var(--line)}
.sim-out > .sim-kn{margin-bottom:-4px}
.sim-out .sim-sol{padding-top:0; border-top:0}
.sim-row{display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px}
.sim-cost .sim-big strong{font-size:clamp(28px,2.6vw,34px); font-weight:500; letter-spacing:-.02em; color:var(--fg)}
.sim-cost .sim-big small{font-size:13px}
.sim-cost .sim-sub{flex-wrap:nowrap}
.sim-cost .sim-sub span{white-space:nowrap}
.sim-range{grid-template-columns:max-content minmax(120px,1fr) 52px; grid-template-areas:"l r o"; gap:10px 18px}
.sim-range > span{grid-area:l; white-space:nowrap; width:310px; font-size:13.5px}
@media (max-width:1180px){.sim-range > span{width:auto; white-space:normal}}
.sim-range input{grid-area:r; grid-column:auto}
.sim-range output{grid-area:o; text-align:right}
@media (max-width:640px){.sim-range{grid-template-columns:1fr auto; grid-template-areas:"l o" "r r"}}
.sim-step:has(.sim-range){gap:18px}
.sim-out .sim-k:not(.sim-kn){font:500 13px var(--display); letter-spacing:0; text-transform:none; color:var(--mute)}
.sim-first .sim-k{color:var(--mint-ink)!important}
.sim-first b{font-size:16px}
.sim-first small{font-size:13px; font-weight:300; line-height:1.5}
.sim-sol li{font-size:14.5px}
.sim-note{font-weight:300}
.sim-budget{display:grid; gap:6px; padding:18px 18px 16px; border-radius:14px; background:var(--ink); border:1px solid var(--line)}
.sim-budget strong{font-size:clamp(22px,2.1vw,27px); font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--fg)}
.sim-budget small{font-size:12.5px; font-weight:300; color:var(--mute)}
.sim-pay{margin-top:6px; padding-top:10px; border-top:1px solid var(--line); font-size:13px; font-weight:300; color:var(--mute)}
.sim-pay:empty{display:none}
.sim-pay b{color:var(--mint-ink); font-weight:500}
.bento .card .eyebrow{display:inline-flex; align-items:center; gap:8px; font:500 13px var(--display); letter-spacing:0; text-transform:none; color:var(--mint-ink)}
.bento .card .eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--mint-ink)}
/* ---------- harmonisation bloc 6 ---------- */
#ia .card h3{font-size:20px; font-weight:500; letter-spacing:-.01em; line-height:1.25}
#ia .card p{font-size:14px; font-weight:300; line-height:1.55}
#ia .feed div{font-size:13.5px; font-weight:400}
#ia .feed small{font:300 12px var(--display); color:var(--mute); margin-top:2px}
#ia .feed .st, #ia .agent .st{font:500 11.5px var(--display); letter-spacing:0; padding:4px 9px; border-radius:999px}
#ia .hand span{font-size:13.5px; font-weight:300; line-height:1.45}
#ia .hand span b{font:500 12.5px var(--display); letter-spacing:0; text-transform:none; margin-bottom:4px}
#ia .sov span{font:400 12.5px var(--display); letter-spacing:0; border-radius:999px; padding:6px 12px}
#ia .big{font-size:40px; font-weight:500}
#ia .card h3 em{font-style:normal; color:var(--mint-ink)}
#ia .feed .todo{border-color:rgba(112,226,171,.35)}
#ia .feed .st.go{background:#70E2AB; color:#1D1F1E}
#ia .days{display:flex; align-items:center; gap:5px; flex-wrap:wrap}
#ia .days span{display:grid; place-items:center; width:24px; height:24px; border-radius:7px; font:500 11.5px var(--display); color:var(--mute); border:1px solid var(--line-2); transition:background .35s, color .35s, border-color .35s}
#ia .days span.on{background:#70E2AB; border-color:#70E2AB; color:#1D1F1E}
#ia .days em{font-style:normal; margin-left:8px; font:400 13px var(--display); color:var(--mute)}
#ia .days em b{font-weight:500; color:var(--mint-ink)}
/* ---------- journée des agents IA ---------- */
.rail{position:relative; height:58px; margin:4px 8px 26px}
.rail-line{position:absolute; left:0; right:0; top:14px; height:2px; background:var(--line-2); border-radius:2px; overflow:hidden}
.rail-line b{position:absolute; inset:0; width:0; background:linear-gradient(90deg,rgba(112,226,171,.3),#70E2AB); transition:width 1.8s cubic-bezier(.2,.8,.2,1)}
.rail-bub{position:absolute; top:15px; left:0; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:#70E2AB; box-shadow:0 0 0 5px rgba(112,226,171,.2), 0 0 16px rgba(112,226,171,.8); opacity:0; z-index:2; pointer-events:none}
.rail.run .rail-bub{opacity:1}
.rail-dot{z-index:3}
.rail-dot.done i{background:#70E2AB}
.rail-dot.done span{color:var(--fg)}
.rail-edge{position:absolute; top:28px; font:400 11.5px var(--display); color:var(--mute-2)}
.rail-edge.l{left:0} .rail-edge.r{right:0}
.rail-dot{position:absolute; top:0; transform:translateX(-50%); background:none; border:0; padding:0; cursor:pointer; display:grid; justify-items:center; gap:8px; color:var(--mute)}
.rail-dot i{width:14px; height:14px; margin-top:8px; border-radius:50%; background:var(--ink); border:2px solid var(--mint-ink); transition:transform .25s, background .25s}
.rail-dot span{font:500 12px var(--display); white-space:nowrap}
.rail-dot.on i, .rail-dot:hover i{background:#70E2AB; transform:scale(1.25)}
.rail-dot.on span{color:var(--mint-ink)}
.igrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:980px){.igrid{grid-template-columns:1fr 1fr}.rail{display:none}}
@media (max-width:620px){.igrid{grid-template-columns:1fr}}
.icase{background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-l); padding:24px; display:grid; gap:10px; align-content:start; transition:border-color .25s, transform .25s, background .25s}
.icase:hover, .icase.on{border-color:rgba(112,226,171,.45); transform:translateY(-3px)}
.i-time{justify-self:start; display:inline-flex; align-items:center; gap:7px; font:500 12.5px var(--display); color:var(--mint-ink); background:var(--mint-ghost); padding:5px 11px 5px 8px; border-radius:999px}
.i-time svg{width:15px; height:15px}
.icase h3{font-size:18px; font-weight:500; letter-spacing:-.01em; line-height:1.3}
.icase h3 em{font-style:normal; color:var(--mint-ink)}
.icase p{font-size:14px; font-weight:300; line-height:1.55; color:var(--mute)}
.i-wide{grid-column:span 2; background:radial-gradient(90% 120% at 100% 0%, rgba(112,226,171,.10), transparent 60%), var(--ink-2)}
@media (max-width:620px){.i-wide{grid-column:auto}}
.i-docs{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:6px}
.i-docs span{font:400 12.5px var(--display); padding:6px 12px; border-radius:999px; border:1px solid var(--line-2); color:var(--fg)}
.i-docs i{font-style:normal; color:var(--mute-2)}
.i-docs b{font:500 12.5px var(--display); padding:6px 12px; border-radius:999px; background:#70E2AB; color:#1D1F1E; margin-left:4px}
.i-sov .sov{margin-top:4px}
.i-sov .sov span{font:400 12.5px var(--display); letter-spacing:0; border-radius:999px; padding:6px 12px}
.i-close{margin:44px auto 0; max-width:44ch; text-align:center; font-size:clamp(17px,1.7vw,21px); font-weight:400; letter-spacing:-.005em; line-height:1.45; text-wrap:balance; color:var(--fg); display:grid; justify-items:center; gap:14px}
.i-close::before{content:""; width:40px; height:2px; border-radius:2px; background:#70E2AB}
.i-close em{font-style:normal; color:var(--mint-ink)}
.i-spacer{visibility:hidden}
.i-time.i-shield{background:transparent; border:1px solid rgba(112,226,171,.55); color:var(--fg); padding:4px 11px 4px 8px; font-weight:500; letter-spacing:.01em}
.i-time.i-shield svg{color:var(--mint-ink)}
.i-sov{background:radial-gradient(90% 120% at 100% 0%, rgba(112,226,171,.10), transparent 60%), var(--ink-2)}
/* cartes horaires : heure à gauche, texte à droite */
.icase.itime{grid-template-columns:64px 1fr; column-gap:16px; row-gap:6px; padding:20px 20px 20px 16px; border-radius:16px; background:var(--ink-2); align-content:start}
.itime .i-time{grid-column:1; grid-row:1 / span 2; align-self:start; flex-direction:column; gap:6px; background:none; padding:0; font:500 13px var(--display); color:var(--mint-ink); text-align:center; justify-self:stretch; white-space:nowrap}
.itime .i-time svg{width:18px; height:18px; margin:0 auto}
.itime .i-time::after{content:""; display:block; width:1px; height:40px; margin:4px auto 0; background:linear-gradient(180deg,var(--line-2),transparent)}
.itime h3{grid-column:2; font-size:15.5px; font-weight:500; line-height:1.35}
.itime p{grid-column:2; font-size:13px; line-height:1.55}
.itime.on{background:linear-gradient(180deg, rgba(112,226,171,.07), transparent 70%), var(--ink-2)}
.itime.on .i-time{color:#70E2AB}
@media (min-width:760px){.lead.lead-sm.team-lead{white-space:normal}}
.avatar.has-photo{overflow:hidden; padding:0; border-color:transparent}
.avatar.has-photo img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.member:hover .avatar.has-photo img{transform:scale(1.04)}
.member.contact .avatar.has-photo{border:2px solid #70E2AB}
.member.contact .avatar.has-photo::after{z-index:1; background:#70E2AB; color:#1D1F1E; padding:4px 9px; border-radius:999px; bottom:10px}
/* ---------- équipe : photos en haut, chiffres en bandeau ---------- */
.proof.proof-top{display:block}
.team.team-top{margin-top:40px}
.kpis-band{margin-top:48px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:640px){.kpis-band{grid-template-columns:1fr}}
.kpi-b{position:relative; overflow:hidden; padding:22px 22px 20px; border-radius:18px; background:var(--ink-2); border:1px solid var(--line); display:grid; gap:4px; transition:transform .25s, border-color .25s}
.kpi-b::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#70E2AB; transform:scaleY(.35); transform-origin:top; transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.kpi-b::after{content:""; position:absolute; right:-40px; top:-40px; width:120px; height:120px; border-radius:50%; background:radial-gradient(closest-side, rgba(112,226,171,.18), transparent 70%)}
.kpi-b:hover{transform:translateY(-3px); border-color:rgba(112,226,171,.45)}
.kpi-b:hover::before{transform:scaleY(1)}
.kpi-b strong{font-size:clamp(30px,3vw,40px); font-weight:500; letter-spacing:-.03em; line-height:1; color:var(--fg); font-variant-numeric:tabular-nums}
.kpi-b strong em{font-style:normal; font-size:.55em; font-weight:400; color:var(--mint-ink); letter-spacing:0}
.kpi-b span{margin-top:8px; font-size:14px; font-weight:500; color:var(--fg)}
.kpi-b small{font-size:12.5px; font-weight:300; color:var(--mute)}
/* ---------- animation équipe ---------- */
.team.team-top{position:relative}
.team-top .avatar{margin-bottom:0}
@media (max-width:980px){.team-top .avatar{margin-bottom:0}}
.t-track{display:none!important; position:absolute; left:0; right:0; height:2px; top:var(--ty,0); background:var(--line-2); border-radius:2px; pointer-events:none; grid-column:1/-1}
.t-fill{position:absolute; left:0; top:0; height:2px; width:0; background:#70E2AB; box-shadow:0 0 10px rgba(112,226,171,.6)}
.t-bub{position:absolute; top:1px; left:0; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:#70E2AB; box-shadow:0 0 0 5px rgba(112,226,171,.2), 0 0 16px rgba(112,226,171,.8); opacity:0}
.team.run .t-bub{opacity:1}
.member{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.member .avatar{transition:box-shadow .5s, transform .5s}
.member.lit{transform:translateY(-8px)}
.member.lit .avatar{box-shadow:0 0 0 3px #70E2AB, 0 18px 34px -14px rgba(63,191,132,.7)}
.member.lit .avatar.has-photo img{transform:scale(1.05)}
.member.lit b{color:var(--mint-ink)}
.member b{transition:color .4s}
@media (max-width:980px){.t-track{display:none}}
/* ---------- fenêtre style Windows 11 moderne ---------- */
.case-shot.one .win.win-w{border-radius:12px; box-shadow:0 30px 60px -24px rgba(29,31,30,.35), 0 0 0 1px rgba(0,0,0,.06)}
.case-shot.one .win-bar.w11{display:flex; align-items:center; height:28px; padding:0 0 0 8px; border-bottom:1px solid rgba(0,0,0,.05);
  background:linear-gradient(180deg,rgba(243,245,248,.96),rgba(236,239,243,.96)); backdrop-filter:blur(18px) saturate(1.4)}
.case-shot.one .win-bar.w11 span{width:auto; height:auto; border-radius:0; background:none}
.case-shot.one .win-bar.w11 .w-tab{display:inline-flex; align-items:center; gap:7px; height:22px; padding:0 12px 0 9px; margin-top:4px; border-radius:8px 8px 0 0; background:#fff; box-shadow:0 -1px 0 rgba(0,0,0,.04), 1px 0 0 rgba(0,0,0,.04), -1px 0 0 rgba(0,0,0,.04)}
.w-ico{width:12px; height:12px; border-radius:4px; background:linear-gradient(135deg,#A78BFA,#6D28D9); flex:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.w-title{font:500 11px "Segoe UI Variable","Segoe UI",system-ui,sans-serif; color:#1f1f1f; white-space:nowrap}
.w-ctl{margin-left:auto; display:flex; height:100%}
.w-ctl b{display:grid; place-items:center; width:34px; height:100%; transition:background .15s}
.w-ctl svg{width:10px; height:10px; fill:none; stroke:#2a2a2a; stroke-width:1; stroke-linecap:round}
.w-ctl b:not(.x):hover{background:rgba(0,0,0,.05)}
.w-ctl b.x{border-top-right-radius:12px}
.w-ctl b.x:hover{background:#C42B1C} .w-ctl b.x:hover svg{stroke:#fff}
.logo img{height:26px; width:auto; display:block}
.logo .lg-d{display:none}
:root[data-mode="light"] .logo .lg-l{display:none}
:root[data-mode="light"] .logo .lg-d{display:block}
footer .logo img{height:22px}
.logo-grid{display:grid; grid-template-columns:repeat(8,1fr); gap:18px 26px; align-items:center; justify-items:center; width:100%}
.logo-grid figure{grid-column:span 2}
.logo-grid figure:nth-child(5){grid-column:2 / span 2}
.logo-grid figure{margin:0; display:grid; place-items:center; height:52px; width:100%; opacity:.85; transition:opacity .25s, transform .25s}
.logo-grid figure:hover{opacity:1; transform:translateY(-2px)}
.logo-grid img{filter:var(--logo-filter); max-height:40px; max-width:100%; width:auto; height:auto; display:block}
/* tablette : le bloc passe en une colonne, les 7 logos sur une seule ligne */
@media (max-width:1060px){.trust-in{grid-template-columns:1fr; gap:22px}.trust-copy{grid-column:auto}.reel{grid-column:auto; width:100%}
  .logo-grid{grid-template-columns:repeat(7,1fr); gap:12px 14px}.logo-grid figure,.logo-grid figure:nth-child(5){grid-column:auto; height:44px}.logo-grid img{max-height:32px}}
@media (max-width:860px){.logo-grid img{max-height:28px}.logo-grid figure{height:40px}}
/* mobile : retour à 4 + 3 centrés, comme sur PC */
@media (max-width:640px){.logo-grid{grid-template-columns:repeat(8,1fr); gap:14px 10px}.logo-grid figure{grid-column:span 2; height:44px}.logo-grid figure:nth-child(5){grid-column:2 / span 2}.logo-grid img{max-height:30px}}
/* animation logos : apparition en cascade + vague lumineuse */
.logo-grid figure{opacity:.85}
@media (prefers-reduced-motion:no-preference){
  .logo-grid figure{opacity:0; transform:translateY(12px) scale(.96)}
  .logo-grid.in figure{animation:lgIn .8s cubic-bezier(.2,.8,.2,1) both, lgWave 7s ease-in-out infinite; animation-delay:calc(var(--i)*90ms), calc(1.2s + var(--i)*.45s)}
  .logo-grid.in figure:hover{animation-play-state:paused}
  @keyframes lgIn{from{opacity:0; transform:translateY(12px) scale(.96)} to{opacity:.8; transform:none}}
  @keyframes lgWave{0%,18%,100%{opacity:.8; transform:none; filter:none} 8%{opacity:1; transform:translateY(-4px) scale(1.06); filter:drop-shadow(0 0 14px rgba(112,226,171,.55))}}
}
.seg button{position:relative; overflow:hidden}
.seg button::after{display:none; content:""; position:absolute; left:10px; right:10px; bottom:3px; height:2px; border-radius:2px; background:rgba(29,31,30,.35); transform:scaleX(0); transform-origin:left}
.seg button.prog::after{animation:segprog 3.5s linear forwards}
.seg button.prog.paused::after{animation-play-state:paused}
@keyframes segprog{to{transform:scaleX(1)}}
/* ---------- bloc 8 : contact ---------- */
.final-card.fc2{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:48px; background:#1D1F1E; color:#FFF8ED; border:1px solid rgba(112,226,171,.25); isolation:isolate}
.fc-glow{position:absolute; inset:-30% -10% auto auto; width:640px; height:640px; background:radial-gradient(closest-side, rgba(112,226,171,.35), transparent 70%); z-index:-1; pointer-events:none}
@media (prefers-reduced-motion:no-preference){.fc-glow{animation:fcglow 9s ease-in-out infinite alternate}}
@keyframes fcglow{to{transform:translate(-120px,80px) scale(1.15)}}
.fc2 h2{font-size:clamp(26px,3vw,36px); color:#FFF8ED; align-items:flex-start}
.fc2 h2 .sec-num{margin-top:2px}
.fc2 h2 em{font-style:normal; color:#70E2AB}
.fc2 .sec-num.on-mint{background:#70E2AB; border-color:#70E2AB; color:#1D1F1E}
.fc-sub{margin-top:14px; font-size:14.5px; font-weight:300; color:#A1A6A4; max-width:none}
.fc-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.fc-chips span{display:inline-flex; align-items:center; gap:8px; font:400 13px var(--display); color:#FFF8ED; padding:7px 13px; border-radius:999px; border:1px solid rgba(255,248,237,.18); background:rgba(255,248,237,.04)}
.fc-cta{display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin-top:30px}
.fc-btn{background:#70E2AB; color:#1D1F1E; border-color:#70E2AB; font-size:16px; padding:10px 10px 10px 24px; box-shadow:0 14px 40px -12px rgba(112,226,171,.7)}
.fc-btn .arr{background:#1D1F1E; color:#70E2AB}
.fc-btn:hover{background:#86EABA}
.fc-or{font-size:13.5px; color:#A1A6A4} .fc-or b{color:#FFF8ED; font-weight:500}
.fc-right{display:grid; gap:14px}
.fc-person{position:relative; display:flex; align-items:center; gap:14px; padding:14px; border-radius:18px; background:rgba(255,248,237,.05); border:1px solid rgba(255,248,237,.1)}
.fc-person img{width:56px; height:56px; border-radius:14px; object-fit:cover; flex:none; border:2px solid #70E2AB}
.fc-person b{display:block; font-size:15px; font-weight:500}
.fc-person span{display:block; font-size:12.5px; color:#A1A6A4; font-weight:300; line-height:1.4}
.fc-live{position:absolute; top:12px; right:14px; width:9px; height:9px; border-radius:50%; background:#70E2AB; box-shadow:0 0 0 4px rgba(112,226,171,.2)}
@media (prefers-reduced-motion:no-preference){.fc-live{animation:pulse 2.4s infinite}}
.fc-cal{padding:16px; border-radius:18px; background:rgba(255,248,237,.05); border:1px solid rgba(255,248,237,.1)}
.cal-h{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px}
.cal-h span{font-size:14px; font-weight:500} .cal-h small{font-size:12px; color:#A1A6A4}
.cal-g{display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
.cal-col{display:grid; gap:6px; align-content:start}
.cal-d{display:grid; justify-items:center; font-size:11.5px; color:#A1A6A4; margin-bottom:2px}
.cal-d b{font-size:16px; font-weight:500; color:#FFF8ED}
.cal-s{display:block; text-align:center; transition:background .35s, color .35s, transform .35s, box-shadow .35s; font:500 12px var(--display); color:#70E2AB; text-decoration:none; padding:7px 0; border-radius:9px; border:1px solid rgba(112,226,171,.35); transition:background .2s, color .2s, transform .2s}
.cal-s:hover, .cal-s.hot{background:#70E2AB; color:#1D1F1E; transform:translateY(-1px)}
@media (max-width:900px){.final-card.fc2{grid-template-columns:1fr}}
@media (max-width:480px){.cal-g{grid-template-columns:repeat(3,1fr)}.cal-col:nth-child(n+4){display:none}}
.fc-chips span::before{content:""; width:6px; height:6px; border-radius:50%; background:#70E2AB}
.fc2 .fc-left, .fc2 .fc-right{position:relative; z-index:1}
/* bouton réserver : halo pulsé + reflet + flèche */
.fc-btn{position:relative; overflow:hidden; isolation:isolate}
.fc-btn::before{content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-20deg); z-index:1; pointer-events:none}
.fc-cta{position:relative}
.fc-btn .arr{position:relative; z-index:2}
@media (prefers-reduced-motion:no-preference){
  .fc-btn{animation:fcPulse 2.6s ease-in-out infinite}
  .fc-btn::before{animation:fcShine 3.6s ease-in-out infinite 1s}
  .fc-btn .arr{animation:fcArr 2.6s ease-in-out infinite}
  .fc-btn:hover{animation-play-state:paused}
  @keyframes fcPulse{0%,100%{box-shadow:0 14px 40px -12px rgba(112,226,171,.7), 0 0 0 0 rgba(112,226,171,.55)}50%{box-shadow:0 14px 40px -12px rgba(112,226,171,.9), 0 0 0 12px rgba(112,226,171,0)}}
  @keyframes fcShine{0%{left:-60%}35%,100%{left:130%}}
  @keyframes fcArr{0%,60%,100%{transform:none}75%{transform:translateX(4px)}}
}
.cal-s.hot{box-shadow:0 6px 18px -6px rgba(112,226,171,.8)}
.lang button{font:inherit; font-size:11px; padding:4px 8px; border-radius:7px; color:var(--mute-2); background:none; border:0; cursor:pointer}
.lang button.on{background:var(--fg); color:var(--fg-inv)}
.sit-hint{cursor:default}
.sit-hint .hint-go svg{width:22px; height:22px}
@media (prefers-reduced-motion:no-preference){.sit-hint .hint-go{animation:tap 1.8s ease-in-out infinite}}
@keyframes tap{0%,100%{transform:none}40%{transform:translate(-4px,-4px) scale(.94)}55%{transform:translate(-4px,-4px) scale(1)}}
.sit-link{position:relative}
.sit-link::after{content:""; position:absolute; inset:5px; border-radius:16px; border:2px solid #70E2AB; box-shadow:0 0 0 4px rgba(112,226,171,.15); opacity:0; pointer-events:none; transition:opacity .45s}
.sit-link:hover{transform:scale(1.035); z-index:2; border-radius:14px; background:#FFFDF8; box-shadow:0 18px 40px -18px rgba(29,31,30,.35)}
:root[data-mode="light"] .sit-link:hover{background:#fff}
:root:not([data-mode="light"]) .sit-link.nudge, :root:not([data-mode="light"]) .sit-link:hover{background:#26364A!important; box-shadow:0 24px 48px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,248,237,.08)}
.sit-link{transition:transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s, background .6s; z-index:0}
.sit-link.nudge{transform:scale(1.035); z-index:2; border-radius:14px; background:#FFFDF8; box-shadow:0 18px 40px -18px rgba(29,31,30,.35)}
:root[data-mode="light"] .sit-link.nudge{background:#fff}
/* ---------- mentions légales ---------- */
.ml{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px 16px}
.ml[hidden]{display:none!important}
.ml-back{position:absolute; inset:0; background:rgba(10,12,11,.72); backdrop-filter:blur(6px)}
.ml-box{position:relative; width:min(760px,100%); max-height:calc(100vh - 48px); overflow:hidden; display:flex; background:var(--ink-2); color:var(--fg); border:1px solid var(--line-2); border-radius:22px; box-shadow:0 40px 100px -30px rgba(0,0,0,.7)}
.ml-scroll{flex:1; min-width:0; max-height:calc(100vh - 50px); overflow-y:auto; overscroll-behavior:contain; padding:clamp(24px,4vw,44px); margin:10px 8px 10px 0; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent}
.ml-scroll::-webkit-scrollbar{width:6px}
.ml-scroll::-webkit-scrollbar-track{background:transparent; margin:14px 0}
.ml-scroll::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:999px}
.ml-scroll::-webkit-scrollbar-thumb:hover{background:var(--mute-2)}
.ml-x{position:sticky; top:0; float:right; width:38px; height:38px; border-radius:12px; border:1px solid var(--line-2); background:var(--ink); color:var(--fg); cursor:pointer; font-size:14px}
.ml-x:hover{border-color:#70E2AB}
.ml h2{font-size:clamp(26px,3vw,34px)} .ml h2 em{font-style:normal; color:var(--mint-ink)}
.ml-lead{margin-top:12px; font-size:14px; font-weight:300; color:var(--mute); max-width:62ch}
.ml-body{margin-top:26px; display:grid; gap:26px}
.ml-body section{padding-top:20px; border-top:1px solid var(--line)}
.ml h3{font-size:16px; font-weight:500; margin-bottom:10px; color:var(--mint-ink)}
.ml p{font-size:14px; font-weight:300; line-height:1.65; color:var(--fg); max-width:68ch}
.ml p + p{margin-top:8px}
.ml dl{display:grid; grid-template-columns:minmax(150px,220px) 1fr; gap:8px 18px; margin:0; font-size:14px}
.ml dt{color:var(--mute); font-weight:300} .ml dd{margin:0}
@media (max-width:560px){.ml dl{grid-template-columns:1fr; gap:2px}.ml dd{margin-bottom:8px}}
.ph{background:rgba(242,182,109,.18); color:var(--warn-ink); border-radius:5px; padding:1px 6px; font-weight:400}
.ml-date{font-size:12.5px!important; color:var(--mute)!important}
body.ml-open{overflow:hidden}
a.avatar{display:grid; text-decoration:none}
.member.contact a.avatar::after{left:50%; transform:translateX(-50%); white-space:nowrap}
.m-name{text-decoration:none; color:inherit; display:inline-flex; align-items:flex-start; gap:6px}
.m-name::after{flex:none; margin-top:2px}
.m-name::after{content:"in"; font:700 9px var(--display); color:#1D1F1E; background:#70E2AB; border-radius:3px; padding:1px 3px; opacity:.85}
.m-name:hover b{color:var(--mint-ink)}
.m-split::after{display:none}
.li-b{font:700 9px var(--display); font-style:normal; color:#1D1F1E; background:#70E2AB; border-radius:3px; padding:1px 3px; opacity:.85; margin-left:2px; vertical-align:2px}
.m-name{white-space:nowrap; max-width:100%}
.nm-tight{letter-spacing:-.02em}
@media (max-width:1200px){.nm-tight{font-size:13px}}
.member.contact .avatar::after{font:500 11.5px var(--display)!important; letter-spacing:0!important; text-transform:none!important}
.team .member p{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.9em}
@media (max-width:1200px) and (min-width:981px){.team .member p{font-size:11.5px}.team{gap:8px}}
@media (max-width:1040px) and (min-width:981px){.team .member p{font-size:10.5px}}
/* ---------- mode jour ---------- */
:root[data-mode="light"]{
  color-scheme:light;
  --ink:#FAF8F3; --ink-2:#FFFFFF; --ink-3:#EFEAE0;
  --line:rgba(29,31,30,.09); --line-2:rgba(29,31,30,.16);
  --mute:#5E6360; --mute-2:#878C89;
  --mint-ghost:rgba(47,174,114,.12);
  --fg:#1D1F1E; --fg-inv:#FFF8ED; --mint-ink:#1E9A62; --warn-ink:#A8641A;
  --btn-hover:#000; --nav-bg:rgba(250,248,243,.82); --grid:rgba(29,31,30,.055);
  --app-a:#FFFFFF; --app-b:#F7F4EE; --app-shadow:0 40px 100px -50px rgba(29,31,30,.35), 0 0 0 8px rgba(29,31,30,.03);
  --sunk:rgba(29,31,30,.03); --band:#F1EADC; --logo-filter:brightness(0);
}
/* blocs qui restent sombres dans les deux modes */
.layer.custom, .step.entry{
  --ink:#1D1F1E; --ink-2:#232625; --ink-3:#2B2F2D;
  --line:rgba(255,248,237,.09); --line-2:rgba(255,248,237,.16);
  --mute:#A1A6A4; --mute-2:#757A78; --mint-ghost:rgba(112,226,171,.12);
  --fg:#FFF8ED; --mint-ink:#70E2AB;
}
body{transition:background-color .35s, color .35s}
.theme-btn{display:grid; place-items:center; width:40px; height:40px; border-radius:12px; border:1px solid var(--line-2); background:transparent; color:var(--fg); cursor:pointer; transition:border-color .2s}
.theme-btn:hover{border-color:var(--mute)}
.theme-btn svg{width:18px; height:18px}
.theme-btn .sun{display:none}
:root[data-mode="light"] .theme-btn .sun{display:block}
:root[data-mode="light"] .theme-btn .moon{display:none}

/* ---------- simulateur : responsive mobile ---------- */
@media (max-width:900px){.sim{grid-template-columns:minmax(0,1fr)}.sim-out{position:static}}
.sim-in,.sim-out{min-width:0; overflow-wrap:anywhere}
@media (max-width:640px){
  .sim-in,.sim-out{padding:22px 18px; border-radius:18px}
  .sim-cost .sim-sub{flex-wrap:wrap}.sim-cost .sim-sub span{white-space:normal}
  .sim-big strong{font-size:clamp(30px,9vw,38px)}.sim-cost .sim-big strong{font-size:clamp(24px,7.5vw,30px)}
  .sim-chips{gap:6px}.sim-chip{font-size:12px; padding:6px 10px; white-space:normal; text-align:left}
  .sim-first{padding:14px 14px}.sim-budget{padding:14px 14px}
  .sim-cta{width:100%; justify-content:space-between}
}
@media (max-width:400px){.sim-in,.sim-out{padding:18px 14px}.sim-chip{font-size:11.5px; padding:6px 9px}}

/* ---------- mode nuit : les bandes beiges deviennent des bandes sombres (un ton plus clair que le fond) ---------- */
:root:not([data-mode="light"]) .cream{
  --band:#151D28; --ink:#151D28; --ink-2:#1C2634; --ink-3:#25313F;
  --line:rgba(255,248,237,.10); --line-2:rgba(255,248,237,.18);
  --fg:#FFF8ED; --fg-inv:#1D1F1E; --mute:#A7ACAA; --mute-2:#7C8280;
  --mint-ink:#70E2AB; --mint-deep:#70E2AB; --mint-ghost:rgba(112,226,171,.14); --warn-ink:#F2B66D;
  --on-cream:#1D1F1E; --on-cream-mute:#A7ACAA;
  --dot:rgba(255,248,237,.12); --dot-lit:#70E2AB; --glow:rgba(112,226,171,.12);
  background:linear-gradient(180deg,#172131 0%,#1D1F1E 100%); color:var(--fg);
  border-top:0; border-bottom:0;
}
:root:not([data-mode="light"]) .cream .lead{color:var(--mute)}

/* logos clients en couleurs officielles */
.logo-grid img{filter:none!important}
.logo-grid .lgw{display:none}
:root:not([data-mode="light"]) .logo-grid .lgc{display:none}
:root:not([data-mode="light"]) .logo-grid .lgw{display:block}

/* maquette hero : une seule police */
.demo .url{font-family:var(--display)!important; font-size:12px!important; letter-spacing:0!important}
.demo h4.custom, .demo h4.base{font-family:var(--display)!important; font-size:12px!important; font-weight:500!important; text-transform:none!important; letter-spacing:0!important}
.demo .delta{font-family:var(--display)!important; font-size:12px!important}
.demo .months span{font-family:var(--display)!important; font-size:11px!important}

/* maquette hero : motif léger par secteur */
.hello{position:relative}
.hello::before{content:""; order:1; flex:1 1 0; min-width:0; max-width:440px; align-self:center; height:46px; margin:0 8px; background:no-repeat center/contain; opacity:.55; pointer-events:none}
.hello > div{order:0} .hello > .chip{order:2}
.app[data-k="log"] .hello::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 52'><path d='M8 38 C 80 38, 110 14, 180 16 S 290 42, 360 26 S 440 12, 462 16' fill='none' stroke='%2370E2AB' stroke-width='1.3' stroke-dasharray='3 5' stroke-linecap='round'/><g fill='%2370E2AB'><circle cx='8' cy='38' r='3'/><circle cx='180' cy='16' r='2.5'/><circle cx='360' cy='26' r='2.5'/></g><path d='M462 16c0-5 4-8 7-8s7 3 7 8c0 5-7 11-7 11s-7-6-7-11z' fill='none' stroke='%2370E2AB' stroke-width='1.2'/><circle cx='469' cy='15.5' r='2' fill='%2370E2AB'/><g fill='none' stroke='%2370E2AB' stroke-width='1.1' stroke-linejoin='round'><rect x='262' y='24' width='15' height='9' rx='1.5'/><path d='M277 27h5l3 3v3h-8z'/></g><g fill='%2370E2AB'><circle cx='266' cy='34.5' r='1.8'/><circle cx='281' cy='34.5' r='1.8'/></g></svg>")}
.app[data-k="fin"] .hello::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 52'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%2370E2AB' stop-opacity='.35'/><stop offset='1' stop-color='%2370E2AB' stop-opacity='0'/></linearGradient></defs><g stroke='%2370E2AB' stroke-opacity='.35' stroke-width='.8'><path d='M0 14H480M0 28H480M0 42H480' stroke-dasharray='2 4'/></g><path d='M0 44 L40 40 L80 42 L120 33 L160 36 L200 27 L240 30 L280 20 L320 24 L360 15 L400 18 L440 10 L470 12 L470 52 L0 52Z' fill='url%28%23g%29'/><path d='M0 44 L40 40 L80 42 L120 33 L160 36 L200 27 L240 30 L280 20 L320 24 L360 15 L400 18 L440 10 L470 12' fill='none' stroke='%2370E2AB' stroke-width='1.4' stroke-linejoin='round'/><circle cx='470' cy='12' r='3' fill='%2370E2AB'/></svg>")}
.app[data-k="erp"] .hello::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 52'><g stroke='%2370E2AB' stroke-opacity='.25' stroke-width='.6'><path d='M0 0V52' /><path d='M16 0V52' /><path d='M32 0V52' /><path d='M48 0V52' /><path d='M64 0V52' /><path d='M80 0V52' /><path d='M96 0V52' /><path d='M112 0V52' /><path d='M128 0V52' /><path d='M144 0V52' /><path d='M160 0V52' /><path d='M176 0V52' /><path d='M192 0V52' /><path d='M208 0V52' /><path d='M224 0V52' /><path d='M240 0V52' /><path d='M256 0V52' /><path d='M272 0V52' /><path d='M288 0V52' /><path d='M304 0V52' /><path d='M320 0V52' /><path d='M336 0V52' /><path d='M352 0V52' /><path d='M368 0V52' /><path d='M384 0V52' /><path d='M400 0V52' /><path d='M416 0V52' /><path d='M432 0V52' /><path d='M448 0V52' /><path d='M464 0V52' /><path d='M480 0V52' /><path d='M0 4H480'/><path d='M0 20H480'/><path d='M0 36H480'/></g><g fill='none' stroke='%2370E2AB' stroke-width='1.1'><path d='M22 34H306M22 46H306'/><circle cx='30' cy='40' r='3'/><circle cx='52' cy='40' r='3'/><circle cx='74' cy='40' r='3'/><circle cx='96' cy='40' r='3'/><circle cx='118' cy='40' r='3'/><circle cx='140' cy='40' r='3'/><circle cx='162' cy='40' r='3'/><circle cx='184' cy='40' r='3'/><circle cx='206' cy='40' r='3'/><circle cx='228' cy='40' r='3'/><circle cx='250' cy='40' r='3'/><circle cx='272' cy='40' r='3'/><circle cx='294' cy='40' r='3'/><rect x='60' y='20' width='18' height='14' rx='1.5'/><rect x='150' y='22' width='14' height='12' rx='1.5'/><rect x='230' y='18' width='20' height='16' rx='1.5'/></g><polygon points='426.9,22.3 426.9,25.7 422.9,27.3 421.9,29.8 424.1,33.6 421.9,36.2 417.7,34.8 415.4,36.1 414.6,40.4 411.3,41.0 409.0,37.2 406.4,36.8 403.0,39.5 400.1,37.8 400.7,33.5 399.0,31.5 394.7,31.4 393.5,28.2 396.8,25.3 396.8,22.7 393.5,19.8 394.7,16.6 399.0,16.5 400.7,14.5 400.1,10.2 403.0,8.5 406.4,11.2 409.0,10.8 411.3,7.0 414.6,7.6 415.4,11.9 417.7,13.2 421.9,11.8 424.1,14.4 421.9,18.2 422.9,20.7' fill='none' stroke='%2370E2AB' stroke-width='1.1' stroke-linejoin='round'/><circle cx='410' cy='24' r='5.4' fill='none' stroke='%2370E2AB' stroke-width='1.1'/><polygon points='456.9,34.6 456.9,37.4 454.1,38.7 453.2,40.7 453.9,43.6 451.7,45.4 449.0,44.0 446.8,44.5 445.0,47.0 442.2,46.3 441.6,43.3 439.8,42.0 436.8,42.0 435.6,39.5 437.5,37.1 437.5,34.9 435.6,32.5 436.8,30.0 439.8,30.0 441.6,28.7 442.2,25.7 445.0,25.0 446.8,27.5 449.0,28.0 451.7,26.6 453.9,28.4 453.2,31.3 454.1,33.3' fill='none' stroke='%2370E2AB' stroke-width='1.1' stroke-linejoin='round'/><circle cx='446' cy='36' r='3.5' fill='none' stroke='%2370E2AB' stroke-width='1.1'/></svg>")}
@media (max-width:760px){.hello::before{display:none}}

/* mode jour : bloc « Cliquez sur votre problématique » et bandeau « Transformer ces contraintes » en vert clair */
:root[data-mode="light"] .sit-cta{background:#FFFFFF!important; color:#1D1F1E}
:root[data-mode="light"] .sit-cta h3{color:#1D1F1E}
:root[data-mode="light"] .sit.sit-cta p{color:#4A5550}
:root[data-mode="light"] .sit-cta::before{background:radial-gradient(closest-side, rgba(63,191,132,.28), transparent 70%)}
:root[data-mode="light"] .bridge-pill{background:#FFFFFF; border-color:rgba(63,191,132,.45); box-shadow:0 18px 40px -22px rgba(29,31,30,.25), 0 0 0 6px rgba(63,191,132,.08)}
:root[data-mode="light"] .bp-t{color:#1D1F1E}
:root[data-mode="light"] .bp-t b{color:#1E9A62}
:root[data-mode="light"] .bridge:hover .bridge-pill{border-color:#3FBF84}

/* langue : drapeaux */
.lang button, .lang.lang-m button{display:grid; place-items:center; padding:5px 7px}
.lang .flag{display:block; width:20px; height:14px; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.18); opacity:.45; filter:saturate(.6); transition:opacity .2s, filter .2s, transform .2s}
.lang button:hover .flag{opacity:.85; filter:none}
.lang button.on .flag{opacity:1; filter:none}
.lang button.on{background:var(--fg)!important; color:var(--fg-inv)!important}

/* drapeaux toujours visibles dans la barre du haut */
.nav-cta > .lang{display:flex!important}
@media (max-width:420px){.nav-cta > .lang button{padding:4px 5px}.nav-cta > .lang .flag{width:18px;height:12px}}

/* langue : FR / EN dans la police du site */
.lang button, .lang.lang-m button{font:500 11.5px var(--display)!important; letter-spacing:.02em; color:var(--mute-2); padding:5px 9px!important}
.lang button:hover{color:var(--fg)}

/* maquette hero : fenêtre plus haute */
.demo .app-body{min-height:550px}
.demo .main{grid-template-rows:auto auto 1fr}
.demo .lower{align-items:stretch}
.demo .lower .panel{display:flex; flex-direction:column}
.demo .bars{height:auto; flex:1; min-height:200px}
.demo .bars + .months{margin-top:8px}

/* bloc 1 : la carte mise en avant dépasse du cadre */
.situations{overflow:visible}
.situations > *{--rc:calc(var(--r-l) - 1px)}
@media (min-width:1001px){
  .situations > :nth-child(1){border-top-left-radius:var(--rc)}
  .situations > :nth-child(4){border-top-right-radius:var(--rc)}
  .situations > :nth-child(5){border-bottom-left-radius:var(--rc)}
  .situations > :nth-child(8){border-bottom-right-radius:var(--rc)}
}
@media (min-width:561px) and (max-width:1000px){
  .situations > :nth-child(1){border-top-left-radius:var(--rc)}
  .situations > :nth-child(2){border-top-right-radius:var(--rc)}
  .situations > :nth-last-child(2){border-bottom-left-radius:var(--rc)}
  .situations > :last-child{border-bottom-right-radius:var(--rc)}
}
@media (max-width:560px){
  .situations > :first-child{border-top-left-radius:var(--rc); border-top-right-radius:var(--rc)}
  .situations > :last-child{border-bottom-left-radius:var(--rc); border-bottom-right-radius:var(--rc)}
}
.situations > .sit-link.nudge, .situations > .sit-link:hover{border-radius:14px}

/* bloc 1 : ombre tout autour de la carte qui grossit */
.situations > .sit-link.nudge, .situations > .sit-link:hover{box-shadow:0 0 0 1px rgba(29,31,30,.04), 0 10px 26px -10px rgba(29,31,30,.16), 0 0 18px rgba(29,31,30,.07)}
:root:not([data-mode="light"]) .situations > .sit-link.nudge, :root:not([data-mode="light"]) .situations > .sit-link:hover{box-shadow:0 0 0 1px rgba(255,248,237,.05), 0 14px 34px -12px rgba(0,0,0,.5), 0 0 22px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,248,237,.06)}

/* blocs 1 et 2 : numéros et liens dans la police du site (même taille) */
#situations .n, #situations .sim-go, #socle .n, #socle .sim-go{font-family:var(--display)!important; letter-spacing:.02em}

/* carte « Cliquez sur votre problématique » : halo vert de base, intensité réduite */
.sit-cta::before{background:radial-gradient(closest-side, rgba(112,226,171,.10), transparent 70%)!important}
:root[data-mode="light"] .sit-cta::before{background:radial-gradient(closest-side, rgba(63,191,132,.09), transparent 70%)!important}

/* barre du haut : bandeau flottant */
header.nav{top:calc(env(safe-area-inset-top,0px) + 12px)!important; margin-top:12px; padding-inline:16px; background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; border-bottom:0!important; pointer-events:none}
header.nav .nav-in{pointer-events:auto; height:60px; padding-inline:20px 10px; background:var(--nav-bg); -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2); border:1px solid var(--line-2); border-radius:18px; box-shadow:0 14px 34px -18px rgba(0,0,0,.55); transition:box-shadow .3s, border-color .3s}
header.nav.scrolled .nav-in{box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
:root[data-mode="light"] header.nav .nav-in{box-shadow:0 12px 30px -18px rgba(29,31,30,.28)}
:root[data-mode="light"] header.nav.scrolled .nav-in{box-shadow:0 16px 36px -18px rgba(29,31,30,.32)}
@media (max-width:640px){header.nav{padding-inline:10px; margin-top:8px; top:calc(env(safe-area-inset-top,0px) + 8px)!important} header.nav .nav-in{height:56px; padding-inline:14px 8px; border-radius:16px}}
.mnav-panel{top:calc(84px + env(safe-area-inset-top,0px))!important}


/* bandeau flottant : se réduit quand on descend */
header.nav .nav-in{transition:max-width .45s cubic-bezier(.2,.8,.2,1), height .45s cubic-bezier(.2,.8,.2,1), padding .45s, border-radius .45s, box-shadow .3s, border-color .3s, background-color .3s}
header.nav .logo img{transition:height .45s cubic-bezier(.2,.8,.2,1)}
@media (min-width:641px){
  header.nav.scrolled .nav-in{max-width:960px; height:50px; padding-inline:16px 8px; border-radius:15px; gap:16px}
  header.nav.scrolled .nav-links{gap:17px; font-size:13px}
  header.nav.scrolled .nav-cta{gap:6px}
  header.nav .nav-links, header.nav .nav-cta{transition:gap .45s, font-size .45s}
  header.nav.scrolled .logo img{height:21px}
  header.nav.scrolled .btn-sm{padding:4px 4px 4px 13px; font-size:13px; border-radius:10px; gap:10px}
  header.nav.scrolled .btn-sm .arr{width:26px; height:26px; border-radius:7px}
  header.nav.scrolled .theme-btn{width:34px; height:34px; border-radius:10px}
  header.nav.scrolled .nav-cta > .lang{padding:2px}
  header.nav .theme-btn{transition:width .45s, height .45s, border-radius .45s, border-color .2s, background .2s}
  header.nav .btn-sm, header.nav .btn-sm .arr{transition:padding .45s, font-size .45s, width .45s, height .45s, border-radius .45s, transform .2s}
}
@media (max-width:640px){header.nav.scrolled .nav-in{height:50px}}
/* le haut de page passe sous le bandeau flottant (plus de coupure) */
header.nav{margin-bottom:-72px}
.hero, .blog-hero{padding-top:128px!important}
@media (max-width:640px){header.nav{margin-bottom:-64px} .hero, .blog-hero{padding-top:112px!important}}

/* maquette dans un ordinateur portable */
.laptop{max-width:1000px; margin-inline:auto; position:relative}
.lt-screen{position:relative; padding:18px 18px 22px; border-radius:22px 22px 10px 10px; background:linear-gradient(180deg,#0E0F0F,#151717); border:1px solid rgba(255,255,255,.10);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 50px 100px -40px rgba(0,0,0,.7), inset 0 0 0 2px #1C1E1E}
.lt-cam{position:absolute; top:7px; left:50%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:#2A2D2E; box-shadow:inset 0 0 0 1px #3A3E40}
.lt-screen .app-fit{max-width:none; border-radius:6px; overflow:hidden; box-shadow:none}
.lt-screen .app{border-radius:6px; border:0; box-shadow:none}
.lt-base{position:relative; height:18px; margin:0 -6.5%; border-radius:0 0 18px 18px / 0 0 14px 14px;
  background:linear-gradient(180deg,#D9DCDD 0%,#B9BDBF 45%,#8E9294 100%); box-shadow:0 26px 40px -18px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.7)}
.lt-base::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,#9A9EA0,#E6E8E9 20%,#E6E8E9 80%,#9A9EA0)}
.lt-notch{position:absolute; left:50%; top:0; width:16%; height:7px; transform:translateX(-50%); border-radius:0 0 10px 10px; background:linear-gradient(180deg,#A6AAAC,#C9CCCE)}
:root[data-mode="light"] .lt-screen{box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 50px 90px -40px rgba(29,31,30,.45), inset 0 0 0 2px #1C1E1E}
:root[data-mode="light"] .lt-base{box-shadow:0 24px 36px -18px rgba(29,31,30,.4), inset 0 1px 0 rgba(255,255,255,.8)}
@media (max-width:640px){.lt-screen{padding:8px 8px 10px; border-radius:12px 12px 6px 6px}.lt-cam{top:2px; width:3px; height:3px}.lt-base{height:9px}.lt-notch{height:4px}}

/* ordinateur : écran seul, sans base */
.lt-base{display:none}
.lt-screen{border-radius:16px!important; padding:7px!important; box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 40px 90px -40px rgba(0,0,0,.6), inset 0 0 0 1px #1C1E1E!important}
:root[data-mode="light"] .lt-screen{box-shadow:0 0 0 1px rgba(0,0,0,.2), 0 40px 80px -40px rgba(29,31,30,.4), inset 0 0 0 1px #1C1E1E!important}
.lt-cam{display:none}
/* bord de l'écran : teinte douce */
.lt-screen{background:linear-gradient(180deg,#2C3130,#252928)!important; border-color:rgba(255,248,237,.10)!important; box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 40px 90px -40px rgba(0,0,0,.55)!important}
:root[data-mode="light"] .lt-screen{background:linear-gradient(180deg,#ECE7DD,#E2DCD0)!important; border-color:rgba(29,31,30,.10)!important; box-shadow:0 0 0 1px rgba(255,255,255,.7) inset, 0 30px 70px -40px rgba(29,31,30,.35)!important}
.lt-screen .app-fit, .lt-screen .app{border-radius:10px!important}
@media (max-width:640px){.lt-screen{padding:4px!important; border-radius:10px!important}.lt-screen .app-fit, .lt-screen .app{border-radius:7px!important}}

/* numéros de méthode, valeurs du simulateur, Avant/Après : police du site */
#methode .m-node span, #prix output, #cas .ba-lbl, #socle .sim-go, #situations .sim-go{font-family:var(--display)!important}

/* tableau : visuel sous l'agent IA */
.demo .agent{display:flex; flex-direction:column}
.aviz{margin-top:auto; padding-top:12px; border-top:1px solid var(--line)}
.av-h{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:8px}
.av-h b{font-size:12.5px; font-weight:500; color:var(--fg)}
.av-h span{font-size:11px; color:var(--mute); display:flex; align-items:center; gap:6px}
.aviz svg{display:block; width:100%; height:auto}
.av-map .m-bg{fill:var(--ink-3)} .av-map .m-road path{stroke:var(--line-2); stroke-width:1; fill:none}
.av-map .m-main path{stroke:var(--mute-2); stroke-opacity:.35; stroke-width:3}
.av-map .m-water{fill:none; stroke:rgba(112,160,226,.18); stroke-width:9; stroke-linecap:round}
.av-map .m-route{fill:none; stroke:var(--mint); stroke-width:2; stroke-dasharray:4 4; stroke-linejoin:round}
.av-map .m-dep{fill:var(--fg)} .av-map .m-dt{fill:var(--fg-inv); font:600 9px var(--display); text-anchor:middle}
.av-map .m-stop circle{fill:var(--ink-2); stroke:var(--mint); stroke-width:1.6} .av-map .m-stop text{fill:var(--fg); font:600 8px var(--display); text-anchor:middle}
.av-map .m-stop.done circle{fill:var(--mint); stroke:var(--mint)} .av-map .m-stop.done text{fill:#1D1F1E}
.av-map .m-halo{fill:rgba(112,226,171,.25)} .av-map .m-dot{fill:#fff; stroke:var(--mint); stroke-width:2}
.aviz svg.av-line{height:72px} .av-line path{vector-effect:non-scaling-stroke} .av-line .c-end, .av-line .c-endb{display:none}
.av-line .c-grid path{stroke:var(--line); stroke-width:1}
.av-line .c-area{fill:rgba(112,226,171,.12)} .av-line .c-a{fill:none; stroke:var(--mint); stroke-width:2; stroke-linejoin:round}
.av-line .c-b{fill:none; stroke:var(--mute-2); stroke-width:1.5; stroke-dasharray:3 3}
.av-line .c-end{fill:var(--mint); stroke:var(--ink-2); stroke-width:2} .av-line .c-endb{fill:var(--mute-2)}
.av-h i.lg-a, .av-h i.lg-b{display:inline-block; width:12px; height:2px; background:var(--mint); margin-left:6px} .av-h i.lg-b{background:var(--mute-2)}
.av-v{display:flex; align-items:baseline; gap:8px; margin-top:4px} .av-v b{font-size:15px; font-weight:500; color:var(--fg)} .av-v span{font-size:11px; color:var(--mute)}
.av-donut{display:grid; grid-template-columns:104px 1fr; gap:16px; align-items:center}
.av-donut circle{fill:none; stroke-width:14}
.av-donut .d0{stroke:#70E2AB} .av-donut .d1{stroke:#2FA572} .av-donut .d2{stroke:#A9C9B9} .av-donut .d3{stroke:#5E6B65}
.av-donut .d-t{fill:var(--fg); font:500 14px var(--display); text-anchor:middle} .av-donut .d-s{fill:var(--mute); font:400 9px var(--display); text-anchor:middle}
.av-donut ul{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.av-donut li{display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--mute)} .av-donut li b{margin-left:auto; font-weight:500; color:var(--fg)}
.av-donut li i{width:9px; height:9px; border-radius:3px; flex:none} .av-donut .k0{background:#70E2AB} .av-donut .k1{background:#2FA572} .av-donut .k2{background:#A9C9B9} .av-donut .k3{background:#5E6B65}
:root[data-mode="light"] .av-map .m-halo{fill:rgba(63,191,132,.22)}

/* colonne droite du tableau : agent IA encadré + visuel dans son propre cadre */
.demo .rcol{display:flex; flex-direction:column; gap:12px; min-width:0}
.demo .rcol .agent{display:block}
.demo .rcol .aviz{margin-top:0; padding:14px 16px; border-top:1px solid var(--line); flex:1; display:flex; flex-direction:column; justify-content:center}

/* tableaux : une couleur par secteur */
.demo .app[data-k="log"]{--mint:#5B9BF0; --mint-ink:#5B9BF0; --mint-ghost:rgba(91,155,240,.14); --dot-lit:#5B9BF0}
:root[data-mode="light"] .demo .app[data-k="log"]{--mint-ink:#2F6FD0; --mint-ghost:rgba(91,155,240,.14)}
.demo .app[data-k="log"] .bars div{background:linear-gradient(180deg, rgba(91,155,240,.55), rgba(91,155,240,.12))}
.demo .app[data-k="log"] .bars div.hi{background:#5B9BF0}
.demo .app[data-k="log"] .chip{border-color:rgba(91,155,240,.4)}
.demo .app[data-k="log"] .av-line .c-area{fill:rgba(91,155,240,.12)}
.demo .app[data-k="log"] .av-map .m-halo{fill:rgba(91,155,240,.25)}
.demo .app[data-k="log"] .av-donut .d0, .demo .app[data-k="log"] .av-donut .k0{stroke:#5B9BF0; background:#5B9BF0}
.demo .app[data-k="fin"]{--mint:#A08CF5; --mint-ink:#A08CF5; --mint-ghost:rgba(160,140,245,.14); --dot-lit:#A08CF5}
:root[data-mode="light"] .demo .app[data-k="fin"]{--mint-ink:#6A58D8; --mint-ghost:rgba(160,140,245,.14)}
.demo .app[data-k="fin"] .bars div{background:linear-gradient(180deg, rgba(160,140,245,.55), rgba(160,140,245,.12))}
.demo .app[data-k="fin"] .bars div.hi{background:#A08CF5}
.demo .app[data-k="fin"] .chip{border-color:rgba(160,140,245,.4)}
.demo .app[data-k="fin"] .av-line .c-area{fill:rgba(160,140,245,.12)}
.demo .app[data-k="fin"] .av-map .m-halo{fill:rgba(160,140,245,.25)}
.demo .app[data-k="fin"] .av-donut .d0, .demo .app[data-k="fin"] .av-donut .k0{stroke:#A08CF5; background:#A08CF5}
.demo .app[data-k="erp"]{--mint:#EAC54F; --mint-ink:#EAC54F; --mint-ghost:rgba(234,197,79,.14); --dot-lit:#EAC54F}
:root[data-mode="light"] .demo .app[data-k="erp"]{--mint-ink:#A9851A; --mint-ghost:rgba(234,197,79,.14)}
.demo .app[data-k="erp"] .bars div{background:linear-gradient(180deg, rgba(234,197,79,.55), rgba(234,197,79,.12))}
.demo .app[data-k="erp"] .bars div.hi{background:#EAC54F}
.demo .app[data-k="erp"] .chip{border-color:rgba(234,197,79,.4)}
.demo .app[data-k="erp"] .av-line .c-area{fill:rgba(234,197,79,.12)}
.demo .app[data-k="erp"] .av-map .m-halo{fill:rgba(234,197,79,.25)}
.demo .app[data-k="erp"] .av-donut .d0, .demo .app[data-k="erp"] .av-donut .k0{stroke:#EAC54F; background:#EAC54F}
.demo .app[data-k="erp"] .av-donut .d1, .demo .app[data-k="erp"] .av-donut .k1{stroke:#B8962F; background:#B8962F}
.demo .app[data-k="erp"] .av-donut .d2, .demo .app[data-k="erp"] .av-donut .k2{stroke:#E8DDB5; background:#E8DDB5}
.demo .app[data-k="erp"] .av-donut .d3, .demo .app[data-k="erp"] .av-donut .k3{stroke:#7A7465; background:#7A7465}
.demo .app[data-k="fin"] .av-donut .d1{stroke:#6A58D8}
.demo .app[data-k="log"] .hello::before{filter:hue-rotate(70deg) saturate(1.2)}
.demo .app[data-k="fin"] .hello::before{filter:hue-rotate(110deg)}
.demo .app[data-k="erp"] .hello::before{filter:hue-rotate(-90deg) saturate(1.4)}
.demo .app[data-k] .bars div.hi{color:#1D1F1E}
.demo .hello::before{display:none!important}



/* barre du haut : FR/EN, jour/nuit et Contact à la même hauteur */
header.nav .nav-cta > .lang{height:40px; box-sizing:border-box; align-items:stretch; padding:3px!important; border-radius:12px}
header.nav .nav-cta > .lang button{height:auto; border-radius:9px; padding:0 11px!important}
header.nav .nav-cta .btn-sm{height:40px; box-sizing:border-box; padding:0 5px 0 15px; border-radius:12px}
header.nav .nav-cta .btn-sm .arr{width:30px; height:30px; border-radius:8px}
header.nav .nav-cta > .lang, header.nav .nav-cta > .lang button{transition:height .45s, border-radius .45s, padding .45s}
@media (min-width:641px){
  header.nav.scrolled .nav-cta > .lang{height:34px; padding:2px!important; border-radius:10px}
  header.nav.scrolled .nav-cta > .lang button{border-radius:7px; padding:0 9px!important}
  header.nav.scrolled .nav-cta .btn-sm{height:34px; padding:0 4px 0 13px; border-radius:10px; font-size:13px}
  header.nav.scrolled .nav-cta .btn-sm .arr{width:26px; height:26px; border-radius:7px}
}

/* illustration animée du haut : police du site */
.hero-art svg text{font-family:var(--display)!important}
.hero-art svg text.lbl{text-transform:none!important; letter-spacing:.02em!important; font-size:11px!important}



/* onglets Transport / Finance / Industrie : plus fins */
.demo .seg-in{padding:3px; gap:2px; border-radius:11px}
.demo .seg button{padding:5px 13px; font-size:12.5px; font-weight:400; border-radius:8px}
@media (max-width:640px){.demo .seg button{padding:6px 8px; font-size:12px}}

/* légende sous le tableau : couleur du secteur affiché */
.demo .sw.m{transition:background .3s}
.demo[data-k="log"] .sw.m{background:#5B9BF0}
.demo[data-k="fin"] .sw.m{background:#A08CF5}
.demo[data-k="erp"] .sw.m{background:#EAC54F}

/* bandeau « Nos clients restent » : moins haut */
@media (min-width:981px){
  .trust-in{padding-block:16px!important}
  .trust .logo-grid{row-gap:6px!important}
  .trust .logo-grid figure{height:42px!important}
  .trust .logo-grid img{max-height:32px!important}
}

/* icônes bloc 1 : une couleur par icône */
#situations .sit-link:nth-child(1) .ico{background:rgba(91,155,240,.14)!important; color:#5B9BF0!important}
:root[data-mode="light"] #situations .sit-link:nth-child(1) .ico{color:#2F6FD0!important}
#situations .sit-link:nth-child(1):hover .ico{background:#5B9BF0!important; color:#1D1F1E!important}
#situations .sit-link:nth-child(2) .ico{background:rgba(160,140,245,.14)!important; color:#A08CF5!important}
:root[data-mode="light"] #situations .sit-link:nth-child(2) .ico{color:#6A58D8!important}
#situations .sit-link:nth-child(2):hover .ico{background:#A08CF5!important; color:#1D1F1E!important}
#situations .sit-link:nth-child(3) .ico{background:rgba(240,138,108,.14)!important; color:#F08A6C!important}
:root[data-mode="light"] #situations .sit-link:nth-child(3) .ico{color:#C9573A!important}
#situations .sit-link:nth-child(3):hover .ico{background:#F08A6C!important; color:#1D1F1E!important}
#situations .sit-link:nth-child(4) .ico{background:rgba(234,197,79,.14)!important; color:#EAC54F!important}
:root[data-mode="light"] #situations .sit-link:nth-child(4) .ico{color:#A9851A!important}
#situations .sit-link:nth-child(4):hover .ico{background:#EAC54F!important; color:#1D1F1E!important}
#situations .sit-link:nth-child(5) .ico{background:rgba(229,139,184,.14)!important; color:#E58BB8!important}
:root[data-mode="light"] #situations .sit-link:nth-child(5) .ico{color:#B8507F!important}
#situations .sit-link:nth-child(5):hover .ico{background:#E58BB8!important; color:#1D1F1E!important}
#situations .sit-link:nth-child(6) .ico{background:rgba(127,167,245,.14)!important; color:#7FA7F5!important}
:root[data-mode="light"] #situations .sit-link:nth-child(6) .ico{color:#4466C8!important}
#situations .sit-link:nth-child(6):hover .ico{background:#7FA7F5!important; color:#1D1F1E!important}
#situations .sit-link:nth-child(7) .ico{background:rgba(201,162,122,.14)!important; color:#C9A27A!important}
:root[data-mode="light"] #situations .sit-link:nth-child(7) .ico{color:#8E6A44!important}
#situations .sit-link:nth-child(7):hover .ico{background:#C9A27A!important; color:#1D1F1E!important}

/* icônes bloc 2 : mêmes couleurs que les problématiques correspondantes */
#sol-1 .ico{background:rgba(91,155,240,.14)!important; color:#5B9BF0!important}
:root[data-mode="light"] #sol-1 .ico{color:#2F6FD0!important}
#sol-1:hover .ico{background:#5B9BF0!important; color:#1D1F1E!important}
#sol-2 .ico{background:rgba(160,140,245,.14)!important; color:#A08CF5!important}
:root[data-mode="light"] #sol-2 .ico{color:#6A58D8!important}
#sol-2:hover .ico{background:#A08CF5!important; color:#1D1F1E!important}
#sol-3 .ico{background:rgba(240,138,108,.14)!important; color:#F08A6C!important}
:root[data-mode="light"] #sol-3 .ico{color:#C9573A!important}
#sol-3:hover .ico{background:#F08A6C!important; color:#1D1F1E!important}
#sol-4 .ico{background:rgba(229,139,184,.14)!important; color:#E58BB8!important}
:root[data-mode="light"] #sol-4 .ico{color:#B8507F!important}
#sol-4:hover .ico{background:#E58BB8!important; color:#1D1F1E!important}
#sol-5 .ico{background:rgba(127,167,245,.14)!important; color:#7FA7F5!important}
:root[data-mode="light"] #sol-5 .ico{color:#4466C8!important}
#sol-5:hover .ico{background:#7FA7F5!important; color:#1D1F1E!important}
#sol-6 .ico{background:rgba(201,162,122,.14)!important; color:#C9A27A!important}
:root[data-mode="light"] #sol-6 .ico{color:#8E6A44!important}
#sol-6:hover .ico{background:#C9A27A!important; color:#1D1F1E!important}

/* bloc 4 : frise neutre (plus de vert) */
#methode .m-node{border-color:var(--line-2)}
#methode .m-node span{color:var(--mute)}
#methode .m-node.done{background:#FFF8ED; border-color:#FFF8ED}
#methode .m-node.done span{color:#1D1F1E}
#methode .m-fill{background:rgba(255,248,237,.75); box-shadow:none}
#methode .m-bubble{background:#FFF8ED; box-shadow:0 0 0 5px rgba(255,248,237,.12), 0 0 14px rgba(255,248,237,.35)}
:root[data-mode="light"] #methode .m-node.done{background:linear-gradient(180deg,#ECE7DD,#E2DCD0); border-color:#D6CEBF}
:root[data-mode="light"] #methode .m-node.done span{color:#1D1F1E}
:root[data-mode="light"] #methode .m-fill{background:#D6CEBF}
:root[data-mode="light"] #methode .m-bubble{background:#E2DCD0; box-shadow:0 0 0 1px #CFC6B4, 0 0 0 5px rgba(214,206,191,.35)}
#methode .msteps::before{background:var(--line-2)}

/* bloc 6 : frise des heures neutre (comme le bloc 4) */
#ia .rail-line b{background:rgba(255,248,237,.75)}
#ia .rail-bub{background:#FFF8ED; box-shadow:0 0 0 5px rgba(255,248,237,.12), 0 0 14px rgba(255,248,237,.35)}
#ia .rail-dot i{border-color:var(--line-2)}
#ia .rail-dot.done i, #ia .rail-dot.on i, #ia .rail-dot:hover i{background:#FFF8ED; border-color:#FFF8ED}
#ia .rail-dot.on span{color:var(--fg)}
:root[data-mode="light"] #ia .rail-line b{background:#D6CEBF}
:root[data-mode="light"] #ia .rail-bub{background:#E2DCD0; box-shadow:0 0 0 1px #CFC6B4, 0 0 0 5px rgba(214,206,191,.35)}
:root[data-mode="light"] #ia .rail-dot.done i, :root[data-mode="light"] #ia .rail-dot.on i, :root[data-mode="light"] #ia .rail-dot:hover i{background:#E2DCD0; border-color:#CFC6B4}

/* bloc 6 : textes justifiés, horaires sans vert */
#ia .icase > p{text-align:justify; -webkit-hyphens:auto; hyphens:auto}
#ia .i-time:not(.i-shield){color:var(--fg)!important; background:none!important; box-shadow:none!important; border:0!important}
#ia .itime .i-time, #ia .icase .i-time:not(.i-shield){background:transparent!important}
#ia .i-time:not(.i-shield) svg{color:var(--mute)}

/* bloc 6 : « ✓ Conforme » en contour vert au lieu d'un fond plein */
#ia .i-docs b{background:transparent!important; color:var(--mint-ink)!important; box-shadow:inset 0 0 0 1.5px var(--mint)!important}
:root[data-mode="light"] #ia .i-docs b{box-shadow:inset 0 0 0 1.5px #3FBF84!important}

/* équipe : badge « in » neutre */
.m-name::after{background:transparent!important; color:#70B5F9!important; box-shadow:inset 0 0 0 1px #70B5F9; opacity:.9!important; transition:opacity .2s}
:root[data-mode="light"] .m-name::after{color:#0A66C2!important; box-shadow:inset 0 0 0 1px #0A66C2}
.m-name:hover::after{opacity:1!important}
.m-name:hover b{color:var(--fg)!important}

/* tableaux du haut : moins hauts */
.demo .bars{min-height:150px!important}
.demo .aviz .av-map{height:92px; width:100%}
.demo .aviz svg.av-line{height:56px!important}
.demo .av-donut{grid-template-columns:84px 1fr!important; gap:12px!important}
.demo .av-donut li{padding:4px 0!important}
.demo .rcol .aviz{padding:12px 14px!important}
.demo .main{gap:14px}

/* tableaux du haut : encore plus compacts */
.demo .agent li:nth-child(n+3){display:none}
.demo .kpi{padding:12px 14px!important}
.demo .kpi strong{font-size:22px!important; margin:2px 0!important}
.demo .kpis{gap:10px!important}
.demo .bars{min-height:120px!important}
.demo .aviz .av-map{height:84px}
.demo .side{gap:14px!important}

/* flèche entre bloc 1 et 2 : trait du haut visible en mode nuit */
:root:not([data-mode="light"]) .bridge-line.top{background:linear-gradient(180deg, rgba(112,226,171,0), rgba(112,226,171,.7))}

/* bloc 6 : carte « Une IA compatible » centrée */
#ia .i-sov{align-content:center; justify-items:center; text-align:center}
#ia .i-sov .i-time{justify-self:center}
#ia .i-sov .i-docs{justify-content:center}
.i-close::before{background:var(--line-2)!important; opacity:1}
:root:not([data-mode="light"]) .i-close::before{background:rgba(255,248,237,.28)!important}
:root[data-mode="light"] .i-close::before{background:#D6CEBF!important}

/* bloc 4, mode nuit : remplissage sombre */
:root:not([data-mode="light"]) #methode .m-node.done{background:linear-gradient(180deg,#3A403E,#2C3130); border-color:rgba(255,248,237,.28)}
:root:not([data-mode="light"]) #methode .m-node.done span{color:#FFF8ED}
:root:not([data-mode="light"]) #methode .m-fill{background:rgba(255,248,237,.28)}
:root:not([data-mode="light"]) #methode .m-bubble{background:#3A403E; box-shadow:0 0 0 1.5px rgba(255,248,237,.35), 0 0 0 6px rgba(255,248,237,.05)}

/* bloc 6, mode nuit : même remplissage sombre que le bloc 4 */
:root:not([data-mode="light"]) #ia .rail-line b{background:rgba(255,248,237,.28)}
:root:not([data-mode="light"]) #ia .rail-bub{background:#3A403E; box-shadow:0 0 0 1.5px rgba(255,248,237,.35), 0 0 0 6px rgba(255,248,237,.05)}
:root:not([data-mode="light"]) #ia .rail-dot.done i, :root:not([data-mode="light"]) #ia .rail-dot.on i, :root:not([data-mode="light"]) #ia .rail-dot:hover i{background:#3A403E; border-color:rgba(255,248,237,.35)}
.h2-num > .sec-num{display:none!important} .h2-num{display:block!important}

.stepi{display:flex; align-items:center; gap:14px; margin-bottom:14px; font:400 12.5px var(--display); color:var(--mute)}
.stepi .dots{display:flex; gap:6px; align-items:center}
.stepi .dots i{width:6px; height:6px; border-radius:50%; background:var(--line-2)}
.stepi .dots i.d{background:var(--mute-2)} .stepi .dots i.c{width:18px; border-radius:3px; background:var(--fg)}
/* bloc 8 : pas de halo vert derrière les créneaux */
.fc-glow{display:none!important}
/* bloc 4, mode jour : contour vert de la carte active plus visible */
:root[data-mode="light"] .mstep.on .m-card{border-color:rgba(63,191,132,.8); box-shadow:0 0 0 .5px rgba(63,191,132,.8)}
/* bloc 8 : bouton « Réserver un créneau » plus compact */
.final-card .fc-btn{font-size:14.5px; padding:7px 7px 7px 18px; border-radius:12px; gap:14px}
.final-card .fc-btn .arr{width:32px; height:32px; border-radius:9px}

/* bloc 8 : téléphone et mail sous le nom */
.fc-person .fc-contact{margin-top:3px}
.fc-person .fc-contact a{color:inherit; text-decoration:none} .fc-person .fc-contact a:hover{color:#FFF8ED}
.final-card .stepi .dots i.c{background:#FFF8ED!important} .final-card .stepi .dots i.d{background:rgba(255,248,237,.4)!important} .final-card .stepi .dots i{background:rgba(255,248,237,.14)} .final-card .stepi{color:#A1A6A4}
.fc-chips span::before{display:none!important}

/* logos clients : bande qui défile en continu */
.trust .marquee{position:relative; overflow:hidden; padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-track{display:flex; width:max-content; animation:mqScroll 36s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-set{display:flex; align-items:center; gap:72px; padding-right:72px}
.mq-item{display:flex; align-items:center; height:44px; opacity:.85; transition:opacity .25s}
.mq-item:hover{opacity:1}
.mq-item img{height:auto; max-height:34px; max-width:150px; width:auto; display:block; filter:none!important}
.mq-item .lgw{display:none}
:root:not([data-mode="light"]) .mq-item .lgc{display:none}
:root:not([data-mode="light"]) .mq-item .lgw{display:block}
@keyframes mqScroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}
@media (max-width:640px){.mq-set{gap:44px; padding-right:44px}.mq-item img{max-height:26px; max-width:110px}}

/* ===== bloc 5 : configurateur ===== */
.cfg-hint{margin:-4px 0 0; font-size:13px; color:var(--mute)}
.cfg-mods{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
@media (max-width:560px){.cfg-mods{grid-template-columns:1fr}}
.cfg-mod{all:unset; box-sizing:border-box; cursor:pointer; position:relative; display:grid; grid-template-columns:38px 1fr; grid-template-rows:auto auto auto; column-gap:12px; row-gap:2px; padding:14px 40px 14px 14px; border-radius:14px; border:1px solid var(--line); background:var(--ink); transition:border-color .2s, background .2s, transform .2s}
.cfg-mod:hover{border-color:var(--line-2); transform:translateY(-1px)}
.cfg-mod:focus-visible{outline:2px solid var(--mint); outline-offset:2px}
.cm-ico{grid-row:1/4; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--ink-3); color:var(--mute); transition:background .2s, color .2s}
.cm-ico svg{width:20px; height:20px}
.cm-t{font-size:14.5px; font-weight:500; color:var(--fg)}
.cm-d{font-size:12.5px; font-weight:300; color:var(--mute); line-height:1.4}
.cm-p{font-size:12.5px; color:var(--mute-2); margin-top:4px}
.cm-ck{position:absolute; top:14px; right:14px; width:18px; height:18px; border-radius:6px; border:1.5px solid var(--line-2); transition:background .2s, border-color .2s}
.cfg-mod[aria-pressed="true"]{border-color:rgba(112,226,171,.55); background:var(--mint-ghost)}
.cfg-mod[aria-pressed="true"] .cm-ico{background:var(--mint); color:#1D1F1E}
.cfg-mod[aria-pressed="true"] .cm-p{color:var(--mint-ink)}
.cfg-mod[aria-pressed="true"] .cm-ck{background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1F1E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat; border-color:var(--mint)}
.cfg-seg{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; padding:4px; border-radius:12px; border:1px solid var(--line); background:var(--ink)}
.cfg-u{all:unset; cursor:pointer; text-align:center; padding:9px 6px; border-radius:9px; font-size:13.5px; color:var(--mute); transition:background .2s, color .2s}
.cfg-u[aria-pressed="true"]{background:var(--fg); color:var(--fg-inv)}
@media (max-width:560px){.cfg-seg{grid-template-columns:repeat(2,1fr)}}
.cfg-opts{display:grid; gap:8px}
.cfg-opt{all:unset; box-sizing:border-box; cursor:pointer; display:grid; grid-template-columns:1fr auto 38px; align-items:center; gap:14px; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--ink); transition:border-color .2s}
.cfg-opt:hover{border-color:var(--line-2)}
.co-txt{display:grid; gap:2px} .co-txt b{font-size:14px; font-weight:500} .co-txt small{font-size:12.5px; font-weight:300; color:var(--mute)}
.co-p{font-size:13px; color:var(--mute); white-space:nowrap}
.co-sw{position:relative; width:38px; height:22px; border-radius:999px; background:var(--line-2); transition:background .2s}
.co-sw::after{content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--fg); transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.cfg-opt[aria-pressed="true"]{border-color:rgba(112,226,171,.55)}
.cfg-opt[aria-pressed="true"] .co-sw{background:var(--mint)} .cfg-opt[aria-pressed="true"] .co-sw::after{transform:translateX(16px); background:#1D1F1E}
.cfg-opt[aria-pressed="true"] .co-p{color:var(--mint-ink)}
.cfg-inc{margin:2px 0 0; font-size:12.5px; color:var(--mute); line-height:1.6}
.cfg-inc span{display:inline-block; margin-right:6px; padding:2px 8px; border-radius:999px; border:1px solid var(--line-2); color:var(--fg); font-size:11.5px}
.cfg-lines{display:grid; gap:7px}
.cfg-lines .cl{display:flex; justify-content:space-between; gap:12px; font-size:13.5px; color:var(--fg); font-weight:300}
.cfg-lines .cl span:last-child{color:var(--mute); white-space:nowrap; font-variant-numeric:tabular-nums}
.cfg-lines .cl.sub{font-size:12.5px; color:var(--mute)}
.cfg-lines .empty{font-size:13.5px; color:var(--mute)}
.cfg-meta{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; padding-top:12px; border-top:1px solid var(--line)}
.cfg-meta b{font-size:15px; font-weight:500; color:var(--fg)} .cfg-meta small{font-size:11.5px}
:root[data-mode="light"] .cfg-mod, :root[data-mode="light"] .cfg-opt, :root[data-mode="light"] .cfg-seg{background:#FBFAF6}
:root[data-mode="light"] .cfg-mod[aria-pressed="true"]{background:#EAF8F0}
.cfg-call{display:grid; gap:10px; padding:14px 16px; border-radius:14px; border:1px solid var(--line); background:color-mix(in srgb,var(--fg) 3%,transparent)}
.cfg-call[hidden]{display:none}
.cfg-call p{margin:0; font-size:13px; font-weight:300; color:var(--mute); line-height:1.5}
.cfg-call-btn{justify-content:center; gap:8px; border:1px solid var(--fg); color:var(--fg); background:transparent}
.cfg-call-btn:hover{background:var(--fg); color:var(--fg-inv)}
.fc-person.ping{animation:fcping 1.6s ease-out 2}
@keyframes fcping{0%{box-shadow:0 0 0 0 rgba(112,226,171,.55)}100%{box-shadow:0 0 0 16px rgba(112,226,171,0)}}
.cl-link{color:inherit; text-decoration:none; cursor:pointer}
.cl-link span:first-child{text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px; transition:text-decoration-color .2s, color .2s}
.cl-link i{font-style:normal; font-size:.85em; opacity:.6}
.cl-link:hover span:first-child{color:var(--fg); text-decoration-color:currentColor}
.sim-budget[hidden]{display:none}
.cfg-meta > span[hidden]{display:none}
.cfg-from{font-size:.62em; font-weight:300; color:var(--mute); letter-spacing:0}
.cfg-had{all:unset; box-sizing:border-box; cursor:pointer; display:grid; grid-template-columns:1fr 38px; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; border:1px dashed var(--line-2); transition:border-color .2s}
.cfg-had:hover{border-color:var(--mute-2)}
.cfg-had .ch-t b{display:block; font-size:13px; font-weight:500; color:var(--fg)}
.cfg-had .ch-t small{display:block; font-size:11.5px; font-weight:300; color:var(--mute); line-height:1.4; margin-top:2px}
.cfg-had[aria-pressed="true"]{border-style:solid; border-color:rgba(112,226,171,.55)}
.cfg-had[aria-pressed="true"] .co-sw{background:var(--mint)}
.cfg-had[aria-pressed="true"] .co-sw::after{transform:translateX(16px); background:#1D1F1E}
.cfg-had:focus-visible{outline:2px solid var(--mint); outline-offset:2px}
.cfg-lines .cl.cl-done span:first-child{text-decoration:line-through; text-decoration-color:var(--mute-2)}
.cfg-lines .cl.cl-done span:last-child{color:var(--mint-ink)}
.kpi-b strong .kpi-plus{font-style:normal; color:var(--mint-ink)}
.cfg-meta > span{line-height:1.35}
.cfg-meta > span small{display:inline-block; line-height:1.3; margin-top:2px}
.sim-cost .sim-big strong{font-weight:300!important; font-size:clamp(22px,2vw,26px)!important}
.cs-pay{margin:14px 0 0; font-size:14px; font-weight:300; color:var(--mute)}
.cs-pay:empty{display:none}
.cs-pay b{color:var(--mint-ink); font-weight:500}
.cs-pay small{display:block; font-size:12px; color:var(--mute-2); margin-top:2px}
/* espacements entre blocs : un rythme unique */
:root{--sec-gap:clamp(56px,5.5vw,80px)}
section.block{padding-block:var(--sec-gap)}
.hero{padding-bottom:var(--sec-gap)}
.final{padding-top:var(--sec-gap)}
#situations{padding-bottom:calc(var(--sec-gap) + 36px)}
#socle{padding-top:calc(var(--sec-gap) + 36px)}
@media (max-width:760px){#socle{padding-top:calc(var(--sec-gap) + 72px)} #situations{padding-bottom:calc(var(--sec-gap) + 60px)}}
#tarifs .sim-budget{border-color:rgba(112,226,171,.55)}
:root[data-mode="light"] #tarifs .sim-budget{border-color:#3FBF84}
#tarifs .cfg-call-btn .arr{background:transparent!important; color:inherit!important; transition:transform .2s}
#tarifs .cfg-call-btn:hover .arr{transform:translateX(3px)}
/* barre du haut : hauteur réservée fixe pour éviter le va-et-vient dans Chrome */
html, body{overflow-anchor:none}
header.nav{height:60px; box-sizing:content-box}
@media (max-width:640px){header.nav{height:56px}}
header.nav .nav-in{align-self:center}
/* partenaire Axia Vision (bloc 7) */
.partner{margin:36px auto 0; display:flex; align-items:center; justify-content:center; gap:18px; width:fit-content; padding:14px 22px; border:1px solid var(--line); border-radius:16px; text-decoration:none; color:var(--mute); transition:border-color .25s, transform .25s, background .25s}
.partner img{height:54px; width:auto; display:block}
.partner .pl-l{display:none}
:root[data-mode="light"] .partner .pl-l{display:block}
:root[data-mode="light"] .partner .pl-d{display:none}
.partner-k{font-size:13px; font-weight:300}
.partner-go{font-size:14px; color:var(--mint-ink); opacity:0; transform:translate(-4px,4px); transition:opacity .2s, transform .2s}
.partner:hover{border-color:rgba(112,226,171,.45); transform:translateY(-2px)}
:root[data-mode="light"] .partner:hover{border-color:rgba(63,191,132,.8)}
.partner:hover .partner-go{opacity:1; transform:none}
.partner:focus-visible{outline:2px solid var(--mint); outline-offset:3px}
@media (max-width:560px){.partner{flex-wrap:wrap; gap:10px 14px}.partner img{height:32px}}
.partner{position:relative; z-index:2; background:var(--ink-2)}
:root[data-mode="light"] .partner{background:#FFFFFF}
.partner{width:auto!important; margin:14px 0 0!important; display:grid!important; grid-template-columns:1fr auto 1fr; align-items:center; padding:20px 26px!important; border-radius:var(--r-l)!important}
.partner-id{display:grid; justify-items:center; gap:6px}
.partner-t{font-size:12.5px; font-weight:300; color:var(--mute); letter-spacing:.01em}
.partner-go{justify-self:end}
@media (max-width:640px){.partner{grid-template-columns:1fr auto; row-gap:10px}.partner-k{grid-column:1/-1}.partner-id{justify-items:start}}
.partners{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px}
.partners .partner{margin:0!important}
.partner img.pl-labo{height:36px}
.partners .partner-id{grid-template-rows:54px auto; align-items:center}
.partners .partner-id > img{align-self:center}
@media (max-width:760px){.partners{grid-template-columns:1fr}}
@media (max-width:560px){.partner img.pl-labo{height:24px}.partners .partner-id{grid-template-rows:40px auto}}
/* cadre partenaires unique */
.pbox{position:relative; z-index:2; margin-top:14px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:24px; padding:18px 26px; border:1px solid var(--line); border-radius:var(--r-l); background:var(--ink-2)}
:root[data-mode="light"] .pbox{background:#FFFFFF}
.pbox-k{font-size:13px; font-weight:300; color:var(--mute)}
.pbox-row{display:grid; grid-template-columns:1fr auto 1fr; align-items:center}
.pbox-sep{width:1px; height:56px; background:var(--line)}
.pbox-item{position:relative; display:grid; justify-items:center; padding:10px 16px; border-radius:14px; text-decoration:none; color:inherit; border:1px solid transparent; transition:border-color .25s, transform .25s}
.pbox-item .partner-go{position:absolute; top:10px; right:14px}
.pbox-item:hover{border-color:rgba(112,226,171,.45); transform:translateY(-2px)}
:root[data-mode="light"] .pbox-item:hover{border-color:rgba(63,191,132,.8)}
.pbox-item:hover .partner-go{opacity:1; transform:none}
.pbox-item:focus-visible{outline:2px solid var(--mint); outline-offset:2px}
.pbox .partner-id{grid-template-rows:54px auto; align-items:center}
.pbox .partner-id img{height:54px; width:auto; display:block}
.pbox .partner-id img.pl-labo{height:36px}
.pbox .partner-id img.pl-l{display:none}
:root[data-mode="light"] .pbox .partner-id img.pl-l{display:block}
:root[data-mode="light"] .pbox .partner-id img.pl-d{display:none}
@media (max-width:760px){.pbox .pbox-item{justify-items:center}}
@media (max-width:760px){.pbox{grid-template-columns:1fr; gap:10px; padding:16px}.pbox-row{grid-template-columns:1fr}.pbox-sep{width:100%; height:1px; margin:6px 0}}
@media (max-width:560px){.pbox .partner-id img{height:40px}.pbox .partner-id img.pl-labo{height:26px}.pbox .partner-id{grid-template-rows:42px auto}}
/* mode jour : mêmes dégradés, en beige */
:root[data-mode="light"] .cream{background:linear-gradient(180deg,#F1EADC 0%,#FAF8F3 100%)}
:root[data-mode="light"] .hero, :root[data-mode="light"] .block:not(.cream){background:linear-gradient(180deg,#FAF8F3 0%,#FAF8F3 50%,#F8F5ED 62%,#F6F2E8 74%,#F4EEE2 86%,#F1EADC 100%)}
/* mode nuit : blocs noirs qui descendent vers le bleu nuit */
:root:not([data-mode="light"]) .hero, :root:not([data-mode="light"]) .block:not(.cream){background:linear-gradient(180deg,#1D1F1E 0%,#1D1F1E 50%,#1C1F21 62%,#1B1F25 74%,#19202A 86%,#172131 100%)}

:root:not([data-mode="light"]) .cream .eyebrow,
:root:not([data-mode="light"]) .cream .sec-head h2 em{color:var(--mint-ink)}
:root:not([data-mode="light"]) .cream .sit, :root:not([data-mode="light"]) .cream .sol{background:var(--ink)}
:root:not([data-mode="light"]) .cream .sit:hover, :root:not([data-mode="light"]) .cream .sol:hover, :root:not([data-mode="light"]) .cream .sol.flash{background:var(--ink-2)}
:root:not([data-mode="light"]) .cream .stat{background:var(--ink)}

/* ---------- menu mobile / tablette (burger) ---------- */
.burger{display:none; position:relative; width:40px; height:40px; border-radius:12px; border:1px solid var(--line-2); background:transparent; color:var(--fg); cursor:pointer; padding:0; transition:border-color .2s, background .2s}
.burger:hover{border-color:var(--mute)}
.burger span{position:absolute; left:11px; width:18px; height:1.6px; border-radius:2px; background:currentColor; transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s, width .35s cubic-bezier(.2,.8,.2,1), top .35s cubic-bezier(.2,.8,.2,1)}
.burger span:nth-child(1){top:13px}
.burger span:nth-child(2){top:19px; width:12px}
.burger span:nth-child(3){top:25px}
.burger:hover span:nth-child(2){width:18px}
.burger[aria-expanded="true"]{background:var(--mint); border-color:var(--mint); color:#1D1F1E}
.burger[aria-expanded="true"] span:nth-child(1){top:19px; transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0; transform:translateX(-8px); width:18px}
.burger[aria-expanded="true"] span:nth-child(3){top:19px; transform:rotate(-45deg)}
@media (max-width:1100px){
  .burger{display:block}
  .nav-cta{gap:8px}
}
@media (max-width:560px){.nav-cta .btn-primary{display:none}}
.mnav{position:fixed; inset:0; z-index:19; display:block}
.mnav[hidden]{display:none}
.mnav-back{position:absolute; inset:0; background:rgba(10,12,11,.55); backdrop-filter:blur(4px); opacity:0; transition:opacity .35s}
.mnav.open .mnav-back{opacity:1}
.mnav-panel{position:absolute; left:12px; right:12px; top:calc(72px + 8px + env(safe-area-inset-top,0px)); max-height:calc(100vh - 100px); overflow:auto;
  background:var(--ink-2); border:1px solid var(--line-2); border-radius:22px; padding:12px; box-shadow:0 40px 100px -30px rgba(0,0,0,.6);
  transform:translateY(-10px) scale(.98); opacity:0; transform-origin:top right; transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s}
.mnav.open .mnav-panel{transform:none; opacity:1}
.mnav-links{display:grid}
.mnav-links a{display:flex; align-items:center; justify-content:space-between; padding:15px 16px; border-radius:14px; text-decoration:none; font-size:17px; font-weight:400; color:var(--fg); border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(8px); transition:opacity .4s ease calc(60ms + var(--i,0)*45ms), transform .4s cubic-bezier(.2,.8,.2,1) calc(60ms + var(--i,0)*45ms), background .2s}
.mnav-links a:last-child{border-bottom:0}
.mnav-links a::after{content:"→"; color:var(--mint-ink); opacity:0; transform:translateX(-6px); transition:opacity .2s, transform .2s}
.mnav-links a:hover, .mnav-links a.on{background:var(--mint-ghost)}
.mnav-links a:hover::after{opacity:1; transform:none}
.mnav.open .mnav-links a{opacity:1; transform:none}
.mnav-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 6px 6px; border-top:1px solid var(--line-2); margin-top:6px;
  opacity:0; transform:translateY(8px); transition:opacity .4s ease calc(80ms + var(--i,0)*45ms), transform .4s cubic-bezier(.2,.8,.2,1) calc(80ms + var(--i,0)*45ms)}
.mnav.open .mnav-foot{opacity:1; transform:none}
.mnav-foot .btn{flex:1; justify-content:space-between}
.lang.lang-m{display:flex}
.lang.lang-m button{font:500 11px var(--mono); padding:6px 10px; border-radius:7px; color:var(--mute-2); background:none; border:0; cursor:pointer}
.lang.lang-m button.on{background:var(--fg); color:var(--fg-inv)}
body.mnav-open{overflow:hidden}
@media (min-width:1101px){.mnav{display:none!important}}

/* ---------- sélecteur d'exemple (Transport / Gestion d'actifs / Industrie) : petits écrans ---------- */
@media (max-width:640px){
  .seg{display:block}
  .seg-in{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:4px; padding:4px; border-radius:14px}
  .seg button{padding:9px 6px; font-size:12px; line-height:1.25; white-space:normal; text-align:center; min-height:44px; display:grid; place-items:center}
}
@media (max-width:360px){.seg button{font-size:11px; padding:8px 4px}}

/* ---------- écran de démo : mise à l'échelle proportionnelle (même rendu qu'au bureau, à toutes les tailles) ---------- */
.app-fit{position:relative; width:100%; max-width:960px; margin-inline:auto; border-radius:var(--r-l)}
.app-fit > .app{transform-origin:0 0}
.app-fit.scaled{overflow:hidden; height:calc(var(--h,560px) * var(--k,1)); box-shadow:var(--app-shadow)}
.app-fit.scaled > .app{position:absolute; top:0; left:0; width:1132px; transform:scale(var(--k,1)); box-shadow:none}
@media (max-width:640px){.demo-caption{gap:6px 18px; margin-top:14px}}
.sit-cta.sit-hint h3{font-size:17px!important; line-height:1.3; max-width:16ch}
@media (min-width:561px){.situations{grid-auto-rows:1fr}}

/* menu mobile : panneau compact aligné à droite sous le bouton burger (langue déjà dans la barre) */
.mnav-panel{left:auto!important; right:16px!important; width:min(300px, calc(100vw - 32px)); transform-origin:top right}
@media (max-width:640px){.mnav-panel{right:10px!important; width:min(280px, calc(100vw - 20px))}}
.mnav-foot{padding:12px 4px 4px}
.mnav-foot .btn{flex:1}

.mnav-links a{border-bottom:0!important}

/* burger : toujours la même taille que le bouton jour/nuit (y compris barre réduite au défilement) */
.burger span{left:50%; margin-left:-9px}
.burger span:nth-child(1){top:calc(50% - 6.8px)}
.burger span:nth-child(2){top:calc(50% - .8px)}
.burger span:nth-child(3){top:calc(50% + 5.2px)}
.burger[aria-expanded="true"] span:nth-child(1), .burger[aria-expanded="true"] span:nth-child(3){top:calc(50% - .8px)}
@media (min-width:641px){
  header.nav .burger{transition:width .45s, height .45s, border-radius .45s, border-color .2s, background .2s}
  header.nav.scrolled .burger{width:34px; height:34px; border-radius:10px}
}
/* barre de défilement aux couleurs Delyos */
:root{--sb-thumb:rgba(112,226,171,.6); --sb-thumb-h:#70E2AB; --sb-track:#1D1F1E}
:root[data-mode="light"]{--sb-thumb:rgba(30,154,98,.55); --sb-thumb-h:#1E9A62; --sb-track:#FAF8F3}
html{scrollbar-color:var(--sb-thumb) var(--sb-track)}
html::-webkit-scrollbar{width:10px; height:10px}
html::-webkit-scrollbar-track{background:var(--sb-track)}
html::-webkit-scrollbar-thumb{background:var(--sb-thumb); border-radius:999px; border:2px solid var(--sb-track)}
html::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-h)}
.ml-scroll{scrollbar-color:var(--sb-thumb) transparent}
.ml-scroll::-webkit-scrollbar-thumb{background:var(--sb-thumb)!important}
.ml-scroll::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-h)!important}
.by-labo{color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition:color .2s, border-color .2s; cursor:pointer}
.by-labo:hover, .by-labo:focus-visible{color:var(--mint-ink); border-bottom-color:currentColor}