/* =========================================================
   DIAGNOSTIC EXPERIENCE
   Motion UI premium / smooth / Apple-inspired
   ========================================================= */

:root {
    --diag-primary: #327278;
    --diag-primary-dark: #285e63;
    --diag-accent: #E94E1A;

    --diag-text: #1d1d1f;
    --diag-text-secondary: #6e6e73;
    --diag-text-light: #86868b;

    --diag-surface: rgba(255, 255, 255, 0.84);
    --diag-surface-solid: #ffffff;
    --diag-surface-soft: #f7f7f8;

    --diag-border: rgba(0, 0, 0, 0.08);
    --diag-border-active: rgba(50, 114, 120, 0.42);

    --diag-shadow:
        0 1px 2px rgba(0, 0, 0, 0.02),
        0 8px 30px rgba(0, 0, 0, 0.04);

    --diag-shadow-hover:
        0 2px 4px rgba(0, 0, 0, 0.03),
        0 16px 45px rgba(0, 0, 0, 0.07);

    --diag-radius-xl: 24px;
    --diag-radius-lg: 18px;
    --diag-radius-md: 14px;
    --diag-radius-sm: 10px;

    --diag-motion-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --diag-motion-soft: cubic-bezier(0.16, 1, 0.3, 1);
    --diag-motion-pop: cubic-bezier(0.34, 1.56, 0.64, 1);

    --diag-stagger-step: 70ms;
}


/* =========================================================
   BASE
   ========================================================= */

.diagnostic-experience {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;

    font-family: Raleway, -apple-system, BlinkMacSystemFont,
        "SF Pro Display", "SF Pro Text", "Helvetica Neue",
        Arial, sans-serif;

    color: var(--diag-text);

    opacity: 1;
    transform: none;
    filter: none;
}


/* Entrance animation only when JS enables it */
.diagnostic-experience[data-animate="true"][data-page-state="entering"] {
    opacity: 0;

    transform:
        translateY(18px)
        scale(0.99);

    filter: blur(6px);
}


.diagnostic-experience[data-animate="true"] {
    transition:
        opacity 900ms var(--diag-motion-smooth),
        transform 950ms var(--diag-motion-smooth),
        filter 900ms var(--diag-motion-smooth);
}


.diagnostic-experience[data-animate="true"][data-page-state="ready"] {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    filter: blur(0);
}


.diagnostic-experience h2,
.diagnostic-experience h3,
.diagnostic-experience p {
    box-sizing: border-box;
}


.diagnostic-experience h2 {
    margin: 0;

    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;

    color: var(--diag-text);
}


.diagnostic-experience h3 {
    margin: 0;

    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.025em;

    color: var(--diag-text);
}


.diag-eyebrow,
.diagnostic-step-label {
    display: block;

    margin-bottom: 5px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: var(--diag-primary);
}


.diag-section-description {
    margin: 7px 0 0;

    max-width: 650px;

    font-size: 14px;
    line-height: 1.55;

    color: var(--diag-text-secondary);
}


/* =========================================================
   MAIN CARDS
   ========================================================= */

.diag-user-context,
.diag-user-check,
.diag-support-block {
    position: relative;

    margin: 22px 0;
    padding: 32px;

    overflow: hidden;

    border: 1px solid var(--diag-border);
    border-radius: var(--diag-radius-xl);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.95),
            rgba(250, 250, 250, 0.88)
        );

    box-shadow: var(--diag-shadow);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    transform: translateZ(0);

    transition:
        transform 700ms var(--diag-motion-smooth),
        opacity 700ms var(--diag-motion-smooth),
        filter 700ms var(--diag-motion-smooth),
        box-shadow 500ms var(--diag-motion-soft),
        border-color 500ms var(--diag-motion-soft);
}


.diag-user-context:hover,
.diag-user-check:hover,
.diag-support-block:hover {
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: var(--diag-shadow-hover);
}


