/* L'histoire de nos marques — styles propres à la page (jetons de tokens.css uniquement). */

.histoire-hero__copy {
  max-width: 760px;
}

/* Récit long : colonne de lecture resserrée. */
.histoire-col > .timeline {
  max-width: 980px;
}
.histoire-col .timeline__body p {
  max-width: 66ch;
}

/* Évolution : titre à gauche, texte à droite sur grand écran. */
.histoire-split {
  display: grid;
  gap: var(--space-5);
  max-width: 980px;
}
.histoire-split__title {
  margin: 0;
}
.histoire-split__body p {
  max-width: 62ch;
  font-size: clamp(1rem, 1.3vw, 1.08rem);
}
@media (min-width: 900px) {
  .histoire-split {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-9);
    align-items: start;
  }
}

/* Lien de fin : une phrase-lien, centrée, en typo de titre. */
.histoire-fin {
  text-align: center;
}
.histoire-fin__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 34ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.35;
  color: var(--color-fg);
  text-decoration: none;
  text-align: left;
}
.histoire-fin__link .ico {
  flex-shrink: 0;
  color: var(--color-primary);
  transition: transform 0.2s var(--ease-out);
}
.histoire-fin__link:hover {
  color: var(--color-primary-dark);
}
@media (hover: hover) {
  .histoire-fin__link:hover .ico {
    transform: translateX(4px);
  }
}