/* ===================== */
/*  DEBUT HALO INFINITE  */
/* ===================== */

/* main */
::-moz-selection {
    background: #d0b325;
    color: #101010;
    text-shadow: none;
}

::selection {
    background: #d0b325;
    color: #101010;
    text-shadow: none;
}


.hi__main__container *{
    padding-bottom: 0vw;
}


/* ---------------------------- */

.hi__partie{
    width: 100%;
    max-height: 100vw;
    overflow: hidden;
}

.hi__partie--1{
    position: relative;
    background: : var(--noir);
}
.h1__titre {
    position: absolute;
    top: 10.5vw;
    left: 14vw;
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif !important;
}
.hi__h1--container {
    text-transform: uppercase;
    color: var(--blanc);
    font-size: 2.3vw;
    filter: drop-shadow(0px 4px 6px #000000AA);
    width: fit-content;
    overflow: hidden;
    display: flex;
    height: 2.9vw;
}
.hi__h1-pc--1 {
    transform: translateY(150px);
    animation: showTitle 1s forwards ease-in-out;
    animation-delay: 1s;
}
.hi__h1-pc--2 {
    transform: translateY(150px);
    animation: showTitle 1s forwards ease-in-out;
    animation-delay: 1.4s;
}
.hi__h1-pc--3 {
    transform: translateY(150px);
    animation: showTitle 1s forwards ease-in-out;
    animation-delay: 1.8s;
}
.hi__h2 {
    color: #d0b325;
    font-size: 4.5vw;
    filter: drop-shadow(2px 3px 2px black);
    font-weight: var(--semibold);
    animation: showTitleh2 5s forwards;
    animation-delay: 1s;
    opacity: 0;
}

#idvideo {
    opacity: 0;
    animation: showTitleh2 3s forwards;
}

.hi__trailer-hide {
    display: none;
}


@keyframes showTitle {
    0% {
        transform: translateY(120%);
    }

    100% {
        transform: translateY(0%);
    }
}


@keyframes showTitleh2 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.hi__footer-logos {
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1vw;
    bottom: 3.5vw;
    position: absolute;
}

.hi__footer-logos {
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5vw;
    overflow: hidden;
}
.hi__footer-logos--img {
    width: 8.5vw;
    animation: showLogos 1s forwards linear;
    animation-delay: 1.5s;
    opacity: 0;
    transform: translateY(-120%);
}


