/*Début Le responsive design*/
/*Design sur pc*/
  @media(min-width: 1199px)  {

  .pc-none{
    display: none;
    }
    /*product-image*/
  .product-image{
    object-fit: cover;
    width: 100%;
    height: 400px !important;
    border-radius: 10px 10PX 0 0 !important;
  }
}
  
  /*Design sur mobile*/
  @media(max-width: 1199px)  {

   .mobile-none{
    display: none;
    }
     /*product-image*/
  .product-image{
    object-fit: cover;
    width: 100%;
    height: 300px;
    border-radius: 10px 10PX 0 0 !important;
  }
  .login{
    color: white;
  }
  .register{
    color: white;
  }
  .home {
    color: white;
  }
}



.scroll-klaudia {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: fixed;
    bottom: 10px;
    z-index: 99999;
    right: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(from 0deg, #0d6efd, #0dcaf0, #0d6efd, #0dcaf0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), black calc(100% - 6px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 6px), black calc(100% - 6px));
    animation: rotateCircle 2s linear infinite;
    overflow: hidden;
}

.scroll-klaudia i {
    color: white;
    font-size: 1.5rem;
    z-index: 2;
}

/* Lignes visibles à l’intérieur */
.scroll-klaudia::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background:
        repeating-linear-gradient(45deg, #ffffff 0 2px, transparent 2px 6px),
        repeating-linear-gradient(-45deg, #ffffff 0 2px, transparent 2px 6px),
        repeating-linear-gradient(20deg, #ffffff 0 1px, transparent 1px 4px),
        repeating-linear-gradient(-20deg, #ffffff 0 1px, transparent 1px 4px);
    z-index: 1;
    pointer-events: none;
    animation: rotateLines 1.5s linear infinite;
}

@keyframes rotateCircle {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rotateLines {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}