/* ---------- hero ---------- */
.intro.svm-intro {
    display: flex;
    align-items: center;
    min-height: calc(100vh + 2px);
    min-height: calc(100svh + 2px);
    margin-top: calc(var(--intro-pull, 88px) * -1);
    padding: calc(var(--intro-pull, 88px) + 24px) 0 96px;
    background:
        radial-gradient(ellipse 44% 60% at 74% 50%, rgba(36, 92, 255, 0.24), transparent 72%),
        radial-gradient(ellipse 34% 40% at 6% 100%, rgba(58, 184, 255, 0.07), transparent 70%),
        linear-gradient(180deg, #071225 0%, #0b1220 100%);
}
/* fond propre a chaque sujet : couches, plan, nuage de points, reperes d'essai */
.svm-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    -webkit-mask-image: radial-gradient(ellipse 56% 74% at 72% 50%, #000, transparent 76%);
    mask-image: radial-gradient(ellipse 56% 74% at 72% 50%, #000, transparent 76%);
    translate: 0 calc(var(--hp, 0) * 70px);
    animation: svmFade 2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
    pointer-events: none;
}
.svm-intro[data-topic="printing"] .svm-backdrop { overflow: hidden; }
/* couches : le calque depasse de 200 px (20 pas de 10 px) et monte par translate, sans repeindre le fond */
.svm-intro[data-topic="printing"] .svm-backdrop::before {
    content: "";
    position: absolute;
    inset: 0 0 -200px;
    background-image: repeating-linear-gradient(0deg, rgba(120, 175, 255, 0.09) 0 1px, transparent 1px 10px);
    animation: svmLayers 14s linear infinite;
}
.svm-intro[data-topic="modeling"] .svm-backdrop {
    background-image:
        linear-gradient(rgba(120, 175, 255, 0.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 175, 255, 0.13) 1px, transparent 1px),
        linear-gradient(rgba(120, 175, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 175, 255, 0.06) 1px, transparent 1px);
    background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
}
.svm-intro[data-topic="reproduction"] .svm-backdrop {
    background-image: radial-gradient(rgba(127, 211, 255, 0.2) 1px, transparent 1.3px);
    background-size: 14px 14px;
}
.svm-intro[data-topic="reproduction"] .svm-backdrop::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 120px;
    background: linear-gradient(180deg, transparent, rgba(58, 184, 255, 0.16) 92%, rgba(127, 211, 255, 0.5));
    animation: svmSweep 7s cubic-bezier(0.65, 0, 0.35, 1) 1s infinite;
}
.svm-intro[data-topic="prototyping"] .svm-backdrop {
    background-image:
        linear-gradient(90deg, transparent 20px, rgba(120, 175, 255, 0.2) 20px 29px, transparent 29px),
        linear-gradient(transparent 20px, rgba(120, 175, 255, 0.2) 20px 29px, transparent 29px);
    background-size: 48px 48px;
    background-position: 0 24px, 24px 0;
}
.svm-intro[data-topic="pros"] .svm-backdrop {
    background-image:
        repeating-linear-gradient(90deg, rgba(120, 175, 255, 0.1) 0 1px, transparent 1px 64px),
        radial-gradient(rgba(127, 211, 255, 0.18) 1px, transparent 1.3px);
    background-size: auto, 16px 16px;
}
@keyframes svmFade { from { opacity: 0; } }
@keyframes svmLayers { to { transform: translateY(-200px); } }
@keyframes svmSweep {
    0% { transform: translateY(-140px); opacity: 0; }
    12% { opacity: 1; }
    70% { transform: translateY(calc(100svh + 20px)); opacity: 1; }
    71%, 100% { transform: translateY(calc(100svh + 20px)); opacity: 0; }
}
.svm-intro .intro-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.98fr);
    align-items: center;
    gap: 48px;
}
.svm-intro .intro-copy { max-width: 600px; }
.svm-intro .intro-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.62);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    animation: introFade 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}
.svm-intro .intro-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #3ab8ff;
}
/* halo : disque translucide qui grossit et s'estompe (remplace l'animation de box-shadow) */
.svm-intro .intro-kicker { position: relative; }
.svm-intro .intro-kicker::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 999px;
    background: rgba(58, 184, 255, 0.55);
    opacity: 0;
    pointer-events: none;
    animation: svmPing 2.4s ease-out 1.2s infinite;
}
@keyframes svmPing {
    0% { transform: scale(1); opacity: 1; }
    70%, 100% { transform: scale(var(--ring, 3)); opacity: 0; }
}
.svm-intro .intro-title {
    font-size: clamp(2.3rem, 4.2vw, 3.7rem);
    font-weight: 600;
    line-height: 1.05;
    color: #ffffff;
}
.svm-intro .intro-lead { margin-top: 24px; max-width: 52ch; font-size: 1.06rem; }
.svm-price {
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 3px 18px;
    max-width: 100%;
    margin: 26px 0 0;
    padding: 12px 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    animation: introFade 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.72s both;
}
.svm-price span {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #3ab8ff;
}
.svm-price strong {
    grid-row: 2;
    font-size: 1.16rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: #ffffff;
}
.svm-price small {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding-left: 18px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.8rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.62);
}
.svm-intro .intro-actions { margin-top: 28px; }
.svm-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}
.svm-proof li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.86);
    animation: introFade 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(0.95s + var(--k, 0) * 0.09s) both;
}
.svm-proof li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: #3ab8ff;
}
/* scene du hero */
.svm-stage {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-width: 0;
    padding: 24px 0;
    justify-self: end;
    animation: introFade 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}
