:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

: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.15fr) minmax(0,.85fr); align-items:center}.hero h1{font-size:clamp(30px,3.4vw,44px)}}
@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-family:var(--mono); font-size:10px; color:var(--mute-2); letter-spacing:.08em; text-transform:uppercase}
.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 11px var(--mono); 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 10px var(--mono); 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)}
@media (max-width:860px){
  .app-body{grid-template-columns:1fr}
  .side{border-right:0; border-bottom:1px solid var(--line)}
  .base-box{margin-top:0}
  .lower{grid-template-columns:1fr}
}
@media (max-width:560px){.kpis{grid-template-columns:1fr 1fr}.kpis .kpi:last-child{grid-column:1/-1}.sample{display:none}}
.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 10px var(--mono); 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(6,1fr); gap:14px}
@media (max-width:980px){.team{grid-template-columns:repeat(3,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 12px, 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(4,1fr); gap:14px}
@media (max-width:900px){.kpis-band{grid-template-columns:1fr 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:38px; 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:8px; height:28px; padding:0 14px 0 10px; margin-top:6px; 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:14px; height:14px; 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 12px "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:42px; 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}
@media (max-width:760px){.logo-grid{grid-template-columns:repeat(3,1fr)}.logo-grid figure,.logo-grid figure:nth-child(5){grid-column:auto}}
/* 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 5.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}
.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:auto; background:var(--ink-2); color:var(--fg); border:1px solid var(--line-2); border-radius:22px; padding:clamp(24px,4vw,44px); box-shadow:0 40px 100px -30px rgba(0,0,0,.7)}
.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}
/* ---------- 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}