/* Bento Grid New - Version améliorée */
.bento-grid-new {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: var(--space-16);
  max-width: 1400px;
  margin: 0 auto;
}

.bento-card-new {
  position: relative;
  border-radius: 24px;
  border: 1px solid rgba(52, 211, 153, 0.2);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.bento-card-new:hover {
  border-color: rgba(52, 211, 153, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(52, 211, 153, 0.2), 0 0 40px rgba(52, 211, 153, 0.1);
}

.bento-card-inner {
  position: relative;
  padding: var(--space-24);
  height: 100%;
  z-index: 1;
}

/* Card 1 - Accompagnement 1:1 (tall) */
.bento-card-1 {
  grid-column: span 8;
  /* Increased from 6 */
  grid-row: span 2;
  min-height: 400px;
  background: linear-gradient(to bottom, rgba(52, 211, 153, 0.1), rgba(52, 211, 153, 0.03));
}

/* ... (lines 44-223 skipped) ... */

/* Card 2 - Communauté Privée */
.bento-card-2 {
  grid-column: span 4;
  /* Reduced from 6 */
  min-height: 200px;
}

/* ... (lines 229-807 skipped) ... */

/* Card Choice - Liberté Totale */
.bento-card-choice {
  /* grid-column handled by parent grid */
  height: 100%;
  min-height: 200px;
  /* Same as community card */
  background: linear-gradient(to bottom, rgba(52, 211, 153, 0.05), rgba(52, 211, 153, 0.02));
  display: flex;
  flex-direction: column;
}

.bento-glow-purple {
  position: absolute;
  top: -96px;
  left: -96px;
  width: 288px;
  height: 288px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.2);
  filter: blur(90px);
  pointer-events: none;
}

.bento-card-header h3 {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: var(--space-8);
}

.bento-card-header p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  max-width: 400px;
}

.bento-live-badge-new {
  position: absolute;
  top: var(--space-20);
  right: var(--space-20);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  z-index: 10;
}

.bento-live-right {
  position: static;
  margin-left: auto;
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple-400);
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.8);
  animation: pulseLive 2s ease-in-out infinite;
}

@keyframes pulseLive {

  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.8);
  }

  50% {
    opacity: 0.7;
    box-shadow: 0 0 12px rgba(52, 211, 153, 1);
  }
}

.bento-path-box {
  margin-top: var(--space-24);
  position: relative;
}

.bento-path-border {
  position: relative;
  height: 300px;
  border-radius: 22px;
  border: 2px dashed rgba(52, 211, 153, 0.3);
  background: rgba(52, 211, 153, 0.02);
}

.bento-coach-avatar {
  position: absolute;
  top: -16px;
  left: -16px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(52, 211, 153, 0.6);
  object-fit: cover;
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.5);
}

.bento-coach-label {
  position: absolute;
  left: 40px;
  top: 16px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
}

.bento-one-one-chip {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
}

.bento-student-badge {
  position: absolute;
  bottom: -24px;
  right: 16px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.bento-student-name {
  padding: 6px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--purple-500), #ec4899);
  color: #000000;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(52, 211, 153, 0.4);
}

.bento-student-label {
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
}

.bento-action-pill {
  position: absolute;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
}

.bento-action-pill svg {
  color: var(--purple-300);
}

.bento-pill-1 {
  left: 20px;
}

.bento-pill-2 {
  left: 144px;
}

/* Card 2 - Communauté Privée */
.bento-card-2 {
  grid-column: span 4;
  min-height: 200px;
}

/* ... skipped ... */

/* Card Choice - Liberté Totale */
.bento-card-choice {
  grid-column: span 4;
  min-height: 200px;
  /* Same as community card */
  background: linear-gradient(to bottom, rgba(52, 211, 153, 0.05), rgba(52, 211, 153, 0.02));
}

.bento-community-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-16);
}

.bento-avatars-stack {
  display: flex;
  margin-left: -12px;
}

.bento-avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--bg-primary);
  object-fit: cover;
  margin-left: -12px;
  position: relative;
  z-index: 1;
}

