/* =========================================================
   CUSTOM DU VERSE — PORTAL CTA 2026
   Composant isolé : aucun impact sur la vignette MVP.
========================================================= */

.cdv-portal-cta {

    --portal-x: 50%;
    --portal-y: 50%;
    --portal-tilt-x: 0deg;
    --portal-tilt-y: 0deg;

    position: relative !important;
    isolation: isolate !important;

    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        58px !important;

    align-items: center !important;

    width: min(100%, 292px) !important;
    min-height: 62px !important;

    margin-top: 25px !important;
    padding: 5px 5px 5px 22px !important;

    color: #ffffff !important;
    text-decoration: none !important;

    border:
        1px solid
        rgba(150, 172, 255, .28) !important;

    border-radius: 17px !important;

    background:
        linear-gradient(
            112deg,
            rgba(9, 12, 32, .84),
            rgba(13, 17, 43, .69) 57%,
            rgba(8, 22, 39, .82)
        ) !important;

    box-shadow:

        inset 0 1px 0
        rgba(255, 255, 255, .075),

        inset 0 -1px 0
        rgba(0, 0, 0, .45),

        0 17px 42px
        rgba(0, 0, 0, .26),

        0 0 0 1px
        rgba(91, 112, 255, .035) !important;

    -webkit-backdrop-filter:
        blur(18px)
        saturate(135%) !important;

    backdrop-filter:
        blur(18px)
        saturate(135%) !important;

    overflow: hidden !important;

    transform:
        perspective(760px)
        rotateX(var(--portal-tilt-x))
        rotateY(var(--portal-tilt-y))
        translateY(0) !important;

    transform-style: preserve-3d !important;

    transition:

        transform
        240ms
        cubic-bezier(.2, .8, .2, 1),

        border-color
        240ms ease,

        box-shadow
        240ms ease,

        background
        240ms ease !important;

}


/* Ligne spectrale supérieure */

.cdv-portal-cta::before {

    content: "";

    position: absolute;
    z-index: -1;

    top: -1px;
    left: 8%;

    width: 42%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(141, 106, 255, .92),
            rgba(91, 218, 255, .98),
            transparent
        );

    filter:
        drop-shadow(
            0 0 7px
            rgba(91, 203, 255, .72)
        );

    animation:
        cdvPortalRail
        4.8s
        cubic-bezier(.45, 0, .55, 1)
        infinite;

}


/* Halo interne suivant doucement le pointeur */

.cdv-portal-cta::after {

    content: "";

    position: absolute;
    z-index: -2;

    inset: -70%;

    pointer-events: none;

    background:
        radial-gradient(
            circle
            at
            var(--portal-x)
            var(--portal-y),

            rgba(100, 197, 255, .18),

            rgba(122, 90, 255, .08) 17%,

            transparent 39%
        );

    opacity: .72;

    transition:
        opacity
        220ms ease;

}


/* Partie texte */

.cdv-portal-copy {

    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

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

    min-width: 0;

    transform:
        translateZ(17px);

}


.cdv-portal-kicker {

    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 5px;

    color:
        rgba(161, 179, 221, .66);

    font-size: 7px;
    line-height: 1;

    font-weight: 850;

    letter-spacing: .22em;
    text-transform: uppercase;

}


.cdv-portal-kicker::before {

    content: "";

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #69f3cb;

    box-shadow:
        0 0 0 4px
        rgba(105, 243, 203, .08),

        0 0 11px
        rgba(105, 243, 203, .8);

    animation:
        cdvPortalSignal
        2.4s ease-in-out
        infinite;

}


.cdv-portal-label {

    position: relative;

    color: #ffffff;

    font-size: 11px;
    line-height: 1.1;

    font-weight: 900;

    letter-spacing: .14em;
    text-transform: uppercase;

    white-space: nowrap;

    text-shadow:
        0 4px 18px
        rgba(0, 0, 0, .44);

}


.cdv-portal-label::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 26px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #a08aff,
            #5cdcff
        );

    box-shadow:
        0 0 8px
        rgba(92, 220, 255, .55);

    transition:
        width
        300ms
        cubic-bezier(.2, .8, .2, 1);

}


/* Cellule flèche intégrée */

.cdv-portal-action {

    position: relative;
    z-index: 2;

    display: grid;
    place-items: center;

    width: 50px;
    height: 50px;

    border:
        1px solid
        rgba(134, 182, 255, .27);

    border-radius: 13px;

    background:

        radial-gradient(
            circle at 32% 22%,
            rgba(255, 255, 255, .17),
            transparent 28%
        ),

        linear-gradient(
            145deg,
            rgba(104, 77, 229, .48),
            rgba(43, 123, 208, .32)
        );

    box-shadow:

        inset 0 1px 0
        rgba(255, 255, 255, .13),

        inset 0 -7px 20px
        rgba(7, 10, 34, .29),

        0 8px 24px
        rgba(31, 65, 155, .24),

        0 0 17px
        rgba(105, 100, 255, .10);

    overflow: hidden;

    transform:
        translateZ(25px);

    transition:

        transform
        260ms
        cubic-bezier(.2, .8, .2, 1),

        border-color
        240ms ease,

        box-shadow
        240ms ease;

}