.diag-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 32px;
}


/* =========================================================
   FORM - spacing & hierarchy
   ========================================================= */

.diag-form-grid {
    display: flex;
    flex-direction: column;

    gap: 30px;
}


.diag-field-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 24px 20px;
}


.diag-field {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
}


.diag-field-wide {
    grid-column: 1 / -1;
}


.diag-field label {
    margin-bottom: 10px;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;

    color: #424245;

    transition:
        color 250ms ease,
        transform 400ms var(--diag-motion-smooth);
}


/* -----------------------------------------
   Input / textarea / select shells
   ----------------------------------------- */

.diag-input-shell,
.diag-select-shell {
    position: relative;
}


.diag-field input,
.diag-field textarea,
.diag-field select {
    width: 100%;

    box-sizing: border-box;

    padding: 13px 42px 13px 15px;

    border: 1px solid rgba(0, 0, 0, 0.11);
    border-radius: var(--diag-radius-md);

    background:
        rgba(255, 255, 255, 0.9);

    color: var(--diag-text);

    font-family: inherit;
    font-size: 14px;
    line-height: 1.45;

    outline: none;

    box-shadow:
        inset 0 1px 1px rgba(0, 0, 0, 0.015);

    transition:
        border-color 280ms ease,
        box-shadow 350ms var(--diag-motion-soft),
        background-color 280ms ease,
        transform 420ms var(--diag-motion-smooth);
}


.diag-field select {
    padding-right: 42px;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #86868b 50%
        ),
        linear-gradient(
            135deg,
            #86868b 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 20px) 22px,
        calc(100% - 15px) 22px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat: no-repeat;
}


.diag-field textarea {
    min-height: 130px;

    padding-right: 15px;

    resize: vertical;
}


.diag-field input:hover,
.diag-field textarea:hover,
.diag-field select:hover {
    border-color: rgba(0, 0, 0, 0.17);
}


.diag-field input:focus,
.diag-field textarea:focus,
.diag-field select:focus {
    border-color: var(--diag-primary);

    background-color: #ffffff;

    box-shadow:
        0 0 0 4px rgba(50, 114, 120, 0.09),
        0 6px 18px rgba(0, 0, 0, 0.035);

    transform: translateY(-2px);
}


.diag-field:focus-within label {
    color: var(--diag-primary);

    transform: translateX(2px);
}


.diag-field input::placeholder,
.diag-field textarea::placeholder {
    color: #a1a1a6;

    transition:
        opacity 250ms ease,
        transform 350ms var(--diag-motion-smooth);
}


.diag-field input:focus::placeholder,
.diag-field textarea:focus::placeholder {
    opacity: 0.55;

    transform: translateX(3px);
}


/* -----------------------------------------
   Focus / filled / complete feedback
   (classes toggled by JS: is-focused / is-filled / is-complete)
   ----------------------------------------- */

.diag-field.is-focused input,
.diag-field.is-focused textarea,
.diag-field.is-focused select {
    border-color: var(--diag-primary);

    background-color: #ffffff;

    box-shadow:
        0 0 0 4px rgba(50, 114, 120, 0.09),
        0 6px 18px rgba(0, 0, 0, 0.035);

    transform: translateY(-2px);
}


.diag-field.is-complete input,
.diag-field.is-complete textarea {
    border-color: rgba(50, 114, 120, 0.38);
}


.diag-field-indicator {
    position: absolute;

    top: 12px;
    right: 13px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    color: #fff;

    background: var(--diag-primary);

    opacity: 0;

    transform:
        scale(0.4)
        translateY(2px);

    pointer-events: none;

    transition:
        opacity 380ms var(--diag-motion-soft),
        transform 480ms var(--diag-motion-pop);
}


.diag-input-shell-textarea .diag-field-indicator {
    top: 12px;
}


.diag-field-indicator svg {
    width: 11px;
    height: 11px;
}


