.fixed-categories{
    position: fixed;
    z-index: 1000 !important;  
    margin-top: -10px;
    padding-left: 40px;
}
.fixed-categories .btn-fixed{
    border-radius: 0px !important;
    position: absolute;
    top: 0px;
    right: -25px;
} 
.btn-fixed{
  background-color: black;
}
.btn-fixed:hover{
  background-color: black;
  border: 4px solid black;
}


.accueil-section{
    padding: 200px 0px 150px 200px;
}
.accueil-text{
    position: absolute;
    top: 20%;
    padding: 0px 40px 0px 40px;
    letter-spacing: 1px;
}
.accueil-text h4{
    font-size: 40px;
}
.accueil-section-left{
    position: relative;
    background-color: rgba(0, 0, 0, 0.05);
    width: 60%;
    height: 500px;
}
.border-top-accueil{
  border-top: 6px solid #00ff00;
  width: 10%;
  padding-bottom: 70px;
}
.border-bottom-accueil{
  border-bottom: 6px solid #00ff00;
  width: 10%;
  position: absolute;
  bottom: 50;
  right: 50;
}
.accueil-section-left svg{
    /*position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
}
@media screen and (min-width:501px){
    .accueil-section-right{
        left: 85%;
    }
}
.accueil-section-right{
    position: absolute;
    top: 85%;
    height: 100px;
    width: 20%;
    background-image: url(../img/img-accueil-2-nobg.png);
    background-position: center;
    background-size: cover;
}
.accueil-section-end{
    position: absolute;
    top: -160;
    right: -65%;
    width: 42%;
    /*height: 300px;
    background-image: url(../img/img-accueil-1-nobg.png);
    background-position: center;
    background-size: cover;*/
}



        /* BTN ACCUEIL SECTION LEFT */

.bg-btn-accueil button{
    border: none;
    padding: 15px 30px 15px 30px;
    background-color: transparent;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 2px;
    font-size: 18px;
    position: absolute;
    bottom: -110px;
}
.bg-btn-accueil button:hover{
    background-color: white;
    transition: 0.5s;
    cursor: pointer;
}

.modal-content{
    border-radius: 2px ;
}
.modal-body{
  padding: 35px 30px 0px 30px;
  text-align: center;
}
.modal-body a{
  color: black
}
.modal-body a:hover{
  color: #00ff00;
}
.modal-footer{
    border-top: 0px;
    padding: 0px;
    justify-content: end;
    padding-right: 10px;
    padding-bottom: 2px;
}
.modal-footer button{
  border-radius: 0px;
  background-color: black;
  padding: 5px 20px 5px 20px;
}

.super-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 28px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
  backdrop-filter: blur(8px);
  z-index: 1;
}

.super-button::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, #000, #00ff00);
  animation: rotate 5s linear infinite;
  z-index: -2;
}

.super-button::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: #0a0a0a;
  border-radius: inherit;
  z-index: -1;
}

.super-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 40px rgba(0, 255, 255, 0.2);
}

.super-button:hover .arrow {
  transform: translateX(6px);
}

