/* Styles hover - Media query pour les appareils avec capacité hover */

  a:hover {
    color: var(--color-site-1);
  }

  .btn-search:hover {
    background-color: #FF57221A;
    border: 1px solid #FF57224d;
  }

  .btn-search:hover svg {
    filter: brightness(0) saturate(100%) invert(50%) sepia(35%) saturate(6959%) hue-rotate(346deg) brightness(100%) contrast(102%);

  }

  .search-box:focus-within {
    box-shadow: 0 10px 20px rgba(255, 87, 34, 0.09) !important;
  }

  .travel-card:hover::before {
    left: 125%;
  }

  .swiper-slide:hover .hotel-card .location-badge,
  .hotel-horizontal-card:hover .location-badge, .hotel-card:hover .location-badge {
    background-color: #fff;
    border: 1px solid #FF572233;
  }

  .swiper-slide:hover .price-value,
  .hotel-horizontal-card:hover .price-value,
  .hotel-card:hover .price-value {
    color: var(--color-site-1);
  }

  .card:hover .badge-circuit {
    border: 1px solid #FF57224d;
    color: var(--color-site-1);
  }

  .raisons:hover, .card-service {
    border: 1px solid #C7DBEB;
  }

  .feature-content:hover {
    border-image: linear-gradient(to bottom, #E1E1E1 40%, var(--color-site-1) 60%) 1;
  }

  .list .brand-area:hover .swiper-wrapper {
    animation-play-state: paused;
  }


  .btn-details:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }

  .btn-details::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
  }


  .btn-details::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 100%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: skewX(-20deg);
    transition: left 0.5s;
  }


  .btn-details:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.3);
  }

  .btn-details:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
  }

  .btn-details:hover::after {
    left: 150%;
  }

  .btn-details:hover {
    transform: translateY(-2px);
    color: #fff;
    background-color: var(--color-site-1);
  }

  .swiper-button-prev-custom:hover svg,
  .swiper-button-next-custom:hover svg {
    filter: brightness(0) saturate(100%) invert(50%) sepia(35%) saturate(6959%) hue-rotate(346deg) brightness(100%) contrast(102%);

  }
  /* ===== SHINE EFFECT — Classe réutilisable ===== */

  /* 1. Wrapper autour de l'image */
  .shine-img {
    position: relative;
    overflow: hidden;
    display: block; /* ou inline-block selon le contexte */
  }

  /* 2. Le pseudo-element shine sur le wrapper */
  .shine-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
            to right,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent
    );
    transform: skewX(-25deg);
    transition: 0.7s ease;
    z-index: 1;
    pointer-events: none;
  }

  /* 3. Déclenchement au hover du parent .shine-card */
  .shine-card:hover .shine-img::before {
    left: 120%;
  }