.diag-field.is-complete .diag-field-indicator {
    opacity: 1;

    transform:
        scale(1)
        translateY(0);
}


/* small validation impulse the instant a field becomes complete */
.diag-field.is-complete.is-just-validated .diag-input-shell {
    animation: diag-field-impulse 550ms var(--diag-motion-soft);
}


@keyframes diag-field-impulse {
    0% {
        box-shadow: 0 0 0 0 rgba(50, 114, 120, 0.22);
    }

    100% {
        box-shadow: 0 0 0 10px rgba(50, 114, 120, 0);
    }
}


/* -----------------------------------------
   Select - confirmation animation
   ----------------------------------------- */

.diag-select-shell.is-selected select {
    border-color: rgba(50, 114, 120, 0.42);

    background-color: rgba(50, 114, 120, 0.045);
}


.diag-select-shell.is-just-selected select {
    animation: diag-select-confirm 420ms var(--diag-motion-pop);
}


@keyframes diag-select-confirm {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.015);
    }

    100% {
        transform: scale(1);
    }
}


/* =========================================================
   MOTION ITEMS (form fields, validation fields)
   ========================================================= */

.motion-item {
    opacity: 1;
    transform: none;
    filter: none;
}


.diagnostic-experience[data-animate="true"] .motion-item:not(.is-visible) {
    opacity: 0;

    transform:
        translateY(14px)
        scale(0.992);

    filter: blur(3px);
}


.diagnostic-experience[data-animate="true"] .motion-item {
    transition:
        opacity 750ms var(--diag-motion-smooth),
        transform 850ms var(--diag-motion-smooth),
        filter 800ms var(--diag-motion-smooth);
}


.diagnostic-experience[data-animate="true"] .motion-item.is-visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    filter: blur(0);
}


.motion-item[data-stagger="0"] { transition-delay: calc(var(--diag-stagger-step) * 0); }
.motion-item[data-stagger="1"] { transition-delay: calc(var(--diag-stagger-step) * 1); }
.motion-item[data-stagger="2"] { transition-delay: calc(var(--diag-stagger-step) * 2); }
.motion-item[data-stagger="3"] { transition-delay: calc(var(--diag-stagger-step) * 3); }
.motion-item[data-stagger="4"] { transition-delay: calc(var(--diag-stagger-step) * 4); }
.motion-item[data-stagger="5"] { transition-delay: calc(var(--diag-stagger-step) * 5); }


/* =========================================================
   LAUNCH AREA
   ========================================================= */

.diag-launch-zone {
    position: relative;

    display: flex;
    flex-direction: column;

    align-items: center;

    padding: 24px 0 34px;
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.browser-btn,
.diag-primary-action,
.diag-support-action {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 0 22px;

    overflow: hidden;

    border: 0;
    border-radius: 999px;

    background: var(--diag-primary);

    color: #fff;

    cursor: pointer;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    -webkit-tap-highlight-color: transparent;

    box-shadow:
        0 7px 20px rgba(50, 114, 120, 0.17);

    transform:
        translateZ(0)
        scale(1);

    transition:
        transform 500ms var(--diag-motion-smooth),
        box-shadow 400ms ease,
        background-color 350ms ease,
        opacity 300ms ease;
}


.diag-btn-background {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 120%,
            rgba(255, 255, 255, 0.18),
            transparent 60%
        );

    opacity: 0;

    transform: scale(0.75);

    transition:
        opacity 500ms ease,
        transform 700ms var(--diag-motion-smooth);
}


.diag-btn-glow {
    position: absolute;

    inset: -40%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.5),
            transparent 65%
        );

    opacity: 0;

    transform: scale(0.6);

    transition:
        opacity 550ms ease,
        transform 650ms var(--diag-motion-smooth);
}


.browser-btn:hover .diag-btn-background,
.diag-support-action:hover .diag-btn-background {
    opacity: 1;
    transform: scale(1.15);
}


