/* ==========================================================
   WEB.CB06 — VISUEL HERO ACCUEIL PREMIUM V2
   Version sobre, sans JavaScript et sans modification du HTML
   ========================================================== */

/* Conteneur principal du visuel */

.hero--home .hero-showcase {
    position: relative !important;

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

    min-height: 520px !important;
    padding: 28px 18px 36px !important;

    isolation: isolate;
}

/* Fenêtre de navigateur */

.hero--home .showcase-browser {
    position: relative !important;
    inset: auto !important;

    width: 100% !important;
    height: 430px !important;

    margin: 0 !important;

    overflow: hidden !important;

    border:
        1px solid rgba(10, 31, 58, .12) !important;

    border-radius: 28px !important;

    background: #ffffff !important;

    box-shadow:
        0 34px 85px rgba(8, 27, 53, .18),
        0 10px 28px rgba(8, 27, 53, .09),
        inset 0 1px 0 rgba(255, 255, 255, .92) !important;

    transform: none !important;
}

/* Barre supérieure */

.hero--home .showcase-browser__bar {
    position: relative !important;
    z-index: 5 !important;

    display: flex !important;
    align-items: center !important;

    height: 48px !important;
    padding: 0 18px !important;

    border-bottom:
        1px solid rgba(10, 31, 58, .08) !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5f8fc 100%
        ) !important;
}

.hero--home .showcase-browser__bar > span {
    width: 8px !important;
    height: 8px !important;

    background: #cbd5e1 !important;
}

.hero--home .showcase-browser__bar > span:nth-child(1) {
    background: #ff8c8c !important;
}

.hero--home .showcase-browser__bar > span:nth-child(2) {
    background: #ffd26f !important;
}

.hero--home .showcase-browser__bar > span:nth-child(3) {
    background: #83dfb0 !important;
}

.hero--home .showcase-browser__bar > div {
    position: absolute !important;
    left: 50% !important;

    max-width: 48% !important;

    margin: 0 !important;
    padding: 7px 18px !important;

    overflow: hidden !important;

    border:
        1px solid rgba(10, 31, 58, .07) !important;

    border-radius: 999px !important;

    background: #eef3f8 !important;
    color: #718096 !important;

    font-size: .68rem !important;
    font-weight: 540 !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;

    transform: translateX(-50%) !important;
}

/* Écran intérieur */

.hero--home .showcase-browser__screen {
    position: relative !important;

    min-height: 382px !important;
    height: 382px !important;

    padding: 38px 40px !important;

    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 78% 31%,
            rgba(84, 213, 221, .16),
            transparent 25%
        ),
        radial-gradient(
            circle at 83% 87%,
            rgba(68, 92, 255, .27),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            #061427 0%,
            #081c36 54%,
            #0b2e62 100%
        ) !important;

    color: #ffffff !important;
}

/* Quadrillage très discret */

.hero--home .showcase-browser__screen::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .025) 1px,
            transparent 1px
        );

    background-size: 36px 36px;

    pointer-events: none;
}

/* Navigation de la maquette */

.hero--home .showcase-nav {
    position: relative !important;
    z-index: 4 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 28px !important;

    color: rgba(223, 235, 250, .62) !important;

    font-size: .7rem !important;
    font-weight: 480 !important;
}

.hero--home .showcase-nav b {
    margin-right: auto !important;

    color: #ffffff !important;

    font-size: .72rem !important;
    font-weight: 650 !important;
    letter-spacing: .04em !important;
}

.hero--home .showcase-nav span {
    color: rgba(223, 235, 250, .65) !important;
}

.hero--home .showcase-nav i {
    display: block !important;

    width: 7px !important;
    height: 7px !important;

    border-radius: 50% !important;

    background: #8ff2d2 !important;

    box-shadow:
        0 0 0 5px rgba(143, 242, 210, .08),
        0 0 22px rgba(143, 242, 210, .4) !important;
}

/* Texte principal de la maquette */

.hero--home .showcase-copy {
    position: relative !important;
    z-index: 4 !important;

    max-width: 58% !important;

    margin-top: 56px !important;
}

.hero--home .showcase-copy small {
    display: block !important;

    color: #8ff2d2 !important;

    font-size: .66rem !important;
    font-weight: 650 !important;
    letter-spacing: .17em !important;
    line-height: 1.4 !important;
}