.cdv-portal-action::before {

    content: "";

    position: absolute;

    width: 70px;
    height: 14px;

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

    transform:
        rotate(-48deg)
        translateY(-48px);

    animation:
        cdvPortalLustre
        5.6s ease-in-out
        infinite;

}


.cdv-portal-action svg {

    position: relative;
    z-index: 2;

    width: 19px;
    height: 19px;

    fill: none;

    stroke: #ffffff;
    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;

    filter:
        drop-shadow(
            0 0 7px
            rgba(174, 221, 255, .62)
        );

    transition:
        transform
        260ms
        cubic-bezier(.2, .8, .2, 1);

}


/* Coin technique discret */

.cdv-portal-corner {

    position: absolute;

    left: 8px;
    bottom: 8px;

    width: 9px;
    height: 9px;

    border-left:
        1px solid
        rgba(105, 214, 255, .35);

    border-bottom:
        1px solid
        rgba(105, 214, 255, .35);

    pointer-events: none;

}


/* =========================================================
   INTERACTIONS
========================================================= */

.cdv-portal-cta:hover {

    border-color:
        rgba(125, 205, 255, .55) !important;

    background:
        linear-gradient(
            112deg,
            rgba(13, 16, 43, .92),
            rgba(18, 25, 59, .80) 57%,
            rgba(9, 31, 51, .90)
        ) !important;

    box-shadow:

        inset 0 1px 0
        rgba(255, 255, 255, .11),

        inset 0 -1px 0
        rgba(0, 0, 0, .40),

        0 22px 48px
        rgba(0, 0, 0, .32),

        0 0 32px
        rgba(80, 115, 255, .14) !important;

    transform:
        perspective(760px)
        rotateX(var(--portal-tilt-x))
        rotateY(var(--portal-tilt-y))
        translateY(-3px) !important;

}


.cdv-portal-cta:hover::after {

    opacity: 1;

}


.cdv-portal-cta:hover
.cdv-portal-label::after {

    width: 100%;

}


.cdv-portal-cta:hover
.cdv-portal-action {

    border-color:
        rgba(151, 220, 255, .60);

    box-shadow:

        inset 0 1px 0
        rgba(255, 255, 255, .19),

        inset 0 -7px 20px
        rgba(7, 10, 34, .22),

        0 11px 28px
        rgba(38, 92, 210, .30),

        0 0 26px
        rgba(97, 195, 255, .23);

    transform:
        translateZ(31px)
        translateX(2px);

}


.cdv-portal-cta:hover
.cdv-portal-action svg {

    transform:
        translateX(3px);

}


.cdv-portal-cta:active {

    transform:
        perspective(760px)
        scale(.985)
        translateY(0) !important;

    transition-duration:
        90ms !important;

}


.cdv-portal-cta:focus-visible {

    outline:
        2px solid
        rgba(116, 215, 255, .95) !important;

    outline-offset:
        4px !important;

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes cdvPortalRail {

    0% {
        left: -42%;
        opacity: 0;
    }

    16% {
        opacity: .9;
    }

    58% {
        opacity: .9;
    }

    76%,
    100% {
        left: 100%;
        opacity: 0;
    }

}


@keyframes cdvPortalSignal {

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

    50% {
        opacity: 1;
        transform: scale(1);
    }

}


@keyframes cdvPortalLustre {

    0%,
    58% {
        transform:
            rotate(-48deg)
            translateY(-58px);

        opacity: 0;
    }

    68% {
        opacity: .75;
    }

    84%,
    100% {
        transform:
            rotate(-48deg)
            translateY(58px);

        opacity: 0;
    }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 700px) {

    .cdv-portal-cta {

        width: min(100%, 276px) !important;
        min-height: 58px !important;

        grid-template-columns:
            minmax(0, 1fr)
            53px !important;

        padding-left: 18px !important;

    }

    .cdv-portal-action {

        width: 46px;
        height: 46px;

    }

    .cdv-portal-label {

        font-size: 10px;

    }

}


/* =========================================================
   ACCESSIBILITÉ MOTION
========================================================= */

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

    .cdv-portal-cta,
    .cdv-portal-cta::before,
    .cdv-portal-action,
    .cdv-portal-action::before,
    .cdv-portal-action svg,
    .cdv-portal-kicker::before {

        animation: none !important;
        transition-duration: 1ms !important;

    }

    .cdv-portal-cta {

        transform: none !important;

    }

}