.browser-btn:hover .diag-btn-glow,
.diag-support-action:hover .diag-btn-glow {
    opacity: 0.55;

    transform: scale(1);
}


.browser-btn:hover,
.diag-support-action:hover {
    transform:
        translateY(-2px)
        scale(1.018);

    box-shadow:
        0 12px 28px rgba(50, 114, 120, 0.22);
}


.browser-btn:active,
.diag-support-action:active {
    transform:
        translateY(0)
        scale(0.965);

    transition-duration: 130ms;
}


.browser-btn:disabled,
.diag-support-action:disabled {
    cursor: default;

    opacity: 0.72;
}


.diag-btn-content {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;

    gap: 9px;
}


.diag-btn-lottie {
    display: block;

    width: 22px;
    height: 22px;

    flex: 0 0 22px;

    opacity: 0.92;
}

.diag-btn-lottie svg {
    display: block;
    width: 100%;
    height: 100%;
}


.browser-btn:not([data-state="loading"]) .diag-btn-lottie,
.diag-support-action:not([data-state="loading"]) .diag-btn-lottie {
    display: none;
}


.browser-btn[data-state="loading"] .diag-btn-lottie,
.diag-support-action[data-state="loading"] .diag-btn-lottie {
    display: block;
}


/* Native CSS fallback spinner - used alongside/instead of the lottie slot */
.diag-btn-spinner {
    display: none;

    width: 16px;
    height: 16px;

    flex: 0 0 16px;

    border-radius: 50%;

    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;

    opacity: 0;

    transition: opacity 300ms ease;
}


.browser-btn[data-state="loading"] .diag-btn-spinner,
.diag-support-action[data-state="loading"] .diag-btn-spinner {
    display: block;

    opacity: 1;

    animation: diag-spin 850ms linear infinite;
}


@keyframes diag-spin {
    to {
        transform: rotate(360deg);
    }
}


.browser-btn[data-state="loading"] {
    cursor: wait;

    transform: scale(0.985);

    box-shadow:
        0 5px 14px rgba(50, 114, 120, 0.14);
}


.browser-btn[data-state="success"],
.browser-btn[data-state="completed"] {
    background: var(--diag-primary-dark);

    box-shadow:
        0 7px 20px rgba(40, 94, 99, 0.22);
}


.browser-btn[data-state="success"] .diag-btn-label,
.browser-btn[data-state="completed"] .diag-btn-label {
    animation: diag-label-swap 450ms var(--diag-motion-smooth);
}


@keyframes diag-label-swap {
    0% {
        opacity: 0;

        transform: translateY(6px);

        filter: blur(3px);
    }

    100% {
        opacity: 1;

        transform: translateY(0);

        filter: blur(0);
    }
}


/* =========================================================
   GLOBAL PROGRESS
   ========================================================= */

.diag-progress {
    width: 100%;
    max-width: 600px;

    margin-top: 26px;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(14px)
        scale(0.985);

    filter: blur(5px);

    transition:
        opacity 650ms var(--diag-motion-smooth),
        transform 750ms var(--diag-motion-smooth),
        filter 750ms var(--diag-motion-smooth),
        visibility 0s linear 750ms;
}


.diag-progress[data-state="loading"],
.diag-progress[data-state="complete"] {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);

    filter: blur(0);

    transition:
        opacity 650ms var(--diag-motion-smooth),
        transform 750ms var(--diag-motion-smooth),
        filter 750ms var(--diag-motion-smooth);
}


.diag-progress-visual {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 14px;
}


.diag-progress-lottie {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;
}

.diag-progress-lottie svg,
.diagnostic-lottie svg,
.diag-validation-lottie svg,
.diag-support-lottie svg {
    display: block;
    width: 100%;
    height: 100%;
}


