/* Page-owned styles for team-building page */

/* Introduction éditoriale */
.tb-intro {
  padding-block: var(--space-3xl) var(--space-2xl);
  background-color: var(--color-background);
}

.tb-intro__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  max-width: 800px;
  margin-inline: auto;
}

.tb-intro__sequence {
  margin-block-end: 0;
}

.tb-intro__title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  max-width: 18ch;
  margin-block-end: var(--space-md);
  overflow-wrap: break-word;
}

.tb-intro__lead {
  font-size: var(--text-body-large);
  line-height: var(--leading-body-large);
  max-width: 65ch;
  margin-block-end: 0;
  text-align: center;
}

/* Notre vision du team building */
.tb-vision {
  padding-block: var(--space-2xl);
  background-color: var(--color-background);
}

.tb-vision__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.tb-vision__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: 70ch;
}

.tb-vision__header .overline {
  margin-block-end: 0;
}

.tb-vision__header h2 {
  margin-block-end: 0;
}

.tb-vision__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
  align-items: start;
}

.tb-vision__block {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.tb-vision__block h3 {
  margin-block-end: 0;
}

.tb-vision__block p {
  max-width: 70ch;
  margin-block-end: 0;
}

.tb-vision__quote {
  margin-block-end: 0;
}

.tb-vision__list {
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
}

.tb-vision__list li + li {
  margin-block-start: var(--space-xs);
}

/* Formats de team building */
.tb-formats {
  padding-block: var(--space-2xl);
  background-color: var(--color-background);
}

.tb-formats__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.tb-formats__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: 70ch;
}

.tb-formats__header .overline {
  margin-block-end: 0;
}

.tb-formats__header h2 {
  margin-block-end: 0;
}

.tb-formats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: start;
}

.tb-format-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-polaroid);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.tb-format-card:hover {
  transform: rotate(0deg) !important;
  box-shadow: var(--shadow-polaroid-hover);
}

.tb-format-card--defis {
  transform: rotate(-1.5deg);
}

.tb-format-card--soirees {
  transform: rotate(1.2deg);
}

.tb-format-card--ateliers {
  transform: rotate(-0.8deg);
}

.tb-format-card--poker {
  transform: rotate(1.8deg);
  background-color: var(--color-accent-pink-soft);
  border-color: var(--color-accent-red);
}

.tb-format-card h3 {
  margin-block-end: 0;
}

.tb-format-card p {
  max-width: 55ch;
  margin-block-end: 0;
}

.tb-format-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: auto;
}

/* Séquence photo : l'expérience collective */
.tb-gallery {
  padding-block: var(--space-2xl);
  background-color: var(--color-accent-pink-soft);
}

.tb-gallery__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.tb-gallery__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
  max-width: 60ch;
  margin-inline: auto;
}

.tb-gallery__header .overline {
  margin-block-end: 0;
}

.tb-gallery__header h2 {
  margin-block-end: 0;
}

.tb-gallery__intro {
  max-width: 60ch;
  margin-block-end: 0;
  text-align: center;
}

.tb-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
  align-items: start;
}

.tb-gallery__item {
  min-width: 0;
  margin-block-end: 0;
}

.tb-gallery__item--1 {
  transform: rotate(-2.5deg);
}

.tb-gallery__item--2 {
  transform: rotate(1.5deg);
  margin-block-start: var(--space-xl);
}

.tb-gallery__item--3 {
  transform: rotate(-1deg);
  margin-block-start: var(--space-lg);
}

.tb-gallery__item .polaroid__image {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Les bénéfices pour votre équipe */
.tb-benefits {
  padding-block: var(--space-2xl);
  background-color: var(--color-background);
}

.tb-benefits__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.tb-benefits__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: 70ch;
}

.tb-benefits__header .overline {
  margin-block-end: 0;
}

.tb-benefits__header h2 {
  margin-block-end: 0;
}

.tb-benefits__list {
  display: grid;
  grid-template-columns: minmax(0, 8fr);
  gap: var(--space-xl);
  max-width: 900px;
}

.tb-benefit {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tb-benefit__number {
  margin-block-end: 0;
}

.tb-benefit h3 {
  margin-block-end: 0;
}

.tb-benefit p {
  max-width: 70ch;
  margin-block-end: 0;
}

/* Comment ça se passe */
.tb-process {
  padding-block: var(--space-2xl);
  background-color: var(--color-background);
}

.tb-process__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.tb-process__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: 70ch;
}

.tb-process__header .overline {
  margin-block-end: 0;
}

.tb-process__header h2 {
  margin-block-end: 0;
}

.tb-process__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
  align-items: start;
}