.bento-members-count {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-left: var(--space-12);
}

.bento-card-2 h3 {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: var(--space-8);
}

.bento-card-2 p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

.bento-community-visual {
  position: relative;
  margin-top: var(--space-24);
  height: 120px;
}

.bento-dotted-path {
  position: absolute;
  top: -12px;
  right: 0;
  width: 180px;
  height: 110px;
  border-radius: 16px;
  border: 2px dashed rgba(52, 211, 153, 0.3);
  z-index: 1;
  pointer-events: none;
}

.bento-message-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(to bottom, rgba(52, 211, 153, 0.25), rgba(52, 211, 153, 0.2));
  border: 1px solid rgba(52, 211, 153, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple-300);
  z-index: 2;
}

.bento-coach-small-avatar {
  position: absolute;
  bottom: -12px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(52, 211, 153, 0.6);
  object-fit: cover;
  z-index: 3;
  background: var(--bg-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Card 3 - Pratique > Théorie */
.bento-card-3 {
  grid-column: span 6;
  min-height: 200px;
}

.bento-card-3 h3 {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: var(--space-8);
}

.bento-card-3 p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin-bottom: var(--space-16);
}

.bento-notifications-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bento-notif-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.bento-notif-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(52, 211, 153, 0.3);
}

.bento-notif-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(52, 211, 153, 0.2);
  border: 1px solid rgba(52, 211, 153, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple-300);
  flex-shrink: 0;
}

.bento-notif-content {
  flex: 1;
}

.bento-notif-title {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2px;
}

.bento-notif-subtitle {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.bento-notif-item svg:last-child {
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.bento-glow-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.2);
  filter: blur(32px);
  transform: translate(24px, 24px);
  pointer-events: none;
}

/* Card 4 - Garantie */
.bento-card-4 {
  grid-column: span 6;
  grid-row: span 2;
  min-height: 400px;
  background: linear-gradient(to bottom, rgba(52, 211, 153, 0.15), rgba(5, 150, 105, 0.1));
}

.bento-glow-purple-top {
  position: absolute;
  top: -80px;
  right: -96px;
  width: 256px;
  height: 256px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.3);
  filter: blur(80px);
  pointer-events: none;
}

.bento-guarantee-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-16);
}

.bento-security-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--purple-200);
  font-size: 14px;
}

.bento-security-badge svg {
  color: var(--purple-300);
}

.bento-unique-badge {
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
}

.bento-guarantee-content {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: var(--space-16);
}

.bento-guarantee-icon-box {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: 16px;
  background: linear-gradient(to bottom, rgba(52, 211, 153, 0.25), rgba(52, 211, 153, 0.2));
  border: 1px solid rgba(52, 211, 153, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple-300);
}

.bento-guarantee-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: var(--space-8);
}

.bento-guarantee-content p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

/* Card 5 - Session Live */
.bento-card-5 {
  grid-column: span 6;
  min-height: 200px;
  background: linear-gradient(to bottom, rgba(5, 150, 105, 0.2), rgba(52, 211, 153, 0.1));
}

.bento-session-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-24);
}

.bento-group-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--purple-200);
  font-size: 12px;
}

.bento-group-badge svg {
  color: var(--purple-300);
}

.bento-session-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
}

.bento-session-dotted-path {
  position: absolute;
  top: -4px;
  left: 4px;
  width: 70%;
  height: 96px;
  border-radius: 18px;
  border: 2px dashed rgba(52, 211, 153, 0.3);
}

.bento-session-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 16px;
  background: rgba(13, 36, 31, 0.8);
  border: 1px solid rgba(52, 211, 153, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple-300);
  position: relative;
  z-index: 2;
}

.bento-session-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
}

.bento-session-content p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  max-width: 400px;
}

.bento-session-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(52, 211, 153, 0.6);
  object-fit: cover;
  margin-left: auto;
  position: relative;
  z-index: 2;
}

/* Card 6 - Phases + Plan validé */
.bento-card-6 {
  grid-column: span 12;
  min-height: 200px;
}

.bento-phases-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-24);
}