.diag-progress-content {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.diag-progress-title {
    font-size: 14px;
    font-weight: 600;

    color: var(--diag-text);
}


.diag-progress-label {
    position: relative;

    font-size: 12px;
    line-height: 1.4;

    color: var(--diag-text-secondary);
}


/* label text swap gets a soft crossfade whenever JS replaces its content */
.diag-progress-label {
    display: inline-block;

    animation: diag-label-fade 500ms var(--diag-motion-soft);
}


@keyframes diag-label-fade {
    from {
        opacity: 0;

        transform: translateY(3px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }
}


.diag-progress-track {
    position: relative;

    width: 100%;
    height: 5px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(0, 0, 0, 0.055);
}


.diag-progress-bar {
    position: relative;

    width: 0%;
    height: 100%;

    overflow: hidden;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--diag-primary),
            #4b9298
        );

    transform-origin: left center;

    transition:
        width 850ms var(--diag-motion-smooth);
}


.diag-progress-shimmer {
    position: absolute;

    top: 0;
    bottom: 0;

    width: 90px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.55),
            transparent
        );

    opacity: 0;

    transition: opacity 300ms ease;
}


.diag-progress[data-state="loading"] .diag-progress-shimmer {
    opacity: 1;

    animation:
        diag-progress-shine 1.9s
        var(--diag-motion-smooth)
        infinite;
}


@keyframes diag-progress-shine {
    from {
        transform: translateX(-120px);
    }

    to {
        transform: translateX(620px);
    }
}


/* =========================================================
   RESULTS LAYOUT
   ========================================================= */

.diagnostic-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;

    margin: 10px 0 26px;
}


/* =========================================================
   RESULT CARD
   ========================================================= */

.diagnostic-card {
    position: relative;

    min-width: 0;

    padding: 20px;

    overflow: hidden;

    border: 1px solid var(--diag-border);
    border-radius: var(--diag-radius-lg);

    background:
        rgba(255, 255, 255, 0.88);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 4px 22px rgba(0, 0, 0, 0.035);

    opacity: 1;
    transform: none;
    filter: none;
}


.diagnostic-experience[data-animate="true"] .diagnostic-card:not(.is-visible) {
    opacity: 0;

    transform:
        translateY(24px)
        scale(0.975);

    filter: blur(7px);
}


.diagnostic-experience[data-animate="true"] .diagnostic-card {
    transition:
        opacity 800ms var(--diag-motion-smooth),
        transform 900ms var(--diag-motion-smooth),
        filter 850ms var(--diag-motion-smooth),
        box-shadow 500ms var(--diag-motion-smooth),
        border-color 500ms ease;
}


.diagnostic-card[data-stagger="0"] { transition-delay: calc(var(--diag-stagger-step) * 0); }
.diagnostic-card[data-stagger="1"] { transition-delay: calc(var(--diag-stagger-step) * 1); }
.diagnostic-card[data-stagger="2"] { transition-delay: calc(var(--diag-stagger-step) * 2); }
.diagnostic-card[data-stagger="3"] { transition-delay: calc(var(--diag-stagger-step) * 3); }
.diagnostic-card[data-stagger="4"] { transition-delay: calc(var(--diag-stagger-step) * 4); }
.diagnostic-card[data-stagger="5"] { transition-delay: calc(var(--diag-stagger-step) * 5); }


.diagnostic-card.is-visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    filter: blur(0);
}


.diagnostic-card.is-visible:hover {
    transform:
        translateY(-3px)
        scale(1.004);

    box-shadow:
        0 15px 42px rgba(0, 0, 0, 0.065);
}


.diagnostic-card-head {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;

    gap: 12px;

    min-height: 44px;
}


.diagnostic-lottie {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    opacity: 0.82;

    transform:
        scale(0.9)
        translateY(2px);

    transition:
        opacity 600ms ease,
        transform 700ms var(--diag-motion-smooth);
}


.diagnostic-card[data-state="loading"]
.diagnostic-lottie {
    opacity: 1;

    transform: scale(1);
}


