/* À propos : le texte et les outils, qui arrivent un par un. */

/* ---------- À propos ---------- */
.about {
  padding: 112px 0;
}
.about-grid {
  display: grid;
  grid-template-columns: 500px minmax(0, 1fr);
  column-gap: 80px;
}
.label-line {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.35em;
  color: var(--ink-2);
}
.label-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
/* Toujours sur une ligne : taille plafonnée pour tenir dans la colonne de 500 px, même sur grand écran. */
.about-title {
  margin: 24px 0 26px;
  font: 900 clamp(4.125rem, 0.5rem + 4.64vw, 5.375rem) / 0.95 var(--sans);
  letter-spacing: -0.025em;
  text-transform: uppercase;
  white-space: nowrap;
}
.about-copy p:not(.label-line) {
  font-size: 16px;
  line-height: 26px;
  color: var(--ink-2);
}
.about-copy p + p {
  margin-top: 16px;
}
.about-copy .about-lead {
  font-size: 18px;
  line-height: 29.25px;
  color: var(--ink);
}
.stack {
  display: grid;
  align-content: start;
  gap: 30px;
  padding-top: 52px;
}
.stack-group {
  display: grid;
  grid-template-columns: minmax(150px, 290px) minmax(0, 1fr);
  align-items: start;
}
.stack dt {
  font: 900 30px / 1.1 var(--sans);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--grey-accent);
}
.stack dd {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 30px;
  padding-top: 4px;
}
.stack-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 400 14px / 19.25px var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.tool-svg {
  width: 26px;
  height: 26px;
  color: var(--ink);
}
/* Sous 1280 px, la colonne des outils serait trop étroite : texte et outils l'un sous l'autre. */
@media (max-width: 1279px) {
  .about-grid {
    grid-template-columns: 1fr;
    row-gap: 56px;
  }
  .about-title {
    font-size: clamp(3.375rem, 0.5rem + 7.22vw, 6.25rem);
  }
  .stack {
    padding-top: 0;
  }
}
@media (max-width: 640px) {
  .about {
    padding: 72px 0;
  }
  .label-line {
    font-size: 10px;
    letter-spacing: 0.28em;
  }
  .about-title {
    margin: 16px 0 16px;
    font-size: clamp(1.875rem, 0.5rem + 5.85vw, 2.75rem);
    letter-spacing: -0.025em;
  }
  .about-copy .about-lead {
    font-size: 15px;
    line-height: 24.4px;
  }
  .about-copy p:not(.label-line):not(.about-lead) {
    font-size: 13px;
    line-height: 21.1px;
  }
  .stack-group {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
  .stack dt {
    font-size: 20px;
  }
  .stack dd {
    gap: 14px 22px;
    padding-left: 30px;
  }
  .stack-item {
    gap: 8px;
    font-size: 10px;
    letter-spacing: 0.025em;
  }
  .tool-svg {
    width: 20px;
    height: 20px;
  }
}

/* ---------- Animations (états posés par reveal.js ; rien n'est masqué sans .has-motion) ---------- */
.has-motion .stack-item {
  opacity: 0;
  translate: 0 26px;
  transition:
    opacity 0.6s var(--ease-out) calc(var(--j, 0) * 80ms + 0.2s),
    translate 1s var(--ease-expo) calc(var(--j, 0) * 80ms + 0.2s);
}
.has-motion .stack-group.is-in .stack-item {
  opacity: 1;
  translate: 0 0;
}