.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  font-weight: 700;
  text-decoration: none;
}

/* Bouton principal : la tige de la flèche s'allonge au survol */
.bouton-principal {
  min-height: 60px;
  width: 100%;
  border-radius: 16px;
  background: var(--outremer);
  color: var(--blanc);
  font-family: var(--titre);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 19px;
  transition: background .35s ease, transform .35s var(--ease-out);
}
.bouton-principal:hover { background: var(--encre); color: var(--blanc); transform: translateY(-2px); }
.bouton-principal:active { transform: none; }

.bouton-secondaire {
  border: 1.5px solid var(--filet-fort);
  background: var(--blanc);
  color: var(--encre);
  transition: border-color .2s, background .2s;
}
.bouton-secondaire:hover { border-color: var(--encre); background: var(--champ); }

.fleche { display: inline-flex; align-items: center; color: var(--signal); }
.fleche-tige {
  display: block;
  width: 34px; height: 3px;
  margin-right: -3px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(.41);
  transform-origin: right;
  transition: transform .45s var(--ease-swap);
}
.bouton:hover .fleche-tige, .lien-suite:hover .fleche-tige { transform: scaleX(1); }

/* Lien de suite : souligné jaune qui se trace de gauche à droite */
.lien-suite {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
  background: linear-gradient(var(--signal), var(--signal)) no-repeat 0 calc(100% - 8px) / 100% 3px;
}
.lien-suite:hover { color: inherit; background-size: 100% 12px; }