.scene {
  perspective: 1200px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
	border-radius: 14px;
}

.activity-card {
  position: relative;
  width: 100%;
  aspect-ratio: 305 / 546;
  height: auto;
  border-radius: 14px;
  overflow: hidden;
  color: white;
  cursor: pointer;
  background: #000;
   transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
	 clip-path: inset(0 round 14px);
  -webkit-clip-path: inset(0 round 14px);
  box-shadow:
    0 35px 90px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.12);
  transition:
    box-shadow .25s ease,
    filter .25s ease;
  will-change: transform;
}

.activity-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  border-radius: 14px;
  padding: 2px;

  background: linear-gradient(
    120deg,
    #ffffff,
    #f7d948,     /* miel clair */
    #efb400,     /* miel */
    #F4A6D7,     /* rose clair */
    #6b35d6,     /* violet */
    #c084fc,     /* violet clair */
    #ffffff
  );

  background-size: 300% 300%;
  animation: borderFlow 6s linear infinite;

  /* découpe propre */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  /* glow externe 
  filter:
    drop-shadow(0 0 6px rgba(244,166,215,.4))
    drop-shadow(0 0 12px rgba(239,180,0,.35))
    drop-shadow(0 0 18px rgba(107,53,214,.3));
	*/
	box-shadow:

  0 10px 30px rgba(0,0,0,.35),

  0 0 18px rgba(244,166,215,.18);
}

.activity-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 31;
  opacity: 0;
  transition: opacity .12s;
  pointer-events: none;
}

.activity-card:hover::after {
  opacity: 1;
}

.card-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    opacity .55s ease,
    transform 1.2s cubic-bezier(.2,.8,.2,1),
    filter .8s ease;
}

.card-bg {
  z-index: 1;
  transform: scale(1.02);
}

.card-gif {
  z-index: 2;
  opacity: 0;
  transform: scale(1.18);
  filter: saturate(1.2) contrast(1.08) brightness(.92);
}

.cinema-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.68), rgba(0,0,0,0) 24%, rgba(0,0,0,.1) 48%, rgba(0,0,0,.98) 100%),
    radial-gradient(circle at 50% 45%, transparent 32%, rgba(0,0,0,.42) 100%);
}

.light-sweep {
  position: absolute;
  inset: -40%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255,255,255,.18) 47%,
    rgba(255,255,255,.02) 57%,
    transparent 70%
  );
  transform: translateX(-55%) rotate(6deg);
  opacity: 0;
}

.noise {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: .13;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.07) 0px,
      rgba(255,255,255,.07) 1px,
      transparent 1px,
      transparent 3px
    );
  mix-blend-mode: overlay;
}

.card-content {
  position: absolute;
  left: clamp(16px, 6%, 22px);
  right: clamp(16px, 6%, 22px);
  bottom: clamp(16px, 5%, 22px);
  z-index: 6;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  backdrop-filter: blur(10px);
  font-size: clamp(10px, 3.7vw, 15px);
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  transition: opacity .28s ease, transform .4s ease;
}

.tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a400ff;
  box-shadow: 0 0 14px #a400ff;
}

.text-zone {
  margin-bottom: 17px;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}

.text-zone h2 {
  margin: 0 0 clamp(6px, 2vw, 12px);
  padding-bottom: 0;
  text-align: center;
  font-size: clamp(18px, 7vw, 34px);
  line-height: .88;
  letter-spacing: -1.2px;
  text-shadow: 0 6px 24px rgba(0,0,0,.85);
}

.text-zone p {
  margin: 0;
 max-width: 100%;
  font-size: clamp(10px, 3.7vw, 15px);
  line-height: 1.32;
  transition: opacity .28s ease, transform .35s ease, filter .35s ease;
}

.buttons-card {
  position: relative;
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 10px;
}



.btn-card {
  position: relative;
  display: block;
   padding: clamp(8px, 2.6vw, 12px) 8px;
  border-radius: 999px;
  overflow: hidden;
  text-align: center;
  color: white;
  text-decoration: none;
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 950;
  letter-spacing: .25px;
  transition: transform .25s ease, box-shadow .25s ease;
  text-transform: uppercase;
}

