body{
      background-color: transparent !important;
    }
    html {
      scroll-behavior: smooth; /* Pour un défilement fluide */
    }
    @font-face {
      font-family: 'Pafigo';
      src: url('../fonts/Pafigo.otf') format('otf');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: 'Bardy';
      src: url('../fonts/Bardy.otf') format('otf'),
           url('../fonts/Bardy.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: 'Buman-Bold';
      src: url('../fonts/Buman-Bold.otf') format('otf'),
           url('../fonts/Buman-Bold.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: 'Abel-Regular';
      src: url('../fonts/Abel-Regular.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }
    #cyber ul li{
      padding-bottom: 10px;
    }
    .card {
    box-shadow: 0 2px 10px -1px rgba(69, 90, 100, 0.3);
    margin-bottom: 30px;
    transition: box-shadow 0.2s ease-in-out;
    }

    .card:hover {
    box-shadow: 0 5px 11px 0px rgba(69, 90, 100, 0.3);
    }
    .mon-div {
      display: none; /* Initialement caché */
    }
    @keyframes pulsecolor {
      0% {
        background-color: #fff; /* Starting color */
      }
      50% {
        background-color: #f1e2e7; /* Mid-point color */
      }
      100% {
        background-color: #fff; /* Ending color (back to start) */
      }
    }
    .connect-div {
      animation-name: pulsecolor; /* Name of the @keyframes rule */
      animation-duration: 4s; /* Duration of one animation cycle */
      animation-iteration-count: infinite; /* How many times the animation plays */
      animation-timing-function: ease-in-out; /* Speed curve of the animation */

      display: none; /* Initialement caché */
      background-color: #fff;
      padding: 20px;
      background: #000;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      box-shadow: 0 5px 15px 0px rgba(69, 90, 100, 0.6);
    }

    .visible {
      display: block; /* Pour le rendre visible */
    }
    .button-connect {
      animation-name: pulsecolor; /* Name of the @keyframes rule */
      animation-duration: 4s; /* Duration of one animation cycle */
      animation-iteration-count: infinite; /* How many times the animation plays */
      animation-timing-function: ease-in-out; /* Speed curve of the animation */
    }
    .heart {
      animation: heartbeat 1.25s infinite;
    }
    .heart::before,
    .heart::after {
      content: "";
      position: absolute;
    }
    .heart::after {
      top: 0;
    }
    @keyframes heartbeat {
      0% {
        transform: scale(1)
      }
      10% {
        transform: scale(1.15)
      }
      100% {
        transform: scale(1)
      }
    }
    .loading-gif {
      max-width: 500px;
    }
    .pre-loader {
      position: fixed;
      z-index: 2000; /** make sure this is the highest value compared to all other divs **/
      top: 0;
      left: 0;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      width: 100%;
    }
    .pre-loader.hidden {
      animation: fadeOut 3s; /** change to 1s */
      animation-fill-mode: forwards;
    }
    @keyframes fadeOut {
      100% {
        opacity: 0;
        visibility: hidden;
      }
    }
    .arr_plan{
      cursor: pointer;
      position: fixed;
      display: none;
      top: 0;
      left: 0;
      z-index: 1040;
      width: 100vw;
      height: 100vh;
      background-color: #fff;
     }
    .f_load{
      background-color: inherit;
      display: none;
      padding: 10px;
      position: fixed;
      top: 35%;
      left: 0px;
      right: 0px;
      z-index: 9000;
      margin: auto;
    }
    .push-log{
      background: #fff;
      color: #000;
    }
    .push-log:hover{
      background: #f12872;
      color: #fff;
    }
    .btnvol{
      color :#fff;
      background: #867f81;
    }
    .btnvol:hover{
      color :#fff;
      background: #f22872;
    }
    .check_value,.check_value_two,.check_value_three{
      background: #f12872;
    }
    .check_value:hover{
      background: #c21554;
      color:#9e868f;
    }
    .check_value_two:hover{
      background: #c21554;
      color:#9e868f;
    }
    .check_value_three:hover{
      background: #c21554;
      color:#9e868f;
    }