.svm-rings {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}
.svm-rings i {
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid rgba(120, 175, 255, 0.14);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: svmRing 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
.svm-rings i:nth-child(1) { width: 520px; height: 520px; }
.svm-rings i:nth-child(2) {
    width: 680px;
    height: 680px;
    border-style: dashed;
    border-color: rgba(120, 175, 255, 0.1);
    animation: svmRing 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both, svmTurn 90s linear infinite;
}
@keyframes svmRing { from { opacity: 0; scale: 0.6; } }
@keyframes svmTurn { to { rotate: 360deg; } }
.svm-intro .svm-panel {
    transform: perspective(1400px) rotateY(calc(var(--mx, 0) * -4deg)) rotateX(calc(var(--my, 0) * 3deg));
    transition: transform 0.35s ease-out;
    animation: svmOpen 1s cubic-bezier(0.65, 0, 0.35, 1) 0.45s both;
}
@keyframes svmOpen {
    from { clip-path: inset(0 0 100% 0); opacity: 0.4; }
    to { clip-path: inset(-14px -14px -14px -14px); opacity: 1; }
}
/* defilement : le hero s'efface en descendant, revient en remontant */
.svm-intro .intro-copy {
    translate: 0 calc(var(--hp, 0) * -48px);
    filter: opacity(calc(1 - var(--hp, 0) * 1.15));
}
.svm-intro .svm-stage {
    translate: 0 calc(var(--hp, 0) * -26px);
    scale: calc(1 - var(--hp, 0) * 0.14);
    filter: opacity(calc(1 - var(--hp, 0) * 1.25));
}
/* hors ecran : les entrees sont retirees, elles se rejouent au retour */
.svm-intro.is-away *,
.svm-intro.is-away *::before,
.svm-intro.is-away *::after {
    animation: none !important;
}
.svm-scroll {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 22px;
    display: grid;
    justify-items: center;
    gap: 8px;
    transform: translateX(-50%);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    opacity: calc(1 - var(--hp, 0) * 3);
}
.svm-scroll i {
    position: relative;
    width: 1px;
    height: 34px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.2);
}
.svm-scroll i::after {
    content: "";
    position: absolute;
    left: 0;
    top: -40%;
    width: 1px;
    height: 40%;
    background: #3ab8ff;
    animation: introScrollT 1.9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.svm-scroll:focus-visible { outline: 2px solid #3ab8ff; outline-offset: 4px; }
/* ---------- panneau anime (hero et deroule) ---------- */
.svm-panel {
    --p0: 1;
    --p1: 1;
    --p2: 1;
    --p3: 1;
    --a0: 0;
    --a1: 0;
    --a2: 0;
    --a3: 0;
    --g: 1;
    --osc: 0;
    position: relative;
    z-index: 1;
    width: min(100%, 560px);
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    background: linear-gradient(180deg, #0c1c3d 0%, #091530 100%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.svm-brackets i {
    position: absolute;
    z-index: 3;
    width: 18px;
    height: 18px;
    border: 0 solid #3ab8ff;
    pointer-events: none;
    animation: svmBracket 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.2s both;
}
.svm-brackets i:nth-child(1) { left: -9px; top: -9px; border-width: 2px 0 0 2px; }
.svm-brackets i:nth-child(2) { right: -9px; top: -9px; border-width: 2px 2px 0 0; }
.svm-brackets i:nth-child(3) { left: -9px; bottom: -9px; border-width: 0 0 2px 2px; }
.svm-brackets i:nth-child(4) { right: -9px; bottom: -9px; border-width: 0 2px 2px 0; }
@keyframes svmBracket {
    from { opacity: 0; transform: scale(0.3); }
    to { opacity: 1; transform: none; }
}
.svm-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}
.svm-live { display: inline-flex; align-items: center; gap: 7px; color: #7fd3ff; white-space: nowrap; }
.svm-live b { font-weight: 600; }
.svm-live i {
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3ab8ff;
}
.svm-live i::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(58, 184, 255, 0.55);
    opacity: 0;
    pointer-events: none;
    --ring: 3.6667;
    animation: svmPing 2.4s ease-out infinite;
}
.svm-panel-body { padding: 8px 12px 2px; }
.svm-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    transition: opacity 0.4s ease;
}
.svm-panel.is-reset .svm-svg { opacity: 0; }
.svm-phases {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 10px 16px 14px;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.svm-phases i {
    position: relative;
    display: block;
    height: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.14);
}
.svm-phases i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #245cff, #3ab8ff);
    transform-origin: left center;
    transform: scaleX(var(--f, 1));
}
.svm-phases span {
    display: block;
    margin-top: 7px;
    overflow: hidden;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.42);
    transition: color 0.3s ease;
}
.svm-phases b { font-weight: 600; color: rgba(58, 184, 255, 0.7); }
.svm-phases li.is-now span,
.svm-phases li.is-done span { color: rgba(255, 255, 255, 0.86); }
.svm-phases li.is-now b { color: #3ab8ff; }
/* ---------- vocabulaire commun des scenes ---------- */
.svm-svg text {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
}
.svm-svg .t-mono { fill: rgba(255, 255, 255, 0.5); }
.svm-svg .t-sky { fill: #3ab8ff; font-weight: 600; }
.svm-svg .t-white { fill: #ffffff; }
.svm-svg .hud { font-size: 10.5px; }
.svm-svg .t-val {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    fill: #ffffff;
}
.svm-svg .t-val.sm { font-size: 12px; }
.svm-svg .t-hand {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-size: 14px;
    font-style: italic;
    letter-spacing: 0;
    fill: rgba(255, 255, 255, 0.74);
}
.svm-svg .ln { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }
.svm-svg .card { fill: rgba(255, 255, 255, 0.035); stroke: rgba(255, 255, 255, 0.14); }
.svm-svg .card-hi { fill: rgba(36, 92, 255, 0.12); stroke: rgba(58, 184, 255, 0.5); }
.svm-svg .chip { fill: rgba(255, 255, 255, 0.04); stroke: rgba(255, 255, 255, 0.12); }
.svm-svg .chip-hi { fill: rgba(36, 92, 255, 0.22); stroke: rgba(58, 184, 255, 0.55); }
.svm-svg .draw { stroke-dasharray: 1 1; }
.svm-svg :is(.pr-slice-mask, .pr-build-mask, .pr-stamp, .md-print-mask, .md-ok, .rp-swept, .rp-print-mask, .rp-mark, .pt-ok) { transform-box: fill-box; }
/* ---------- scene : impression ---------- */
.svm-printing {
    --b: clamp(0, (var(--p3) - 0.1) * 1.4286, 1);
    --dn: clamp(0, var(--p3) * 10, 1);
    --ok: clamp(0, (var(--p3) - 0.84) * 6.25, 1);
}
.pr-bed { fill: rgba(255, 255, 255, 0.1); stroke: rgba(255, 255, 255, 0.24); }
.pr-wire {
    fill: none;
    stroke: #3ab8ff;
    stroke-width: 1.4;
    stroke-dashoffset: calc(1 - clamp(0, var(--p0) * 1.4, 1));
    opacity: calc(0.9 - var(--b) * 0.5);
}
.pr-wire-hole {
    fill: none;
    stroke: #3ab8ff;
    stroke-width: 1.2;
    stroke-dashoffset: calc(1 - clamp(0, (var(--p0) - 0.4) * 2, 1));
    opacity: calc(0.9 - var(--b) * 0.5);
}
.pr-slices { fill: none; stroke: rgba(58, 184, 255, 0.5); stroke-width: 1; opacity: calc(1 - var(--b)); }
.pr-slice-mask { transform-origin: 0 50%; transform: scaleX(var(--p1)); }
.pr-orient { opacity: calc(clamp(0, (var(--p1) - 0.55) * 4, 1) * (1 - var(--dn))); }
.pr-build-mask { transform-origin: 50% 100%; transform: scaleY(var(--b)); }
.pr-front {
    fill: #9fdcff;
    transform: translateY(calc(var(--b) * -128px));
    opacity: calc(var(--a3) * var(--dn) * (1 - var(--ok)));
    filter: drop-shadow(0 0 5px #3ab8ff);
}
.pr-gantry { transform: translateY(calc(var(--b) * -128px - (1 - var(--dn)) * 268px)); }
.pr-beam { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 3; stroke-linecap: round; }
.pr-head { transform: translateX(calc(var(--osc) * 86px * var(--a3) * (1 - var(--ok)))); }
.pr-head-body { fill: #0c1c3d; stroke: rgba(255, 255, 255, 0.62); stroke-width: 1.2; }
.pr-feed { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.4; }
.pr-nozzle { fill: #3ab8ff; }
.pr-glow { fill: #3ab8ff; opacity: calc(var(--a3) * 0.32 * (1 - var(--ok))); }
.pr-stamp {
    opacity: var(--ok);
    transform-origin: center;
    transform: scale(calc(0.6 + var(--ok) * 0.4));
}
.pr-stamp circle { fill: rgba(36, 92, 255, 0.28); stroke: #3ab8ff; stroke-width: 1.4; }
.pr-stamp path { fill: none; stroke: #ffffff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pr-done { opacity: var(--ok); }
.pr-file { opacity: var(--p0); transform: translateX(calc((1 - var(--p0)) * -18px)); }
.pr-doc { fill: none; stroke: #3ab8ff; stroke-width: 1.3; stroke-linejoin: round; }
.pr-feasible { opacity: clamp(0, (var(--p1) - 0.6) * 4, 1); }
.pr-mats {
    opacity: clamp(0, var(--p1) * 3, 1);
    transform: translateY(calc((1 - clamp(0, var(--p1) * 3, 1)) * 10px));
}
.pr-mat-hi {
    fill: rgba(36, 92, 255, 0.3);
    stroke: #3ab8ff;
    transform: translateY(calc(clamp(0, (var(--p1) - 0.3) * 2.5, 1) * 30px));
}
.pr-mat .chip { fill: transparent; }
.pr-mat .spool { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 2.6; }
.pr-mat:nth-of-type(2) .spool { stroke: #3ab8ff; }
.pr-quote { opacity: var(--p2); transform: translateY(calc((1 - var(--p2)) * 16px)); }
.pr-quote .row { opacity: clamp(0, (var(--p2) - 0.25 - var(--k) * 0.2) * 4, 1); }
/* ---------- scene : modelisation ---------- */
.svm-modeling {
    --ex: clamp(0, (var(--p2) - 0.66) * 3, 1);
    --pr: clamp(0, var(--p3) * 1.6, 1);
    --ok: clamp(0, (var(--p3) - 0.5) * 4, 1);
    --xp: clamp(0, (var(--p3) - 0.66) * 4, 1);
}
.md-paper { opacity: calc(clamp(0, var(--p0) * 3, 1) * (1 - clamp(0, var(--p2) * 1.6, 1) * 0.72)); }
.md-sheet { fill: rgba(255, 255, 255, 0.05); stroke: rgba(255, 255, 255, 0.2); }
.md-sketch {
    fill: none;
    stroke: rgba(255, 255, 255, 0.84);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dashoffset: calc(1 - clamp(0, var(--p0) * 1.5 - 0.1, 1));
}
.md-note {
    fill: none;
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 1.1;
    stroke-dashoffset: calc(1 - clamp(0, (var(--p0) - 0.55) * 3, 1));
}
.md-note-t { opacity: clamp(0, (var(--p0) - 0.65) * 3, 1); }
.md-photo { opacity: clamp(0, (var(--p0) - 0.3) * 3, 1); }
.md-cam { fill: none; stroke: #3ab8ff; stroke-width: 1.2; stroke-linejoin: round; }
.md-chip {
    --in: clamp(0, (var(--p1) - var(--k) * 0.28) * 3.5, 1);
    opacity: var(--in);
    transform: translateX(calc((1 - var(--in)) * 18px));
}
.md-cad {
    fill: none;
    stroke: #3ab8ff;
    stroke-width: 1.8;
    stroke-linejoin: round;
    stroke-dashoffset: calc(1 - clamp(0, var(--p2) * 2.4, 1));
}
.md-hole {
    fill: none;
    stroke: #3ab8ff;
    stroke-width: 1.5;
    stroke-dashoffset: calc(1 - clamp(0, (var(--p2) - 0.25) * 4, 1));
}
.md-dim { opacity: clamp(0, (var(--p2) - 0.3) * 4, 1); }
.md-dim path { fill: none; stroke: rgba(255, 255, 255, 0.45); stroke-width: 1; }
.md-cons g { opacity: clamp(0, (var(--p2) - 0.48 - var(--k) * 0.06) * 6, 1); }
.md-cons rect { fill: rgba(36, 92, 255, 0.32); stroke: #3ab8ff; }
.md-cons text { fill: #ffffff; font-size: 9px; letter-spacing: 0; }
.md-extrude {
    opacity: var(--ex);
    transform: translate(calc((1 - var(--ex)) * -12px), calc((1 - var(--ex)) * 9px));
}
.md-side { fill: rgba(58, 184, 255, 0.14); stroke: rgba(58, 184, 255, 0.55); stroke-width: 1; stroke-linejoin: round; }
.md-side-dark { fill: rgba(36, 92, 255, 0.24); }
.md-print-mask { transform-origin: 50% 100%; transform: scaleY(var(--pr)); }
.md-ok { opacity: var(--ok); transform-origin: center; transform: scale(calc(0.7 + var(--ok) * 0.3)); }
.md-ok circle { fill: rgba(36, 92, 255, 0.3); stroke: #3ab8ff; stroke-width: 1.4; }
.md-ok path { fill: none; stroke: #ffffff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.md-export { opacity: var(--xp); transform: translateY(calc((1 - var(--xp)) * 10px)); }
/* ---------- scene : reproduction ---------- */
.svm-reproduction {
    --mesh: clamp(0, var(--p2) * 3, 1);
    --cad: clamp(0, (var(--p2) - 0.25) * 2.2, 1);
    --gap: clamp(0, (var(--p2) - 0.6) * 3, 1);
    --pr: clamp(0, var(--p3) * 1.7, 1);
    --bolt: clamp(0, (var(--p3) - 0.55) * 3, 1);
    --ok: clamp(0, (var(--p3) - 0.86) * 7, 1);
}
.rp-real {
    fill: rgba(255, 255, 255, 0.04);
    stroke: rgba(255, 255, 255, 0.8);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-dashoffset: calc(1 - clamp(0, var(--p0) * 2, 1));
    opacity: calc(1 - var(--cad) * 0.65);
}
.rp-real-hole {
    fill: none;
    stroke: rgba(255, 255, 255, 0.8);
    stroke-width: 1.4;
    stroke-dashoffset: calc(1 - clamp(0, (var(--p0) - 0.3) * 2.5, 1));
    opacity: calc(1 - var(--cad) * 0.65);
}
.rp-crack {
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.8;
    stroke-linejoin: round;
    stroke-dashoffset: calc(1 - clamp(0, (var(--p0) - 0.3) * 3, 1));
    opacity: calc(1 - var(--pr));
}
.rp-cloud { opacity: calc(1 - var(--mesh) * 0.75); }
.rp-swept { transform-origin: 50% 0; transform: scaleY(var(--p1)); }
.rp-mesh { opacity: calc(var(--mesh) * (1 - var(--pr)) * 0.9); }
.rp-print-mask { transform-origin: 50% 100%; transform: scaleY(var(--pr)); }
.rp-cad {
    fill: none;
    stroke: #3ab8ff;
    stroke-width: 1.8;
    stroke-linejoin: round;
    stroke-dashoffset: calc(1 - var(--cad));
}
.rp-gap { fill: rgba(58, 184, 255, 0.42); stroke: #9fdcff; stroke-width: 1.4; stroke-dasharray: 3 3; opacity: calc(var(--gap) * (1 - var(--pr) * 0.6)); }
.rp-gap-label { opacity: calc(var(--gap) * (1 - var(--bolt))); }
.rp-gap-label path { fill: none; stroke: #3ab8ff; stroke-width: 1; }
.rp-mark {
    --in: clamp(0, (var(--p0) - 0.45 - var(--k) * 0.15) * 5, 1);
    opacity: calc(var(--in) * (1 - clamp(0, var(--p1) * 3, 1)));
    transform-origin: center;
    transform: scale(calc(0.4 + var(--in) * 0.6));
}
.rp-mark circle { fill: #245cff; stroke: #7fd3ff; stroke-width: 1.2; }
.rp-mark text { fill: #ffffff; font-size: 10px; font-weight: 600; letter-spacing: 0; }
.rp-legend { opacity: calc(clamp(0, (var(--p0) - 0.4) * 4, 1) * (1 - clamp(0, var(--p1) * 3, 1) * 0.55)); }
.rp-leg { opacity: clamp(0, (var(--p0) - 0.45 - var(--k) * 0.15) * 5, 1); }
.rp-dim { opacity: clamp(0, (var(--p1) - 0.4) * 4, 1); }
.rp-dim path { fill: none; stroke: rgba(255, 255, 255, 0.42); stroke-width: 1; }
.rp-bolt { opacity: var(--bolt); transform: translateY(calc((1 - var(--bolt)) * -60px)); }
.rp-bolt rect { fill: #0c1c3d; stroke: rgba(255, 255, 255, 0.75); stroke-width: 1.2; }
.rp-bolt path { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 1; }
.rp-rig { opacity: calc(clamp(0, var(--p1) * 5, 1) * (1 - clamp(0, var(--p2) * 4, 1))); }
.rp-rig rect { fill: #0c1c3d; stroke: rgba(255, 255, 255, 0.5); }
.rp-rig circle { fill: #3ab8ff; }
.rp-laser { transform: translateY(calc(var(--p1) * 206px)); opacity: var(--a1); }
.rp-laser-line { fill: #9fdcff; filter: drop-shadow(0 0 4px #3ab8ff); }
.rp-done { opacity: var(--ok); }
/* ---------- scene : prototypage ---------- */
.svm-prototyping {
    --v1: clamp(0, var(--p1) * 1.8, 1);
    --s: calc(1.3 - 0.18 * clamp(0, var(--p2) * 2.2, 1) - 0.12 * clamp(0, (var(--p2) - 0.5) * 2.2, 1));
    --ok: clamp(0, (var(--p2) - 0.82) * 6, 1);
}
.pt-brief { opacity: var(--p0); transform: translateY(calc((1 - var(--p0)) * 14px)); }
.pt-brief .row { opacity: clamp(0, (var(--p0) - 0.3 - var(--k) * 0.2) * 4, 1); }
.pt-versions { opacity: clamp(0, (var(--p1) - 0.6) * 4, 1); }
.pt-ver:nth-of-type(1) { opacity: clamp(0, (var(--p1) - 0.65) * 4, 1); }
.pt-ver:nth-of-type(2) { opacity: clamp(0, (var(--p2) - 0.3) * 4, 1); }
.pt-ver:nth-of-type(3) { opacity: clamp(0, (var(--p2) - 0.8) * 5, 1); }
.pt-rig { opacity: clamp(0, var(--p1) * 4, 1); }
.pt-axis { fill: rgba(255, 255, 255, 0.08); stroke: rgba(255, 255, 255, 0.72); stroke-width: 1.4; }
.pt-clip {
    transform-box: view-box;
    transform-origin: 390px 104px;
    transform: translateY(calc((1 - var(--v1)) * 30px)) scale(var(--s));
    opacity: var(--v1);
}
.pt-clip circle { fill: none; stroke: #2f6bff; stroke-width: 12; }
.pt-clip rect { fill: #245cff; }
.pt-gap { opacity: calc(clamp(0, (var(--p1) - 0.6) * 4, 1) * (1 - var(--ok))); }
.pt-gap path { fill: none; stroke: #3ab8ff; stroke-width: 1.2; }
.pt-ok { opacity: var(--ok); transform-origin: center; transform: scale(calc(0.6 + var(--ok) * 0.4)); }
.pt-ok circle { fill: rgba(36, 92, 255, 0.3); stroke: #3ab8ff; stroke-width: 1.4; }
.pt-ok path { fill: none; stroke: #ffffff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pt-item {
    --in: clamp(0, (var(--p3) * 1.2 - var(--k) / 13) * 6, 1);
    opacity: var(--in);
    transform: translateY(calc((1 - var(--in)) * -14px));
}
.pt-belt {
    fill: none;
    stroke: rgba(255, 255, 255, 0.26);
    stroke-width: 2;
    stroke-dasharray: 6 8;
    stroke-dashoffset: calc(var(--g) * -280);
}
/* ---------- scene : professionnels ---------- */
.svm-pros {
    --ok: clamp(0, (var(--p3) - 0.35) * 3, 1);
}
.pf-brief { opacity: var(--p0); transform: translateY(calc((1 - var(--p0)) * 14px)); }
.pf-brief .row { opacity: clamp(0, (var(--p0) - 0.25 - var(--k) * 0.17) * 4, 1); }
.pf-quote { opacity: clamp(0, var(--p1) * 4, 1); transform: translateY(calc((1 - clamp(0, var(--p1) * 4, 1)) * 14px)); }
.pf-check { opacity: clamp(0, (var(--p1) - 0.2 - var(--k) * 0.22) * 5, 1); }
.pf-check circle { fill: rgba(36, 92, 255, 0.3); stroke: #3ab8ff; stroke-width: 1.2; }
.pf-check path { fill: none; stroke: #ffffff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf-track { fill: rgba(255, 255, 255, 0.1); }
.pf-fill,
.pf-lotfill { fill: #3ab8ff; transform-box: fill-box; transform-origin: 0 50%; }
.pf-fill { transform: scaleX(clamp(0, (var(--p1) - 0.15) * 1.25, 1)); }
.pf-lot { opacity: clamp(0, var(--p2) * 4, 1); }
.pf-cell {
    --in: clamp(0, (var(--p2) * 1.3 - 0.15 - var(--k) / 55) * 7, 1);
    fill: #245cff;
    stroke: rgba(58, 184, 255, 0.55);
    opacity: var(--in);
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(calc(0.6 + var(--in) * 0.4));
}
.pf-lotfill { transform: scaleX(clamp(0, (var(--p2) - 0.1) * 1.15, 1)); }
.pf-ship { opacity: clamp(0, var(--p3) * 4, 1); transform: translateY(calc((1 - clamp(0, var(--p3) * 4, 1)) * 14px)); }
.pf-box path { fill: none; stroke: #7fd3ff; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.pf-done { opacity: var(--ok); transform-box: fill-box; transform-origin: center; transform: scale(calc(0.6 + var(--ok) * 0.4)); }
.pf-done circle { fill: rgba(36, 92, 255, 0.3); stroke: #3ab8ff; stroke-width: 1.4; }
.pf-done path { fill: none; stroke: #ffffff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pf-belt {
    fill: none;
    stroke: rgba(255, 255, 255, 0.26);
    stroke-width: 2;
    stroke-dasharray: 6 8;
    stroke-dashoffset: calc(var(--g) * -280);
}
/* ---------- sections ---------- */
.svm-section { padding: 128px 0; }
.svm-cases,
.svm-methods { background: #f4f7fb; }
.svm-groups,
.svm-routes { background: #ffffff; border-block: 1px solid #dde6f1; }
.svm-head { max-width: 760px; margin-bottom: 64px; }
.svm-head-split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 24px 64px;
    align-items: end;
    max-width: none;
}
.svm-head-split > p,
.svm-head > p:not(.svm-kicker) {
    margin: 0;
    max-width: 52ch;
    color: #4f6177;
    font-size: 1.04rem;
    line-height: 1.65;
}
.svm-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 26px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #4f6177;
}
.svm-kicker span { color: #245cff; }
.svm-kicker::before {
    content: "";
    order: -1;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #245cff;
}
body.svm-page .svm-head h2,
body.svm-page .svm-flow-head h2 {
    margin: 0;
    font-size: clamp(1.9rem, 3.2vw, 2.7rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #0b1220;
    text-wrap: balance;
}
/* entree commune des en-tetes : le titre monte, le texte suit (aller et retour) */
[data-sm-in] .svm-head > *,
[data-sm-in] .svm-head-split > div > * {
    opacity: 0;
    translate: 0 22px;
    transition: opacity 0.6s ease, translate 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-sm-in] .svm-head > :nth-child(2),
[data-sm-in] .svm-head-split > div > :nth-child(2) { transition-delay: 0.08s; }
[data-sm-in] .svm-head-split > p { transition-delay: 0.16s; }
[data-sm-in].is-in .svm-head > *,
[data-sm-in].is-in .svm-head-split > div > * { opacity: 1; translate: none; }
/* cartes de cas */
.svm-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.svm-card,
.svm-tool {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 26px 28px;
    border: 1px solid #dde6f1;
    border-radius: 6px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfe 100%);
    box-shadow: 0 1px 0 #ffffff inset, 0 8px 20px rgba(15, 23, 42, 0.035);
    opacity: 0;
    translate: 0 34px;
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition:
        opacity 0.6s ease,
        translate 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
    transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s, 0s;
}
.is-in .svm-card,
.is-in .svm-tool { opacity: 1; translate: none; }
.svm-card::before,
.svm-tool::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: -1px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #245cff, #3ab8ff);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(0.3s + var(--i, 0) * 90ms);
}
.is-in .svm-card::before,
.is-in .svm-tool::before { transform: scaleX(1); }
/* reflet qui suit le pointeur */
.svm-card::after,
.svm-tool::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 0%), rgba(36, 92, 255, 0.07), transparent 65%);
    opacity: var(--ga, 0);
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.svm-card:hover,
.svm-tool:hover {
    border-color: rgba(36, 92, 255, 0.38);
    box-shadow: 0 1px 0 #ffffff inset, 0 16px 34px rgba(15, 23, 42, 0.075);
}
.svm-card-index {
    margin-bottom: 30px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #245cff;
}
.svm-card h3,
.svm-tool h3 { margin: 0 0 10px; font-size: 1.16rem; line-height: 1.25; letter-spacing: -0.01em; color: #0b1220; }
.svm-card p,
.svm-tool > p:not(.svm-tool-top) { margin: 0; color: #4f6177; font-size: 0.95rem; line-height: 1.6; }
.svm-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 22px;
    color: #0759b5;
    font-size: 0.88rem;
    font-weight: 650;
    text-decoration: none;
}
.svm-card-link span { transition: transform 0.25s ease; }
.svm-card-link:hover span,
.svm-card-link:focus-visible span { transform: translateX(4px); }
.svm-card-link:focus-visible { outline: 3px solid rgba(36, 92, 255, 0.35); outline-offset: 3px; border-radius: 2px; }
/* methodes (reproduction) */
.svm-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}
.svm-tool-top {
    display: flex;
    justify-content: space-between;
    margin: 0 0 30px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #66758a;
}
.svm-tool-top span { color: #245cff; }
.svm-tool dl { display: grid; gap: 0; margin: 26px 0 0; margin-top: auto; padding-top: 24px; }
.svm-tool dl > div { padding: 12px 0; border-top: 1px solid #edf2f8; }
.svm-tool dt {
    margin-bottom: 3px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #66758a;
}
.svm-tool dd { margin: 0; color: #0b1220; font-size: 0.92rem; font-weight: 600; line-height: 1.4; }
.svm-tool.is-featured {
    border-color: #0b1220;
    background:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 28px 28px,
        #0b1220;
}
.svm-tool.is-featured h3,
.svm-tool.is-featured dd { color: #ffffff; }
.svm-tool.is-featured > p:not(.svm-tool-top) { color: rgba(255, 255, 255, 0.72); }
.svm-tool.is-featured :is(.svm-tool-top, dt) { color: rgba(255, 255, 255, 0.55); }
.svm-tool.is-featured .svm-tool-top span { color: #3ab8ff; }
.svm-tool.is-featured dl > div { border-color: rgba(255, 255, 255, 0.12); }
/* guide de choix : chaque ligne s'allume au defilement, s'eteint en remontant */
.svm-choices {
    margin-top: 28px;
    padding: 30px 32px 18px;
    border: 1px solid #dde6f1;
    border-radius: 6px;
    background: #ffffff;
}
.svm-choices h3 { margin: 0 0 14px; font-size: 1.16rem; color: #0b1220; }
.svm-choices ol { margin: 0; padding: 0; list-style: none; }
.svm-choices li {
    --on: clamp(0, var(--sp, 1) * (var(--n) + 0.6) - var(--k), 1);
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(40px, 0.5fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid #edf2f8;
    opacity: calc(0.32 + var(--on) * 0.68);
}
.svm-choices li span { color: #4f6177; font-size: 0.96rem; }
.svm-choices li strong { color: #0b1220; font-size: 0.98rem; }
.svm-choices li i {
    position: relative;
    height: 1px;
    background: repeating-linear-gradient(90deg, #c8d4e5 0 4px, transparent 4px 8px);
}
.svm-choices li i::after {
    content: "";
    position: absolute;
    inset: -0.5px 0;
    background: linear-gradient(90deg, #245cff, #3ab8ff);
    transform-origin: left center;
    transform: scaleX(var(--on));
}
.svm-choices li i::before {
    content: "";
    position: absolute;
    right: -3px;
    top: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #245cff;
    transform: scale(var(--on));
}
/* deux colonnes */
.svm-group-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.svm-group {
    position: relative;
    overflow: hidden;
    padding: 32px 32px 20px;
    border: 1px solid #dde6f1;
    border-radius: 6px;
    background: #f9fbfe;
    opacity: 0;
    translate: 0 30px;
    transition: opacity 0.6s ease, translate 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 110ms);
}
.is-in .svm-group { opacity: 1; translate: none; }
.svm-group::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #245cff, #3ab8ff);
    transform-origin: left center;
    transform: scaleX(var(--sp, 1));
}
.svm-group h3 { margin: 0; font-size: 1.2rem; color: #0b1220; }
.svm-group-usage { margin: 8px 0 0; color: #4f6177; font-size: 0.92rem; line-height: 1.55; }
.svm-group-usage a {
    color: #0759b5;
    font-weight: 650;
    text-decoration: underline;
    text-decoration-color: rgba(7, 89, 181, 0.3);
    text-underline-offset: 3px;
}
.svm-group dl { margin: 20px 0 0; }
.svm-group dl > div {
    --on: clamp(0, (var(--sp, 1) * (var(--n) + 1) - var(--k)) * 1.4, 1);
    display: grid;
    grid-template-columns: minmax(130px, 0.42fr) minmax(0, 1fr);
    gap: 4px 18px;
    padding: 14px 0;
    border-top: 1px solid #e6edf6;
    opacity: calc(0.25 + var(--on) * 0.75);
    translate: calc((1 - var(--on)) * 14px) 0;
}
.svm-group dt { color: #0b1220; font-weight: 650; font-size: 0.95rem; }
.svm-group dd { margin: 0; color: #4f6177; font-size: 0.93rem; line-height: 1.5; }
/* depot ou envoi (reproduction) */
.svm-route-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.svm-route {
    --draw: clamp(0, var(--sp, 1) * 1.5 - var(--i, 0) * 0.25, 1);
    display: grid;
    align-content: start;
    gap: 0;
    padding: 28px 30px 30px;
    border: 1px solid #dde6f1;
    border-radius: 6px;
    background: #f9fbfe;
    opacity: 0;
    translate: 0 30px;
    transition: opacity 0.6s ease, translate 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 110ms);
}
.is-in .svm-route { opacity: 1; translate: none; }
.svm-route:nth-child(2) {
    border-color: #0b1220;
    background:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 28px 28px,
        #0b1220;
}
.svm-route-map { display: block; width: 100%; max-width: 260px; height: auto; margin-bottom: 18px; overflow: visible; }
.svm-route-path {
    fill: none;
    stroke: #245cff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 1 1;
    stroke-dashoffset: calc(1 - var(--draw));
}
.svm-route-a { fill: #ffffff; stroke: #245cff; stroke-width: 2; }
.svm-route-b { fill: #245cff; transform-box: fill-box; transform-origin: center; transform: scale(clamp(0, (var(--draw) - 0.8) * 5, 1)); }
.svm-route:nth-child(2) .svm-route-path { stroke: #3ab8ff; }
.svm-route:nth-child(2) .svm-route-a { fill: #0b1220; stroke: #3ab8ff; }
.svm-route:nth-child(2) .svm-route-b { fill: #3ab8ff; }
.svm-route-top {
    display: flex;
    justify-content: space-between;
    margin: 0 0 14px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #66758a;
}
.svm-route-top span { color: #245cff; }
.svm-route h3 { margin: 0 0 10px; font-size: 1.3rem; color: #0b1220; }
.svm-route > p:not(.svm-route-top) { margin: 0; color: #4f6177; line-height: 1.6; }
.svm-route strong { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e6edf6; color: #0b1220; font-size: 0.92rem; }
.svm-route:nth-child(2) h3,
.svm-route:nth-child(2) strong { color: #ffffff; }
.svm-route:nth-child(2) > p:not(.svm-route-top) { color: rgba(255, 255, 255, 0.72); }
.svm-route:nth-child(2) .svm-route-top { color: rgba(255, 255, 255, 0.55); }
.svm-route:nth-child(2) .svm-route-top span { color: #3ab8ff; }
.svm-route:nth-child(2) strong { border-color: rgba(255, 255, 255, 0.12); }
.svm-route-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 28px;
    margin-top: 28px;
    padding: 22px 26px;
    border: 1px solid #dde6f1;
    border-radius: 6px;
    background: #f4f7fb;
}
.svm-route-cta p { margin: 0; color: #0b1220; font-weight: 600; }
.svm-route-cta p span { color: #245cff; }
/* ---------- deroule : scene epinglee, pilotee par le defilement dans les deux sens ---------- */
.svm-flow {
    --pinned: 1;
    --fp: 0;
    position: relative;
    color: #ffffff;
    background:
        radial-gradient(ellipse 50% 50% at 72% 55%, rgba(36, 92, 255, 0.2), transparent 72%),
        linear-gradient(180deg, #071225 0%, #0b1220 100%);
}
.svm-flow-head { padding-top: 128px; }
.svm-flow-head .svm-kicker { color: rgba(255, 255, 255, 0.6); }
.svm-flow-head .svm-kicker span { color: #3ab8ff; }
.svm-flow-head .svm-kicker::before { background: #3ab8ff; }
body.svm-page .svm-flow-head h2 { max-width: 760px; color: #ffffff; }
.svm-flow-track { height: calc(100svh + 4 * 55svh); }
.svm-flow-pin {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    height: 100svh;
    padding-top: calc(var(--header-h, 72px) + 8px);
    overflow: hidden;
}
.svm-flow-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    align-items: center;
    gap: 64px;
}
.svm-steps {
    position: relative;
    margin: 0;
    padding: 0 0 0 28px;
    list-style: none;
}
.svm-steps::before,
.svm-steps::after {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.12);
}
.svm-steps::after {
    background: linear-gradient(180deg, #245cff, #3ab8ff);
    transform-origin: top center;
    transform: scaleY(var(--fp));
}
.svm-step {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0.38;
    transition: opacity 0.45s ease;
}
.svm-step:first-child { border-top: 0; }
.svm-step.is-done { opacity: 0.62; }
.svm-step.is-now { opacity: 1; }
.svm-step-num {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.76rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.svm-step.is-done .svm-step-num { border-color: rgba(58, 184, 255, 0.5); color: #3ab8ff; }
.svm-step.is-now .svm-step-num { border-color: #245cff; background: #245cff; color: #ffffff; transform: scale(1.06); }
body.svm-page .svm-step h3 { margin: 0 0 6px; font-size: 1.2rem; line-height: 1.25; color: #ffffff; }
body.svm-page .svm-step p { margin: 0; max-width: 44ch; color: rgba(255, 255, 255, 0.7); line-height: 1.55; }
.svm-flow-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
}
.svm-flow-stage .svm-panel { width: min(100%, 580px, (100svh - 250px) * 1.22); }
.svm-flow-rail {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
}
.svm-flow-rail i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #245cff, #3ab8ff);
    transform-origin: left center;
    transform: scaleX(var(--fp));
}
@media (max-width: 1100px) {
.svm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
.intro.svm-intro { align-items: flex-start; padding-bottom: 64px; }
.svm-intro .intro-inner { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.svm-intro .intro-copy { max-width: 640px; }
.svm-stage { justify-self: center; max-width: 560px; padding: 12px 0 0; }
.svm-rings i:nth-child(2) { display: none; }
.svm-rings i:nth-child(1) { width: 420px; height: 420px; }
.svm-scroll { display: none; }
.svm-backdrop {
        -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 74%, #000, transparent 78%);
        mask-image: radial-gradient(ellipse 80% 50% at 50% 74%, #000, transparent 78%);
    }
.svm-section { padding: 88px 0; }
.svm-head { margin-bottom: 40px; }
.svm-head-split { grid-template-columns: minmax(0, 1fr); }
.svm-tools,
    .svm-group-grid,
    .svm-route-grid { grid-template-columns: minmax(0, 1fr); }
/* deroule : la scene reste epinglee en haut, une etape a la fois dessous */
.svm-flow-head { padding-top: 88px; }
.svm-flow-track { height: calc(100svh + 4 * 70svh); }
.svm-flow-pin { align-items: flex-start; padding-top: calc(var(--header-h, 72px) + 16px); }
.svm-flow-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.svm-flow-stage { order: -1; }
.svm-flow-stage .svm-panel { width: min(100%, 520px, (100svh - 330px) * 1.25); }
.svm-steps { display: grid; padding: 0; }
.svm-steps::before,
    .svm-steps::after { display: none; }
.svm-step {
        grid-area: 1 / 1;
        padding: 0;
        border: 0;
        opacity: 0;
        translate: 0 14px;
        transition: opacity 0.4s ease, translate 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
    }
.svm-step.is-done { opacity: 0; translate: 0 -14px; }
.svm-step.is-now { opacity: 1; translate: none; pointer-events: auto; }
}
@media (max-width: 760px) {
.svm-cards { grid-template-columns: minmax(0, 1fr); }
.svm-card-index { margin-bottom: 16px; }
.svm-choices { padding: 24px 20px 10px; }
.svm-choices li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.svm-choices li i { width: 60px; }
.svm-group { padding: 26px 22px 14px; }
.svm-group dl > div { grid-template-columns: minmax(0, 1fr); }
.svm-route { padding: 24px 22px 26px; }
}
@media (max-width: 560px) {
.svm-intro .intro-title { font-size: clamp(2.05rem, 9.4vw, 2.6rem); }
.svm-intro .intro-lead { font-size: 1rem; }
.svm-price { grid-template-columns: minmax(0, 1fr); }
.svm-price small { grid-column: 1; grid-row: auto; padding: 6px 0 0; border-left: 0; }
.svm-intro .intro-actions { display: grid; gap: 10px; }
.svm-intro .intro-actions .hero-btn { justify-content: center; width: 100%; text-align: center; }
.svm-proof { gap: 8px 16px; }
.svm-panel-head { padding: 9px 12px; font-size: 0.56rem; }
.svm-panel-body { padding: 4px 6px 0; }
.svm-phases { gap: 5px; padding: 8px 10px 10px; }
.svm-phases span { font-size: 0.5rem; letter-spacing: 0.04em; }
.svm-phases b { display: none; }
.svm-section { padding: 72px 0; }
.svm-step h3 { font-size: 1.1rem; }
.svm-step p { font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
.svm-backdrop,
    .svm-backdrop::after,
    .svm-intro .intro-kicker,
    .svm-intro .intro-kicker::before,
    .svm-backdrop::before,
    .svm-intro .intro-kicker::after,
    .svm-live i::after,
    .svm-price,
    .svm-proof li,
    .svm-stage,
    .svm-rings i,
    .svm-intro .svm-panel,
    .svm-brackets i,
    .svm-live i,
    .svm-scroll i::after { animation: none; }
.svm-intro .intro-copy,
    .svm-intro .svm-stage,
    .svm-backdrop { translate: none; scale: none; filter: none; }
.svm-intro .svm-panel { transform: none; transition: none; }
[data-sm-in] .svm-head > *,
    [data-sm-in] .svm-head-split > div > *,
    .svm-card,
    .svm-tool,
    .svm-group,
    .svm-route { opacity: 1; translate: none; transform: none; transition: none; }
.svm-card::before,
    .svm-tool::before { transform: scaleX(1); transition: none; }
.svm-flow { --pinned: 0; }
.svm-flow-track { height: auto; }
.svm-flow-pin { position: static; height: auto; padding: 48px 0 112px; overflow: visible; }
.svm-step,
    .svm-step.is-done,
    .svm-step.is-now { grid-area: auto; opacity: 1; translate: none; transition: none; }
.svm-steps::after { transform: scaleY(1); }
.svm-flow-rail { display: none; }
}
@media (max-width: 400px) {
.svm-intro .intro-actions { flex-direction: column; align-items: stretch; gap: 10px; }
.svm-intro .intro-actions .hero-btn,
    .svm-intro .intro-actions .svm-auto-link { width: 100%; justify-content: center; text-align: center; white-space: normal; }
}
@media (max-width: 560px) {
html body.svm-page .svm-intro .intro-actions { justify-items: stretch; justify-content: stretch; }
html body.svm-page .svm-intro .intro-actions > .hero-btn,
    html body.svm-page .svm-intro .intro-actions > .svm-auto-link { width: 100% !important; max-width: none !important; justify-self: stretch; justify-content: center; text-align: center; }
}