.tb-step {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.tb-step__number {
  margin-block-end: 0;
}

.tb-step h3 {
  margin-block-end: 0;
}

.tb-step p {
  max-width: 70ch;
  margin-block-end: 0;
}

.tb-step__contact {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-ink-muted);
}

.tb-step__contact a {
  color: var(--color-accent-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tb-step__contact a:hover {
  color: var(--color-accent-red-dark);
}

/* Pourquoi nous choisir */
.tb-why {
  padding-block: var(--space-2xl);
  background-color: var(--color-accent-pink-soft);
}

.tb-why__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.tb-why__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: 70ch;
}

.tb-why__header .overline {
  margin-block-end: 0;
}

.tb-why__header h2 {
  margin-block-end: 0;
}

.tb-why__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
  align-items: start;
}

.tb-why-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.tb-why-card h3 {
  margin-block-end: 0;
}

.tb-why-card p {
  max-width: 65ch;
  margin-block-end: 0;
}

/* Témoignage fictif ou citation inspirante */
.tb-quote {
  padding-block: var(--space-2xl);
  background-color: var(--color-background);
}

.tb-quote__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  max-width: 700px;
  margin-inline: auto;
}

.tb-quote__container .overline {
  margin-block-end: 0;
}

.tb-quote__block {
  max-width: 50ch;
  margin-block-end: 0;
  text-align: center;
}

.tb-quote__block p {
  max-width: 50ch;
  margin-inline: auto;
}

.tb-quote__block cite {
  text-align: center;
}

/* Appel à l'action */
.tb-cta {
  padding-block: var(--space-3xl);
  background-color: var(--color-ink);
  color: var(--color-background);
}

.tb-cta__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  max-width: 700px;
  margin-inline: auto;
}

.tb-cta__sequence {
  color: var(--color-accent-red);
  margin-block-end: 0;
}

.tb-cta h2 {
  color: var(--color-background);
  margin-block-end: 0;
}

.tb-cta__lead {
  max-width: 60ch;
  margin-block-end: 0;
  color: var(--color-background);
}

.tb-cta__lead a {
  color: var(--color-accent-saffron);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tb-cta__lead a:hover {
  color: var(--color-accent-pink);
}

.tb-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-block-start: var(--space-sm);
}

.tb-cta__actions .btn {
  min-width: 0;
}

/* Mention légale et informations pratiques */
.tb-legal {
  padding-block: var(--space-2xl);
  background-color: var(--color-background);
  border-block-start: 1px solid var(--color-border);
}

.tb-legal__container {
  display: flex;
  justify-content: flex-start;
}

.tb-legal__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 70ch;
}

.tb-legal__block .overline {
  margin-block-end: 0;
}

.tb-legal__title {
  font-size: var(--text-h3);
  margin-block-end: 0;
}

.tb-legal__text {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-ink-muted);
  max-width: 70ch;
  margin-block-end: 0;
}

/* Responsive */
@media (max-width: 1023px) {
  .tb-vision__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .tb-formats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .tb-gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .tb-gallery__item--2 {
    margin-block-start: var(--space-lg);
  }

  .tb-gallery__item--3 {
    margin-block-start: 0;
  }

  .tb-process__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .tb-why__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

@media (max-width: 639px) {
  .tb-intro {
    padding-block: var(--space-2xl) var(--space-xl);
  }

  .tb-intro__container {
    gap: var(--space-sm);
  }

  .tb-intro__title {
    font-size: 2.25rem;
    max-width: 100%;
  }

  .tb-intro__lead {
    max-width: 100%;
  }

  .tb-vision,
  .tb-formats,
  .tb-gallery,
  .tb-benefits,
  .tb-process,
  .tb-why,
  .tb-quote,
  .tb-cta,
  .tb-legal {
    padding-block: var(--space-xl);
  }

  .tb-vision__grid,
  .tb-formats__grid,
  .tb-gallery__grid,
  .tb-benefits__list,
  .tb-process__grid,
  .tb-why__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .tb-format-card {
    transform: rotate(0deg) !important;
  }

  .tb-gallery__item {
    transform: rotate(-1deg) !important;
    margin-block-start: 0 !important;
  }

  .tb-gallery__item:nth-child(even) {
    transform: rotate(1deg) !important;
  }

  .tb-benefits__list {
    max-width: 100%;
  }

  .tb-cta__actions {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }

  .tb-cta__actions .btn {
    width: 100%;
  }

  .tb-legal__container {
    justify-content: flex-start;
  }

  .tb-legal__block {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tb-format-card,
  .tb-gallery__item {
    transition-duration: 0.01ms !important;
  }
}