.diagnostic-status {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    margin-left: auto;

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.1);

    opacity: 0;

    transform: scale(0);

    transition:
        opacity 350ms ease,
        transform 550ms var(--diag-motion-smooth),
        background-color 350ms ease,
        box-shadow 400ms ease;
}


/* =========================================================
   VOYANTS VERT / ROUGE
   ========================================================= */

.diag-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 7px;
}

.diag-line:last-child {
    margin-bottom: 0;
}

.diag-line-text {
    flex: 1 1 auto;
    min-width: 0;
    color: #444446;
}

.diag-line-heading .diag-line-text {
    font-weight: 600;
    color: var(--diag-text);
}

.diag-line-spacer {
    height: 8px;
}

.diag-voyant {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-top: 5px;
    flex: 0 0 10px;
    border-radius: 50%;
}

.diag-voyant-ok {
    background: #1f8f4e;
    box-shadow: 0 0 0 3px rgba(31, 143, 78, 0.14);
}

.diag-voyant-fail {
    background: #e94e1a;
    box-shadow: 0 0 0 3px rgba(233, 78, 26, 0.14);
}

.diag-voyant-warn {
    background: #d4a017;
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.14);
}

.diag-voyant-info {
    background: #8a8a8e;
    box-shadow: 0 0 0 3px rgba(138, 138, 142, 0.12);
}


/* =========================================================
   RESULT BODY - skeleton / content crossfade
   ========================================================= */

.diagnostic-card-body {
    position: relative;
    z-index: 1;

    display: grid;
}


.diagnostic-card-body > * {
    grid-area: 1 / 1;
}


.diagnostic-skeleton {
    display: flex;
    flex-direction: column;

    gap: 9px;

    margin-top: 15px;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 450ms var(--diag-motion-soft);
}


.diagnostic-skeleton span {
    display: block;

    height: 11px;

    border-radius: 6px;

    background:
        linear-gradient(
            100deg,
            rgba(0, 0, 0, 0.05) 15%,
            rgba(0, 0, 0, 0.09) 35%,
            rgba(0, 0, 0, 0.05) 55%
        );

    background-size: 220% 100%;

    animation:
        diag-shimmer 1.7s linear infinite;
}


.diagnostic-skeleton span:nth-child(1) { width: 85%; }
.diagnostic-skeleton span:nth-child(2) { width: 65%; }
.diagnostic-skeleton span:nth-child(3) { width: 45%; }


