/* DSI V12 · ÉLAN 2026 — Orbites croisées, planètes détaillées et comètes.
   Une seule source de tokens. Aucun Bootstrap, aucune surcharge du back-office. */
.dsi-site {
    --dsi-ink: #20223f;
    --dsi-muted: #62647c;
    --dsi-brand: #5840d7;
    --dsi-accent: #00a593;
    --dsi-line: #e7e6f3;
    --dsi-soft: #f6f6ff;
    --dsi-white: #fff;
    --dsi-radius: 1.5rem;
    --dsi-width: 77rem;
    --dsi-gutter: clamp(1.25rem,4.5vw,5rem);
    --dsi-gradient: linear-gradient(115deg,#6442e8 0%,#3d65e8 52%,#009f9f 100%);
    --dsi-ease: cubic-bezier(.2,.8,.2,1);
    margin: 0;
    background: #fff;
    color: var(--dsi-ink);
    font: 400 1rem/1.7 Inter,"Segoe UI",Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
}

    .dsi-site *, .dsi-site *::before, .dsi-site *::after {
        box-sizing: border-box
    }

    .dsi-site :where(h1,h2,h3,h4,p,ul,ol,figure) {
        margin: 0
    }

    .dsi-site :where(h1,h2,h3,h4) {
        color: inherit;
        font-weight: 650;
        line-height: 1.14;
        letter-spacing: -.045em
    }

    .dsi-site h1 {
        font-size: clamp(2.75rem,5.55vw,5rem);
        font-weight: 750;
        letter-spacing: -.06em
    }

    .dsi-site h2 {
        font-size: clamp(2rem,3.8vw,3.5rem)
    }

    .dsi-site h3 {
        font-size: 1.4rem
    }

    .dsi-site p {
        overflow-wrap: break-word
    }

    .dsi-site a {
        color: inherit;
        text-decoration: none;
        text-underline-offset: .25em
    }

    .dsi-site :where(button,input,select,textarea) {
        font: inherit
    }

    .dsi-site button {
        cursor: pointer
    }

    .dsi-site :where(img,svg) {
        display: block;
        max-width: 100%
    }

    .dsi-site img {
        height: auto
    }

    .dsi-site :where(button,a,summary,input,textarea,select):focus-visible {
        outline: 3px solid #8a69ea;
        outline-offset: 5px
    }

    .dsi-site ::selection {
        background: #dad0ff;
        color: #291d65
    }

    .dsi-site :where(section[id],main[id]) {
        scroll-margin-top: 7rem
    }

    .dsi-site .page {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0
    }

    .dsi-site .dsi-container {
        width: min(var(--dsi-width),calc(100% - var(--dsi-gutter)*2));
        margin-inline: auto
    }

    .dsi-site .dsi-section {
        position: relative;
        padding-block: clamp(4rem,7vw,7rem)
    }

    .dsi-site .dsi-section--soft {
        background: linear-gradient(130deg,#f3f9ff,#faf7ff 60%,#fff7ef)
    }

    .dsi-site .dsi-section--dark {
        background: linear-gradient(125deg,#f2f0ff,#f0f8ff 60%,#ecfcf8);
        color: var(--dsi-ink);
        isolation: isolate
    }

    .dsi-site .dsi-grid {
        display: grid;
        grid-template-columns: repeat(var(--dsi-columns,2),minmax(0,1fr));
        gap: clamp(1.25rem,3vw,3rem)
    }

        .dsi-site .dsi-grid > *, .dsi-site .dsi-split > * {
            min-width: 0
        }

    .dsi-site .dsi-grid--three {
        --dsi-columns: 3
    }

    .dsi-site .dsi-grid--four {
        --dsi-columns: 4
    }

    .dsi-site .dsi-split {
        display: grid;
        grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
        gap: clamp(2.5rem,6vw,6rem);
        align-items: start
    }

    .dsi-site .dsi-section-head {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 2rem;
        margin-bottom: 3rem
    }

        .dsi-site .dsi-section-head h2 {
            max-width: 23ch
        }

        .dsi-site .dsi-section-head > p {
            max-width: 35ch;
            color: var(--dsi-muted)
        }

    .dsi-site .dsi-eyebrow {
        display: block;
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .15em;
        line-height: 1.6;
        text-transform: uppercase;
        margin-bottom: 1.2rem;
        color: var(--dsi-brand)
    }

        .dsi-site .dsi-eyebrow::before {
            content: "";
            display: inline-block;
            width: 1.6rem;
            height: 2px;
            vertical-align: middle;
            background: var(--dsi-gradient);
            margin-right: .7rem
        }

    .dsi-site .dsi-lead {
        margin-top: 1.5rem;
        font-size: 1.125rem;
        color: var(--dsi-muted);
        max-width: 48ch
    }

    .dsi-site .dsi-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .875rem;
        margin-top: 2rem
    }

    .dsi-site .dsi-btn {
        position: relative;
        isolation: isolate;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .6rem;
        min-height: 3.25rem;
        padding: .9rem 1.5rem;
        border: 1px solid transparent;
        border-radius: 100px;
        font-size: .9375rem;
        line-height: 1.35;
        font-weight: 650;
        text-align: center;
        background: var(--dsi-gradient);
        color: white;
        box-shadow: 0 7px 22px #6849de24;
        transform: translate3d(var(--bx,0px),var(--by,0px),0);
        transition: transform .22s var(--dsi-ease),box-shadow .25s,background .25s
    }

        .dsi-site .dsi-btn::after {
            content: "";
            position: absolute;
            inset: -5px;
            border: 1px solid #6e50e855;
            border-radius: inherit;
            opacity: 0;
            transform: scale(.98);
            transition: opacity .25s,transform .25s;
            pointer-events: none
        }

        .dsi-site .dsi-btn:hover {
            box-shadow: 0 10px 32px #6241d93d
        }

            .dsi-site .dsi-btn:hover::after {
                opacity: 1;
                transform: scale(1)
            }

    .dsi-site .dsi-btn--light {
        background: var(--dsi-gradient);
        color: white
    }

    .dsi-site .dsi-btn--outline {
        color: var(--dsi-ink);
        background: #ffffffb8;
        border-color: #dcd8ed;
        box-shadow: none
    }

        .dsi-site .dsi-btn--outline:hover {
            background: white;
            box-shadow: 0 8px 24px #5c3cb510
        }

    .dsi-site .dsi-text-link {
        display: inline-block;
        padding-block: .5rem;
        font-size: .9375rem;
        font-weight: 650;
        color: var(--dsi-brand);
        background: linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat;
        transition: background-size .25s,color .25s
    }

        .dsi-site .dsi-text-link:hover {
            color: #098982;
            background-size: 40% 1px
        }

    .dsi-site .dsi-icon {
        width: 1.6rem;
        height: 1.6rem;
        flex: none;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .dsi-site .dsi-gradient-text {
        background: var(--dsi-gradient);
        background-size: 200% auto;
        color: transparent;
        background-clip: text;
        -webkit-background-clip: text;
        animation: dsi3-color-flow 8s ease-in-out infinite alternate
    }
    /* Navigation et barre de progression. */
    .dsi-site .dsi-scroll-progress {
        position: fixed;
        inset: 0 0 auto;
        height: 3px;
        z-index: 100;
        background: linear-gradient(90deg,#8f48eb,#4383f0,#10bba9,#f6b63b);
        transform: scaleX(var(--scroll,0));
        transform-origin: left;
        pointer-events: none
    }

    .dsi-site .dsi-topbar {
        background: #f6f4fd;
        border-bottom: 1px solid #ece8f7;
        font-size: .75rem;
        color: var(--dsi-muted)
    }

        .dsi-site .dsi-topbar .dsi-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            min-height: 2.5rem;
            gap: 1rem
        }

        .dsi-site .dsi-topbar a {
            padding-block: .4rem
        }

    .dsi-site .dsi-topbar-actions {
        display: flex;
        gap: 1.25rem;
        align-items: center
    }

    /* Ancien bouton absent, même si un ancien layout est encore utilisé. */
    .dsi-site [data-motion-toggle] {
        display: none !important
    }

    .dsi-site .dsi-header {
        position: sticky;
        top: 0;
        z-index: 30;
        background: #ffffffd9;
        border-bottom: 1px solid #efedf6;
        backdrop-filter: blur(18px);
        transition: box-shadow .3s,background .3s
    }

        .dsi-site .dsi-header.is-scrolled {
            background: #fffffff2;
            box-shadow: 0 7px 25px #4032730c
        }

    .dsi-site .dsi-header-inner {
        display: flex;
        align-items: center;
        gap: 2rem;
        min-height: 5.8rem
    }

    .dsi-site .dsi-brand {
        display: inline-flex;
        align-items: center;
        gap: .8rem;
        flex: none
    }

        .dsi-site .dsi-brand img {
            width: 3.1rem;
            height: 3.1rem;
            object-fit: contain;
            transition: transform .6s var(--dsi-ease)
        }

        .dsi-site .dsi-brand:hover img {
            transform: rotate(12deg)
        }

        .dsi-site .dsi-brand strong {
            display: block;
            font-size: 1.25rem;
            line-height: 1.2;
            letter-spacing: -.035em
        }

        .dsi-site .dsi-brand small {
            display: block;
            font-size: .75rem;
            line-height: 1.5;
            color: var(--dsi-muted)
        }

    .dsi-site .nav-links {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: clamp(1rem,2vw,2rem);
        flex: 1
    }

        .dsi-site .nav-links > a:not(.dsi-btn) {
            position: relative;
            padding-block: 1rem;
            font-size: .875rem;
            font-weight: 550;
            white-space: nowrap
        }

            .dsi-site .nav-links > a:not(.dsi-btn)::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: .7rem;
                height: 2px;
                border-radius: 10px;
                background: var(--dsi-gradient);
                transform: scaleX(0);
                transform-origin: left;
                transition: transform .3s var(--dsi-ease)
            }

        .dsi-site .nav-links > a:hover::after, .dsi-site .nav-links > a[aria-current="location"]::after {
            transform: scaleX(1)
        }

        .dsi-site .nav-links .dsi-btn {
            font-size: .875rem;
            min-height: 2.8rem;
            padding: .75rem 1.1rem
        }

    .dsi-site .menu-toggle {
        margin-left: auto;
        align-items: center;
        gap: .6rem;
        border: 1px solid var(--dsi-line);
        border-radius: 100px;
        background: white;
        color: var(--dsi-ink);
        min-height: 2.75rem;
        padding: .55rem .85rem;
        font-size: .875rem
    }

    .dsi-site .dsi-menu-lines {
        width: 1.1rem;
        height: .75rem;
        border-block: 1.5px solid currentColor;
        position: relative;
        transition: transform .3s
    }

        .dsi-site .dsi-menu-lines::after {
            content: "";
            position: absolute;
            top: calc(50% - .75px);
            width: 100%;
            border-top: 1.5px solid currentColor
        }

    .dsi-site .menu-toggle[aria-expanded="true"] .dsi-menu-lines {
        transform: rotate(90deg)
    }
    /* Hero : lumière diffuse, particules et marque en mouvement. */
    .dsi-site .dsi-hero {
        position: relative;
        isolation: isolate;
        background: linear-gradient(145deg,#fff 5%,#f8f6ff 65%,#f0fffb);
        overflow: clip
    }

    .dsi-site .dsi-aurora {
        position: absolute;
        inset: 0;
        z-index: -2;
        pointer-events: none;
        overflow: hidden
    }

        .dsi-site .dsi-aurora span {
            position: absolute;
            border-radius: 50%;
            filter: blur(60px);
            opacity: .5;
            animation: dsi3-aurora 13s ease-in-out infinite alternate;
            will-change: transform
        }

            .dsi-site .dsi-aurora span:nth-child(1) {
                width: 35rem;
                height: 35rem;
                right: -7rem;
                top: -12rem;
                background: #cbb1ff
            }

            .dsi-site .dsi-aurora span:nth-child(2) {
                width: 25rem;
                height: 25rem;
                left: 34%;
                bottom: -14rem;
                background: #93ecd9;
                animation-delay: -5s
            }

            .dsi-site .dsi-aurora span:nth-child(3) {
                width: 20rem;
                height: 20rem;
                left: -12rem;
                top: 4rem;
                background: #ffdcae;
                animation-delay: -9s
            }

    .dsi-site .dsi-particles {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        pointer-events: none
    }

    .dsi-site .dsi-hero-main {
        display: grid;
        grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
        gap: 1.75rem;
        align-items: center;
        padding-block: clamp(3.5rem,6vw,6rem) 3.5rem
    }

    .dsi-site .dsi-hero-copy {
        position: relative;
        z-index: 2;
        min-width: 0
    }

    .dsi-site .dsi-hero .dsi-eyebrow {
        display: inline-flex;
        align-items: center;
        background: #ffffffa8;
        border: 1px solid #e5ddfb;
        box-shadow: 0 3px 18px #6b49bd06;
        padding: .6rem .9rem;
        border-radius: 100px;
        font-size: .75rem;
        letter-spacing: .07em;
        margin-bottom: 1.7rem
    }

        .dsi-site .dsi-hero .dsi-eyebrow::before {
            width: .4rem;
            height: .4rem;
            border-radius: 2px;
            margin-right: .65rem;
            background: #7955e9;
            transform: rotate(45deg)
        }

    .dsi-site .dsi-hero h1 {
        line-height: 1.04;
        max-width: 14ch
    }

        .dsi-site .dsi-hero h1 .dsi-word-line {
            display: block;
            white-space: normal;
            font-size: .86em
        }

    .dsi-site .dsi-word {
        display: inline-block;
        transition: opacity .24s,transform .35s var(--dsi-ease),filter .3s
    }

        .dsi-site .dsi-word.is-changing {
            opacity: 0;
            transform: translateY(.18em);
            filter: blur(7px)
        }

    .dsi-site .dsi-hero .dsi-lead {
        max-width: 42ch;
        font-size: 1.125rem;
        line-height: 1.75
    }

    .dsi-site .dsi-hero-note {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .7rem 1.3rem;
        margin-top: 1.8rem;
        font-size: .8125rem;
        color: var(--dsi-muted)
    }

        .dsi-site .dsi-hero-note span {
            display: inline-flex;
            align-items: center;
            gap: .4rem
        }

        .dsi-site .dsi-hero-note svg {
            width: 1rem;
            height: 1rem;
            stroke: #098b82;
            fill: none;
            stroke-width: 2
        }

    .dsi-site .dsi-hero-visual {
        position: relative;
        min-width: 0;
        aspect-ratio: 1;
        perspective: 1000px;
        isolation: isolate
    }

    .dsi-site .dsi-orbit {
        position: absolute;
        inset: 11%;
        border: 1px solid #8e6bed33;
        border-radius: 50%;
        animation: dsi3-orbit 30s linear infinite;
        pointer-events: none
    }

        .dsi-site .dsi-orbit::after {
            content: "";
            position: absolute;
            left: 50%;
            top: -5px;
            width: 10px;
            height: 10px;
            background: #8c63e9;
            border-radius: 50%;
            box-shadow: 0 0 18px #b69bf2
        }

    .dsi-site .dsi-orbit--two {
        inset: 2%;
        border-style: dashed;
        border-color: #6ab6b334;
        animation-direction: reverse;
        animation-duration: 42s
    }

        .dsi-site .dsi-orbit--two::after {
            background: #1ab7a8;
            left: 22%;
            top: 7%;
            box-shadow: 0 0 18px #8befe2
        }

    .dsi-site .dsi-logo-scene {
        position: absolute;
        inset: 22%;
        display: grid;
        place-items: center;
        background: linear-gradient(150deg,#fffffffa,#ffffff75);
        border: 1px solid white;
        border-radius: 50%;
        box-shadow: 0 25px 80px #6b47c12b,inset 0 0 35px #fff;
        transform: none;
        backdrop-filter: blur(5px)
    }

        .dsi-site .dsi-logo-scene::before {
            content: "";
            position: absolute;
            inset: -12%;
            z-index: -1;
            border-radius: 50%;
            background: conic-gradient(from 20deg,#c4bcff00,#cdc0ff80,#91e6d65e,#fde1a857,#c4bcff00);
            filter: blur(25px);
            animation: dsi3-orbit 45s linear infinite
        }

    .dsi-site .dsi-logo-universe, .dsi-site .dsi-orbital-system {
        position: absolute;
        inset: 0;
        pointer-events: none
    }

    .dsi-site .dsi-logo-universe {
        transform: translate3d(0,var(--hero-drift,0px),0) scale(var(--hero-scale,1))
    }

    .dsi-site .dsi-logo-halo {
        position: absolute;
        inset: 12%;
        border-radius: 50%;
        background: conic-gradient(from 50deg,#8060eb33,#4cbbec22,#51d8bc33,#ffcd852b,#e382c02b,#8060eb33);
        filter: blur(25px);
        animation: dsi3-halo-breathe 9s ease-in-out infinite alternate
    }

    .dsi-site .dsi-logo-waves {
        position: absolute;
        inset: 23%;
        pointer-events: none
    }

        .dsi-site .dsi-logo-waves > span {
            position: absolute;
            inset: 0;
            border: 1px solid #8264d9;
            border-radius: 50%;
            opacity: 0;
            animation: dsi3-logo-wave 9s ease-out infinite
        }

            .dsi-site .dsi-logo-waves > span:nth-child(2) {
                animation-delay: -3s;
                border-color: #25b6a0
            }

            .dsi-site .dsi-logo-waves > span:nth-child(3) {
                animation-delay: -6s;
                border-color: #dbae66
            }

    .dsi-site .dsi-orbit--three {
        inset: 18%;
        border: 2px solid transparent;
        border-top-color: #c096ec80;
        border-bottom-color: #6ccbbe70;
        animation-duration: 24s;
        animation-direction: reverse
    }

        .dsi-site .dsi-orbit--three::after {
            width: 6px;
            height: 6px;
            top: -4px;
            background: #d991be
        }

    .dsi-site .dsi-orbit-plane {
        position: absolute;
        inset: 5%;
        transform: rotate(-32deg) scaleY(.68);
        pointer-events: none
    }

    .dsi-site .dsi-orbit--arc {
        inset: 0;
        border-color: #8568c929;
        animation-duration: 34s
    }

        .dsi-site .dsi-orbit--arc::after {
            background: #e8b761;
            box-shadow: 0 0 18px #f6c76b;
            left: 50%;
            top: -5px
        }

    .dsi-site .dsi-satellite {
        position: absolute;
        inset: 4%;
        border-radius: 50%;
        animation: dsi3-orbit 28s linear infinite;
        pointer-events: none
    }

        .dsi-site .dsi-satellite > span {
            position: absolute;
            left: 50%;
            top: 0;
            width: .85rem;
            height: .85rem;
            border: 3px solid white;
            background: #a880e2;
            border-radius: 50%;
            box-shadow: 0 3px 12px #6146a73b
        }

    .dsi-site .dsi-satellite--two {
        inset: 11%;
        animation-direction: reverse;
        animation-duration: 36s;
        animation-delay: -12s
    }

        .dsi-site .dsi-satellite--two > span {
            background: #40b8aa;
            width: .65rem;
            height: .65rem;
            border-width: 2px
        }

    .dsi-site .dsi-satellite--three {
        inset: 17%;
        animation-duration: 32s;
        animation-delay: -7s
    }

        .dsi-site .dsi-satellite--three > span {
            background: #e9b061;
            width: .55rem;
            height: .55rem;
            border-width: 2px
        }

    .dsi-site .dsi-logo-scene {
        pointer-events: auto
    }

    .dsi-site .dsi-logo-mark {
        display: grid;
        place-items: center;
        width: 78%;
        height: 78%;
        position: relative;
        z-index: 1
    }

        .dsi-site .dsi-logo-mark img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: drop-shadow(0 10px 10px #60528520);
            animation: none
        }

    .dsi-site .dsi-logo-shine {
        position: absolute;
        inset: 0;
        overflow: hidden;
        border-radius: inherit;
        pointer-events: none;
        z-index: 2
    }

        .dsi-site .dsi-logo-shine::after {
            content: "";
            position: absolute;
            inset: -30%;
            background: linear-gradient(110deg,transparent 34%,#fff0 38%,#ffffff70 48%,#fff0 58%,transparent 65%);
            animation: dsi3-logo-glint 12s ease-in-out infinite
        }

    .dsi-site .dsi-logo-replay {
        position: absolute;
        right: 0;
        bottom: -1.5rem;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        min-height: 2.75rem;
        padding: .5rem .8rem;
        border: 1px solid #d7cdec;
        border-radius: 100px;
        background: #ffffffc9;
        color: #66508d;
        font-size: .75rem;
        transition: background .25s,box-shadow .25s
    }

        .dsi-site .dsi-logo-replay svg {
            width: 1rem;
            height: 1rem;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.6;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: transform .5s var(--dsi-ease)
        }

        .dsi-site .dsi-logo-replay:hover {
            background: #fff;
            box-shadow: 0 5px 18px #694b9b18
        }

            .dsi-site .dsi-logo-replay:hover svg {
                transform: rotate(-35deg)
            }

    .dsi-site .dsi-float-card {
        position: absolute;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .9rem 1.05rem;
        background: #ffffffeb;
        border: 1px solid white;
        border-radius: 1rem;
        box-shadow: 0 12px 35px #4c3a9120;
        font-size: .8125rem;
        line-height: 1.4;
        animation: dsi3-float 8s ease-in-out infinite;
        backdrop-filter: blur(8px);
        transition: box-shadow .25s
    }

        .dsi-site .dsi-float-card:hover {
            box-shadow: 0 15px 45px #6842c833
        }

        .dsi-site .dsi-float-card strong {
            display: block;
            font-weight: 650
        }

        .dsi-site .dsi-float-card small {
            display: block;
            font-size: .75rem;
            color: var(--dsi-muted);
            margin-top: .15rem
        }

        .dsi-site .dsi-float-card .dsi-icon {
            box-sizing: content-box;
            width: 1.2rem;
            height: 1.2rem;
            padding: .6rem;
            border-radius: .8rem;
            background: #eee8ff;
            color: #7851d1
        }

    .dsi-site .dsi-float-card--dev {
        left: -2%;
        top: 14%;
        animation-delay: -1s
    }

    .dsi-site .dsi-float-card--dev {
        translate: calc(-1 * var(--hero-spread,0px)) calc(-1 * var(--hero-spread,0px))
    }

    .dsi-site .dsi-float-card--cloud {
        right: -3%;
        top: 49%;
        animation-delay: -3s
    }

    .dsi-site .dsi-float-card--cloud {
        translate: var(--hero-spread,0px) calc(-.5 * var(--hero-spread,0px))
    }

        .dsi-site .dsi-float-card--cloud .dsi-icon {
            background: #e3f8f2;
            color: #00856e
        }

    .dsi-site .dsi-float-card--ai {
        left: 7%;
        bottom: 4%;
        animation-delay: -4.5s
    }

    .dsi-site .dsi-float-card--ai {
        translate: 0 calc(-.5 * var(--hero-spread,0px))
    }

        .dsi-site .dsi-float-card--ai .dsi-icon {
            background: #fff0da;
            color: #ae6b14
        }

    .dsi-site .dsi-visual-label {
        position: absolute;
        right: 5%;
        top: 1%;
        font-size: .75rem;
        letter-spacing: .18em;
        color: #777391;
        text-transform: uppercase
    }

    .dsi-site .dsi-hero-bottom {
        display: grid;
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 2rem;
        padding-block: 1.4rem 1.8rem;
        border-top: 1px solid #8f81bd22
    }

        .dsi-site .dsi-hero-bottom > div {
            display: flex;
            align-items: center;
            gap: .8rem
        }

        .dsi-site .dsi-hero-bottom b {
            display: grid;
            place-items: center;
            width: 1.9rem;
            height: 1.9rem;
            border-radius: 50%;
            background: #ebe5fc;
            color: #7044c7;
            font-size: .75rem;
            flex: none
        }

        .dsi-site .dsi-hero-bottom span {
            font-size: .8125rem;
            font-weight: 550;
            color: #615d7a
        }
    /* Ruban animé et présentation. */
    .dsi-site .dsi-marquee {
        overflow: hidden;
        background: var(--dsi-gradient);
        color: white;
        padding: 1.2rem 0;
        position: relative
    }

    .dsi-site .dsi-marquee-track {
        display: flex;
        width: max-content;
        animation: dsi3-ticker 42s linear infinite
    }

        .dsi-site .dsi-marquee-track > div {
            display: flex;
            align-items: center;
            gap: 2.7rem;
            padding-right: 2.7rem;
            flex: none
        }

    .dsi-site .dsi-marquee span {
        font-size: 1rem;
        font-weight: 550;
        letter-spacing: .02em;
        white-space: nowrap
    }

    .dsi-site .dsi-marquee i {
        font-size: 1.2rem;
        font-style: normal;
        color: #d0fdf5
    }

    .dsi-site .dsi-marquee:hover .dsi-marquee-track {
        animation-play-state: paused
    }

    .dsi-site .dsi-intro {
        padding-block: 1.8rem;
        border-bottom: 1px solid var(--dsi-line)
    }

        .dsi-site .dsi-intro .dsi-container {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 1rem 2rem
        }

        .dsi-site .dsi-intro p {
            color: var(--dsi-muted);
            font-size: .875rem
        }

    .dsi-site .dsi-tags {
        display: flex;
        flex-wrap: wrap;
        gap: .6rem 1.35rem;
        font-weight: 600;
        font-size: .875rem;
        color: #565274
    }
    /* Composants et surfaces réactives. */
    .dsi-site .dsi-card {
        --tone: #7952d6;
        --tint: #f0ebff;
        position: relative;
        padding: clamp(1.5rem,3vw,2.3rem);
        border: 1px solid var(--dsi-line);
        border-radius: var(--dsi-radius);
        background: white
    }

    .dsi-site .dsi-services {
        gap: 1.5rem;
        perspective: 1200px
    }

    .dsi-site .dsi-service-card {
        display: flex;
        flex-direction: column;
        align-items: start;
        isolation: isolate;
        background: radial-gradient(500px circle at var(--mx,50%) var(--my,0%),var(--tint),transparent 60%),white;
        transform: perspective(1200px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
        transition: transform .35s var(--dsi-ease),box-shadow .35s,border-color .35s;
        will-change: auto
    }

        .dsi-site .dsi-service-card::before {
            content: "";
            position: absolute;
            left: 2.3rem;
            right: 2.3rem;
            top: -1px;
            height: 2px;
            background: linear-gradient(90deg,transparent,var(--tone),transparent);
            opacity: .6;
            transition: opacity .3s
        }

        .dsi-site .dsi-service-card:hover {
            border-color: color-mix(in srgb,var(--tone) 35%,white);
            box-shadow: 0 25px 55px #59457a12
        }

            .dsi-site .dsi-service-card:hover::before {
                opacity: 1
            }

    .dsi-site .dsi-card-top {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.7rem;
        color: var(--tone)
    }

        .dsi-site .dsi-card-top > .dsi-icon {
            box-sizing: content-box;
            width: 1.55rem;
            height: 1.55rem;
            padding: .9rem;
            background: var(--tint);
            border-radius: 1rem;
            transition: transform .45s var(--dsi-ease),background .3s
        }

    .dsi-site .dsi-service-card:hover .dsi-card-top > .dsi-icon {
        transform: translateY(-5px) rotate(-8deg)
    }

    .dsi-site .dsi-number {
        font-size: .8125rem;
        font-variant-numeric: tabular-nums;
        color: #77728d
    }

    .dsi-site .dsi-card p {
        color: var(--dsi-muted);
        margin-top: 1rem
    }

    .dsi-site .dsi-service-card h3 {
        max-width: 24ch;
        line-height: 1.2
    }

    .dsi-site .dsi-card details {
        width: 100%;
        margin-top: auto;
        padding-top: 1.7rem
    }

        .dsi-site .dsi-card details p {
            font-size: .9375rem
        }

    .dsi-site .dsi-card summary {
        cursor: pointer;
        font-size: .875rem;
        font-weight: 650;
        color: var(--tone);
        padding-block: .4rem;
        list-style: none;
        display: flex;
        justify-content: space-between;
        gap: 1rem
    }

        .dsi-site .dsi-card summary::-webkit-details-marker {
            display: none
        }

        .dsi-site .dsi-card summary::after {
            content: "+";
            font-size: 1.2rem;
            line-height: 1.2;
            transition: transform .3s
        }

    .dsi-site .dsi-card details[open] summary::after {
        transform: rotate(45deg)
    }

    .dsi-site .dsi-card details[open] summary {
        margin-bottom: .6rem
    }

    .dsi-site .dsi-audience {
        margin-top: 0
    }

        .dsi-site .dsi-audience article {
            display: grid;
            grid-template-columns: minmax(7rem,.65fr) minmax(0,1fr);
            gap: 1.5rem;
            padding: 1.6rem 1.4rem;
            border-bottom: 1px solid #deddef;
            transition: background .3s,transform .3s;
            border-radius: .8rem
        }

            .dsi-site .dsi-audience article:hover {
                background: #ffffffb8;
                transform: translateX(5px)
            }

        .dsi-site .dsi-audience h3 {
            font-size: 1.05rem;
            letter-spacing: -.015em;
            line-height: 1.35
        }

        .dsi-site .dsi-audience p {
            font-size: .9375rem;
            color: var(--dsi-muted)
        }

    .dsi-site .dsi-note {
        border: 1px solid #ffffffd9;
        border-left: 3px solid #ad86ec;
        padding: 1.3rem 1.5rem;
        background: #ffffffb0;
        border-radius: 0 1rem 1rem 0;
        margin-top: 2rem;
        box-shadow: 0 8px 35px #6e579509
    }

        .dsi-site .dsi-note p {
            color: var(--dsi-muted);
            font-size: .9375rem
        }

        .dsi-site .dsi-note strong {
            display: block;
            color: var(--dsi-ink);
            margin-bottom: .4rem
        }

    .dsi-site .dsi-city {
        display: grid;
        grid-template-columns: 1.8fr 1fr;
        align-items: stretch;
        margin-top: 3.5rem;
        border: 1px solid white;
        border-radius: var(--dsi-radius);
        overflow: hidden;
        background: #fff;
        box-shadow: 0 18px 60px #5d4c9510
    }

    .dsi-site .dsi-city-photo {
        position: relative;
        overflow: hidden;
        min-height: 15rem
    }

        .dsi-site .dsi-city-photo img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 50% center;
            transform: scale(1.04);
            transition: transform 1s var(--dsi-ease)
        }

    .dsi-site .dsi-city:hover img {
        transform: scale(1.1)
    }

    .dsi-site[data-motion="on"] .dsi-city-photo img {
        transform: translate3d(0,var(--photo-y,0px),0) scale(var(--photo-scale,1.16));
        transition: none
    }

    .dsi-site .dsi-city figcaption {
        padding: 2.1rem;
        display: flex;
        flex-direction: column;
        justify-content: center
    }

    .dsi-site .dsi-city h3 {
        font-size: 1.65rem
    }

    .dsi-site .dsi-city p {
        font-size: .9375rem;
        color: var(--dsi-muted);
        margin-top: .75rem
    }
    /* Méthode et plateforme. */
    .dsi-site .dsi-step {
        position: relative;
        padding-top: 1.8rem;
        border-top: 2px solid #ede8f7
    }

        .dsi-site .dsi-step::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: -2px;
            height: 2px;
            background: var(--dsi-gradient);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 1s var(--dsi-ease)
        }

        .dsi-site .dsi-step.is-visible::before, .dsi-site .dsi-step:hover::before {
            transform: scaleX(1)
        }

        .dsi-site .dsi-step .dsi-number {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            margin-bottom: 1.5rem;
            color: var(--dsi-brand);
            background: #f3effe;
            padding: .4rem .7rem;
            border-radius: 100px;
            font-size: .75rem
        }

        .dsi-site .dsi-step h3 {
            font-size: 1.25rem
        }

        .dsi-site .dsi-step p {
            margin-top: .8rem;
            color: var(--dsi-muted);
            font-size: .9375rem
        }

    .dsi-site .dsi-deliverable {
        display: block;
        font-size: .8125rem;
        color: var(--dsi-brand);
        margin-top: 1.2rem;
        font-weight: 600
    }

    .dsi-site .dsi-platform {
        position: relative;
        border: 1px solid #fff;
        border-radius: var(--dsi-radius);
        background: #ffffffde;
        padding: clamp(1.25rem,3vw,2.5rem);
        box-shadow: 0 20px 70px #7457b71a
    }

        .dsi-site .dsi-platform::before {
            content: "";
            position: absolute;
            inset: -2px;
            z-index: -1;
            border-radius: inherit;
            background: linear-gradient(135deg,#ad91fa,#70ddc7,#ffc98b);
            background-size: 200% 200%;
            animation: dsi3-color-flow 8s ease-in-out infinite alternate
        }

    .dsi-site .dsi-platform-head {
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--dsi-line);
        padding-bottom: 1.5rem;
        margin-bottom: .75rem
    }

        .dsi-site .dsi-platform-head strong {
            font-size: 1.15rem
        }

        .dsi-site .dsi-platform-head span {
            font-size: .75rem;
            color: #7758b3;
            background: #f2edff;
            padding: .35rem .6rem;
            border-radius: 100px
        }

    .dsi-site .dsi-platform details + details {
        border-top: 1px solid var(--dsi-line)
    }

    .dsi-site .dsi-platform summary {
        padding-block: 1rem;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        list-style: none;
        font-size: 1.05rem;
        font-weight: 600
    }

        .dsi-site .dsi-platform summary::-webkit-details-marker {
            display: none
        }

        .dsi-site .dsi-platform summary::after {
            content: "+";
            color: var(--dsi-brand);
            font-weight: 400;
            transition: transform .3s
        }

    .dsi-site .dsi-platform details[open] summary::after {
        transform: rotate(45deg)
    }

    .dsi-site .dsi-platform details[open] summary {
        color: var(--dsi-brand)
    }

    .dsi-site .dsi-platform details p {
        font-size: .9375rem;
        color: var(--dsi-muted);
        padding-bottom: 1.25rem;
        max-width: 45ch
    }

    .dsi-site .dsi-caption {
        display: block;
        font-size: .8125rem;
        color: var(--dsi-muted);
        margin-top: 1.5rem
    }
    /* Contact : détails rassurants, interactions directes. */
    .dsi-site #contact {
        background: radial-gradient(ellipse at 6% 15%,#f9f0ff,transparent 45%),radial-gradient(ellipse at 96% 96%,#e3fcf5,transparent 45%),white
    }

    .dsi-site .dsi-contact-title {
        max-width: 17ch
    }

    .dsi-site .dsi-contact-list {
        display: grid;
        gap: .5rem;
        margin-top: 2rem
    }

        .dsi-site .dsi-contact-list a {
            width: fit-content;
            font-size: 1.1rem;
            padding-block: .35rem;
            overflow-wrap: anywhere;
            font-weight: 550;
            color: var(--dsi-brand)
        }

            .dsi-site .dsi-contact-list a:hover {
                text-decoration: underline
            }

        .dsi-site .dsi-contact-list address {
            font-style: normal;
            font-size: .9375rem;
            color: var(--dsi-muted);
            margin-top: .5rem
        }

    .dsi-site .dsi-form {
        padding: clamp(1.5rem,3vw,2.5rem);
        background: #ffffffeb;
        border: 1px solid var(--dsi-line);
        border-radius: var(--dsi-radius);
        box-shadow: 0 25px 75px #695ba712
    }

        .dsi-site .dsi-form h3 {
            margin-bottom: .5rem
        }

        .dsi-site .dsi-form > p {
            font-size: .875rem;
            color: var(--dsi-muted)
        }

    .dsi-site .dsi-field {
        display: grid;
        gap: .5rem;
        margin-top: 1.2rem
    }

        .dsi-site .dsi-field label {
            font-size: .875rem;
            font-weight: 550
        }

        .dsi-site .dsi-field :where(input,select,textarea) {
            width: 100%;
            min-width: 0;
            border: 1px solid #dedcea;
            border-radius: .8rem;
            background: #faf9ff;
            color: var(--dsi-ink);
            padding: .85rem;
            font-size: 1rem;
            transition: border-color .25s,box-shadow .25s,background .25s
        }

            .dsi-site .dsi-field :where(input,select,textarea):focus {
                border-color: #a28adf;
                background: white;
                box-shadow: 0 0 0 4px #8769d510
            }

        .dsi-site .dsi-field textarea {
            min-height: 7.5rem;
            resize: vertical
        }

    .dsi-site .dsi-form .dsi-btn {
        margin-top: 1.5rem;
        width: 100%
    }

    .dsi-site .dsi-form-note {
        margin-top: 1rem;
        font-size: .8125rem;
        color: var(--dsi-muted)
    }

    .dsi-site .dsi-status {
        padding-top: 1rem;
        font-size: .9375rem;
        color: var(--dsi-brand)
    }

    .dsi-site .dsi-footer {
        background: linear-gradient(110deg,#f3f0fd,#f1f8fb);
        border-top: 1px solid var(--dsi-line);
        padding-block: 2.5rem 1.25rem
    }

    .dsi-site .dsi-footer-main {
        display: flex;
        flex-wrap: wrap;
        align-items: start;
        justify-content: space-between;
        gap: 2rem;
        padding-bottom: 2rem
    }

    .dsi-site .dsi-footer-links {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem 1.75rem;
        font-size: .875rem
    }

        .dsi-site .dsi-footer-links a {
            padding-block: .5rem
        }

    .dsi-site .dsi-footer a:hover {
        text-decoration: underline
    }

    .dsi-site .dsi-footer-bottom {
        border-top: 1px solid var(--dsi-line);
        padding-top: 1.25rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: .6rem 2rem;
        font-size: .75rem;
        color: var(--dsi-muted)
    }

    .dsi-site .back-top {
        position: fixed;
        right: 1rem;
        bottom: 1rem;
        width: 2.9rem;
        height: 2.9rem;
        z-index: 20;
        border: 1px solid #e0d9f3;
        border-radius: 50%;
        background: white;
        color: var(--dsi-brand);
        box-shadow: 0 4px 22px #7456b821;
        transition: transform .25s
    }

        .dsi-site .back-top:hover {
            transform: translateY(-4px)
        }

    .dsi-site .prototype-bar {
        background: #f0e9ff;
        color: #63438f;
        text-align: center;
        padding: .5rem 1rem;
        font-size: .8125rem
    }
    /* Services : mêmes composants, couleurs et gabarits sur toutes les pages. */
    .dsi-site[data-tone="coral"], .dsi-site [data-tone="coral"] {
        --tone: #b94a38;
        --tint: #fff0e8
    }

    .dsi-site[data-tone="teal"], .dsi-site [data-tone="teal"] {
        --tone: #087e72;
        --tint: #e6fbf4
    }

    .dsi-site[data-tone="pink"], .dsi-site [data-tone="pink"] {
        --tone: #a63683;
        --tint: #faebf7
    }

    .dsi-site[data-tone="violet"], .dsi-site [data-tone="violet"] {
        --tone: #7044c7;
        --tint: #f0ebff
    }

    .dsi-site[data-tone="blue"], .dsi-site [data-tone="blue"] {
        --tone: #3164c4;
        --tint: #ebf3ff
    }

    .dsi-site[data-tone="amber"], .dsi-site [data-tone="amber"] {
        --tone: #9e650b;
        --tint: #fff4df
    }

    .dsi-site .dsi-header-inner {
        position: relative
    }

    .dsi-site .nav-links {
        gap: clamp(.85rem,1.7vw,1.5rem)
    }

    .dsi-site .dsi-service-menu > summary {
        display: flex;
        align-items: center;
        gap: .45rem;
        min-height: 2.75rem;
        padding-block: 1rem;
        list-style: none;
        font-size: .875rem;
        font-weight: 600;
        cursor: pointer
    }

        .dsi-site .dsi-service-menu > summary::-webkit-details-marker {
            display: none
        }

        .dsi-site .dsi-service-menu > summary > span {
            transition: transform .25s;
            color: var(--dsi-brand)
        }

    .dsi-site .dsi-service-menu[open] > summary > span {
        transform: rotate(180deg)
    }

    .dsi-site .dsi-mega-menu {
        position: absolute;
        inset: calc(100% - .35rem) 0 auto auto;
        width: min(48rem,100%);
        border: 1px solid var(--dsi-line);
        border-radius: 1.25rem;
        background: #fff;
        box-shadow: 0 24px 75px #33246525;
        padding: 1.25rem;
        max-height: calc(100svh - 8rem);
        overflow-y: auto
    }

    .dsi-site .dsi-mega-heading {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: .3rem 1rem;
        padding: .5rem .6rem 1.1rem;
        font-size: .875rem
    }

        .dsi-site .dsi-mega-heading > span {
            color: var(--dsi-muted);
            font-size: .8125rem
        }

    .dsi-site .dsi-mega-grid {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: .4rem
    }

        .dsi-site .dsi-mega-grid > a {
            display: flex;
            align-items: center;
            gap: .8rem;
            padding: .9rem .7rem;
            border-radius: .8rem;
            transition: background .25s
        }

            .dsi-site .dsi-mega-grid > a:hover, .dsi-site .dsi-mega-grid > a[aria-current="page"] {
                background: var(--tint)
            }

        .dsi-site .dsi-mega-grid .dsi-icon {
            box-sizing: content-box;
            background: var(--tint);
            color: var(--tone);
            border-radius: .6rem;
            width: 1.1rem;
            height: 1.1rem;
            padding: .6rem
        }

        .dsi-site .dsi-mega-grid > a > span:nth-child(2) {
            min-width: 0;
            flex: 1
        }

        .dsi-site .dsi-mega-grid strong {
            display: block;
            font-size: .8125rem;
            font-weight: 650;
            line-height: 1.4
        }

        .dsi-site .dsi-mega-grid small {
            display: block;
            font-size: .75rem;
            color: var(--dsi-muted);
            line-height: 1.5;
            margin-top: .25rem
        }

        .dsi-site .dsi-mega-grid > a > span:last-child {
            font-size: .9rem;
            color: var(--tone)
        }

    .dsi-site .dsi-mega-all {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem .7rem .3rem;
        margin-top: .8rem;
        border-top: 1px solid var(--dsi-line);
        font-weight: 600;
        font-size: .8125rem;
        color: var(--dsi-brand)
    }

    .dsi-site .dsi-account-links {
        display: flex;
        align-items: center;
        gap: 1.15rem;
        padding-left: 1.2rem;
        border-left: 1px solid var(--dsi-line)
    }

    .dsi-site .dsi-login {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        min-height: 2.75rem;
        font-size: .875rem;
        font-weight: 600
    }

        .dsi-site .dsi-login:hover {
            color: var(--dsi-brand)
        }

        .dsi-site .dsi-login .dsi-icon {
            width: 1rem;
            height: 1rem
        }

    .dsi-site .dsi-service-tags {
        display: block;
        color: var(--tone);
        font-size: .75rem;
        font-weight: 600;
        line-height: 1.6;
        padding-block: 1rem 1.5rem
    }

    .dsi-site .dsi-service-card > .dsi-text-link {
        margin-top: auto;
        gap: .7rem
    }

    .dsi-site .dsi-service-card h3 a:hover {
        text-decoration: underline;
        text-decoration-thickness: 1px
    }

    .dsi-site .dsi-service-help {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: .7rem 1.5rem;
        margin-top: 2.5rem;
        padding: 1.2rem;
        text-align: center;
        border: 1px dashed #cbc3e7;
        border-radius: 1rem;
        font-size: .875rem;
        color: var(--dsi-muted)
    }

    .dsi-site .dsi-service-hero {
        position: relative;
        isolation: isolate;
        overflow: clip;
        background: linear-gradient(125deg,#fff 5%,#faf7ff 60%,var(--tint));
        padding-bottom: 2rem
    }

    .dsi-site .dsi-breadcrumb {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .5rem .8rem;
        font-size: .75rem;
        color: var(--dsi-muted);
        padding-block: 1.6rem
    }

        .dsi-site .dsi-breadcrumb a:hover {
            color: var(--dsi-brand);
            text-decoration: underline
        }

        .dsi-site .dsi-breadcrumb [aria-current] {
            color: var(--tone)
        }

    .dsi-site .dsi-service-layout {
        display: grid;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        align-items: center;
        gap: clamp(2rem,5vw,5rem);
        padding-block: 1.75rem 3rem
    }

        .dsi-site .dsi-service-layout > * {
            min-width: 0
        }

    .dsi-site .dsi-service-hero h1 {
        font-size: clamp(2.4rem,4.5vw,4.2rem);
        max-width: 17ch;
        line-height: 1.08;
        overflow-wrap: break-word
    }

        .dsi-site .dsi-service-hero h1 > span {
            display: block
        }

    .dsi-site .dsi-service-hero .dsi-eyebrow {
        font-size: .7rem;
        letter-spacing: .1em;
        color: var(--tone)
    }

    .dsi-site .dsi-service-pills {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin-top: 1.6rem
    }

        .dsi-site .dsi-service-pills > span {
            padding: .35rem .7rem;
            border: 1px solid #ddd7ed;
            border-radius: 100px;
            background: #ffffffb3;
            color: var(--dsi-muted);
            font-size: .75rem
        }

    .dsi-site .dsi-service-benefits {
        display: grid;
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 1rem;
        padding-block: 1.4rem .2rem;
        border-top: 1px solid #d8d2e9;
        font-size: .8125rem;
        font-weight: 550
    }

        .dsi-site .dsi-service-benefits > div {
            display: flex;
            align-items: start;
            gap: .7rem
        }

            .dsi-site .dsi-service-benefits > div > span {
                display: grid;
                place-items: center;
                background: white;
                border-radius: 50%;
                color: var(--tone);
                width: 1.4rem;
                height: 1.4rem;
                flex: none
            }

    .dsi-site .dsi-demo {
        position: relative;
        background: #fff;
        border: 1px solid #e5deef;
        border-radius: 1.3rem;
        box-shadow: 0 30px 80px #53358c16;
        scroll-margin-top: 7rem;
        overflow: hidden
    }

        .dsi-site .dsi-demo::before {
            content: "";
            position: absolute;
            inset: 0 0 auto;
            height: 3px;
            background: linear-gradient(90deg,var(--tone),#7187ef,#44c4b0);
            background-size: 200% auto;
            animation: dsi3-color-flow 6s ease-in-out infinite alternate
        }

    .dsi-site .dsi-demo-top {
        display: flex;
        gap: .6rem;
        align-items: center;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--dsi-line);
        color: var(--dsi-muted);
        font-size: .75rem
    }

        .dsi-site .dsi-demo-top .dsi-icon {
            width: 1.1rem;
            height: 1.1rem;
            color: var(--tone)
        }

    .dsi-site .dsi-demo-badge {
        margin-left: auto;
        background: var(--tint);
        border-radius: 100px;
        color: var(--tone);
        padding: .15rem .55rem;
        font-size: .6875rem;
        font-weight: 650
    }

    .dsi-site .dsi-demo-body {
        padding: 1.7rem 1.5rem 1.25rem
    }

    .dsi-site .dsi-demo h2 {
        font-size: 1.25rem;
        letter-spacing: -.025em;
        line-height: 1.3
    }

    .dsi-site .dsi-demo-hint {
        color: var(--dsi-muted);
        font-size: .8125rem;
        margin-top: .35rem
    }

    .dsi-site .dsi-demo-choices {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        margin-block: 1.2rem 1.5rem;
        background: #f5f3f9;
        padding: .35rem;
        border-radius: .8rem
    }

        .dsi-site .dsi-demo-choices button {
            flex: 1 1 auto;
            min-height: 2.75rem;
            border: 1px solid transparent;
            border-radius: .55rem;
            background: transparent;
            padding: .45rem .7rem;
            color: var(--dsi-muted);
            font-size: .75rem;
            font-weight: 600;
            transition: background .25s,color .25s,box-shadow .25s
        }

            .dsi-site .dsi-demo-choices button:hover {
                color: var(--tone)
            }

            .dsi-site .dsi-demo-choices button[aria-pressed="true"] {
                background: white;
                color: var(--tone);
                border-color: #e5deef;
                box-shadow: 0 3px 10px #4b397012
            }

    .dsi-site .dsi-scenario {
        min-height: 21rem;
        animation: dsi3-scenario-enter .3s var(--dsi-ease)
    }

        .dsi-site .dsi-scenario + .dsi-scenario {
            margin-top: 1.5rem
        }

    .dsi-site .dsi-demo[data-demo-ready] .dsi-scenario {
        margin-top: 0
    }

    .dsi-site .dsi-scenario-label {
        display: inline-block;
        font-size: .6875rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--tone);
        font-weight: 700;
        margin-bottom: .55rem
    }

    .dsi-site .dsi-scenario h3 {
        font-size: 1.25rem;
        line-height: 1.3;
        letter-spacing: -.025em
    }

    .dsi-site .dsi-scenario > p {
        font-size: .8125rem;
        color: var(--dsi-muted);
        margin-top: .6rem;
        min-height: 3.7em
    }

    .dsi-site .dsi-scenario-rows {
        display: grid;
        gap: 0;
        margin: 1.1rem 0 0
    }

        .dsi-site .dsi-scenario-rows > div {
            display: grid;
            grid-template-columns: minmax(0,.78fr) minmax(0,1.5fr);
            align-items: start;
            gap: .75rem;
            border-top: 1px solid var(--dsi-line);
            padding: .85rem 0
        }

        .dsi-site .dsi-scenario-rows dt {
            display: flex;
            align-items: center;
            gap: .5rem;
            font-size: .75rem;
            font-weight: 650;
            line-height: 1.6
        }

            .dsi-site .dsi-scenario-rows dt > span {
                display: grid;
                place-items: center;
                flex: none;
                width: 1.35rem;
                height: 1.35rem;
                border-radius: .35rem;
                color: var(--tone);
                background: var(--tint);
                font-size: .625rem
            }

        .dsi-site .dsi-scenario-rows dd {
            margin: 0;
            font-size: .75rem;
            line-height: 1.6;
            color: var(--dsi-muted);
            overflow-wrap: break-word
        }

    .dsi-site .dsi-demo-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: .5rem;
        padding: .7rem 1.5rem;
        border-top: 1px solid var(--dsi-line);
        background: #fbfaff;
        font-size: .6875rem;
        color: var(--dsi-muted)
    }

        .dsi-site .dsi-demo-bottom button {
            display: flex;
            align-items: center;
            gap: .6rem;
            min-height: 2.75rem;
            border: 0;
            background: transparent;
            color: var(--tone);
            font-size: .75rem;
            font-weight: 650;
            padding: 0
        }

    .dsi-site .dsi-feature {
        border-top: 1px solid var(--dsi-line);
        padding-top: 1.4rem
    }

        .dsi-site .dsi-feature .dsi-number {
            color: var(--tone)
        }

        .dsi-site .dsi-feature h3 {
            font-size: 1.2rem;
            margin-top: .8rem;
            line-height: 1.3
        }

        .dsi-site .dsi-feature p {
            color: var(--dsi-muted);
            font-size: .875rem;
            margin-top: .8rem
        }

    .dsi-site .dsi-scope-note {
        display: grid;
        grid-template-columns: minmax(0,.8fr) minmax(0,2fr);
        gap: 1.5rem;
        margin-top: 3rem;
        padding: 1.5rem 1.75rem;
        background: #faf8ff;
        border: 1px solid var(--dsi-line);
        border-radius: 1rem
    }

        .dsi-site .dsi-scope-note strong {
            font-size: .9375rem;
            font-weight: 650
        }

        .dsi-site .dsi-scope-note p {
            color: var(--dsi-muted);
            font-size: .8125rem
        }

    .dsi-site .dsi-faq summary {
        font-size: .95rem;
        line-height: 1.5
    }

    .dsi-site .dsi-faq p {
        font-size: .875rem
    }

    .dsi-site .dsi-service-cta {
        text-align: center;
        background: radial-gradient(ellipse at bottom,#f0ecff,white 70%)
    }

        .dsi-site .dsi-service-cta .dsi-lead {
            margin-inline: auto
        }

        .dsi-site .dsi-service-cta .dsi-actions {
            justify-content: center
        }
    /* Lecture en mouvement : progression liée au défilement, sans déplacer le texte. */
    .dsi-site .dsi-section[data-scroll-scene]::after {
        content: "";
        position: absolute;
        inset: 0 var(--dsi-gutter) auto;
        height: 2px;
        background: linear-gradient(90deg,#a383ec,#5eacf2,#64d4bd,#ecb664);
        transform: scaleX(var(--scene-progress,0));
        transform-origin: left;
        opacity: .7;
        pointer-events: none
    }

    .dsi-site .dsi-step.is-visible .dsi-number {
        animation: dsi3-badge-pop .8s var(--dsi-ease)
    }

    .dsi-site .dsi-service-card.is-visible::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(110deg,transparent 30%,#ffffffd4 46%,transparent 62%);
        background-size: 250% 100%;
        animation: dsi3-card-sheen 1.4s var(--dsi-ease) both
    }

    .dsi-site .dsi-step::before {
        transition-delay: var(--reveal-delay,0ms)
    }

    .dsi-site .dsi-section[data-scene-visible="false"] *, .dsi-site .dsi-section[data-scene-visible="false"] *::before, .dsi-site .dsi-section[data-scene-visible="false"] *::after {
        animation-play-state: paused
    }
/* Animations — géométrie et lumière, sans dépendance externe. */
@keyframes dsi3-halo-breathe {
    from {
        transform: scale(.92);
        opacity: .5
    }

    to {
        transform: scale(1.09);
        opacity: .85
    }
}

@keyframes dsi3-logo-wave {
    0% {
        transform: scale(.85);
        opacity: 0
    }

    15% {
        opacity: .18
    }

    85%,100% {
        transform: scale(1.65);
        opacity: 0
    }
}

@keyframes dsi3-logo-glint {
    0%,24% {
        transform: translateX(-110%);
        opacity: 0
    }

    35% {
        opacity: .7
    }

    51%,100% {
        transform: translateX(110%);
        opacity: 0
    }
}

@keyframes dsi3-badge-pop {
    0% {
        transform: scale(.85)
    }

    60% {
        transform: scale(1.06)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes dsi3-card-sheen {
    0% {
        background-position: 100% 0;
        opacity: 0
    }

    30% {
        opacity: .7
    }

    100% {
        background-position: 0% 0;
        opacity: 0
    }
}

@keyframes dsi3-scenario-enter {
    from {
        transform: translateY(8px)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes dsi3-float {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }
}

@keyframes dsi3-orbit {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes dsi3-aurora {
    0% {
        transform: translate3d(0,0,0) scale(1)
    }

    100% {
        transform: translate3d(45px,35px,0) scale(1.12)
    }
}

@keyframes dsi3-color-flow {
    0% {
        background-position: 0% 50%
    }

    100% {
        background-position: 100% 50%
    }
}

@keyframes dsi3-ticker {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}
/* Points de rupture : les éléments interactifs ne dépendent jamais du survol. */
@media(max-width:68rem) {
    .dsi-site .dsi-header-inner {
        gap: 1rem
    }

    .dsi-site .nav-links {
        gap: 1.1rem
    }

    .dsi-site .dsi-brand strong {
        font-size: 1.15rem
    }

    .dsi-site .dsi-header-inner {
        flex-wrap: wrap;
        min-height: 5rem;
        padding-block: .7rem
    }

    .dsi-site .menu-toggle {
        display: inline-flex
    }

    .dsi-site .nav-links {
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: .2rem;
        padding-block: .8rem
    }

        .dsi-site .nav-links > * {
            flex-shrink: 0
        }

        .dsi-site .nav-links > a:not(.dsi-btn) {
            padding: .75rem 1rem
        }

        .dsi-site .nav-links > a::after {
            display: none
        }

    .dsi-site .dsi-header.is-enhanced .nav-links {
        position: absolute;
        top: 100%;
        left: calc(-1 * var(--dsi-gutter));
        right: calc(-1 * var(--dsi-gutter));
        background: #fff;
        border-bottom: 1px solid var(--dsi-line);
        padding: 1rem var(--dsi-gutter) 1.5rem;
        box-shadow: 0 12px 25px #66509d15;
        max-height: calc(100vh - var(--dsi-nav-top,8rem) - .5rem);
        max-height: calc(100dvh - var(--dsi-nav-top,8rem) - env(safe-area-inset-bottom,0px) - .5rem);
        overflow-y: auto;
        overscroll-behavior: contain
    }

    .dsi-site .dsi-service-menu > summary {
        padding: .75rem 1rem;
        justify-content: space-between
    }

    .dsi-site .dsi-mega-menu {
        position: static;
        width: 100%;
        max-height: none;
        box-shadow: none;
        padding: .65rem;
        border-radius: .75rem
    }

    .dsi-site .dsi-mega-heading {
        padding: .5rem .4rem
    }

    .dsi-site .dsi-account-links {
        border-left: 0;
        border-top: 1px solid var(--dsi-line);
        padding: 1rem 0 0;
        margin-top: .5rem;
        gap: 1rem;
        justify-content: space-between
    }

        .dsi-site .dsi-account-links > a {
            flex: 1;
            min-width: 0;
            text-align: center;
            overflow-wrap: anywhere
        }

    .dsi-site .dsi-grid--four {
        --dsi-columns: 2
    }

    .dsi-site .dsi-hero-main {
        grid-template-columns: minmax(0,1.12fr) minmax(0,1fr)
    }

    .dsi-site h1 {
        font-size: clamp(2.75rem,5.2vw,4.3rem)
    }

    .dsi-site .dsi-float-card {
        padding: .7rem;
        gap: .5rem
    }

        .dsi-site .dsi-float-card small {
            font-size: .75rem
        }
}

@media(max-width:58rem) {
    .dsi-site .dsi-service-layout {
        grid-template-columns: minmax(0,1fr);
        gap: 2.5rem
    }

    .dsi-site .dsi-demo {
        width: 100%;
        max-width: 40rem;
        justify-self: center
    }

    .dsi-site .dsi-service-hero h1 {
        font-size: clamp(2.4rem,7vw,4.2rem);
        max-width: 22ch
    }

    .dsi-site .dsi-service-benefits {
        grid-template-columns: minmax(0,1fr);
        gap: .8rem
    }

    .dsi-site .dsi-scope-note {
        grid-template-columns: minmax(0,1fr);
        gap: .7rem
    }

    .dsi-site .dsi-split {
        grid-template-columns: minmax(0,1fr);
        gap: 2.5rem
    }

    .dsi-site .dsi-section-head {
        align-items: start;
        flex-direction: column;
        gap: 1.25rem
    }

        .dsi-site .dsi-section-head > p {
            max-width: 55ch
        }

    .dsi-site .dsi-grid--three {
        --dsi-columns: 1
    }

    .dsi-site .dsi-hero-main {
        grid-template-columns: minmax(0,1fr);
        gap: 1.5rem;
        padding-top: 3.5rem
    }

    .dsi-site .dsi-hero-copy {
        max-width: 42rem
    }

    .dsi-site h1 {
        font-size: clamp(2.75rem,8vw,4.8rem)
    }
    /* Le cadran reste libre sur les petits écrans, y compris en paysage. */
    .dsi-site .dsi-hero-visual {
        display: grid;
        grid-template-columns: minmax(0,1fr);
        width: min(100%,28rem);
        aspect-ratio: auto;
        gap: .75rem;
        margin-block: 1rem .5rem;
        perspective: none;
        justify-self: center
    }

    .dsi-site .dsi-logo-universe {
        position: relative;
        inset: auto;
        width: min(100%,24rem);
        aspect-ratio: 1;
        justify-self: center;
        transform: none
    }

    .dsi-site .dsi-float-card {
        position: relative;
        inset: auto;
        width: 100%;
        min-width: 0;
        min-height: 4.25rem;
        translate: none;
        padding: .9rem 1.05rem
    }

        .dsi-site .dsi-float-card > span {
            min-width: 0;
            overflow-wrap: anywhere
        }

        .dsi-site .dsi-float-card small {
            font-size: .75rem
        }

    .dsi-site .dsi-visual-label {
        position: static;
        font-size: .75rem;
        text-align: center;
        letter-spacing: .12em;
        overflow-wrap: anywhere
    }

    .dsi-site .dsi-logo-replay {
        position: static;
        justify-self: center;
        margin-top: .25rem;
        font-size: .75rem;
        min-height: 2.75rem
    }

    .dsi-site .dsi-city {
        grid-template-columns: 1.3fr 1fr
    }
}

@media(max-width:40rem) {
    .dsi-site .dsi-mega-grid {
        grid-template-columns: minmax(0,1fr)
    }

        .dsi-site .dsi-mega-grid > a {
            padding: .6rem .4rem
        }

    .dsi-site .dsi-mega-heading > span {
        display: none
    }

    .dsi-site .dsi-service-layout {
        padding-block: 1rem 2rem
    }

    .dsi-site .dsi-service-hero h1 {
        font-size: clamp(2.2rem,9vw,3.5rem)
    }

    .dsi-site .dsi-demo-top, .dsi-site .dsi-demo-bottom {
        padding-inline: 1rem
    }

    .dsi-site .dsi-demo-body {
        padding: 1.4rem 1rem 1rem
    }

    .dsi-site .dsi-demo-choices button {
        padding-inline: .45rem
    }

    .dsi-site .dsi-demo-badge {
        display: none
    }

    .dsi-site .dsi-scenario {
        min-height: 0
    }

    .dsi-site .dsi-scenario-rows > div {
        grid-template-columns: minmax(0,1fr);
        gap: .35rem
    }

    .dsi-site .dsi-scenario-rows dd {
        padding-left: 1.85rem
    }

    .dsi-site .dsi-scope-note {
        padding: 1.25rem
    }

    .dsi-site .dsi-topbar-detail, .dsi-site .dsi-topbar-actions > a {
        display: none
    }

    .dsi-site .dsi-brand img {
        width: 2.6rem;
        height: 2.6rem
    }

    .dsi-site .dsi-brand strong {
        font-size: 1rem
    }

    .dsi-site .menu-toggle {
        padding-inline: .65rem;
        gap: .45rem
    }

    .dsi-site .dsi-hero-main {
        padding-block: 3rem 1.6rem
    }

    .dsi-site .dsi-hero h1 {
        font-size: clamp(2.35rem,10vw,3.5rem)
    }

    .dsi-site .dsi-hero .dsi-eyebrow {
        font-size: .75rem;
        letter-spacing: .025em;
        padding: .5rem .75rem
    }

    .dsi-site .dsi-hero .dsi-lead {
        font-size: 1rem
    }

    .dsi-site .dsi-actions {
        align-items: stretch;
        flex-direction: column
    }

    .dsi-site .dsi-hero-visual {
        width: min(100%,26rem)
    }

    .dsi-site .dsi-logo-universe {
        width: min(100%,22rem)
    }

    .dsi-site .dsi-float-card {
        font-size: .8125rem;
        padding: .85rem 1rem;
        gap: .75rem;
        border-radius: .8rem
    }

        .dsi-site .dsi-float-card .dsi-icon {
            width: 1.1rem;
            height: 1.1rem;
            padding: .4rem
        }

        .dsi-site .dsi-float-card small {
            font-size: .75rem
        }

    .dsi-site .dsi-hero-bottom {
        grid-template-columns: minmax(0,1fr);
        gap: .8rem;
        padding-block: 1.3rem
    }

        .dsi-site .dsi-hero-bottom > div {
            gap: .8rem
        }

    .dsi-site .dsi-grid, .dsi-site .dsi-grid--four {
        --dsi-columns: 1
    }

    .dsi-site .dsi-audience article {
        grid-template-columns: minmax(0,1fr);
        gap: .5rem;
        padding-inline: .5rem
    }

    .dsi-site .dsi-city {
        grid-template-columns: minmax(0,1fr);
        margin-top: 2.5rem
    }

    .dsi-site .dsi-city-photo {
        min-height: 12rem
    }

    .dsi-site .dsi-city figcaption {
        padding: 1.5rem
    }

    .dsi-site .dsi-platform-head {
        align-items: start;
        flex-direction: column;
        gap: .5rem
    }

    .dsi-site .dsi-footer-main {
        flex-direction: column
    }

    .dsi-site .dsi-aurora span {
        filter: blur(45px);
        opacity: .35
    }

    .dsi-site .dsi-logo-scene, .dsi-site .dsi-float-card {
        backdrop-filter: none
    }

    .dsi-site .dsi-orbit-plane {
        opacity: .5
    }

    .dsi-site .dsi-logo-halo {
        filter: blur(16px)
    }

    .dsi-site .dsi-marquee span {
        font-size: .875rem
    }
}

@media(max-width:23rem) {
    .dsi-site {
        --dsi-gutter: 1rem
    }

        .dsi-site .dsi-header-inner {
            gap: .5rem
        }

        .dsi-site .dsi-brand {
            gap: .5rem
        }

            .dsi-site .dsi-brand strong {
                font-size: .9rem
            }

            .dsi-site .dsi-brand img {
                width: 2.25rem;
                height: 2.25rem
            }

        .dsi-site h1 {
            font-size: 2.6rem
        }

        .dsi-site .dsi-float-card {
            padding: .75rem
        }
}

@media(hover:none) {
    .dsi-site .dsi-service-card, .dsi-site .dsi-logo-scene, .dsi-site .dsi-btn {
        transform: none
    }
}

@media(pointer:coarse) {
    .dsi-site :where(.dsi-brand,.dsi-text-link,.dsi-contact-list a,.dsi-footer-links a) {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem
    }
}
/* Accessibilité : tout le contenu reste présent sans JS, sans animations ou au clavier. */
.dsi-site .skip {
    position: fixed;
    top: .75rem;
    left: 1rem;
    z-index: 100;
    transform: translateY(-200%);
    padding: .75rem 1rem;
    background: white;
    color: var(--dsi-ink);
    border: 2px solid var(--dsi-brand)
}

    .dsi-site .skip:focus {
        transform: translateY(0)
    }

.dsi-site .dsi-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0
}

.dsi-site [hidden] {
    display: none
}





.dsi-site[data-hero-visible="false"] .dsi-service-hero *, .dsi-site[data-hero-visible="false"] .dsi-service-hero *::before {
    animation-play-state: paused
}

.dsi-site[data-hero-visible="false"] .dsi-hero *, .dsi-site[data-hero-visible="false"] .dsi-hero *::before, .dsi-site[data-hero-visible="false"] .dsi-hero *::after {
    animation-play-state: paused
}

.dsi-site[data-tab-visible="false"] *, .dsi-site[data-tab-visible="false"] *::before, .dsi-site[data-tab-visible="false"] *::after {
    animation-play-state: paused
}

@media print {
    .dsi-site {
        font-size: 11pt;
        color: black
    }

        .dsi-site .dsi-header {
            position: static
        }

        .dsi-site .nav-links, .dsi-site .menu-toggle, .dsi-site .back-top, .dsi-site .dsi-topbar, .dsi-site .dsi-form, .dsi-site .dsi-hero-visual, .dsi-site .dsi-marquee, .dsi-site .dsi-scroll-progress, .dsi-site .dsi-particles, .dsi-site .dsi-aurora {
            display: none
        }

        .dsi-site .dsi-section {
            padding-block: 2rem
        }

        .dsi-site .dsi-hero, .dsi-site .dsi-section--dark {
            background: white
        }

        .dsi-site .dsi-gradient-text {
            background: none;
            color: black
        }

        .dsi-site .dsi-card, .dsi-site .dsi-step {
            break-inside: avoid;
            box-shadow: none;
            transform: none
        }
}

/* Marque et éléments de page. */
.dsi-site .dsi-orbit, .dsi-site .dsi-satellite, .dsi-site .dsi-logo-mark img {
    transform-origin: 50% 50%
}

.dsi-site .dsi-logo-scene {
    z-index: 1
}

.dsi-site .dsi-float-card {
    z-index: 3
}

.dsi-site .dsi-marquee-track {
    will-change: transform
}

.dsi-site .dsi-hero-bottom > div b {
    transition: box-shadow .4s,background .4s
}

.dsi-site .dsi-hero-bottom > div:hover b {
    background: #e9e0ff;
    box-shadow: 0 0 20px #aa8df53d
}

.dsi-site .dsi-step {
    transition: box-shadow .35s,background .35s
}

    .dsi-site .dsi-step:hover {
        background: #fcfaff;
        box-shadow: 0 12px 28px #7753b612
    }
/* Inline fallback removes CSS loops only after native web animations exist.
   Nothing is hidden while waiting for JavaScript. */
@media(max-width:40rem) {
}

@media(max-width:58rem) {
    .dsi-site .dsi-hero h1 .dsi-word-line {
        font-size: .95em
    }
}

/* V12 : mondes irisés et occlusion réelle selon la profondeur.
   display:contents laisse chaque planète se placer devant ou derrière le
   disque central selon la profondeur de sa propre orbite. */
.dsi-site[data-dsi-orbit-ready="v12"] .dsi-orbital-system {
    display: contents;
    pointer-events: none
}

.dsi-site .dsi-planet-space, .dsi-site .dsi-planet-layer {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none
}

.dsi-site .dsi-planet-space {
    z-index: 0
}

.dsi-site .dsi-planet, .dsi-site .dsi-planet-surface, .dsi-site .dsi-planet-clouds {
    transform-origin: 0 0;
    transform-box: view-box
}

.dsi-site .dsi-planet-track {
    fill: none;
    stroke-width: .7;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke
}

.dsi-site .dsi-planet-signal {
    stroke-linecap: round;
    vector-effect: non-scaling-stroke
}

.dsi-site[data-dsi-orbit-ready="v12"] .dsi-logo-scene {
    z-index: 500;
    background: radial-gradient(circle at 35% 26%,#fff 0%,#faf8ff 66%,#eeeafa 100%);
    border-color: #ffffff;
    backdrop-filter: none;
    box-shadow: 0 24px 70px #6242ac1c,inset 0 0 30px #fff
}

    .dsi-site[data-dsi-orbit-ready="v12"] .dsi-logo-scene::after {
        content: "";
        position: absolute;
        inset: 3.5%;
        z-index: 0;
        border: 1px solid #8271da21;
        border-left-color: #49d7e650;
        border-right-color: #c378ea57;
        border-radius: 50%;
        pointer-events: none
    }

.dsi-site[data-dsi-orbit-ready="v12"] .dsi-logo-halo {
    background: conic-gradient(from 50deg,#9d55f534,#38c9f12c,#4be6c32a,#ffd07929,#ea79d12c,#9d55f534)
}
/* Les cartes restent en périphérie pour laisser la rose des vents lisible. */
@media(min-width:58.001rem) {
    .dsi-site[data-dsi-orbit-ready="v12"] .dsi-float-card {
        max-width: 47%
    }

    .dsi-site[data-dsi-orbit-ready="v12"] .dsi-float-card--dev {
        left: -3%;
        top: 3%
    }

    .dsi-site[data-dsi-orbit-ready="v12"] .dsi-float-card--cloud {
        right: -3%;
        top: auto;
        bottom: 2%
    }

    .dsi-site[data-dsi-orbit-ready="v12"] .dsi-float-card--ai {
        left: -3%;
        bottom: 2%
    }

    .dsi-site[data-dsi-orbit-ready="v12"] .dsi-logo-replay {
        bottom: -2.2rem
    }
}

/* Vidéo Genève : conserver le cadre complet et les textes de la vidéo. */
.dsi-site .dsi-city--video {
    grid-template-columns: minmax(0,2fr) minmax(15rem,1fr);
    align-items: center
}

.dsi-site .dsi-city-photo--video {
    aspect-ratio: 16/9;
    min-height: 0;
    width: 100%;
    align-self: center;
    background: #142333;
    isolation: isolate
}

    .dsi-site .dsi-city-photo--video video {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        max-width: 100%;
        object-fit: contain;
        object-position: center;
        transform: none;
        transition: none;
        background: #142333
    }

.dsi-site .dsi-city--video figcaption {
    min-width: 0
}

.dsi-site .dsi-city-photo--video video:focus-visible {
    outline: 3px solid #8a69ea;
    outline-offset: -3px
}

@media(max-width:58rem) {
    .dsi-site .dsi-city--video {
        grid-template-columns: minmax(0,1fr)
    }

        .dsi-site .dsi-city--video figcaption {
            padding: 1.5rem
        }
}

@media(max-width:40rem) {
    .dsi-site .dsi-city-photo--video {
        min-height: 0
    }
}




/* V12 : logo libre, orbites croisées et comètes discrètes sur blanc. */
.dsi-site .dsi-hero {
    background: #fff
}

.dsi-site .dsi-logo-universe {
    --dsi-galaxy-image: url("../images/dsi-galaxy-touches-v11.webp");
    isolation: isolate
}

.dsi-site .dsi-cosmos {
    position: absolute;
    inset: -3%;
    z-index: -1;
    pointer-events: none;
    overflow: visible;
    background: transparent;
    border-radius: 0
}

.dsi-site .dsi-galaxy-touch {
    position: absolute;
    display: block;
    background-image: var(--dsi-galaxy-image);
    background-repeat: no-repeat;
    background-size: 230% 250%;
    mask-image: radial-gradient(ellipse,#000 25%,#000a 50%,transparent 74%);
    -webkit-mask-image: radial-gradient(ellipse,#000 25%,#000a 50%,transparent 74%);
    animation: dsi12-dust-drift var(--dsi-dust-period,96s) linear infinite;
    will-change: transform,opacity
}

.dsi-site .dsi-galaxy-touch--one {
    left: -4%;
    top: 13%;
    width: 62%;
    height: 36%;
    background-position: 3% 6%;
    --dsi-dust-opacity: .24;
    --dsi-dust-period: 96s;
    animation-delay: -24s
}

.dsi-site .dsi-galaxy-touch--two {
    right: -5%;
    bottom: 9%;
    width: 58%;
    height: 39%;
    background-position: 98% 97%;
    --dsi-dust-opacity: .2;
    --dsi-dust-period: 112s;
    animation-delay: -68s
}

.dsi-site .dsi-galaxy-touch--three {
    right: 1%;
    top: 0;
    width: 45%;
    height: 28%;
    background-position: 97% 0;
    --dsi-dust-opacity: .15;
    --dsi-dust-period: 128s;
    animation-delay: -40s
}

@keyframes dsi12-dust-drift {
    0%,100% {
        transform: translate(-2%,2%);
        opacity: calc(var(--dsi-dust-opacity)*.55)
    }

    50% {
        transform: translate(2%,-2%);
        opacity: var(--dsi-dust-opacity)
    }
}

.dsi-site .dsi-logo-scene, .dsi-site[data-dsi-orbit-ready="v12"] .dsi-logo-scene {
    position: absolute;
    inset: 34%;
    z-index: 500;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    transform: none;
    overflow: visible;
    isolation: isolate;
    pointer-events: none
}

    .dsi-site .dsi-logo-scene::before, .dsi-site .dsi-logo-scene::after {
        display: none
    }

.dsi-site .dsi-logo-mark {
    position: relative;
    inset: auto;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform: none;
    animation: dsi12-logo-turn 180s linear infinite;
    will-change: transform
}

@keyframes dsi12-logo-turn {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.dsi-site .dsi-logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: none;
    transform: none;
    opacity: 1;
    mix-blend-mode: normal;
    filter: drop-shadow(0 3px 3px #4b5c7b17)
}

.dsi-site .dsi-planet-track {
    opacity: .85;
    stroke-width: .7
}

.dsi-site .dsi-planet-signal {
    opacity: .38
}

.dsi-site .dsi-planet-layer {
    filter: none
}

.dsi-site .dsi-planet, .dsi-site .dsi-comet {
    transform-origin: 0 0;
    transform-box: view-box
}

.dsi-site .dsi-comet-space {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 900;
    overflow: hidden;
    pointer-events: none
}

.dsi-site .dsi-comet {
    opacity: 0;
    pointer-events: none
}

.dsi-site .dsi-float-card {
    border-color: #edecf5;
    box-shadow: 0 7px 24px #4652780c;
    background: #fff
}

    .dsi-site .dsi-float-card:hover {
        box-shadow: 0 10px 28px #46527816
    }
/* Secours sans JS : la projection et les phases sont définies dans la vue. */
.dsi-site .dsi-fallback-orbit {
    position: absolute;
    inset: calc(var(--dsi-fallback-inset)*1%);
    border: 0;
    border-radius: 50%;
    transform: rotate(var(--dsi-fallback-plane)) scaleY(var(--dsi-fallback-flat));
    pointer-events: none
}

    .dsi-site .dsi-fallback-orbit::before {
        content: "";
        position: absolute;
        inset: 0;
        border: 1px solid #b4b2cf30;
        border-radius: 50%
    }

.dsi-site .dsi-fallback-rotation {
    position: absolute;
    inset: 0;
    animation: dsi12-fallback-orbit var(--dsi-fallback-speed) linear infinite;
    animation-direction: var(--dsi-fallback-direction,normal)
}

.dsi-site .dsi-fallback-world {
    position: absolute;
    top: calc(50% - var(--dsi-fallback-size)/2);
    left: calc(-1 * var(--dsi-fallback-size)/2);
    width: var(--dsi-fallback-size);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 28% 24%,#fff8,transparent 44%),var(--dsi-fallback-color);
    box-shadow: inset -5px -5px 9px #0a133b70,0 3px 8px #66758a18;
    animation: dsi12-fallback-counter var(--dsi-fallback-speed) linear infinite;
    animation-direction: var(--dsi-fallback-direction,normal)
}

.dsi-site .dsi-fallback-world--saturn::after {
    content: "";
    position: absolute;
    inset: 30% -65%;
    border: 3px solid #d7b77c9e;
    border-radius: 50%;
    transform: rotate(-24deg);
    box-shadow: 0 0 0 2px #efc59920
}

@keyframes dsi12-fallback-orbit {
    from {
        transform: rotate(var(--dsi-fallback-phase))
    }

    to {
        transform: rotate(calc(var(--dsi-fallback-phase) + 360deg))
    }
}

@keyframes dsi12-fallback-counter {
    from {
        transform: rotate(calc(-1 * var(--dsi-fallback-phase))) scaleY(calc(1 / var(--dsi-fallback-flat))) rotate(calc(-1 * var(--dsi-fallback-plane)))
    }

    to {
        transform: rotate(calc(-1 * (var(--dsi-fallback-phase) + 360deg))) scaleY(calc(1 / var(--dsi-fallback-flat))) rotate(calc(-1 * var(--dsi-fallback-plane)))
    }
}

@media(max-width:40rem) {
    .dsi-site .dsi-galaxy-touch--one {
        --dsi-dust-opacity: .2
    }

    .dsi-site .dsi-galaxy-touch--two {
        --dsi-dust-opacity: .17
    }

    .dsi-site .dsi-galaxy-touch--three {
        --dsi-dust-opacity: .13
    }
}