.bento-phases-timeline h3 {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: var(--space-16);
}

.bento-timeline-container {
  display: flex;
  gap: 16px;
}

.bento-timeline-rail {
  position: relative;
  width: 8px;
  flex-shrink: 0;
}

.bento-timeline-line {
  position: absolute;
  left: 50%;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(-50%);
}

.bento-timeline-dot {
  position: absolute;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translateX(-50%);
}

.bento-dot-validated {
  top: 24px;
  background: var(--purple-400);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.6);
}

.bento-dot-pending {
  top: 88px;
  background: rgba(255, 255, 255, 0.3);
}

.bento-dot-next {
  top: 152px;
  background: rgba(255, 255, 255, 0.3);
}

.bento-timeline-items {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bento-timeline-item {
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
}

.bento-timeline-item-title {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
  flex: 1;
}

.bento-timeline-item-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
  margin-left: 12px;
}

.bento-timeline-item-status svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.bento-status-validated {
  color: var(--purple-300);
}

.bento-status-pending,
.bento-status-next {
  color: rgba(255, 255, 255, 0.6);
}

.bento-plan-validated {
  position: relative;
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(to bottom, rgba(52, 211, 153, 0.2), rgba(5, 150, 105, 0.1));
  border: 1px solid rgba(52, 211, 153, 0.3);
  overflow: hidden;
}

.bento-plan-glow {
  position: absolute;
  top: -32px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.3);
  filter: blur(70px);
  pointer-events: none;
}

.bento-plan-validated h4 {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
}

.bento-plan-validated>p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 16px;
}

.bento-plan-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bento-plan-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.bento-plan-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(52, 211, 153, 0.2);
  border: 1px solid rgba(52, 211, 153, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple-300);
  flex-shrink: 0;
}

.bento-plan-content {
  flex: 1;
}

.bento-plan-title {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2px;
}

.bento-plan-subtitle {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.bento-plan-item svg:last-child {
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

/* Tablette 769px–1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  .bento-card-inner {
    padding: 28px;
  }
}

/* Responsive */
@media (max-width: 1024px) {

  .bento-card-1,
  .bento-card-4 {
    grid-column: span 12;
    grid-row: span 1;
  }

  .bento-card-2,
  .bento-card-3,
  .bento-card-5 {
    grid-column: span 12;
  }

  .bento-card-6 {
    grid-column: span 12;
  }

  .bento-phases-grid {
    grid-template-columns: 1fr;
  }

  /* Variant simplifié pour tablette */
  .choice-visual-container {
    position: relative;
    padding: var(--space-32) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-32);
  }

  /* Masquer les lignes d'animation sur tablette */
  .choice-lines-svg {
    display: none !important;
  }
  
  /* Masquer le glow sur tablette */
  .choice-center-glow {
    display: none !important;
  }

  /* Centrer le nœud central sur tablette */
  .choice-center-node {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: auto;
    min-width: 90px;
    max-width: 85%;
    margin: 0 auto;
  }

  /* Empiler les rectangles sur tablette */
  .choice-options-wrapper {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100%;
    flex-direction: column !important;
    gap: var(--space-24);
    /* Espacement augmenté entre les rectangles */
    align-items: stretch;
    padding: 0;
    margin-top: 0;
  }

  .choice-option {
    max-width: 100% !important;
    width: 100% !important;
    background: linear-gradient(to bottom right, rgba(40, 28, 56, 0.95), rgba(15, 20, 15, 0.9)) !important;
    border: 1px solid var(--purple-400-rgba-4) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  }

  /* Réinitialiser les propriétés de grille pour forcer l'empilement */
  .methode-grid .methode-card.bento-card-choice {
    grid-column: 1 !important;
    grid-row: 2 !important;
    /* Deuxième position après la carte large */
  }
}

@media (max-width: 768px) {
  .bento-card-header h3,
  .bento-card-2 h3,
  .bento-card-3 h3,
  .bento-guarantee-content h3,
  .bento-session-content h3 {
    font-size: 17px;
    line-height: 1.3;
  }

  .bento-phases-timeline h3 {
    font-size: 16px;
  }

  .bento-pill-2 {
    left: clamp(60px, 30%, 144px);
  }

  .bento-coach-label {
    left: 16px;
    top: 12px;
  }

  .bento-path-border {
    height: 250px;
    width: min(250px, 100%);
  }

  .bento-guarantee-content {
    flex-direction: column;
  }

  .bento-session-content {
    flex-wrap: wrap;
  }

  /* Variant simplifié pour mobile - Masquer l'animation complexe */
  .choice-visual-container {
    position: relative;
    padding: var(--space-24) 0;
    /* Padding uniforme, pas besoin de padding-top spécial */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-24);
    /* Espacement entre les éléments */
  }

  /* Masquer complètement les lignes d'animation sur mobile */
  .choice-lines-svg {
    display: none !important;
  }
  
  /* Masquer le glow sur mobile */
  .choice-center-glow {
    display: none !important;
  }

  /* Centrer le nœud central sur mobile, taille réduite */
  .choice-center-node {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    margin: 0 auto;
  }

  .choice-options-wrapper {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100%;
    display: flex;
    flex-direction: column !important;
    /* Force l'empilement vertical sur mobile */
    gap: var(--space-24);
    /* Espacement augmenté entre les rectangles */
    align-items: stretch;
    padding: 0;
    margin-top: 0;
    /* Pas de marge top, le gap du container gère l'espacement */
  }

  .choice-option {
    max-width: 100% !important;
    width: 100% !important;
    /* Force la largeur à 100% pour empiler verticalement */
    justify-content: flex-start;
    box-sizing: border-box;
    background: linear-gradient(to bottom right, rgba(40, 28, 56, 0.95), rgba(15, 20, 15, 0.9)) !important;
    border: 1px solid var(--purple-400-rgba-4) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  }

  .choice-option > div:not(.choice-option-icon) {
    max-width: 100%;
    box-sizing: border-box;
  }
}