.arrow {
  width: 22px;
  height: 22px;
  transition: transform 0.3s ease-in-out;
  color: #00ff00;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

        
        /* FIN BTN ACCUEIL SECTION LEFT */




        /* FIXED SECTION CATEGORIES */

.offcanvas-body{
    padding-top: 30px;
}        
.offcanvas-body ul{
    display: block;
    row-gap: 30px;
}

.offcanvas-body-li-1, .offcanvas-body-li-2{
    margin-bottom: 20px;
}
.offcanvas-body ul li span{
    font-size: 20px !important;
}
.offcanvas-body li a{
    color: black
}
@media screen and (min-width: 601px){
  .bg-logo-offcanvas{
    background-color: black;
    padding: 18px 8px 18px 8px;
    position: absolute;
    border-radius: 50%;
    bottom: 10px;
    left: 10px;
  }
}
.card{
    --bs-card-border-color: none !important
}
.card-body{
    padding: 0px !important;
}

.accordion{
    --bs-accordion-border-color: none !important;
    --bs-accordion-active-bg: transparent!important;
    --bs-accordion-active-color: black !important;
}
.accordion-body > ul > li:nth-child(1), .accordion-body > ul > li:nth-child(2){
    /*margin-bottom: 40px;*/
}
.accordion-button{
    padding: 0px !important;
    color: black !important;
    box-shadow: none !important;
}



.h3{
    font-size: 30px;
    letter-spacing: 2px;
    padding-bottom: 50px;
}



.tel-section, .multimedia-section, .stockage-section, .cables-section, .accessoire-tel-section, .accessoire-ordi-section{
    padding: 0px 50px 100px 50px ;
}
.link-tel-section, .link-multimedia-section, .link-stockage-section, .link-cables-section, .link-accessoire-tel-section, .link-accessoire-ordi-section{
    display: flex;
    justify-content: end;
    padding-top: 10px;
}
.link-tel-section a, .link-multimedia-section a, .link-stockage-section a, .link-cables-section a, .link-accessoire-tel-section a, .link-accessoire-ordi-section{
    text-decoration: none;
    color: blue;
}
.tel-cards{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: "tel-card-1 tel-card-2 tel-card-3 tel-card-4";
    column-gap: 30px;
}
.tel-card-1{
    grid-area: tel-card-1;
}
.tel-card-2{
    grid-area: tel-card-2;
}
.tel-card-3{
    grid-area: tel-card-3;
}
.tel-card-4{
    grid-area: tel-card-4;
}

.tel-cards div, .multimedia-cards div, .stockage-cards div, .cables-cards div, .accessoire-tel-cards div, .accessoire-ordi-cards div{
    background-color: rgba(0, 0, 0, 0.05);
    height: 300px;
    position: relative;
}
.tel-cards div svg, .multimedia-cards div svg, .stockage-cards div svg, .cables-cards div svg, .accessoire-tel-cards div svg, .accessoire-ordi-cards div svg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tel-cards p, .multimedia-cards p, .stockage-cards p, .cables-cards p, .accessoire-tel-cards p, .accessoire-ordi-cards p{
    font-size: 20px;
    padding-top: 5px;
}



.multimedia-cards{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: "multimedia-card-1 multimedia-card-2 multimedia-card-3 multimedia-card-4";
    column-gap: 30px;
}
.multimedia-card-1{
    grid-area: multimedia-card-1;
}
.multimedia-card-2{
    grid-area: multimedia-card-2;
}
.multimedia-card-3{
    grid-area: multimedia-card-3;
}
.multimedia-card-4{
    grid-area: multimedia-card-4;
}
.multimedia-card-5{
    grid-area: multimedia-card-5;
}



.stockage-cards{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "stockage-card-1 stockage-card-2 stockage-card-3";
    column-gap: 30px;
}
.stockage-card-1{
    grid-area: stockage-card-1;
}
.stockage-card-2{
    grid-area: stockage-card-2;
}
.stockage-card-3{
    grid-area: stockage-card-3;
}




.cables-cards{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: "cables-card-1 cables-card-2 cables-card-3 cables-card-4";
    column-gap: 30px;
}
.cables-card-1{
    grid-area: cables-card-1;
}
.cables-card-2{
    grid-area: cables-card-2;
}
.cables-card-3{
    grid-area: cables-card-3;
}
.cables-card-4{
    grid-area: cables-card-4;
}


.accessoire-tel-cards{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "accessoire-tel-card-1 accessoire-tel-card-2 accessoire-tel-card-3 accessoire-tel-card-4 accessoire-tel-card-5";
    column-gap: 30px;
}
.accessoire-tel-card-1{
    grid-area: accessoire-tel-card-1;
}
.accessoire-tel-card-2{
    grid-area: accessoire-tel-card-2;
}
.accessoire-tel-card-3{
    grid-area: accessoire-tel-card-3;
}
.accessoire-tel-card-4{
    grid-area: accessoire-tel-card-4;
}
.accessoire-tel-card-5{
    grid-area: accessoire-tel-card-5;
}


.accessoire-ordi-cards{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: "accessoire-ordi-card-1 accessoire-ordi-card-2 accessoire-ordi-card-3 accessoire-ordi-card-4";
    column-gap: 30px;
}
.accessoire-ordi-card-1{
    grid-area: accessoire-ordi-card-1;
}
.accessoire-ordi-card-2{
    grid-area: accessoire-ordi-card-2;
}
.accessoire-ordi-card-3{
    grid-area: accessoire-ordi-card-3;
}
.accessoire-ordi-card-4{
    grid-area: accessoire-ordi-card-4;
}





    /* ANIMATION CUBE ACCUEIL */
                  
.gallery {
  --s: 250px; /* the size */
  display: grid;
  transform-style: preserve-3d;
  --_p: perspective(calc(2.5*var(--s)));
  animation: r 25s infinite cubic-bezier(.5,-0.5,.5,1.5);
}
.gallery img {
  grid-area: 1/1;
  width: var(--s);
  aspect-ratio: 1;
  object-fit: contain;
  transform: var(--_t, ) translateZ(calc(var(--s)/2));
  background-color: white;
  border: none !important;
}

.gallery img:nth-child(2) {--_t: rotateX(-90deg)}
.gallery img:nth-child(3) {--_t: rotateY( 90deg) rotate(-90deg)}
.gallery img:nth-child(4) {--_t: rotateX(180deg) rotate( 90deg)}
.gallery img:nth-child(5) {--_t: rotateX( 90deg) rotate( 90deg)}
.gallery img:nth-child(6) {
  --_t: rotateY(-90deg);
  object-fit: cover !important;
}

@keyframes r {
  0%,3%   {transform: var(--_p)}
  14%,19% {transform: var(--_p) rotateX(90deg)}
  31%,36% {transform: var(--_p) rotateX(90deg) rotateZ(90deg)}
  47%,52% {transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg)}
  64%,69% {transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg)}
  81%,86% {transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg)}
  97%,100%{transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg)}
}


/* FIN ANIMATION CUBE ACCUEIL */