/* From Uiverse.io by kennyotsu - Cartes choix de rôle (couleurs thème Olyfit) */

.role-cards-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-lg, 24px);
  width: 100%;
  padding-bottom: 8px;
}

.role-card-container {
  position: relative;
  width: 190px;
  height: 254px;
  transition: 200ms;
  cursor: pointer;
}

.role-card-container:active {
  width: 180px;
  height: 245px;
}

.role-card-container.selected .role-card {
  box-shadow: 0 0 0 3px var(--color-white, #fff);
}

.role-card {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  transition: 700ms;
  background: linear-gradient(43deg, var(--color-dark-blue, #000E34) 0%, var(--color-primary, #0043FF) 46%, var(--color-green, #00DE5D) 100%);
  padding: 20px;
  box-sizing: border-box;
}

/* Titre et sous-titre toujours visibles pour que le choix soit clair */
.role-card-title {
  opacity: 1;
  position: relative;
  font-size: 1.15rem;
  font-weight: bold;
  color: var(--color-white, #fff);
  text-align: center;
  line-height: 1.3;
  font-family: var(--font-tertiary, "Inter", sans-serif);
  margin: 0 0 8px 0;
}

.role-card-subtitle {
  position: relative;
  transform: none;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  width: 100%;
  font-size: 0.8rem;
  font-family: var(--font-tertiary, "Inter", sans-serif);
  margin: 0;
}

.role-card-prompt {
  margin-top: auto;
  font-size: 0.85rem;
  font-weight: 600;
  transition: opacity 300ms ease-in-out;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-tertiary, "Inter", sans-serif);
}

.role-card-canvas .tracker {
  position: absolute;
  z-index: 200;
  width: 100%;
  height: 100%;
}

.role-card-canvas .tracker:hover {
  cursor: pointer;
}

.role-card-canvas .tracker:hover ~ .role-card {
  transition: 300ms;
  filter: brightness(1.1);
}

.role-card-container:hover .role-card::before {
  transition: 200ms;
  content: '';
  opacity: 80%;
}

.role-card-canvas {
  perspective: 800px;
  inset: 0;
  z-index: 200;
  position: absolute;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 0;
  grid-template-areas: "tr-1 tr-2 tr-3 tr-4 tr-5" "tr-6 tr-7 tr-8 tr-9 tr-10" "tr-11 tr-12 tr-13 tr-14 tr-15" "tr-16 tr-17 tr-18 tr-19 tr-20" "tr-21 tr-22 tr-23 tr-24 tr-25";
}

.role-card::before {
  content: '';
  background: linear-gradient(43deg, var(--color-dark-blue, #000E34) 0%, var(--color-primary, #0043FF) 50%, var(--color-green, #00DE5D) 100%);
  filter: blur(2rem);
  opacity: 30%;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  transition: 200ms;
  border-radius: 20px;
}

.tr-1 { grid-area: tr-1; }
.tr-2 { grid-area: tr-2; }
.tr-3 { grid-area: tr-3; }
.tr-4 { grid-area: tr-4; }
.tr-5 { grid-area: tr-5; }
.tr-6 { grid-area: tr-6; }
.tr-7 { grid-area: tr-7; }
.tr-8 { grid-area: tr-8; }
.tr-9 { grid-area: tr-9; }
.tr-10 { grid-area: tr-10; }
.tr-11 { grid-area: tr-11; }
.tr-12 { grid-area: tr-12; }
.tr-13 { grid-area: tr-13; }
.tr-14 { grid-area: tr-14; }
.tr-15 { grid-area: tr-15; }
.tr-16 { grid-area: tr-16; }
.tr-17 { grid-area: tr-17; }
.tr-18 { grid-area: tr-18; }
.tr-19 { grid-area: tr-19; }
.tr-20 { grid-area: tr-20; }
.tr-21 { grid-area: tr-21; }
.tr-22 { grid-area: tr-22; }
.tr-23 { grid-area: tr-23; }
.tr-24 { grid-area: tr-24; }
.tr-25 { grid-area: tr-25; }

.role-card-canvas .tr-1:hover ~ .role-card { transition: 125ms ease-in-out; transform: rotateX(20deg) rotateY(-10deg); }
.role-card-canvas .tr-2:hover ~ .role-card { transition: 125ms ease-in-out; transform: rotateX(20deg) rotateY(-5deg); }
.role-card-canvas .tr-3:hover ~ .role-card { transition: 125ms ease-in-out; transform: rotateX(20deg) rotateY(0deg); }
.role-card-canvas .tr-4:hover ~ .role-card { transition: 125ms ease-in-out; transform: rotateX(20deg) rotateY(5deg); }
.role-card-canvas .tr-5:hover ~ .role-card { transition: 125ms ease-in-out; transform: rotateX(20deg) rotateY(10deg); }
.role-card-canvas .tr-6:hover ~ .role-card { transition: 125ms ease-in-out; transform: rotateX(10deg) rotateY(-10deg); }
.role-card-canvas .tr-7:hover ~ .role-card { transition: 125ms ease-in-out; transform: rotateX(10deg) rotateY(-5deg); }
.role-card-canvas .tr-8:hover ~ .role-card { transition: 125ms ease-in-out; transform: rotateX(10deg) rotateY(0deg); }
.role-card-canvas .tr-9:hover ~ .role-card { transition: 125ms ease-in-out; transform: rotateX(10deg) rotateY(5deg); }
.role-card-canvas .tr-10:hover ~ .role-card { transition: 125ms ease-in-out; transform: rotateX(10deg) rotateY(10deg); }
.role-card-canvas .tr-11:hover ~ .role-card { transition: 125ms ease-in-out; transform: rotateX(0deg) rotateY(-10deg); }
.role-card-canvas .tr-12:hover ~ .role-card { transition: 125ms ease-in-out; transform: rotateX(0deg) rotateY(-5deg); }
.role-card-canvas .tr-13:hover ~ .role-card { transition: 125ms ease-in-out; transform: rotateX(0deg) rotateY(0deg); }
.role-card-canvas .tr-14:hover ~ .role-card { transition: 125ms ease-in-out; transform: rotateX(0deg) rotateY(5deg); }
.role-card-canvas .tr-15:hover ~ .role-card { transition: 125ms ease-in-out; transform: rotateX(0deg) rotateY(10deg); }
.role-card-canvas .tr-16:hover ~ .role-card { transition: 125ms ease-in-out; transform: rotateX(-10deg) rotateY(-10deg); }
.role-card-canvas .tr-17:hover ~ .role-card { transition: 125ms ease-in-out; transform: rotateX(-10deg) rotateY(-5deg); }
.role-card-canvas .tr-18:hover ~ .role-card { transition: 125ms ease-in-out; transform: rotateX(-10deg) rotateY(0deg); }
.role-card-canvas .tr-19:hover ~ .role-card { transition: 125ms ease-in-out; transform: rotateX(-10deg) rotateY(5deg); }
.role-card-canvas .tr-20:hover ~ .role-card { transition: 125ms ease-in-out; transform: rotateX(-10deg) rotateY(10deg); }
.role-card-canvas .tr-21:hover ~ .role-card { transition: 125ms ease-in-out; transform: rotateX(-20deg) rotateY(-10deg); }
.role-card-canvas .tr-22:hover ~ .role-card { transition: 125ms ease-in-out; transform: rotateX(-20deg) rotateY(-5deg); }
.role-card-canvas .tr-23:hover ~ .role-card { transition: 125ms ease-in-out; transform: rotateX(-20deg) rotateY(0deg); }
.role-card-canvas .tr-24:hover ~ .role-card { transition: 125ms ease-in-out; transform: rotateX(-20deg) rotateY(5deg); }
.role-card-canvas .tr-25:hover ~ .role-card { transition: 125ms ease-in-out; transform: rotateX(-20deg) rotateY(10deg); }

.role-card-container.noselect {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media (max-width: 700px) {
  .role-card-container {
    width: 160px;
    height: 220px;
  }
  .role-card {
    padding: 14px;
  }
  .role-card-title {
    font-size: 1rem;
  }
  .role-card-subtitle {
    font-size: 0.7rem;
  }
  .role-card-prompt {
    font-size: 0.75rem;
  }
}