/* Card Choice - Liberté Totale */
.bento-card-choice {
  grid-column: span 6;
  background: linear-gradient(to bottom, rgba(52, 211, 153, 0.05), rgba(52, 211, 153, 0.02));
}

/* When used in methode-grid context */
.methode-grid .bento-card-choice {
  grid-column: auto;
  height: 100%;
  /* Prend toute la hauteur disponible pour s'aligner avec la carte de gauche */
  display: flex;
  flex-direction: column;
}

/* Override background to match methode-card design system */
/* Use higher specificity to ensure it overrides .bento-card-choice */
.methode-grid .methode-card.bento-card-choice {
  background: linear-gradient(to bottom right, rgba(26, 19, 37, 0.8), rgba(5, 10, 8, 0.6));
  border: 1px solid var(--purple-400-rgba-3);
  border-radius: 21.6px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: calc(var(--space-24) * 0.9);
  margin: 0;
  height: 100%;
  min-height: 0;
  align-self: stretch;
  grid-column: 2;
  grid-row: 1;
  justify-content: center;
}

.methode-card.bento-card-choice .methode-card-header {
  margin-bottom: calc(var(--space-16) * 0.9);
  /* Même marge que la carte communauté pour un espacement uniforme */
  flex-shrink: 0;
}

.methode-card.bento-card-choice .methode-card-description {
  margin-bottom: calc(var(--space-16) * 0.9);
  /* Même marge que la carte communauté pour un espacement uniforme */
  flex-shrink: 0;
}

.methode-card.bento-card-choice .methode-card-content {
  margin-top: auto;
  margin-bottom: auto;
  overflow: visible;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  justify-content: center;
}

.methode-card.bento-card-choice .methode-icon-box {
  /* Same size as other methode-card icons */
  width: 43.2px;
  height: 43.2px;
  border-radius: 14.4px;
}

/* Apply methode-card design system to bento-card-choice */
.methode-card.bento-card-choice h3 {
  font-size: clamp(16px, 2.2vw, 19.8px);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0;
  margin-top: 0;
  text-align: left;
  line-height: 1.3;
}