.hero--home .showcase-copy strong {
    display: block !important;

    margin: 15px 0 0 !important;

    color: #ffffff !important;

    font-size: clamp(
        2.1rem,
        2.55vw,
        2.8rem
    ) !important;

    font-weight: 570 !important;

    line-height: .99 !important;
    letter-spacing: -.043em !important;
}

.hero--home .showcase-copy strong em {
    color: #5f8bff !important;

    font-weight: inherit !important;
}

.hero--home .showcase-copy > span {
    display: inline-flex !important;
    align-items: center !important;

    min-height: 39px !important;

    margin-top: 20px !important;
    padding: 0 15px !important;

    border:
        1px solid rgba(143, 242, 210, .18) !important;

    border-radius: 12px !important;

    background:
        rgba(143, 242, 210, .08) !important;

    color: #9cf4d8 !important;

    font-size: .69rem !important;
    font-weight: 620 !important;
    letter-spacing: .025em !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

/* Illustration abstraite */

.hero--home .showcase-art {
    position: absolute !important;

    right: -6% !important;
    bottom: -17% !important;

    z-index: 1 !important;

    width: 52% !important;
    height: 92% !important;

    overflow: visible !important;

    border-radius:
        52% 48% 18% 60% / 45% 45% 25% 55% !important;

    background:
        radial-gradient(
            circle at 35% 27%,
            rgba(177, 255, 232, .95) 0%,
            rgba(177, 255, 232, .42) 13%,
            transparent 28%
        ),
        linear-gradient(
            142deg,
            #168df5 0%,
            #4368ff 45%,
            #7046ef 100%
        ) !important;

    box-shadow:
        0 0 90px rgba(30, 128, 255, .25),
        inset 0 1px 0 rgba(255, 255, 255, .25) !important;

    transform:
        rotate(-5deg) !important;
}

/* Halo doux autour de l’illustration */

.hero--home .showcase-art::before {
    content: "";

    position: absolute;
    inset: -18%;

    border:
        1px solid rgba(255, 255, 255, .11);

    border-radius: 50%;

    transform: rotate(12deg);
}

.hero--home .showcase-art::after {
    content: "";

    position: absolute;
    inset: 14%;

    border:
        1px solid rgba(255, 255, 255, .16);

    border-radius: 50%;

    box-shadow:
        0 0 55px rgba(143, 242, 210, .11);
}

/* Orbite */

.hero--home .showcase-orbit {
    top: 16% !important;
    right: 17% !important;

    width: 210px !important;
    height: 210px !important;

    border:
        1px solid rgba(255, 255, 255, .25) !important;
}

.hero--home .showcase-orbit::after {
    width: 13px !important;
    height: 13px !important;

    background: #9ff4dc !important;

    box-shadow:
        0 0 25px rgba(159, 244, 220, .85) !important;
}

/* Cartes UX et SEO intégrées proprement */

.hero--home .showcase-card {
    z-index: 4 !important;

    min-width: 88px !important;

    padding: 10px 12px !important;

    border:
        1px solid rgba(255, 255, 255, .12) !important;

    border-radius: 13px !important;

    background:
        rgba(5, 19, 39, .76) !important;

    box-shadow:
        0 15px 35px rgba(2, 10, 25, .22) !important;

    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.hero--home .showcase-card span {
    color: rgba(227, 237, 250, .63) !important;

    font-size: .55rem !important;
    font-weight: 450 !important;
}

.hero--home .showcase-card b {
    margin-top: 3px !important;

    color: #ffffff !important;

    font-size: .93rem !important;
    font-weight: 620 !important;
}

.hero--home .showcase-card--one {
    top: 26% !important;
    left: 3% !important;
}

.hero--home .showcase-card--two {
    right: 7% !important;
    bottom: 18% !important;
}

/* Preuves flottantes extérieures */

.hero--home .floating-proof {
    z-index: 8 !important;

    gap: 10px !important;

    padding: 12px 14px !important;

    border:
        1px solid rgba(10, 31, 58, .09) !important;

    border-radius: 15px !important;

    background:
        rgba(255, 255, 255, .94) !important;

    box-shadow:
        0 18px 45px rgba(8, 27, 53, .13) !important;

    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.hero--home .floating-proof svg {
    width: 19px !important;
    height: 19px !important;

    color: #1768ff !important;
}

.hero--home .floating-proof small {
    color: #77869a !important;

    font-size: .63rem !important;
    font-weight: 450 !important;
}

.hero--home .floating-proof strong {
    margin-top: 2px !important;

    color: #0b1b31 !important;

    font-size: .79rem !important;
    font-weight: 590 !important;
}

.hero--home .floating-proof--top {
    top: 0 !important;
    right: 0 !important;

    min-width: 156px !important;
}

.hero--home .floating-proof--bottom {
    bottom: 3px !important;
    left: 0 !important;

    min-width: 166px !important;
}

/* Desktop intermédiaire */

@media (max-width: 1320px) {

    .hero--home .hero-showcase {
        min-height: 500px !important;
    }

    .hero--home .showcase-browser {
        height: 410px !important;
    }

    .hero--home .showcase-browser__screen {
        min-height: 362px !important;
        height: 362px !important;

        padding: 34px 34px !important;
    }

    .hero--home .showcase-copy {
        margin-top: 49px !important;
    }

    .hero--home .showcase-copy strong {
        font-size: clamp(
            1.95rem,
            2.45vw,
            2.55rem
        ) !important;
    }
}

/* Tablette */

@media (max-width: 1120px) {

    .hero--home .hero-showcase {
        width: min(100%, 760px) !important;

        min-height: 520px !important;

        margin-inline: auto !important;
    }

    .hero--home .showcase-browser {
        height: 430px !important;
    }

    .hero--home .showcase-browser__screen {
        height: 382px !important;
        min-height: 382px !important;
    }

    .hero--home .showcase-copy strong {
        font-size: 2.7rem !important;
    }
}

/* Petit écran et mobile */

@media (max-width: 720px) {

    .hero--home .hero-showcase {
        min-height: 390px !important;

        padding:
            16px 0 20px !important;
    }

    .hero--home .showcase-browser {
        height: 344px !important;

        border-radius: 22px !important;
    }

    .hero--home .showcase-browser__bar {
        height: 40px !important;

        padding-inline: 13px !important;
    }

    .hero--home .showcase-browser__bar > div {
        max-width: 54% !important;

        padding:
            5px 12px !important;

        font-size: .58rem !important;
    }

    .hero--home .showcase-browser__screen {
        height: 304px !important;
        min-height: 304px !important;

        padding:
            25px 22px !important;
    }

    .hero--home .showcase-nav {
        gap: 10px !important;

        font-size: .52rem !important;
    }

    .hero--home .showcase-nav b {
        font-size: .58rem !important;
    }

    .hero--home .showcase-copy {
        max-width: 72% !important;

        margin-top: 36px !important;
    }

    .hero--home .showcase-copy small {
        font-size: .55rem !important;
        letter-spacing: .12em !important;
    }

    .hero--home .showcase-copy strong {
        margin-top: 10px !important;

        font-size: clamp(
            1.6rem,
            7.7vw,
            2rem
        ) !important;

        line-height: 1 !important;
    }

    .hero--home .showcase-copy > span {
        min-height: 34px !important;

        margin-top: 15px !important;
        padding-inline: 12px !important;

        font-size: .59rem !important;
    }

    .hero--home .showcase-art {
        right: -23% !important;
        bottom: -19% !important;

        width: 73% !important;
        height: 91% !important;
    }

    .hero--home .showcase-orbit {
        width: 130px !important;
        height: 130px !important;
    }

    .hero--home .showcase-card {
        min-width: 66px !important;

        padding: 8px 9px !important;
    }

    .hero--home .showcase-card--one {
        top: 20% !important;
        left: -1% !important;
    }

    .hero--home .showcase-card--two {
        right: 17% !important;
        bottom: 23% !important;
    }

    .hero--home .showcase-card span {
        font-size: .48rem !important;
    }

    .hero--home .showcase-card b {
        font-size: .75rem !important;
    }

    .hero--home .floating-proof {
        display: none !important;
    }
}

/* Très petits téléphones */

@media (max-width: 390px) {

    .hero--home .hero-showcase {
        min-height: 360px !important;
    }

    .hero--home .showcase-browser {
        height: 322px !important;
    }

    .hero--home .showcase-browser__screen {
        min-height: 282px !important;
        height: 282px !important;

        padding:
            22px 18px !important;
    }

    .hero--home .showcase-copy {
        max-width: 77% !important;

        margin-top: 30px !important;
    }

    .hero--home .showcase-copy strong {
        font-size: 1.55rem !important;
    }

    .hero--home .showcase-art {
        right: -31% !important;

        width: 80% !important;
    }
}