/* Études de cas (oct. 2026) : Klyxor, Door-in, U:man + parcours du hero (aussi Qevlar) */
.cs{--navy:#1a1a2e;--blue:#2563eb;--blue-l:#60a5fa;--coral:#d9513d;--coral-l:#e8604c;--muted:#4a4a62;--muted2:#5a5a72;--line:#ece7df;--ease:cubic-bezier(.22,1,.36,1)}
.cs .cs-sec{padding:7.5rem 0}
.cs .cs-cream{background:#f5f0eb}
.cs .cs-light{background:#faf9f7}
.cs .cs-dark{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.cs .cs-dark>.container{position:relative}
.cs .cs-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:24px 24px;pointer-events:none}
.cs .cs-mono{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.cs .cs-hand{font-family:'Caveat',cursive;font-weight:600;line-height:1.15}
.cs .h2{margin-bottom:0}
.cs .title-section{margin-bottom:0}
.cs .cs-head{display:flex;flex-direction:column;gap:1.1rem;max-width:820px}
.cs .cs-head .body{max-width:720px}
.cs .cs-row{display:flex;justify-content:space-between;align-items:flex-end;gap:3rem}
.cs .cs-row>.body{max-width:440px;flex-shrink:0}
.cs .cs-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px -30px rgba(26,26,46,.35)}
.cs .cs-big{margin:0;font-family:Fraunces,serif;font-weight:500;font-size:1.9rem;line-height:1.3;color:var(--navy)}
.cs .cs-big b{font-weight:600;color:var(--blue)}
.cs .cs-dark .cs-big{color:#fff}.cs .cs-dark .cs-big em{color:var(--blue-l)}
.cs .cs-dark .body{color:#c7c9dc}
.cs .cs-dark .title-section{color:var(--blue-l)}
.cs .cs-dark .h2{color:#fff}
.cs .cs-dark .h2.mi-accent .h2---span{color:var(--blue-l)}
.cs .cs-lbl{display:inline-flex;align-self:flex-start;padding:5px 10px;border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}
.cs .cs-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid #e7e1d9;font-size:.875rem;color:var(--navy)}
.cs .cs-pill i{width:8px;height:8px;border-radius:50%;background:#16a34a;display:block}
.cs .cs-pill i.is-coral{background:var(--coral-l)}
.cs .cs-pills{display:flex;flex-wrap:wrap;gap:10px}
.cs .cs-shot{position:relative;margin:0;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -36px rgba(26,26,46,.42),0 0 0 1px rgba(26,26,46,.06)}
.cs .cs-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.cs .cs-chk{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none}
.cs .cs-chk li{display:flex;gap:14px;align-items:flex-start;font-size:1.05rem;line-height:1.5;color:var(--navy)}
.cs .cs-chk svg{flex-shrink:0;margin-top:2px}
.cs .cs-dark .cs-chk li{color:#fff}

/* Hero */
.cs-hero{background:#f5f0eb;padding:10rem 0 6rem;overflow:hidden}
.cs-hero-grid{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:56px;align-items:center}
.cs-hero-txt{display:flex;flex-direction:column;gap:1.25rem}
.cs-hero-txt .title-section,.cs-hero-txt .h1{margin-bottom:0}
.cs-hero-sub{color:#5a5a72}
.cs-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:.5rem 0 0;padding-top:1.4rem;border-top:1px solid #e3ddd4}
.cs-meta dt{color:#8a8478}
.cs-meta dd{margin:6px 0 0;font-weight:600;color:#1a1a2e}
.cs-hero-vis{display:flex;flex-direction:column;gap:22px;min-width:0}
.cs-hero-note{display:flex;align-items:center;gap:8px;margin-left:42%;font-size:1.6rem;color:#e8604c;transform:rotate(-3deg)}
.cs-hero-note svg{flex-shrink:0}

/* Parcours en cascade (fluide) */
.cs-pc{position:relative;width:100%;max-width:594px;aspect-ratio:594/440;container-type:inline-size}
.cs-pc-card{position:absolute;width:64%;height:55%;border-radius:14px;background:#fff;box-shadow:0 30px 60px -30px rgba(26,26,46,.5),0 0 0 1px rgba(26,26,46,.07);animation:pcLift 8s cubic-bezier(.45,0,.25,1) infinite both}
.cs-pc-card:nth-child(1){left:0;top:3.6%;animation-delay:0s}
.cs-pc-card:nth-child(2){left:18%;top:24%;animation-delay:2s}
.cs-pc-card:nth-child(3){left:36%;top:44.5%;animation-delay:4s}
.cs-pc-img{position:absolute;inset:0;border-radius:14px;overflow:hidden}
.cs-pc-img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.cs-pc-tag{position:absolute;top:-16px;left:16px;z-index:2;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:#fff;box-shadow:0 10px 20px -10px rgba(26,26,46,.45);font-size:14px;font-weight:600;color:#1a1a2e;white-space:nowrap;font-family:'DM Sans',sans-serif}
.cs-pc-tag b{width:24px;height:24px;border-radius:50%;background:#eef2ff;color:#2563eb;font-family:'JetBrains Mono',monospace;font-size:11px;display:flex;align-items:center;justify-content:center;color:#8fb0f6;animation:pcDot 8s cubic-bezier(.45,0,.25,1) infinite both;animation-delay:inherit}
/* 8 s : rien de sélectionné (0–2 s), puis 1, 2, 3 tour à tour ; chaque carte s'allume pendant que la précédente s'éteint */
@keyframes pcLift{0%,24%{transform:none;box-shadow:0 30px 60px -30px rgba(26,26,46,.5),0 0 0 1px rgba(26,26,46,.07)}31%,45%{transform:translateY(-6px);box-shadow:0 40px 70px -30px rgba(37,99,235,.55),0 0 0 2px #2563eb}52%,100%{transform:none;box-shadow:0 30px 60px -30px rgba(26,26,46,.5),0 0 0 1px rgba(26,26,46,.07)}}
@keyframes pcDot{0%,24%{background:#eef2ff;color:#8fb0f6;box-shadow:0 0 0 0 rgba(37,99,235,0)}31%,45%{background:#2563eb;color:#fff;box-shadow:0 0 0 6px rgba(37,99,235,.18)}52%,100%{background:#eef2ff;color:#8fb0f6;box-shadow:0 0 0 0 rgba(37,99,235,0)}}
@container (max-width:420px){.cs-pc-tag{top:-12px;left:8px;font-size:11px;padding:4px 9px 4px 4px;gap:6px}.cs-pc-tag b{width:18px;height:18px;font-size:9px}.cs-pc-card,.cs-pc-img{border-radius:10px}}

/* Stats */
.cs .cs-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.cs .cs-stat{padding:28px}
.cs .cs-stat strong{display:block;font-family:Fraunces,serif;font-weight:600;font-size:3.6rem;line-height:1;color:var(--blue)}
.cs .cs-stat strong small{font-size:.5em;font-style:italic;font-weight:500}
.cs .cs-stat span{display:block;margin-top:10px;font-size:1rem;line-height:1.45;color:var(--muted)}
.cs .cs-stat.is-dark{background:var(--navy);border-color:var(--navy)}
.cs .cs-stat.is-dark strong{color:var(--coral-l)}
.cs .cs-stat.is-dark span{color:#c7c9dc}

/* Citation */
.cs .cs-quote{margin:0;display:flex;gap:28px;align-items:flex-start;padding:44px;border-radius:20px;background:#eff4ff}
.cs .cs-quote.is-white{background:#fff;border:1px solid var(--line)}
.cs .cs-quote img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:top;flex-shrink:0}
.cs .cs-quote blockquote{margin:0;padding:0;border:0;font-family:Fraunces,serif;font-size:1.45rem;line-height:1.45;color:var(--navy)}
.cs .cs-quote mark{background:linear-gradient(transparent 58%,rgba(37,99,235,.18) 58%);color:inherit}
.cs .cs-quote figcaption{text-align:left;margin-top:18px;font-size:.9rem;color:var(--muted2)}
.cs .cs-quote figcaption strong{display:block;font-size:1rem;color:var(--navy)}

/* Carte offre */
.cs .cs-offer{padding:32px;border-radius:20px;background:var(--navy);color:#fff;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden}

.cs .cs-offer-tag{align-self:flex-start;padding:6px 10px;border-radius:999px;background:var(--blue)}
.cs .cs-offer h3{margin:0;font-family:Fraunces,serif;font-weight:600;font-size:1.6rem;line-height:1.2;color:#fff}
.cs .cs-offer h3 em{font-weight:500;color:var(--blue-l)}
.cs .cs-offer p{position:relative;z-index:1;margin:0;font-size:.95rem;line-height:1.6;color:#c7c9dc}
.cs .cs-offer a{position:relative;z-index:1;color:#93c5fd;font-weight:500;text-decoration:none}
.cs .cs-offer a:hover{color:#fff}

/* Projet suivant + CTA */
.cs-next{display:block;background:#f5f0eb;border-top:1px solid #e7e1d9;text-decoration:none;color:#1a1a2e}
.cs-next-in{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:24px;padding-bottom:24px}
.cs-next .cs-mono{color:#8a8478}
.cs-next-t{font-family:Fraunces,serif;font-weight:600;font-size:1.5rem;line-height:1.25;text-align:right}
.cs-next-t span{color:#2563eb;display:inline-block;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.cs-next:hover .cs-next-t span{transform:translateX(6px)}
.cs-cta{padding:7.5rem 0!important;text-align:center}
.cs-cta .cs-head{align-items:center;margin:0 auto;max-width:820px}
.cs-cta .h2{text-align:center;font-size:2.6rem;line-height:1.15}
.cs-cta .h2 .is-coral{color:#e8604c!important;white-space:nowrap}
.cs-cta .body{text-align:center;max-width:640px}
.cs-cta .button-primary{margin-top:1rem;background:#d9513d}
.cs-cta .button-primary:hover{background:#c4442f}

/* Comparaison (avant / proposé) */
.cs .cs-vs{display:grid;grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr);align-items:center}
.cs .cs-vs-arrow{display:flex;justify-content:center}
.cs .cs-vs .is-prop{border-color:#bfd3fb;box-shadow:0 40px 70px -40px rgba(37,99,235,.5)}
.cs .cs-pane{padding:28px;display:flex;flex-direction:column;gap:12px}
.cs .cs-pane-t{font-weight:600;font-size:1.1rem;color:var(--navy)}

/* ===== Klyxor ===== */
.kx-profiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.kx-profile{padding:26px;display:flex;flex-direction:column;gap:12px}
.kx-profile h3{margin:0;font-family:Fraunces,serif;font-weight:600;font-size:1.5rem;color:#1a1a2e}
.kx-profile p{margin:0;font-size:.95rem;line-height:1.55;color:#5a5a72}
.kx-profile p b{color:#1a1a2e}
.kx-start{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:36px}
.kx-start .is-off{text-decoration:line-through;color:#8a8478}
.kx-start .is-on{background:#1a1a2e;color:#fff;border-color:#1a1a2e}
.kx-lots{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;margin:3rem 0 0;padding:0;list-style:none}
.kx-lot{position:relative;padding:18px 16px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:8px;animation:7s ease infinite both}
.kx-lot .cs-mono{color:#60a5fa}
.kx-lot>span:last-child{font-size:.95rem;line-height:1.35;color:#fff;font-weight:500}
.kx-lot b{position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:50%;background:#16a34a;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;animation:7s cubic-bezier(.34,1.6,.64,1) infinite both}
.kx-fld{height:30px;border-radius:6px;background:#f1eee9;border:1px solid #e4dfd7}
.kx-fl{font-size:11px;color:#8a8478;margin:10px 0 5px;font-family:'JetBrains Mono',monospace;letter-spacing:.08em}
.kx-form{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.kx-stp{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;border:1.5px solid #e4dfd7;background:#fff;font-weight:600;font-size:.95rem;color:#1a1a2e;animation:kxStp 6s ease infinite both}
.kx-stp i{width:26px;height:26px;border-radius:50%;background:#eef2ff;color:#2563eb;font-style:normal;font-size:13px;display:flex;align-items:center;justify-content:center;animation:kxStpI 6s ease infinite both;animation-delay:inherit}
.kx-stp:nth-child(2){animation-delay:-4s}.kx-stp:nth-child(3){animation-delay:-2s}
@keyframes kxStp{0%,30%{border-color:#2563eb;box-shadow:0 10px 24px -14px rgba(37,99,235,.6)}36%,100%{border-color:#e4dfd7;box-shadow:none}}
@keyframes kxStpI{0%,30%{background:#2563eb;color:#fff}36%,100%{background:#eef2ff;color:#2563eb}}
.kx-prev{margin-top:6px;padding:16px;border-radius:12px;background:#f5f8ff}
.kx-prev-bar{height:10px;margin-top:12px;border-radius:999px;background:#e7f0ff;overflow:hidden}
.kx-prev-bar span{display:block;height:100%;border-radius:999px;background:#2563eb;transform-origin:0 50%;animation:kxPrev 6s cubic-bezier(.45,0,.2,1) infinite both}
@keyframes kxPrev{0%,8%{transform:scaleX(.15)}30%{transform:scaleX(.45)}64%{transform:scaleX(.75)}90%,100%{transform:scaleX(1)}}
.kx-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center;margin-top:72px}
.kx-sys{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.kx-callout{position:absolute;display:flex;align-items:center;gap:8px;font-family:'Caveat',cursive;font-weight:600;font-size:1.45rem;color:#d9513d;white-space:nowrap}
.kx-callout i{width:12px;height:12px;border-radius:50%;background:#e8604c;box-shadow:0 0 0 6px rgba(232,96,76,.2);flex-shrink:0}
.kx-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:3rem 0 0;padding:0;list-style:none}
.kx-flow li{padding:26px 24px;background:#fff;border:1px solid #ece7df;display:flex;flex-direction:column;gap:10px}
.kx-flow li+li{border-left:0}
.kx-flow li:first-child{border-radius:16px 0 0 16px}
.kx-flow li:last-child{border-radius:0 16px 16px 0;background:#1a1a2e;border-color:#1a1a2e}
.kx-flow h3{margin:0;font-family:Fraunces,serif;font-weight:600;font-size:1.35rem;color:#1a1a2e}
.kx-flow p{margin:0;font-size:.95rem;line-height:1.55;color:#5a5a72}
.kx-flow li:last-child h3{color:#fff}.kx-flow li:last-child p{color:#c7c9dc}
.kx-demo{margin:2rem 0 0;padding:0;list-style:none}
.kx-demo li{display:flex;gap:18px;align-items:flex-start;padding:22px 0;border-top:1px solid #e7e1d9}
.kx-demo h3{margin:0;font-family:Fraunces,serif;font-weight:600;font-size:1.35rem;color:#1a1a2e}
.kx-demo p{margin:4px 0 0;font-size:1rem;color:#5a5a72}
.cs-side{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:72px;align-items:start}

/* ===== Door-in ===== */
.di-tools{position:relative;width:100%;max-width:650px;margin:0 auto;aspect-ratio:650/420;border-radius:24px;background:#f5f0eb;background-image:radial-gradient(rgba(26,26,46,.08) 1px,transparent 1px);background-size:18px 18px;overflow:hidden}
.di-tool{position:absolute;padding:12px 18px;border-radius:12px;background:#fff;border:1px solid #e4dfd7;box-shadow:0 14px 28px -18px rgba(26,26,46,.4);font-weight:600;font-size:1rem;color:#1a1a2e;display:flex;align-items:center;gap:10px;white-space:nowrap;transform:translate(-50%,-50%);animation:9s cubic-bezier(.45,0,.2,1) infinite both}
.di-tool i{width:10px;height:10px;border-radius:3px;display:block}
.di-hub{position:absolute;left:50%;top:50%;width:190px;height:120px;margin:-60px 0 0 -95px;border-radius:18px;background:#1a1a2e;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;animation:diHub 9s cubic-bezier(.34,1.5,.64,1) infinite both;box-shadow:0 30px 60px -24px rgba(26,26,46,.6)}
.di-hub img{display:block;width:auto;height:30px}
.di-hub .cs-mono{text-align:center!important}
.di-hub .cs-mono{color:#60a5fa;font-size:.62rem}
@keyframes diHub{0%,40%{transform:scale(.6);opacity:0}52%,92%{transform:none;opacity:1}98%,100%{transform:scale(.6);opacity:0}}
.di-qs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:44px}
.di-q{padding:22px;font-family:Fraunces,serif;font-size:1.25rem;line-height:1.35;color:#1a1a2e;display:flex;flex-direction:column;gap:12px}
.di-q .cs-mono{color:#2563eb;font-family:'JetBrains Mono',monospace}
.di-life{display:flex;position:relative;margin:44px 0 0;padding:0;list-style:none}
.di-life:before{content:"";position:absolute;left:0;right:0;top:15px;height:2px;background:#d9d3ca}
.di-life:after{content:"";position:absolute;left:0;top:15px;height:2px;width:100%;background:#2563eb;transform-origin:0 50%;animation:diLife 8s cubic-bezier(.45,0,.2,1) infinite both}
@keyframes diLife{0%,6%{transform:scaleX(0)}80%,94%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
.di-life li{position:relative;flex:1;display:flex;flex-direction:column;gap:10px;padding-right:16px}
.di-life li>i{width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid #2563eb;display:flex;align-items:center;justify-content:center;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11px;color:#2563eb;position:relative;z-index:1}
.di-life li>b{font-size:1rem;line-height:1.35;color:#1a1a2e}
.di-life li>.cs-mono{color:#8a8478}
.di-athena{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;margin-top:64px}
.di-80{padding:24px;display:flex;align-items:center;gap:20px}
.di-80 strong{font-family:Fraunces,serif;font-weight:600;font-size:3.4rem;line-height:1;color:#2563eb}
.di-80 span{font-size:1rem;line-height:1.45;color:#4a4a62}
.di-mods{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:40px}
.di-po{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:start}
.di-tl{padding:32px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.di-tl ol{margin:24px 0 0;padding:0;list-style:none}
.di-tl li{display:flex;gap:20px;padding-bottom:26px;position:relative}
.di-tl li:before{content:"";position:absolute;left:9px;top:22px;bottom:0;width:2px;background:rgba(255,255,255,.15)}
.di-tl li:last-child{padding-bottom:0}.di-tl li:last-child:before{display:none}
.di-tl li>i{width:20px;height:20px;border-radius:50%;border:2px solid #60a5fa;background:#1a1a2e;flex-shrink:0;margin-top:2px;box-sizing:border-box}
.di-tl li.is-on>i{background:#e8604c;border-color:#e8604c;box-shadow:0 0 0 6px rgba(232,96,76,.2)}
.di-tl li .cs-mono{color:#c7c9dc}
.di-tl li strong{display:block;margin-top:4px;font-family:Fraunces,serif;font-weight:500;font-size:1.35rem;color:#fff}
.di-ds{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none}
.di-ds li{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;background:#fff;border:1px solid #e4dfd7;font-size:.95rem;font-weight:500;color:#1a1a2e}
.di-ds li i{width:8px;height:8px;border-radius:50%;background:#2563eb;display:block}
.di-ds li.is-dark{background:#1a1a2e;color:#fff;border-color:#1a1a2e}.di-ds li.is-dark i{background:#e8604c}
.di-proofs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:44px}
.di-proof{padding:28px;display:flex;flex-direction:column;gap:12px}
.di-proof h3{margin:0;font-family:Fraunces,serif;font-weight:600;font-size:1.5rem;color:#1a1a2e}
.di-proof p{margin:0;font-size:1rem;line-height:1.55;color:#5a5a72}
.di-cycle{margin-top:24px;padding:24px}
.di-cycle img{height:auto;object-fit:contain}

/* ===== U:man ===== */
.um-board{position:relative;width:100%;aspect-ratio:560/270;border-radius:20px;background:#f5f0eb;background-image:radial-gradient(rgba(26,26,46,.08) 1px,transparent 1px);background-size:18px 18px;container-type:inline-size}
.um-idea{position:absolute;padding:.5em .7em;font-family:'Caveat',cursive;font-weight:600;font-size:clamp(14px,4.1cqw,23px);line-height:1;color:#1a1a2e;background:#fff3b8;border-radius:4px;box-shadow:0 10px 18px -10px rgba(26,26,46,.45)}
.um-spaces{display:flex;flex-direction:column;gap:12px}
.um-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.um-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.um-space{padding:18px;border-radius:16px;background:#fff;border:1px solid #ece7df;display:flex;flex-direction:column;gap:10px}
.um-space strong{font-family:Fraunces,serif;font-weight:600;font-size:1.15rem;color:#1a1a2e}
.um-space .cs-mono{color:#8a8478}
.um-chips{display:flex;flex-wrap:wrap;gap:8px}
.um-chips span{padding:6px 10px;border-radius:8px;background:#eff4ff;color:#1d4ed8;font-size:.875rem;font-weight:500}
.um-space.is-navy{background:#1a1a2e;border-color:#1a1a2e}.um-space.is-navy strong{color:#fff}.um-space.is-navy .cs-mono{color:#60a5fa}
.um-space.is-blue{background:#2563eb;border-color:#2563eb}.um-space.is-blue strong{color:#fff}.um-space.is-blue .cs-mono{color:#bfd3fb}
.um-wf{padding:20px;display:flex;flex-direction:column;gap:12px}
.um-tabs{display:flex;gap:6px}
.um-tabs span{padding:7px 12px;border-radius:8px;font-size:.8rem;font-weight:600;background:#f1eee9;color:#5a5a72}
.um-tabs span.is-on{background:#1a1a2e;color:#fff}
.um-blks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.um-blk{height:44px;border-radius:8px;background:#f1eee9;border:1px dashed #d9d3ca;display:flex;align-items:center;padding:0 12px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;color:#8a8478}
.um-blk.is-cal{background:#fde8e4;border-color:#f3c4b9;color:#d9513d}
.um-blk.is-blue{background:#eff4ff;border-color:#bfd3fb;color:#2563eb}
.um-blk.is-full{grid-column:1/-1}
.um-tests{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:center}
.um-insight{padding:26px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:10px}
.um-insight .cs-mono{color:#e8604c}
.um-insight p{margin:0;font-family:Fraunces,serif;font-size:1.35rem;line-height:1.4;color:#fff}
.um-insight span{font-size:.95rem;color:#c7c9dc}
.um-nav{position:relative;width:260px;height:300px;padding:16px;box-sizing:border-box;border-radius:16px;background:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.5);margin:0 auto}
.um-nav .cs-mono{color:#8a8478;display:block}
.um-it{position:absolute;left:16px;right:16px;height:40px;border-radius:10px;display:flex;align-items:center;gap:10px;padding:0 12px;font-size:.95rem;font-weight:500;color:#1a1a2e;background:#faf9f7;animation:umSh 7s cubic-bezier(.65,0,.25,1) infinite both}
.um-it i{width:10px;height:10px;border-radius:3px;background:#c7c9dc;display:block}
.um-it:nth-of-type(1){top:56px}.um-it:nth-of-type(2){top:103px}.um-it:nth-of-type(3){top:150px}.um-it:nth-of-type(4){top:197px}
.um-it.is-idea{top:244px;background:#fff3b8;z-index:2;animation-name:umUp}
.um-it.is-idea i{background:#e8604c}
@keyframes umUp{0%,30%{top:244px;box-shadow:none}48%,90%{top:56px;box-shadow:0 14px 26px -12px rgba(232,96,76,.6)}97%,100%{top:244px;box-shadow:none}}
@keyframes umSh{0%,30%{transform:none}48%,90%{transform:translateY(47px)}97%,100%{transform:none}}
.um-gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
.um-gal figure{margin:0;display:flex;flex-direction:column;gap:14px}
.um-gal .cs-shot{aspect-ratio:1440/1024}
.um-gal figcaption{text-align:left;display:flex;flex-direction:column;gap:4px}
.um-gal figcaption b{font-family:Fraunces,serif;font-size:1.25rem;color:#1a1a2e}
.um-gal figcaption span{font-size:.95rem;color:#5a5a72}
.um-chain{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.um-chain li{padding:10px 16px;border-radius:999px;background:#fff;border:1px solid #e4dfd7;font-weight:600;font-size:.95rem;color:#1a1a2e}
.um-chain li.is-on{background:#2563eb;color:#fff;border-color:#2563eb}
.um-chain .is-arr{padding:0;border:0;background:none;color:#2563eb}
.cs-2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.cs-2col.is-57{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}


/* Door-in : outils qui convergent */
.di-tool:nth-of-type(1){left:15.4%;top:17.1%;animation-name:diTool0}
@keyframes diTool0{0%,30%{opacity:1;left:15.4%;top:17.1%;transform:translate(-50%,-50%)}46%,94%{opacity:0;left:50%;top:50%;transform:translate(-50%,-50%) scale(.4)}97%,100%{opacity:1;left:15.4%;top:17.1%;transform:translate(-50%,-50%)}}
.di-tool:nth-of-type(2){left:77.3%;top:14.8%;animation-name:diTool1}
@keyframes diTool1{0%,30%{opacity:1;left:77.3%;top:14.8%;transform:translate(-50%,-50%)}46%,94%{opacity:0;left:50%;top:50%;transform:translate(-50%,-50%) scale(.4)}97%,100%{opacity:1;left:77.3%;top:14.8%;transform:translate(-50%,-50%)}}
.di-tool:nth-of-type(3){left:12.3%;top:71.9%;animation-name:diTool2}
@keyframes diTool2{0%,30%{opacity:1;left:12.3%;top:71.9%;transform:translate(-50%,-50%)}46%,94%{opacity:0;left:50%;top:50%;transform:translate(-50%,-50%) scale(.4)}97%,100%{opacity:1;left:12.3%;top:71.9%;transform:translate(-50%,-50%)}}
.di-tool:nth-of-type(4){left:85.2%;top:74.3%;animation-name:diTool3}
@keyframes diTool3{0%,30%{opacity:1;left:85.2%;top:74.3%;transform:translate(-50%,-50%)}46%,94%{opacity:0;left:50%;top:50%;transform:translate(-50%,-50%) scale(.4)}97%,100%{opacity:1;left:85.2%;top:74.3%;transform:translate(-50%,-50%)}}
.di-tool:nth-of-type(5){left:50%;top:88.6%;animation-name:diTool4}
@keyframes diTool4{0%,30%{opacity:1;left:50%;top:88.6%;transform:translate(-50%,-50%)}46%,94%{opacity:0;left:50%;top:50%;transform:translate(-50%,-50%) scale(.4)}97%,100%{opacity:1;left:50%;top:88.6%;transform:translate(-50%,-50%)}}

/* Klyxor : lots */
.kx-lot:nth-child(1){animation-name:kxLot0}.kx-lot:nth-child(1) b{animation-name:kxChk0}
@keyframes kxLot0{0%,8%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}11%,92%{background:rgba(37,99,235,.22);border-color:#60a5fa}97%,100%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}}
@keyframes kxChk0{0%,9%{opacity:0;transform:scale(.4)}13%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:scale(.4)}}
.kx-lot:nth-child(2){animation-name:kxLot1}.kx-lot:nth-child(2) b{animation-name:kxChk1}
@keyframes kxLot1{0%,18%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}21%,92%{background:rgba(37,99,235,.22);border-color:#60a5fa}97%,100%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}}
@keyframes kxChk1{0%,19%{opacity:0;transform:scale(.4)}23%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:scale(.4)}}
.kx-lot:nth-child(3){animation-name:kxLot2}.kx-lot:nth-child(3) b{animation-name:kxChk2}
@keyframes kxLot2{0%,28%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}31%,92%{background:rgba(37,99,235,.22);border-color:#60a5fa}97%,100%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}}
@keyframes kxChk2{0%,29%{opacity:0;transform:scale(.4)}33%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:scale(.4)}}
.kx-lot:nth-child(4){animation-name:kxLot3}.kx-lot:nth-child(4) b{animation-name:kxChk3}
@keyframes kxLot3{0%,38%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}41%,92%{background:rgba(37,99,235,.22);border-color:#60a5fa}97%,100%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}}
@keyframes kxChk3{0%,39%{opacity:0;transform:scale(.4)}43%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:scale(.4)}}
.kx-lot:nth-child(5){animation-name:kxLot4}.kx-lot:nth-child(5) b{animation-name:kxChk4}
@keyframes kxLot4{0%,48%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}51%,92%{background:rgba(37,99,235,.22);border-color:#60a5fa}97%,100%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}}
@keyframes kxChk4{0%,49%{opacity:0;transform:scale(.4)}53%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:scale(.4)}}
.kx-lot:nth-child(6){animation-name:kxLot5}.kx-lot:nth-child(6) b{animation-name:kxChk5}
@keyframes kxLot5{0%,58%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}61%,92%{background:rgba(37,99,235,.22);border-color:#60a5fa}97%,100%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}}
@keyframes kxChk5{0%,59%{opacity:0;transform:scale(.4)}63%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:scale(.4)}}
.kx-lot:nth-child(7){animation-name:kxLot6}.kx-lot:nth-child(7) b{animation-name:kxChk6}
@keyframes kxLot6{0%,68%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}71%,92%{background:rgba(37,99,235,.22);border-color:#60a5fa}97%,100%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}}
@keyframes kxChk6{0%,69%{opacity:0;transform:scale(.4)}73%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:scale(.4)}}

/* animations : en pause hors écran, coupées si mouvement réduit */
.cs-anim:not(.is-in),.cs-anim:not(.is-in) *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .cs *,.cs *:before,.cs *:after{animation:none!important;transition:none!important}
  .di-tool{display:none}.di-hub{opacity:1}
  .um-it.is-idea{top:56px}.um-it:not(.is-idea){transform:translateY(47px)}
}

/* ===== Responsive ===== */
@media (max-width:991px){
  .cs .cs-sec{padding:5rem 0}
  .cs-hero{padding:8rem 0 4.5rem}
  .cs-hero-grid,.kx-split,.kx-sys,.di-athena,.di-po,.um-tests,.cs-2col,.cs-side{grid-template-columns:minmax(0,1fr);gap:40px}
  .cs-hero-txt{text-align:center;align-items:center}
  .cs-hero-txt .body{text-align:center}
  .cs-pills{justify-content:center}
  .cs-meta{width:100%;text-align:left}
  .cs-hero-vis{max-width:600px;width:100%;margin:0 auto}
  .cs .cs-row{flex-direction:column;align-items:flex-start;gap:16px}
  .cs .cs-row>.body{max-width:none}
  .cs .cs-stats,.di-qs,.di-proofs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .di-meth{grid-template-columns:minmax(0,1fr)}
  .kx-profiles{grid-template-columns:minmax(0,1fr)}
  .kx-lots{grid-template-columns:repeat(4,minmax(0,1fr))}
  .kx-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kx-flow li{border-left:1px solid #ece7df!important;border-radius:0!important}
  .kx-flow li:first-child{border-radius:16px 0 0 0!important}
  .kx-flow li:nth-child(2){border-radius:0 16px 0 0!important}
  .kx-flow li:nth-child(3){border-radius:0 0 0 16px!important}
  .kx-flow li:last-child{border-radius:0 0 16px 0!important}
  .kx-callout{display:none}
  .kx-offer-wrap{padding-top:0!important}
  .cs-2col.is-57{grid-template-columns:minmax(0,1fr)}
  .cs .cs-vs{grid-template-columns:minmax(0,1fr);gap:16px}
  .cs .cs-vs-arrow svg{transform:rotate(90deg)}
  .um-gal{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .cs .cs-big{font-size:1.6rem}
  .cs-cta .h2{font-size:2.1rem}
}
@media (max-width:767px){
  .cs .cs-sec{padding:4rem 0}
  .cs-cta{padding:5rem 0!important}
  .cs-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-hero-note{font-size:1.3rem;margin-left:18%}
  .cs .cs-stat{padding:22px}
  .cs .cs-stat strong{font-size:2.6rem}
  .di-qs,.di-proofs,.um-3,.di-meth{grid-template-columns:minmax(0,1fr)}
  .di-ask ul{flex-direction:column;gap:10px}
  .um-tstats{grid-template-columns:minmax(0,1fr)}
  .kx-lots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kx-flow{grid-template-columns:minmax(0,1fr)}
  .kx-flow li{border-radius:0!important;border-top:0!important}
  .kx-flow li:first-child{border-radius:16px 16px 0 0!important;border-top:1px solid #ece7df!important}
  .kx-flow li:last-child{border-radius:0 0 16px 16px!important}
  .cs .cs-quote{flex-direction:column;padding:24px;gap:16px}
  .cs .cs-quote blockquote{font-size:1.15rem}
  .cs .cs-big{font-size:1.35rem}
  .di-life{flex-direction:column;gap:16px;margin-top:28px}
  .di-life:before,.di-life:after{left:15px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .di-life:after{animation:none}
  .di-life li{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 12px;padding-right:0}
  .di-life li>b{flex-basis:100%;padding-left:44px;margin-top:-6px}
  .di-tool{font-size:.75rem;padding:7px 10px;gap:6px}
  .di-hub{width:130px;height:84px;margin:-42px 0 0 -65px}
  .di-hub img{height:20px}
  .di-hub .cs-mono{font-size:.55rem!important}
  .di-cycle{padding:10px}
  .di-80 strong{font-size:2.6rem}
  .um-gal{grid-template-columns:minmax(0,1fr);gap:28px}
  .cs-next-in{flex-direction:column;align-items:flex-start;gap:6px}
  .cs-next-t{text-align:left;font-size:1.2rem}
  .cs-cta .h2{font-size:1.75rem}
  .cs-cta .h2 .is-coral{white-space:normal}
  .cs .cs-pane{padding:20px}
  .cs .cs-quote img{width:56px;height:56px}
}

/* Door-in : la recherche utilisateur */
.di-meth{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.di-meth li{padding:26px;display:flex;flex-direction:column;gap:10px}
.di-meth .cs-mono{color:#2563eb}
.di-meth h3{margin:0;font-family:Fraunces,serif;font-weight:600;font-size:1.3rem;line-height:1.3;color:#1a1a2e}
.di-meth p{margin:0;font-size:.95rem;line-height:1.6;color:#4a4a62}
.di-ask{margin-top:28px;display:flex;flex-direction:column;gap:14px}
.di-ask .cs-mono{color:#8a8478}
.di-ask ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.di-ask li{padding:10px 16px;border-radius:999px;background:#fff;border:1px solid #ece7df;font-family:Fraunces,serif;font-size:1.05rem;color:#1a1a2e}

/* U:man : chiffres des tests (remplace l'animation de navigation) */
.um-tstats{list-style:none;margin:0;padding:0;display:grid;gap:14px;width:100%}
.um-tstats li{display:flex;align-items:center;gap:20px;padding:22px 24px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.um-tstats strong{flex:0 0 96px;font-family:Fraunces,serif;font-weight:600;font-size:2.6rem;line-height:1;color:#fff}
.um-tstats strong small{font-size:1.1rem;color:#93c5fd}
.um-tstats li.is-coral strong{color:#f08a78}
.um-tstats span{color:#c7c9dc;font-size:.95rem;line-height:1.5}

/* DA : grille très légère + halos bleu et corail */
.cs-hero,.qv-hero,.cs .cs-sec.cs-cream,.cs .cs-sec.cs-light,.qv .qv-sec.qv-cream,.qv .qv-sec.qv-light{
  background-image:linear-gradient(rgba(26,26,46,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(26,26,46,.035) 1px,transparent 1px);
  background-size:112px 112px;background-position:center top}
.cs-hero,.qv-hero{
  background-image:radial-gradient(42% 55% at 100% 0,rgba(37,99,235,.13),transparent 70%),radial-gradient(38% 50% at 0 100%,rgba(232,96,76,.12),transparent 70%),linear-gradient(rgba(26,26,46,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(26,26,46,.035) 1px,transparent 1px);
  background-size:auto,auto,112px 112px,112px 112px;background-position:0 0,0 0,center top,center top}
.cs>.cs-sec.cs-cream:nth-of-type(4n+3),.qv>.qv-sec.qv-cream:nth-of-type(odd){
  background-image:radial-gradient(36% 60% at 100% 0,rgba(37,99,235,.10),transparent 70%),linear-gradient(rgba(26,26,46,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(26,26,46,.035) 1px,transparent 1px);
  background-size:auto,112px 112px,112px 112px;background-position:0 0,center top,center top}
.cs>.cs-sec.cs-light:nth-of-type(4n+2),.qv>.qv-sec.qv-light:nth-of-type(4n+1){
  background-image:radial-gradient(34% 55% at 0 100%,rgba(232,96,76,.09),transparent 70%),linear-gradient(rgba(26,26,46,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(26,26,46,.035) 1px,transparent 1px);
  background-size:auto,112px 112px,112px 112px;background-position:0 0,center top,center top}

/* Parcours sur mobile : l'écran 1 prend toute la largeur, puis 2 et 3 arrivent par-dessus */
@media (max-width:767px){
  .cs-pc{aspect-ratio:1.5/1;box-sizing:content-box;padding-top:72px;max-width:none}
  .cs-pc-card{left:0!important;width:100%;height:calc(100% - 72px);box-shadow:0 24px 50px -26px rgba(26,26,46,.55),0 0 0 1px rgba(26,26,46,.07)}
  .cs-pc-card:nth-child(1){top:16px;animation:pcM1 9s cubic-bezier(.45,0,.25,1) infinite both}
  .cs-pc-card:nth-child(2){top:44px;animation:pcM2 9s cubic-bezier(.45,0,.25,1) infinite both}
  .cs-pc-card:nth-child(3){top:72px;animation:pcM3 9s cubic-bezier(.45,0,.25,1) infinite both}
  .cs-pc-card:nth-child(1) .cs-pc-tag b{animation:pcMd1 9s cubic-bezier(.45,0,.25,1) infinite both}
  .cs-pc-card:nth-child(2) .cs-pc-tag b{animation:pcMd2 9s cubic-bezier(.45,0,.25,1) infinite both}
  .cs-pc-card:nth-child(3) .cs-pc-tag b{animation:pcMd3 9s cubic-bezier(.45,0,.25,1) infinite both}
  .cs-pc-tag{font-size:12px;top:-13px!important;left:10px!important}
  .qv-hero-note{margin-left:18%!important}
  @keyframes pcM1{0%,100%{transform:none}}
  @keyframes pcM2{0%,30%{transform:translateX(108%);opacity:0}38%,92%{transform:none;opacity:1}98%,100%{transform:none;opacity:0}}
  @keyframes pcM3{0%,63%{transform:translateX(108%);opacity:0}71%,92%{transform:none;opacity:1}98%,100%{transform:none;opacity:0}}
  @keyframes pcMd1{0%,30%{background:#2563eb;color:#fff}38%,100%{background:#eef2ff;color:#8fb0f6}}
  @keyframes pcMd2{0%,33%{background:#eef2ff;color:#8fb0f6}38%,63%{background:#2563eb;color:#fff}71%,100%{background:#eef2ff;color:#8fb0f6}}
  @keyframes pcMd3{0%,66%{background:#eef2ff;color:#8fb0f6}71%,92%{background:#2563eb;color:#fff}98%,100%{background:#eef2ff;color:#8fb0f6}}
  .cs-hero,.qv-hero{overflow:hidden}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .cs-pc-card:nth-child(n+2){display:none}
}
@media (max-width:991px){.di-meth{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767px){.di-ask ul{flex-direction:column;align-items:flex-start}.di-meth li{padding:22px}}