.methode-card.bento-card-choice p {
  font-size: clamp(11px, 1.4vw, 12.6px);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: 0;
  /* Pas de marge, seule la description dans le header a une marge */
  text-align: left;
}

.choice-visual-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 0;
  padding: 30px 0 0 0;
  width: 100%;
  flex: 1 1 auto;
  min-height: 200px;
  height: 100%;
  overflow: visible;
}

/* Central Node */
.choice-center-node {
  position: absolute;
  top: -10px;
  /* Position baissée pour descendre le nœud */
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  min-width: 100px;
  max-width: 90%;
  padding: 8px 14px;
  background: rgba(26, 19, 37, 0.6);
  border: 1px solid var(--purple-400-rgba-3);
  border-radius: 10.8px;
  text-align: center;
  z-index: 2;
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.choice-center-node:hover {
  border-color: var(--purple-400-rgba-6);
  box-shadow: 0 0 15px var(--purple-400-rgba-3);
  transform: translateX(-50%) scale(1.05);
}

.choice-center-title {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.choice-center-glow {
  position: absolute;
  top: 2px;
  /* Ajusté pour suivre le nœud central baissé */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  background: var(--purple-400-rgba-2);
  filter: blur(30px);
  border-radius: 50%;
  z-index: -1;
  animation: pulseGlow 3s infinite alternate;
}

@keyframes pulseGlow {
  0% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.8);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* Connecting Lines */
.choice-lines-svg {
  position: absolute;
  top: 10px;
  /* Position baissée pour descendre les lignes avec le nœud */
  left: 0;
  width: 100%;
  height: 62px;
  /* Hauteur augmentée de 2px pour allonger encore les lignes */
  z-index: 1;
  pointer-events: none;
}

.choice-line-path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 10;
  animation: flowLine 1s linear infinite;
}

.choice-line-left {
  stroke: url(#gradient-line-left);
  filter: drop-shadow(0 0 4px rgba(128, 128, 128, 0.5));
}

.choice-line-right {
  stroke: url(#gradient-line-right);
  filter: drop-shadow(0 0 4px var(--purple-400-rgba-5));
}

/* Définir les couleurs du gradient SVG avec les variables du thème */
#gradient-line-right stop[offset="0%"] {
  stop-color: var(--purple-400);
  stop-opacity: 0.8;
}

#gradient-line-right stop[offset="50%"] {
  stop-color: var(--purple-300);
  stop-opacity: 1;
}

#gradient-line-right stop[offset="100%"] {
  stop-color: var(--purple-400);
  stop-opacity: 0.8;
}

@keyframes flowLine {
  to {
    stroke-dashoffset: -20;
  }
}

/* Options */
.choice-options-wrapper {
  position: absolute;
  bottom: 0px;
  /* Remonté pour rapprocher les rectangles du bas */
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  /* Changé de space-between à flex-start pour que le gap fonctionne */
  align-items: flex-end;
  padding: 0 12px 12px 12px;
  /* Padding en bas pour un petit espacement */
  gap: var(--space-16);
  /* Espacement entre les rectangles sur desktop */
  flex-wrap: wrap;
  box-sizing: border-box;
}

.choice-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(to bottom right, rgba(26, 19, 37, 0.95), rgba(5, 10, 8, 0.9));
  border: 1px solid var(--purple-400-rgba-2);
  border-radius: 10.8px;
  z-index: 2;
  transition: all 0.3s ease;
  cursor: default;
  flex: 0 0 auto;
  width: 240px;
  max-width: 240px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  box-sizing: border-box;
}

.choice-option:last-child {
  margin-left: -1px;
  /* Réduit l'espacement entre les deux cartes d'un pixel */
}

/* Conteneur de texte dans choice-option */
.choice-option > div:not(.choice-option-icon) {
  flex: 1 1 auto;
  min-width: 0;
  /* Permettre au conteneur de s'adapter */
  display: flex;
  flex-direction: column;
  /* Empiler le titre et la description verticalement */
  gap: 2px;
  /* Petit espace entre le titre et la description */
}