@keyframes diag-shimmer {
    from {
        background-position: 150% 0;
    }

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


.diagnostic-card[data-state="loading"] .diagnostic-skeleton {
    opacity: 1;
}


.affichage_resultat,
.diagnostic-card-content {
    margin: 0;

    font-family: inherit;
    font-size: 13px;
    line-height: 1.55;

    color: #444446;

    white-space: normal;

    max-height: none;
    opacity: 1;
    overflow: visible;
    transform: none;
    margin-top: 15px;
}


.diagnostic-experience[data-animate="true"] .affichage_resultat,
.diagnostic-experience[data-animate="true"] .diagnostic-card-content {
    max-height: 0;

    opacity: 0;

    overflow: hidden;

    transform:
        translateY(8px);

    margin-top: 0;

    transition:
        max-height 1000ms var(--diag-motion-smooth),
        opacity 650ms ease,
        transform 750ms var(--diag-motion-smooth),
        margin-top 650ms var(--diag-motion-smooth);
}


.diagnostic-card[data-state="success"]
.diagnostic-card-content,
.diagnostic-card[data-state="error"]
.diagnostic-card-content,
.diagnostic-experience[data-animate="true"]
.diagnostic-card[data-state="success"]
.diagnostic-card-content,
.diagnostic-experience[data-animate="true"]
.diagnostic-card[data-state="error"]
.diagnostic-card-content {
    max-height: 1200px;

    margin-top: 15px;

    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   LOADING STATES
   ========================================================= */

.diagnostic-card[data-state="loading"] {
    border-color: rgba(50, 114, 120, 0.13);
}


.diagnostic-card[data-state="loading"]
.diagnostic-status {
    opacity: 1;

    transform: scale(1);

    background: var(--diag-primary);

    box-shadow:
        0 0 0 5px rgba(50, 114, 120, 0.08);

    animation:
        diag-status-pulse 1.8s ease-in-out infinite;
}


@keyframes diag-status-pulse {
    0%,
    100% {
        transform: scale(0.85);

        box-shadow:
            0 0 0 3px rgba(50, 114, 120, 0.07);
    }

    50% {
        transform: scale(1);

        box-shadow:
            0 0 0 8px rgba(50, 114, 120, 0);
    }
}


/* =========================================================
   SUCCESS STATE
   ========================================================= */

.diagnostic-card[data-state="success"] {
    border-color:
        rgba(31, 143, 78, 0.28);

    animation: diag-card-settle 550ms var(--diag-motion-soft);
}


@keyframes diag-card-settle {
    0% {
        box-shadow: 0 0 0 0 rgba(50, 114, 120, 0.18);
    }

    100% {
        box-shadow: 0 0 0 14px rgba(50, 114, 120, 0);
    }
}


.diagnostic-card[data-state="success"]
.diagnostic-status {
    opacity: 1;

    transform: scale(1);

    background: #1f8f4e;

    box-shadow:
        0 0 0 5px rgba(31, 143, 78, 0.12);
}


.diagnostic-card[data-state="success"]
.diagnostic-lottie {
    opacity: 1;

    transform:
        scale(1.04);
}


/* =========================================================
   ERROR STATE
   ========================================================= */

.diagnostic-card[data-state="error"] {
    border-color:
        rgba(233, 78, 26, 0.24);
}


.diagnostic-card[data-state="error"]
.diagnostic-status {
    opacity: 1;

    transform: scale(1);

    background: var(--diag-accent);

    box-shadow:
        0 0 0 5px rgba(233, 78, 26, 0.07);
}


/* =========================================================
   VALIDATION
   ========================================================= */

.diag-validation-lottie {
    width: 54px;
    height: 54px;

    flex: 0 0 54px;
}


.diag-validation-grid {
    display: grid;
    grid-template-columns: 1fr;

    gap: 26px;
}


.diag-user-check[data-state="waiting"] {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    filter: none;
}


.diagnostic-experience[data-animate="true"]
.diag-user-check[data-state="waiting"] {
    opacity: 0;

    pointer-events: none;

    transform:
        translateY(25px)
        scale(0.985);

    filter: blur(7px);
}


.diag-user-check[data-state="ready"] {
    opacity: 1;

    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);

    filter: blur(0);
}


/* =========================================================
   SUPPORT
   ========================================================= */

.diag-support-block[data-state="waiting"] {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    filter: none;
}


.diagnostic-experience[data-animate="true"]
.diag-support-block[data-state="waiting"] {
    opacity: 0;

    pointer-events: none;

    transform:
        translateY(24px)
        scale(0.985);

    filter: blur(7px);
}


.diag-support-block[data-state="ready"] {
    opacity: 1;

    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);

    filter: blur(0);
}


.diag-support-layout {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 22px;
}


.diag-support-copy {
    min-width: 0;
}


.diag-support-lottie {
    width: 72px;
    height: 72px;

    flex: 0 0 72px;
}


.diag-support-action {
    background: var(--diag-accent);

    box-shadow:
        0 7px 22px rgba(233, 78, 26, 0.16);
}


.diag-support-action:hover {
    background: var(--diag-accent);

    box-shadow:
        0 14px 30px rgba(233, 78, 26, 0.21);
}


.diag-support-action[data-state="loading"] {
    cursor: wait;

    transform: scale(0.985);
}


.diag-support-action[data-state="success"] {
    background: var(--diag-primary-dark);
}


