/* Buyable equivalents of a sofa without live merchant link, and of the brand pages without any sofa on sale
   (inc/equivalents.php, 01/10). */
.equivalents {
  margin: clamp(1.5rem, 3vw, 2.5rem) 0;
  padding: clamp(1.1rem, 2.5vw, 1.8rem);
  border-radius: 16px;
  background: var(--moutarde-voile);
  border: 1px solid var(--moutarde);
  scroll-margin-top: 90px;
}
.equivalents h2 { font-size: var(--t-lg); line-height: 1.3; margin: 0 0 0.6rem; }
.equivalents__chapeau { font: 400 var(--t-sm)/1.55 var(--sans); color: var(--anthracite); margin: 0 0 1.3rem; max-width: 52rem; }
.equivalents__grille {
  display: grid; gap: 1.6rem 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}
.equivalent { display: flex; flex-direction: column; gap: 0.5rem; background: var(--blanc); border-radius: 12px; padding: 0.7rem; }
.equivalent .carte { flex: 1; }
.equivalent .carte__titre { font-size: var(--t-md); }
.equivalent__raison { font: 400 var(--t-xs)/1.45 var(--sans); color: var(--feutre); margin: 0; }
.equivalents__liens { margin-top: 1.4rem; }
.equivalents--marque { margin-top: 1rem; }
.page-standard__tete.texte-long h1 { margin-bottom: 0; }
/* The main button of the fiche leads to the equivalents: the site's yellow call to action. */
.bouton--equivalents { background: var(--moutarde); color: var(--anthracite); }
.bouton--equivalents:hover { background: var(--anthracite); color: var(--blanc); }
@media (max-width: 700px) {
  .equivalents__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.6rem; }
  .equivalent { padding: 0.45rem; }
  .equivalent .carte__titre { font-size: var(--t-sm); line-height: 1.25; }
  .equivalent .carte__prix { font-size: var(--t-md); }
}

/* Rule v2 (01/10 14 h 30): fiche without affiliation. The merchant button stays as a direct link (discreet), and
   « On préfère » sits right next to it, in the site's yellow, leading to the better noted models. */
.cta-duo { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; }
.cta-duo .bouton { width: 100%; }
.cta-duo .bouton--direct { background: var(--blanc); color: var(--anthracite); border: 1.5px solid var(--anthracite); min-height: 50px; border-radius: 999px; font-weight: 600; }
.cta-duo .bouton--direct:hover { background: var(--anthracite); color: var(--blanc); }
.cta-duo .bouton--prefere { background: var(--moutarde); color: var(--anthracite); min-height: 58px; border-radius: 999px; font-weight: 700; font-size: var(--t-md); box-shadow: 0 10px 24px -12px rgba(140, 104, 12, 0.7); }
.cta-duo .bouton--prefere:hover { background: var(--anthracite); color: var(--blanc); }
.cta-duo .bouton--prefere .cta__chez { display: inline; font-weight: 500; font-size: var(--t-sm); }
.achat .achat__cta .cta-duo .bouton--prefere .cta__chez { display: inline; }
.cta-duo .bouton--prefere .cta__texte { display: inline-flex; flex-wrap: wrap; gap: 0 0.4em; justify-content: center; }
@media (min-width: 901px) {
  .cta-duo { flex-direction: row-reverse; }
  .cta-duo .bouton { flex: 1 1 0; }
}
.equivalents--prefere .equivalent__raison { color: var(--anthracite); font-size: var(--t-sm); line-height: 1.5; }
.equivalents__texte p { font: 400 var(--t-sm)/1.6 var(--sans); color: var(--anthracite); margin: 0 0 0.8rem; max-width: 52rem; }
.equivalents__texte { margin-bottom: 1.3rem; }
/* Phone: the merchant button of a fiche normally lives only in the fixed bar, which a fiche without affiliation does
   not have; the two buttons stay under the title instead (rule v2). Plain words, no capitals, so the count fits. */
@media (max-width: 900px) {
  .fiche__tete .achat > .achat__cta:has(.cta-duo) { display: block; order: 9; margin: 0.4rem 0 0.6rem; }
}
.achat .achat__cta .cta-duo .bouton .cta__texte, .achat .achat__cta .cta-duo .bouton .cta__chez { text-transform: none; letter-spacing: 0.01em; }