.choice-option:hover {
  border-color: var(--purple-400-rgba-4);
  /* Match methode-module-item:hover border */
  background: linear-gradient(to bottom right, rgba(26, 19, 37, 1), rgba(5, 10, 8, 0.95));
  /* Moins transparent au hover */
  transform: translateY(-2px);
  /* Subtle lift */
}

/* Hover spécifique pour "Notre Produit" - utiliser les variables du thème */
.choice-option:hover .choice-icon-right {
  background: var(--purple-400-rgba-4);
  border-color: var(--purple-400-rgba-5);
  color: var(--purple-300);
}

.choice-option-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.choice-option:hover .choice-option-icon {
  transform: scale(1.1) rotate(5deg);
}

.choice-icon-left {
  background: rgba(128, 128, 128, 0.3);
  /* Fond gris */
  color: #a0a0a0;
  border: 1px solid rgba(128, 128, 128, 0.4);
}

.choice-icon-right {
  background: var(--purple-400-rgba-3);
  /* Fond mauve */
  color: var(--purple-300);
  border: 1px solid var(--purple-400-rgba-4);
}

.choice-option-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  white-space: normal;
  /* Permettre le retour à la ligne si nécessaire */
  line-height: 1.3;
  display: block;
  /* Affichage en bloc pour prendre toute la largeur */
}

.choice-option-sub {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.5);
  white-space: normal;
  /* Permettre le retour à la ligne si nécessaire */
  line-height: 1.4;
  display: block;
  /* Affichage en bloc pour prendre toute la largeur */
  margin-top: 0;
  /* Pas de marge supplémentaire, le gap du parent gère l'espace */
}
/* ── MRR horizontal flow layout ── */
.mrr-flow-h {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}

/* Side cards */
.mrr-flow-h-card {
  flex: 1;
  min-width: 0;
  padding: 14px;
  background: linear-gradient(160deg, rgba(26, 19, 37, 0.8), rgba(5, 10, 8, 0.7));
  border: 1px solid var(--purple-400-rgba-2);
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s ease;
}

.mrr-flow-h-card:hover {
  border-color: var(--purple-400-rgba-4);
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.06);
}

.mrr-flow-h-card--accent {
  border-color: var(--purple-400-rgba-3);
}

.mrr-flow-h-card--accent:hover {
  border-color: var(--purple-400-rgba-5);
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.1);
}

.mrr-flow-h-icon {
  font-size: 20px;
  margin-bottom: 6px;
}

.mrr-flow-h-label {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.mrr-flow-h-desc {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.4;
}

/* Animated connectors */
.mrr-flow-h-connector {
  width: 48px;
  flex-shrink: 0;
  height: 6px;
  overflow: visible;
}

.mrr-flow-h-connector svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mrr-dash-anim {
  animation: mrrDashH 1s linear infinite;
}

@keyframes mrrDashH {
  to { stroke-dashoffset: -14; }
}

/* Central node */
.mrr-flow-h-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 16px;
  background: rgba(26, 19, 37, 0.9);
  border: 1px solid var(--purple-400-rgba-5);
  border-radius: 14px;
  color: var(--purple-400, #34d399);
  backdrop-filter: blur(10px);
  z-index: 2;
  flex-shrink: 0;
  box-shadow: 0 0 24px rgba(52, 211, 153, 0.1);
  transition: all 0.3s ease;
}

.mrr-flow-h-node:hover {
  border-color: var(--purple-400-rgba-6);
  box-shadow: 0 0 32px rgba(52, 211, 153, 0.18);
}

.mrr-flow-h-node span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #fff;
}

.mrr-flow-h-node-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  background: rgba(52, 211, 153, 0.15);
  filter: blur(25px);
  border-radius: 50%;
  z-index: -1;
  animation: mrrNodePulse 3s ease-in-out infinite alternate;
}

@keyframes mrrNodePulse {
  0% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.8); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}

@media (max-width: 480px) {
  .mrr-flow-h {
    flex-direction: column;
    gap: 0;
  }
  .mrr-flow-h-connector {
    width: 6px;
    height: 32px;
  }
  .mrr-flow-h-connector svg {
    transform: rotate(90deg);
  }
}