.diag-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 9999;

    max-width: min(520px, calc(100vw - 32px));
    padding: 12px 16px;

    border-radius: 14px;

    background: rgba(29, 29, 31, 0.92);
    color: #fff;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;

    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(-50%) translateY(10px);

    transition:
        opacity 320ms var(--diag-motion-soft),
        transform 380ms var(--diag-motion-smooth),
        visibility 0s linear 380ms;
}


.diag-toast[data-state="visible"] {
    opacity: 1;
    visibility: visible;

    transform: translateX(-50%) translateY(0);

    transition:
        opacity 320ms var(--diag-motion-soft),
        transform 380ms var(--diag-motion-smooth);
}


.diag-toast[data-tone="success"] {
    background: rgba(40, 94, 99, 0.95);
}


.diag-toast[data-tone="warn"] {
    background: rgba(233, 78, 26, 0.94);
}


/* =========================================================
   SECTION REVEAL
   ========================================================= */

.motion-section {
    opacity: 1;
    transform: none;
    filter: none;
}


.diagnostic-experience[data-animate="true"] .motion-section:not(.is-visible) {
    opacity: 0;

    transform:
        translateY(22px)
        scale(0.988);

    filter: blur(7px);
}


.diagnostic-experience[data-animate="true"] .motion-section.is-visible,
.diagnostic-experience[data-animate="true"] .motion-section {
    transition:
        opacity 850ms var(--diag-motion-smooth),
        transform 1000ms var(--diag-motion-smooth),
        filter 900ms var(--diag-motion-smooth);
}


.diagnostic-experience[data-animate="true"] .motion-section.is-visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    filter: blur(0);
}


/* =========================================================
   SUBTLE MOUSE-FOLLOW LIGHT
   JS updates --mouse-x / --mouse-y
   ========================================================= */

.diagnostic-card-spotlight {
    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: 0;

    border-radius: inherit;

    background:
        radial-gradient(
            380px circle at
            var(--mouse-x, 50%)
            var(--mouse-y, 50%),
            rgba(50, 114, 120, 0.06),
            transparent 48%
        );

    transition:
        opacity 500ms ease;
}


.diagnostic-card:hover .diagnostic-card-spotlight {
    opacity: 1;
}


.diag-user-context::before,
.diag-user-check::before,
.diag-support-block::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: 0;

    border-radius: inherit;

    background:
        radial-gradient(
            420px circle at
            var(--mouse-x, 50%)
            var(--mouse-y, 50%),
            rgba(50, 114, 120, 0.045),
            transparent 48%
        );

    transition:
        opacity 500ms ease;
}


.diag-user-context:hover::before,
.diag-user-check:hover::before,
.diag-support-block:hover::before {
    opacity: 1;
}


.diag-user-context > *,
.diag-user-check > *,
.diag-support-block > * {
    position: relative;
    z-index: 1;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .diagnostic-experience {
        padding: 12px;
    }

    .diag-user-context,
    .diag-user-check,
    .diag-support-block {
        padding: 22px;

        border-radius: 20px;
    }

    .diag-form-grid {
        gap: 24px;
    }

    .diag-field-group,
    .diagnostic-results {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .diag-field-wide {
        grid-column: auto;
    }

    .diag-validation-grid {
        gap: 22px;
    }

    .diag-support-layout {
        align-items: flex-start;
    }

    .diag-support-lottie {
        width: 56px;
        height: 56px;

        flex-basis: 56px;
    }

    .browser-btn,
    .diag-primary-action,
    .diag-support-action {
        width: 100%;
    }
}


/* =========================================================
   ACCESSIBILITY
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.001ms !important;
        transition-delay: 0ms !important;
    }

    .diagnostic-experience,
    .motion-section,
    .motion-item,
    .diagnostic-card,
    .diag-user-check,
    .diag-support-block,
    .diag-progress,
    .diag-field-indicator,