/* MBOKA_T2R2_SOFT_PROFESSIONAL */

/* 1. Rythme visuel et espacement */

#view-trajectory .mp-t2-switch {
  margin: 0 0 12px;
}

#mpT2Layout {
  --t2-border: rgba(161, 197, 175, .15);
  --t2-muted: #aec4b8;
}

#mpT2Layout .mp-t2-hero {
  min-height: 165px;
  padding: 25px 29px;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .09);
}

#mpT2Layout .mp-t2-hero h2 {
  font-size: clamp(29px, 3vw, 39px);
  letter-spacing: -.035em;
}

#mpT2Layout .mp-t2-hero-copy > span {
  line-height: 1.55;
}

/* 2. Parcours plus léger */

#mpT2Layout .mp-t2-stepper {
  margin: 12px 0;
  padding: 15px 18px;
  background: rgba(20, 48, 36, .78);
}

#mpT2Layout .mp-t2-step {
  gap: 10px;
}

#mpT2Layout .mp-t2-stepnumber {
  width: 36px;
  height: 36px;
}

#mpT2Layout .mp-t2-step small {
  margin-top: 3px;
  line-height: 1.35;
}

/* 3. Cartes professionnelles et soft */

#mpT2Layout .mp-t2-columns,
#mpT2Layout .mp-t2-stack {
  gap: 13px;
}

#mpT2Layout .mp-t2-card {
  padding: 20px;
  border-radius: 17px;

  background: linear-gradient(
    160deg,
    rgba(24, 52, 40, .96),
    rgba(18, 41, 32, .96)
  );

  border: 1px solid var(--t2-border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .035);
}

#mpT2Layout .mp-t2-cardhead {
  margin-bottom: 18px;
  align-items: center;
}

#mpT2Layout .mp-t2-card h3 {
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.015em;
}

#mpT2Layout .mp-t2-cardhead p {
  max-width: 38ch;
  line-height: 1.5;
  color: #a9c0b4;
}

#mpT2Layout .mp-t2-icon {
  width: 39px;
  height: 39px;
  border-radius: 11px;
  background: rgba(46, 145, 100, .20);
}

/* 4. Priorités : lecture plus confortable */

#mpT2Layout .mp-t2-priorities {
  gap: 11px;
}

#mpT2Layout .mp-t2-priority {
  padding: 15px;
  border-radius: 14px;
  min-height: 180px;
  gap: 10px;
}

#mpT2Layout .mp-t2-prio-name {
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#mpT2Layout .mp-t2-priority > strong {
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#mpT2Layout .mp-t2-priority small {
  font-size: 11px;
  line-height: 1.55;
}

/* 5. Actions : listes faciles à parcourir */

#mpT2Layout .mp-t2-action {
  min-height: 66px;
  padding: 14px;
  margin: 9px 0;
  border-radius: 12px;
}

#mpT2Layout .mp-t2-action-copy strong {
  line-height: 1.45;
}

#mpT2Layout .mp-t2-action-copy small {
  line-height: 1.5;
  margin-top: 5px;
}

/* 6. Projections et chiffres */

#mpT2Layout .mp-t2-chart {
  margin-top: 18px;
}

#mpT2Layout .mp-t2-chart svg {
  width: 100%;
}

#mpT2Layout .mp-t2-metric {
  min-height: 39px;
  align-items: baseline;
  line-height: 1.5;
}

#mpT2Layout .mp-t2-metric span {
  max-width: 66%;
}

#mpT2Layout .mp-t2-metric strong {
  max-width: 48%;
  overflow-wrap: anywhere;
  font-size: 12px;
}

/* 7. Focus clavier et interactions */

#mpT2Layout button:focus-visible,
#view-trajectory .mp-t2-switch button:focus-visible {
  outline: 2px solid #7de6ae;
  outline-offset: 3px;
}

#mpT2Layout button {
  transition:
    border-color .17s ease,
    background-color .17s ease,
    transform .17s ease;
}

#mpT2Layout .mp-t2-action:hover,
#mpT2Layout .mp-t2-priority:hover {
  border-color: rgba(116, 220, 168, .45);
}

/* 8. Tablette et petits ordinateurs */

@media (max-width: 1250px) {
  #mpT2Layout .mp-t2-card {
    padding: 16px;
  }

  #mpT2Layout .mp-t2-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  #mpT2Layout .mp-t2-step strong {
    font-size: 11px;
  }
}

/* 9. Téléphones */

@media (max-width: 760px) {
  #mpT2Layout .mp-t2-hero {
    min-height: 0;
    padding: 20px;
  }

  #mpT2Layout .mp-t2-hero-copy > span {
    display: block;
  }

  #mpT2Layout .mp-t2-stepper {
    padding: 12px;
    scroll-snap-type: x proximity;
  }

  #mpT2Layout .mp-t2-step {
    scroll-snap-align: start;
  }

  #mpT2Layout .mp-t2-priorities {
    grid-template-columns: minmax(0, 1fr);
  }

  #mpT2Layout .mp-t2-priority {
    min-height: 0;
  }

  #mpT2Layout .mp-t2-cardhead {
    align-items: flex-start;
  }

  #mpT2Layout .mp-t2-metric {
    gap: 14px;
  }

  #mpT2Layout .mp-t2-metric span {
    max-width: 62%;
  }
}

/* 10. Réduction des animations */

@media (prefers-reduced-motion: reduce) {
  #mpT2Layout button,
  #mpT2Layout .mp-t2-priority {
    transition: none !important;
  }
}