.btn-info {
  background: rgba(38,38,38,.92);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.btn-info:hover{
	color:black;
	background:white;
		transform: scale(1.05);
	box-shadow:
    0 10px 25px rgba(76, 53, 180, 0.25),
    0 0 12px rgba(221, 41, 136, 0.25);
}

.btn-info2 {
  background: #0b0b0f;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
	color: #ffd21f;
	 padding: 10px 48px;
}

.btn-info2:hover{
	color:black;
	background:#e6a800;
	border-color:#0b0b0f;
	box-shadow:
    0 10px 25px rgba(76, 53, 180, 0.25),
    0 0 12px rgba(221, 41, 136, 0.25);
}

.btn-book {
  position: relative;
 /* display: inline-block;*/
  padding: 10px 48px;
  border-radius: 999px;
  text-align: center;
  color: white;
  text-decoration: none;
  font-weight: 700;
  background: linear-gradient(90deg, #5d00ff, #a200ff, #ff007a);
  box-shadow: 0 0 24px rgba(130,0,255,.48);
  transition: all .25s ease;
  overflow: hidden;
	  white-space: nowrap;
}

/* HOVER */
.btn-book:hover {
 /* transform: scale(1.05);*/
}

/* active bordure */
.btn-book:hover::before {
  opacity: 1;
}

/* texte gradient au hover */
/* shine */

.btn-book:hover::after {
  animation: shine 1.1s ease;
}

@media (max-width:768px){

    .btn-book-mobile{
        display:inline-flex;
        align-items:center;
        justify-content:center;

        width:100%;
        margin:0 auto;

        padding:14px 22px;

        white-space:normal;
        line-height:1.2;
        text-align:center;
    }

}

.activity-card:hover {
  transform: scale(1.025);
  box-shadow:
    0 45px 110px rgba(0,0,0,.8),
    0 0 45px rgba(117,0,255,.45),
    0 0 25px rgba(255,0,122,.35);
}

.activity-card:hover .card-bg {
  opacity: 0;
  transform: scale(1.12);
}

.activity-card:hover .card-gif {
  opacity: 1;
  transform: scale(1.04);
}

.activity-card:hover .light-sweep {
  opacity: 1;
  animation: sweep 1.2s ease forwards;
}

.activity-card:hover .tag {
  opacity: 0;
  transform: translateY(12px);
}

.activity-card:hover .text-zone {
  transform: translateY(85px);
}

.activity-card:hover .text-zone p {
  opacity: 0;
  transform: translateY(55px);
  filter: blur(4px);
}

.activity-card:hover .btn-book::after {
  animation: shine 1.15s ease .15s;
}

.btn-card:hover {
  transform: translateY(-2px);
}

@keyframes borderFlow {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 300% 50%;
  }
}

@keyframes sweep {
  from {
    transform: translateX(-55%) rotate(6deg);
  }

  to {
    transform: translateX(55%) rotate(6deg);
  }
}

@keyframes shine {
  from {
    left: -120%;
  }

  to {
    left: 150%;
  }
}

    /* ===============================
       ALVEOLES DECORATIVES PREMIUM
       =============================== */

    .bordalveole::before,
    .bordalveole::after {
      content: "";
      position: absolute;
      top: 50%;
      width: clamp(160px, 18vw, 260px);
      height: clamp(300px, 42vw, 520px);
      transform: translateY(-50%);
      pointer-events: none;
      z-index: -1;
      opacity: .58;

      background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 260 225' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23785b8f'/%3E%3Cstop offset='52%25' stop-color='%23513d76'/%3E%3Cstop offset='100%25' stop-color='%2332235b'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23c8b7d8'/%3E%3Cstop offset='48%25' stop-color='%237d6696'/%3E%3Cstop offset='100%25' stop-color='%234b3a68'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M72 8 H188 Q204 8 212 22 L252 94 Q260 112.5 252 131 L212 203 Q204 217 188 217 H72 Q56 217 48 203 L8 131 Q0 112.5 8 94 L48 22 Q56 8 72 8 Z' fill='none' stroke='rgba(255,255,255,.12)' stroke-width='9'/%3E%3Cpath d='M77 18 H183 Q196 18 203 30 L240 97 Q247 112.5 240 128 L203 195 Q196 207 183 207 H77 Q64 207 57 195 L20 128 Q13 112.5 20 97 L57 30 Q64 18 77 18 Z' fill='url(%23g)' stroke='url(%23s)' stroke-width='4'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 260 225' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23785b8f'/%3E%3Cstop offset='52%25' stop-color='%23513d76'/%3E%3Cstop offset='100%25' stop-color='%2332235b'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23c8b7d8'/%3E%3Cstop offset='48%25' stop-color='%237d6696'/%3E%3Cstop offset='100%25' stop-color='%234b3a68'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M72 8 H188 Q204 8 212 22 L252 94 Q260 112.5 252 131 L212 203 Q204 217 188 217 H72 Q56 217 48 203 L8 131 Q0 112.5 8 94 L48 22 Q56 8 72 8 Z' fill='none' stroke='rgba(255,255,255,.12)' stroke-width='9'/%3E%3Cpath d='M77 18 H183 Q196 18 203 30 L240 97 Q247 112.5 240 128 L203 195 Q196 207 183 207 H77 Q64 207 57 195 L20 128 Q13 112.5 20 97 L57 30 Q64 18 77 18 Z' fill='url(%23g)' stroke='url(%23s)' stroke-width='4'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 260 225' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23785b8f'/%3E%3Cstop offset='52%25' stop-color='%23513d76'/%3E%3Cstop offset='100%25' stop-color='%2332235b'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23c8b7d8'/%3E%3Cstop offset='48%25' stop-color='%237d6696'/%3E%3Cstop offset='100%25' stop-color='%234b3a68'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M72 8 H188 Q204 8 212 22 L252 94 Q260 112.5 252 131 L212 203 Q204 217 188 217 H72 Q56 217 48 203 L8 131 Q0 112.5 8 94 L48 22 Q56 8 72 8 Z' fill='none' stroke='rgba(255,255,255,.12)' stroke-width='9'/%3E%3Cpath d='M77 18 H183 Q196 18 203 30 L240 97 Q247 112.5 240 128 L203 195 Q196 207 183 207 H77 Q64 207 57 195 L20 128 Q13 112.5 20 97 L57 30 Q64 18 77 18 Z' fill='url(%23g)' stroke='url(%23s)' stroke-width='4'/%3E%3C/svg%3E");

      background-repeat:no-repeat;

      background-size:
        clamp(120px, 13vw, 190px) auto,
        clamp(120px, 13vw, 190px) auto,
        clamp(120px, 13vw, 190px) auto;

      background-position:
        0% 4%,
        82% 48%,
        0% 92%;

      filter:
        saturate(.62)
        brightness(.82)
        contrast(.96)
        drop-shadow(0 28px 34px rgba(10,0,32,.34));

      will-change: transform, opacity;
      backface-visibility: hidden;
      transform-style: preserve-3d;

      animation: bordalveoleFloatLeft 9s cubic-bezier(.42,0,.28,1) infinite;
    }

    .bordalveole::before {
      left: clamp(-140px, -10vw, -60px); 
    }

    .bordalveole::after {
      right: clamp(-140px, -10vw, -60px);
      transform: translateY(-50%) scaleX(-1) translateZ(0);
		      animation: bordalveoleFloatRight 11s cubic-bezier(.42,0,.28,1) infinite;
      animation-delay:-5s;

 @keyframes bordalveoleFloatLeft {
      0%,100%{
        transform:translateY(-50%) translate3d(0,0,0);
        opacity:.5;
      }

      25%{
        transform:translateY(calc(-50% - 8px)) translate3d(0,0,0);
        opacity:.62;
      }

      50%{
        transform:translateY(calc(-50% + 6px)) translate3d(0,0,0);
        opacity:.56;
      }

      75%{
        transform:translateY(calc(-50% - 4px)) translate3d(0,0,0);
        opacity:.64;
      }
    }

    @keyframes bordalveoleFloatRight {
      0%,100%{
        transform:translateY(-50%) scaleX(-1) translate3d(0,0,0);
        opacity:.46;
      }

      25%{
        transform:translateY(calc(-50% + 7px)) scaleX(-1) translate3d(0,0,0);
        opacity:.58;
      }

      50%{
        transform:translateY(calc(-50% - 5px)) scaleX(-1) translate3d(0,0,0);
        opacity:.52;
      }

      75%{
        transform:translateY(calc(-50% + 4px)) scaleX(-1) translate3d(0,0,0);
        opacity:.6;
      }
    }*/

    /*  50% {
        background-position:
          0% 6%,
          82% 46%,
          0% 94%;
      }*/
    }

    @media(max-width:980px){
      .bordalveole::before,
      .bordalveole::after{
        display:none;
      }
    }

/****************************************************************************** RESPONSIVE TEL ALEX*****************************************************************************************************************************/
/* =========================================================
   MOBILE SLIDER ACTIVITÉS
========================================================= */
@media (max-width:767px){

  body .activity-mobile-slider{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:18px !important;

    width:100vw !important;
    max-width:100vw !important;

    margin-left:50% !important;
    transform:translateX(-50%) !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    padding:12px 20px 34px !important;

    scroll-snap-type:x mandatory;
    scroll-padding:20px;

    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  body .activity-mobile-slider::-webkit-scrollbar{
    display:none;
  }

  body .activity-mobile-slider .scene{
    flex:0 0 82vw !important;
    width:82vw !important;
    max-width:82vw !important;
    min-width:82vw !important;

    scroll-snap-align:center;
  }

  body .activity-mobile-slider .activity-card{
    width:100% !important;
  }
}

@media (max-width:420px){

  body .activity-mobile-slider .scene{
    flex-basis:86vw !important;
    width:86vw !important;
    max-width:86vw !important;
    min-width:86vw !important;
  }
}