/* Box-shadow décalé pour les boutons */
.btn-shadow-purple { box-shadow: 4px 4px 0 #4A2A8A; }
.btn-shadow-purple:hover { box-shadow: 2px 2px 0 #4A2A8A; transform: translate(2px, 2px); }
.btn-shadow-yellow { box-shadow: 4px 4px 0 #bba800; }
.btn-shadow-yellow:hover { box-shadow: 2px 2px 0 #bba800; transform: translate(2px, 2px); }

/* Border-top colorée des cartes activité */
.card-top-purple { border-top: 4px solid #7B4FD4; border-radius: 0 0 12px 12px; }
.card-top-yellow { border-top: 4px solid #FFE533; border-radius: 0 0 12px 12px; }
.card-top-pink        { border-top: 4px solid #E87BB5; border-radius: 0 0 12px 12px; }
.card-top-purple-dark { border-top: 4px solid #4A2A8A; border-radius: 0 0 12px 12px; }
.card-top-orange      { border-top: 4px solid #F97316; border-radius: 0 0 12px 12px; }

/* Transition boutons */
.btn-transition { transition: transform 0.1s, box-shadow 0.1s; }

html {
  overflow-x: hidden;
}

body {
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    url('basketball.svg'),
    url('racket.svg'),
    url('soccer.svg'),
    url('tennis.svg'),
    url('tennis.svg'),
    url('racket.svg'),
    url('soccer.svg'),
    url('basketball.svg');
  background-size:
    290px 290px,
    155px 232px,
    275px 275px,
    260px 260px,
    200px 200px,
    120px 180px,
    210px 210px,
    185px 185px;
  background-repeat: no-repeat;
  background-position:
    0%   0%,
    100% 0%,
    0%   100%,
    100% 100%,
    68%  15%,
    5%   50%,
    88%  58%,
    38%  88%;
}

header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #FBEAF0;
}

main,
footer {
  position: relative;
  z-index: 1;
}

/* Bulles bénéfices : composition constante, tailles proportionnelles pour éviter les chevauchements. */
.benefits-bubbles {
  min-height: clamp(470px, 60vw, 650px);
}

.benefit-bubble {
  position: absolute;
  width: clamp(92px, 19vw, 240px);
  max-width: none;
  transform: translate(-50%, -50%);
}

.benefit-bubble h3 {
  font-size: clamp(1rem, 2.2vw, 1.875rem);
  line-height: 1;
}

.benefit-bubble p {
  font-size: clamp(0.58rem, 1.15vw, 0.875rem);
  line-height: 1.35;
}

.benefit-bubble-center {
  left: 50%;
  top: 42%;
  width: clamp(116px, 23vw, 270px);
}

.benefit-bubble-center span {
  font-size: clamp(0.52rem, 1.25vw, 1rem);
  line-height: 1.25;
}

.benefit-bubble-center h3 {
  font-size: clamp(1.45rem, 4vw, 3rem);
}

.benefit-bubble-team {
  left: 19%;
  top: 22%;
}

.benefit-bubble-motor {
  left: 78%;
  top: 22%;
  width: clamp(104px, 21vw, 240px);
}

.benefit-bubble-confidence {
  left: 20%;
  top: 73%;
  width: clamp(104px, 21vw, 240px);
}

.benefit-bubble-respect {
  left: 79%;
  top: 73%;
}

.benefit-bubble-fun {
  left: 50%;
  top: 84%;
  width: clamp(96px, 19vw, 224px);
}

@media (max-width: 640px) {
  body::before {
    background-size:
      140px 140px,
      70px 105px,
      130px 130px,
      120px 120px,
      90px  90px,
      55px  82px,
      95px  95px,
      85px  85px;
  }
}

/* Mobile phones: grid layout to avoid absolute-positioning gaps */
@media (max-width: 639px) {
  .benefits-bubbles {
    min-height: unset;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    justify-items: center;
    align-items: start;
  }

  .benefit-bubble {
    position: static !important;
    transform: none !important;
    width: clamp(130px, 42vw, 155px) !important;
    max-width: none !important;
    padding: 14px !important;
  }

  .benefit-bubble h3 {
    font-size: 1.1rem;
  }

  .benefit-bubble p {
    font-size: 0.65rem;
    line-height: 1.3;
  }

  .benefit-bubble-team       { order: 1; }
  .benefit-bubble-motor      { order: 2; }

  .benefit-bubble-center {
    order: 3;
    grid-column: 1 / -1;
    width: clamp(140px, 44vw, 165px) !important;
    margin: 0 auto;
  }

  .benefit-bubble-center span {
    font-size: 0.55rem;
    letter-spacing: 0.08em;
  }

  .benefit-bubble-center h3 {
    font-size: 1.6rem;
  }

  .benefit-bubble-confidence { order: 4; }
  .benefit-bubble-respect    { order: 5; }

  .benefit-bubble-fun {
    order: 6;
    grid-column: 1 / -1;
    width: clamp(130px, 42vw, 155px) !important;
    margin: 0 auto;
  }
}

/* Tablets (640–767px): keep absolute positioning, adjusted sizes */
@media (min-width: 640px) and (max-width: 767px) {
  .benefits-bubbles {
    min-height: 500px;
  }

  .benefit-bubble {
    width: 100px !important;
    padding: 10px;
  }

  .benefit-bubble h3 {
    font-size: 1.05rem;
  }

  .benefit-bubble p {
    font-size: 0.62rem;
    line-height: 1.3;
  }

  .benefit-bubble-center {
    left: 50%;
    top: 43%;
    width: 124px !important;
  }

  .benefit-bubble-center span {
    font-size: 0.55rem;
    letter-spacing: 0.08em;
  }

  .benefit-bubble-center h3 {
    font-size: 1.5rem;
  }

  .benefit-bubble-team {
    left: 24%;
    top: 24%;
  }

  .benefit-bubble-motor {
    left: 76%;
    top: 24%;
    width: 104px !important;
  }

  .benefit-bubble-confidence {
    left: 24%;
    top: 76%;
    width: 104px !important;
  }

  .benefit-bubble-respect {
    left: 76%;
    top: 76%;
  }

  .benefit-bubble-fun {
    left: 50%;
    top: 87%;
    width: 106px !important;
  }
}