@keyframes showLogos{
    0% {
        transform: translateY(-120%);
        opacity:0;
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

.hi__partie--interne {
    position: relative;
    z-index: 3;
    padding: 4vw 14vw;
    pointer-events: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.hi__partie--left {
    width: 40vw;
}

.hi__titre-page {
    color: var(--blanc);
    font-size: 3vw;
    font-family: Montserrat, sans-serif;
    font-weight: var(--medium);
    width: fit-content;
    height: fit-content;
    pointer-events: auto;
    line-height: 1.5;
    animation: alternShow 3.5s infinite;
}

.hi__texte--interne {
    color: var(--blanc);
    font-size: 1.2vw;
    font-family: Montserrat, sans-serif;
    font-weight: 200;
    width: fit-content;
    height: fit-content;
    pointer-events: auto;
    line-height:2;
}


hi__hexagon::-moz-selection {
    background: red !important;
    color: #101010;
    text-shadow: none;
}

hi__hexagon::selection {
    background: red !important;
    color: #101010;
    text-shadow: none;
}


@keyframes alternShow {
    0% {
        filter: drop-shadow(0px 0px 1vw #d0b325DD);
    }
    50% {
        filter: drop-shadow(0px 0px 1vw #00000000);
    }
    100% {
        filter: drop-shadow(0px 0px 1vw #d0b325DD);
    }
}

.hi__bold-title {
    font-weight: var(--semibold);
    animation: alternShow 2s infinite;
}

.hi__trait{
    position:relative
}
.hi__trait--hide {
    width: 0vw;
    height: 5vw;
    overflow: hidden;
    position:relative;
}
.hi__trait--show {
    width: 0vw;
    transition: 1s;
    animation: traitShow 2s forwards linear;
}
.hi__trait--img {
    width: 31vw;
    position: relative;
    top: 1vw;
}
@keyframes traitShow {
    0% {
        width: 0vw;
    }
    100% {
        width: 31vw;
    }
}

.hi__trait--show::after {
    content: "";
    position: absolute;
    top: 0.8vw;
    left: -1.7vw;
    width: 3vw;
    height: 3vw;
    background: url("https://www.cybertek.fr/images_produits/cybertek/images-landing/halo-infinite-pc/cb.svg");
    background-size: cover;
    animation: traitFollow1 2s linear infinite;
    animation-delay:0.02s;
}


@keyframes traitFollow1 {
    0% {
        opacity: 1;
        top: 1.1vw;
        left: -1.7vw;
    }
    3% {
        top: 1.7vw;
    }
    24% {
        top: 1.7vw;
    }
    25% {
        top: 1.1vw;
    }
    85% {
        top: 1.1vw;
    }
    86% {
        top: 0.5vw;
        opacity:1;
    }
    100% {
        top: 0.5vw;
        left: 29.9vw;
        opacity:0;
    }
}

.hi__btn {
    padding: 0.8vw 2.7vw;
    border: solid 1px #d0b325;
    font-size: 1.1vw;
    font-weight: 400;
    color: var(--blanc);
    background: rgb(208,179,37);
    background: linear-gradient(138deg, rgba(208,179,37,1) 0%, rgba(208,179,37,0) 50%);
    transition: 0.3s;
    display: block;
    width: fit-content;
    position: relative;
    margin-left: 1vw;
    margin-top:1vw;
}
    .hi__btn:hover {
        background: #d0b325;
    }
.hi__btn:before {
    content: "";
    width: 0.4vw;
    height: calc(100% + 2px);
    background: #d0b325;
    position: absolute;
    top: -1px;
    left: -0.8vw;
    border: solid 1px #d0b325;
}



.hi__btn--part1 {
    position: relative;
    left: 10vw;
    top: 2vw;
    width: 0%;
    animation: btnShow 3s forwards;
    animation-delay: 1.8s;
    overflow: hidden;
}

@keyframes btnShow {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}





.hi__video--container {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    position: relative;
}

.hi__trait--img-video {
    height: 100%;
}

.hi__partie--right {
    width: 24vw;
    height: 2vh;
    z-index: 5;
    position: relative;
    pointer-events: auto;
}

.hi__trait--video {
    height: 0vw;
    margin-top: 1vw;
    margin-bottom: -1vw;
    transition: 3s;
}

.hi__trait--video--show {
    height: 0vw;
    animation: videoShow 3s forwards;
}

@keyframes videoShow {
    0% {
        height: 0vw;
    }

    100% {
        height: 35vw;
    }
}

































.viewport__hexagones {
    position: absolute;
    top: 0;
    left: 0;
}

.hi__hexagon {
    height: 100vh;
    background: var(--noir);
    overflow: hidden;
    position:relative;
}


/* Hexagon using clip-path */
.hexagon {
    position: relative;
    width: 100px;
    height: 110px;
    background: var(--noir);
    margin: 1px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: 2s;
    z-index: 2;
}

    .hexagon:before {
        content: "";
        position: absolute;
        width: 100px;
        height: 110px;
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        transition: 2s;
        background-color: : var(--noir);
        z-index: 1;
    }

    .hexagon:after {
        content: "";
        position: absolute;
        width: 100px;
        height: 110px;
        clip-path: polygon(50% 4%, 97% 26%, 97% 72%, 50% 96%, 2% 73%, 2% 28%);
        transition: 2s;
        background: rgb(0,0,0);
        background: linear-gradient(342deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100%);
        z-index: 1;
    /*    animation: animateColor 1s infinite;*/
    }

    .hexagon:hover:before {
        transition: 0s;
        background: rgb(30, 28, 69);
    }

    .hexagon:hover:after {
        transition: 0s;
        background: rgb(0,0,0);
        background: linear-gradient(342deg, rgba(0,0,0,1) 0%, rgba(31,41,124,1) 100%);
    }


.row {
    display: inline-flex;
    margin-top: -32px;
    margin-left: -50px;
}

    .row:nth-child(even) {
        margin-left: 1px;
    }

@keyframes animateColor {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}



/* --- partie 3 --- */

.hi__partie--3 {
    background: url("https://www.cybertek.fr/images_produits/cybertek/images-landing/halo-infinite-pc/bg1.jpg");
    background-size: cover;
    height: 115vh;
    width: 100%;
    position: relative;
}

.hi__presentation_pc {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position:relative;
}
.hi__pc--container{
    display:flex;
    position: relative;
}
.hi__presentation--left {
    width: 45vw;
    margin-left: 5vw;
    height: fit-content;
    margin-top: 7vw;
}
.hi__presentation--right {
    margin-top: 1vw;
    margin-left: -3vw;
    position: relative;
}
    .hi__presentation--right:after {
        content: "";
        width: 7vw;
        height: 5vw;
        background: var(--rouge);
        position: absolute;
        right: -8vw;
        top: 2vw;
        background: url(https://www.cybertek.fr/images_produits/cybertek/images-landing/halo-infinite-pc/traitviragebleu.png);
        background-size: cover;
    }
.hi__pc_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: 1s;
}
.hi__pc_img1 {
    z-index: 10;
}
.hi__pc--titre1 {
    font-weight: 400;
}
.hi__pc--titre2 {
    font-weight: var(--semibold);
    font-size: 5.5vw;
    height: fit-content;
    margin-top: -2.5vw;
    margin-left: -0.3vw;
}

.hi__presentation--center {
    position: absolute;
    top: 12vw;
    left: 32vw;
    color: var(--blanc);
    font-size: 1vw;
    width: 60vw;
    height: 28vw;
}

.hi__presentation--line-txt-1 {
    color: #03aef1;
    font-size: 1.2vw;
    font-weight: var(--medium);
    animation: glowball 3s infinite;
}


.hi__presentation--line-txt-2 {
    color: var(--blanc);
    font-size: 1vw;
    margin-top: 0.5vw;
}

.hi__presentation--center-txt {
    position: absolute;
    top: 0vw;
    left: 32vw;
}
.hi__presentation--line-txt {
    margin-bottom: 4vw;
}
.hi__presentation--center-une-line {
    max-width: 45vw;
}

.hi__line-ball {
    width: 8vw;
    transform: translate(-4vw, -4.7vw);
}
.hi__line-pc {
    height: 0.8vw;
}
.hi__line-pc--end {
    width: 13vw;
}
/* -------------- */
.hi__line--1 {
    transform: translate(5vw, 2.6vw);
}
.hi__line-pc--begin-1 {
    width: 26vw;
}

/* -------------- */
.hi__line--2 {
    transform: translate(2vw, 0.2vw);
}

.hi__line-pc--begin-2 {
    width: 29vw;
}

.hi__line-pc--end-2 {
    width: 13vw;
}

/* -------------- */
.hi__line--3 {
    transform: translate(1vw, -1.9vw);
}

.hi__line-pc--begin-3 {
    width: 30vw;
}

.hi__line-pc--end-3 {
    width: 13vw;
}

/* -------------- */
.hi__line--4 {
    transform: translate(4vw, -7.9vw);
    max-width: 39.8vw;
}

.hi__line-ball-2 {
    transform: translate(0vw, -4.2vw);
}

.hi__line-pc--begin-4 {
    width: 26.5vw;
    height: 5vw;
}

.hi__line-pc--end-4 {
    width: 20vw;
    height: 5vw;
}
/* -------------- */
.hi__line--5 {
    transform: translate(-2vw, -16.9vw);
    max-width: 46vw;
}

.hi__line-pc--begin-5 {
    width: 25.5vw;
    height: 5vw;
}

.hi__line-pc--end-5 {
    width: 21vw;
    height: 7vw;
}
/* -------------- */
.hi__presentation--center-une-line--container-transition {
    width: 0%;
    transition: 4s;
    overflow: hidden;
}
.hi__presentation--center-une-line--container-transition--show {
    animation: lineLoad 4s forwards;
}
.hi__presentation--center-une-line--container {
    width: 50vw;
    display : flex;

}
@keyframes lineLoad{
    0%{
        width:0%;
    }
    100%{
        width: 100%;
    }
}
@keyframes glowball{
    0% {
        filter: drop-shadow(0px 0px 0.2vw #01a2e3);
    }
    50% {
        filter: drop-shadow(0px 0px 0.2vw var(--noir));
    }
    100% {
        filter: drop-shadow(0px 0px 0.2vw #01a2e3);
    }
}
.hi__presentation--sep {
    height: 2px;
    width: 0vw;
    background: #3f474cAA;
    position: relative;
    right: -47.2vw;
    top: -1vw;
}
.hi__presentation--sep {
    animation: showSep 1s forwards;
}
.hi__presentation_pc--btn {
    width: fit-content;
    margin: auto;
    border: solid 1px #2489b9;
    background: rgb(37,170,208);
    background: linear-gradient(138deg, rgba(37,170,208,1) 0%, rgba(37,208,200,0) 50%);
}
    .hi__presentation_pc--btn:hover {
        background: #2489b9;
    }
    .hi__presentation_pc--btn:before {
        border: solid 1px #2489b9;
        background: #2489b9;
    }

.hi__btn--hide {
    width: fit-content;
    border: solid 1px #d0b325;
    background: rgb(37,170,208);
    background: linear-gradient(138deg, rgba(208,179,37,1) 0%, rgba(37,208,200,0) 50%);
}
.hi__btn--hide:hover {
    background: #d0b325;
}

@keyframes showSep {
    0% {
            width: 0vw;
        }

        100% {
            width: 60vw;
        }
    }

    .hi__btnpc {
    position: absolute;
    bottom: 2vw;
    width: 100%;
}


.hi__presentation--sep-2 {
    right: auto;
    left: 0;
    width: 75vw !important;
}
.hi__texte--interne--pc {
    margin:auto;
    text-align:center;
}









/* --- partie 4 --- */
.hi__partie--4 {
    text-align: center;
    width: 100%;
    background: : var(--noir);
    padding: 2vw 0;
    position:relative;
}

/* --- partie 5 --- */

.hi__partie--5 {
    background: url("https://www.cybertek.fr/images_produits/cybertek/images-landing/halo-infinite-pc/bggamepass.png");
    background-size: cover;
    height: 110vh;
    width: 100%;
    position: relative;
}

.hi__partie--left-5 {
    width: 54vw;
    margin-left: 4vw;
}


.hi__mschief {
    position: absolute;
    bottom: 0;
    right: -76px;
    width: 34vw;
}
.hi__mschief--img {
    width: 34vw;
    max-width: 600px;
}
.hi__mschief--img-absolute {
     position:absolute;
     top:0;
     left:0;
}
.hi__mschief--img-absolute-light {
    animation: casque 2s infinite linear;
}

@keyframes casque{
    0% {
        left: 0vw;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 0;
    }
    100% {
        left: -4vw;
        opacity: 0;
    }
}




/* --- partie 6 --- */
.hi__partie--left-6 {
    right: 9vw;
    position: absolute;
    top: 10vw;
}

.hi__mschief-human {
    position: absolute;
    bottom: 0;
    left: -2vw;
    width: 46vw;
}
.hi__mschief--img-22 {
    width: 50vw;
}



.pc-turn {
    position: relative;
    width: fit-content;
    /* margin: auto; */
    width: 35vw !important;
    height: 35vw !important;
    left: 9vw;
    top: 5vw;
    max-width: 600px;
    max-height: 600px;
}
#product {
    width: 35vw !important;
    height: 35vw !important;
    max-width: 600px;
    max-height: 600px;
}
#view_overlay {
    width: 35vw !important;
    height: 35vw !important;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    position: absolute !important;
    z-index: 5;
    top: 0 !important;
    left: 0 !important;
    background: none !important;
    cursor: grab;
}
.pc-turn img{
    transform: scale(1.33);
}




/* --- partie 7 --- */

.hi__partie--7 {
    background: url("https://www.cybertek.fr/images_produits/cybertek/images-landing/halo-infinite-pc/bgmulti.jpg");
    background-size: cover;
    height: 100vh;
    width: 100%;
    position: relative;
}



/* --- partie 8 --- */

.hi__partie--8 {
    background: url("https://www.cybertek.fr/images_produits/cybertek/images-landing/halo-infinite-pc/bgmodedejeu.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: top center;
    height: 110vh;
    width: 100%;
    position: relative;
}

.hi__partie--left-8 {
    width: 54vw;
    left: 4vw;
    top: 10vw;
    position: relative;
}

.hi__texte--interne--titre {
    color: #019fde;
    font-size: 1.8vw;
    font-weight: var(--semibold);
    margin: 2vw 0 1vw;
}



/* --- partie 9 --- */

.hi__partie--9 {
    background: url("https://www.cybertek.fr/images_produits/cybertek/images-landing/halo-infinite-pc/bgend.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: top center;
    height: 100vh;
    width: 100%;
    position: relative;
    height: fit-content;
}


.hi__titre-page--9 {
    left: 5vw;
    position: relative;
    top: 2vw;
}

.hi__halo-pc{
    display: flex;
    flex-wrap: wrap;
}
.hi__end-textes {
    position: relative;
    left: 16vw;
    top: 3vw;
    height: 65vw;
}
.hi__end--line {
    margin-bottom: 1vw;
    border-bottom: solid 1px #46494a;
    padding-bottom: 1vw;
}

.hi__trailer {
    position: absolute;
    left: 5%;
    top: 4vw;
}
#view_overlay {
    clip-path: inset(0% 10% 3% 15%);
}

.hi__titre-page--prix {
    position: relative;
    margin: auto;
}
.hi__prix-cents {
    font-size: 2.2vw;
    position: absolute;
    top: 1.5vw;
    right: -3vw;
}
.hi__footer-logos--end {
    bottom: 9vw;
}
.hi__mentions {
    color: #999999;
    font-size: 1vw;
    margin-top: 0.5vw;
    position: relative;
    bottom: 3vw;
    width: 90vw;
    margin: auto;
    font-size: var(--size_p);
    line-height: 1.5;
}

.hi__end--line-last {
    color: #fbde36;
}
.hi__laser {
    position: absolute;
    top: 0;
    right: 0px;
    transform: rotate(309deg);
}



section:target {
    padding-top: 60px !important;
    margin-top: -60px !important;
}

.hi__laser {
    animation : shinelaser infinite 1s;
}
@keyframes shinelaser {
    0% {
        opacity: 1;
        filter: blur(2px)  hue-rotate(8deg);
    }
    50% {
        opacity: 0.7;
        filter: blur(0.5px)  hue-rotate(0deg);
    }
    100% {
        opacity: 1;
        filter: blur(2px)  hue-rotate(8deg);
    }
}

@media screen and (min-width: 1700px) {
    .hi__texte--interne {
        font-size: 20px !important;
    }
    .hi__titre-page {
        font-size: 45px !important;
    }
    .hi__texte--interne--titre {
        font-size: 25px !important;
    }
    .hi__partie--left-8 {
        max-width: 800px
    }
    .hi__partie--1
    .hi__partie--2,
    .hi__partie--4,
    .hi__partie--6,
    .hi__partie--7,
    .hi__partie--8 {
        max-height: 1200px;
    }
    .hi__partie--5,
    .hi__partie--7 {
        max-height: 900px;
    }

    .hi__partie--3{
        max-height: 1500px;
    }
    .hi__mschief--img-22 {
        width: 50vw;
        max-width: 750px;
    }
    .hi__pc--titre2 {
        font-size: 50px !important;
        margin-top: -23px;
    }
    .hi__prix-cents {
        font-size: var(--val_30);
        right: -45px;
        top: 8px;
    }
    .hi__presentation--line-txt-1 {
        font-size: var(--size_h4);
    }
    .hi__presentation--line-txt-2 {
        font-size: var(--val_20);
    }
    .hi__end-textes {
        max-height: 1400px;
    }
    .hi__presentation--right:after {
        width: 120px;
        height: 80px;
        top: var(--val_10);
    }
    .hi__presentation--sep{
        top: var(--val_10);
    }
    .hi__presentation--sep-2 {
        top: -30px;
    }
    .hi__partie--left-6 {
        right:300px;
    }
}

@media screen and (max-width: 1100px) {
    .hi__texte--interne {
        font-size: 16px !important;
    }
    .hi__titre-page {
        font-size: 27px !important;
    }
    .hi__btn {
        font-size: 18px !important;
    }
    .hi__trait {
        display:none;
    }
    .hi__partie {
        max-height: fit-content;
        min-height: fit-content;
        height: fit-content;
    }
    .hi__partie--left {
        width: 100%;
        position: relative;
    }
    .hi__footer-logos{
        position:absolute;
    }
    .hi__footer-logos--img {
        width: 10%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .hi__footer-logos--img .hi__footer-logos--img {
            width: 100%;
            max-width: 100px;
        }

    .hi__btn--part1{
        display:none;
    }
    #idvideo {
        width: 1100px;
        right: 0;
        position: absolute;
    }
    .hi__partie--1 {
        height: 400px;
        width: 100%;
    }
    .h1__titre {
        position: absolute;
        top: 160px;
        left: var(--val_20);
    }
    .hi__h1 {
        font-size: 21px !important;
    }
    .hi__h2 {
        font-size: 37px !important;
    }
    .hi__h1--container {
        height: 23px;
    }
    .hi__partie--1{
        position:relative;
    }
    .hi__mschief-human{
        display:none;
    }
    .hi__presentation--center-lines {
        display: none;
    }
    .hi__presentation--right {
        order: -1;
        width: 100%;
        margin: var(--val_20);
    }
    .hi__presentation--left {
        width: 100%;
        margin: auto;
    }
    .hi__presentation--sep{
        display:none;
    }
    .hi__pc_img2, .hi__pc_img1{
        position:relative
    }
    .hi__presentation--center {
        position: relative;
        margin: auto;
        left: 0;
        top: 80px;
        width: 90%;
        height: 620px;
    }
    .hi__presentation--center-txt {
        left:0;
    }
    .hi__presentation--line-txt-1 {
        font-size: 18px !important;
        line-height: 1.2;
    }
    .hi__presentation--line-txt-2 {
        font-size: 18px !important;
        line-height: 1.2;
    }
    .hi__partie--right, .hi__trait--img {
        width: 800px;
    }
    .hi__trait--video hi__trait--video--show{

    }
    .hi__trait--img-video {
        display: none;
    }
    .hi__trailer {
        display: block;
    }
    .hi__video--container {
        display: none;
    }
    .hi__trailer-hide{
        display: block;
    }
    .hi__mschief{
        display:none;
    }
    .hi__partie--5 {
        height: fit-content;
        padding: 0px 10px;
        margin: 0;
        width: 100%;
    }
    .hi__partie--left-5 {
        margin: 0;
    }
    .hi__partie--left-6, .hi__partie--left-7, .hi__partie--left-8 {
        top: 0;
        left: 0;
    }
    .hi__partie--left-6 {
        width: calc(100% - 40px);
        padding: var(--marg_60_20);
    }
    .hi__texte--interne-halo {
        width: calc(100% - 40px);
        padding: var(--marg_60_20);
    }
    .hi__texte--tire-halo {
        width: calc(100% - 40px);
        padding: var(--marg_0_20);
    }
    .hi__dskoii {
        width: calc(100% - 40px);
        padding: 0px 20px 60px;
    }
    .hi__texte--tire-halo-1 {
        padding: 50px 20px 10px;
    }
    .hi__btnpc {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--val_20);
        bottom: var(--val_30);
    }



    .pc-turn {
        width: 320px !important;
        height: 320px !important;
        left: 0;
        top: var(--val_10);
        margin: auto;
    }
    #product {
        width: 320px !important;
        height: 320px !important;
    }

    #view_overlay {
        width: 320px !important;
        height: 320px !important;
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        position: absolute !important;
        z-index: 5;
        top: 0 !important;
        left: 0 !important;
        background: none !important;
        cursor: grab;
    }

    .pc-turn img {
        transform: scale(1.33);
    }


    .hi__end-textes {
        left: var(--val_20);
        top: 120px;
        position: relative;
        height: 850px;
        width: calc(100% - 40px);
        padding: var(--val_10);
    }
    .hi__pc--titre2 {
        font-size: var(--val_30);
        margin-top: -10px;
        margin-left: 0px;
    }
    .hi__prix-cents {
        font-size: var(--size_p);
    }
    .hi__footer-logos--end {
        position: relative;
    }
}