/* « On préfère » common component (28/10, inc/on-prefere.php). Loaded on every universe; only .op-* and body.op-actif. */
/* Hero: the site already puts « On préfère » (.d10-pref) right under the merchant button; nothing overridden here. */
/* Button v3 (28/10, Romain): own full-width row under the merchant button, pale gold fill with a gold rim (clearly a
   second action, not a copy of the dark merchant button), overlapping thumbnails of the alternatives, bold label +
   regular line, ↓ in a solid gold square like the merchant arrow box. Contrast: #25272b on #f7e9c0 = 12.6:1, on #d6a62b = 7.9:1. */
/* Specificity note: design-fiche-t1.css styles .fiche.ft .bouton--prefere with !important (white + left rule);
   the On préfère button must win everywhere, hence the !important below. */
body.op-actif .op-bouton, body.op-actif .op-bouton:visited,
body.op-actif .fiche.ft .op-bouton, body.op-actif .barre-achat .op-bouton {
  display: flex !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important;
  width: 100%; min-height: 64px !important; margin: 12px 0 0; padding: 0 !important; box-sizing: border-box;
  background: #f7e9c0 !important; color: #25272b !important; border: 1.5px solid #d6a62b !important; border-radius: 4px !important;
  text-decoration: none; transition: none; animation: none; font: 400 1rem/1.25 var(--sans, inherit) !important;
  text-align: left; flex: 0 0 auto; overflow: hidden; box-shadow: none !important; }
body.op-actif .op-bouton:hover, body.op-actif .fiche.ft .op-bouton:hover { background: #f2dd9f !important; color: #25272b !important; border-color: #d6a62b !important; }
body.op-actif .op-bouton:focus-visible { outline: 3px solid #25272b; outline-offset: 2px; }
.op-bouton__vign { display: flex; align-items: center; flex: 0 0 auto; padding: 0 0 0 12px; }
.op-bouton__vign img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; background: #fff; border: 2px solid #fff;
  box-sizing: border-box; box-shadow: 0 1px 4px rgba(37, 39, 43, .22); position: relative; }
.op-bouton__vign img + img { margin-left: -16px; }
.op-bouton__vign img:nth-child(1) { z-index: 4; } .op-bouton__vign img:nth-child(2) { z-index: 3; }
.op-bouton__vign img:nth-child(3) { z-index: 2; } .op-bouton__vign img:nth-child(4) { z-index: 1; }
.op-bouton__texte { display: flex; flex-direction: column; justify-content: center; gap: 2px; flex: 1 1 auto; min-width: 0; padding: 10px 14px; }
.op-bouton__titre { font-weight: 700; font-size: 1.06rem; }
.op-bouton__ligne { font-weight: 400; font-size: .92rem; }
.op-bouton__fleche { align-self: stretch; display: flex; align-items: center; justify-content: center; flex: 0 0 52px; background: #d6a62b; color: #25272b; }
@media (max-width: 600px) {
  .op-bouton__vign { padding-left: 10px; }
  .op-bouton__vign img { width: 40px; height: 40px; border-radius: 8px; }
  .op-bouton__vign img + img { margin-left: -14px; }
  .op-bouton__vign img:nth-child(4) { display: none; }
  .op-bouton__texte { padding: 9px 10px; }
  .op-bouton__fleche { flex-basis: 44px; }
}
@media (max-width: 340px) { .op-bouton__vign { display: none; } }
/* Its own full-width row BELOW the merchant button (the wishlist heart stays on the merchant row); nothing truncated:
   the merchant label wraps instead of « Maisons du Mo… ». */
body.op-actif .achat__cta, body.op-actif .resume-fiche__action { display: flex; flex-wrap: wrap; align-items: stretch; }
body.op-actif .achat__cta > .op-bouton, body.op-actif .resume-fiche__action > .op-bouton { flex: 0 0 100%; order: 99; margin-top: 2px; }
body.op-actif .cta-duo > .op-bouton { margin-top: 2px; }
/* Copy for phones and tablets (the hero merchant button is only in the fixed bar there). */
.op-mobile { display: none; }
@media (max-width: 900px) { body.op-actif .op-mobile { display: block; order: 3; margin: 0 0 4px; } body.op-actif .op-mobile .op-bouton { margin-top: 0; } }
body.op-actif .achat__cta > a.bouton:not(.op-bouton), body.op-actif .resume-fiche__action > a.bouton:not(.op-bouton) { flex: 1 1 0; min-width: 0; min-height: 56px; }
body.op-actif .achat__cta > a.bouton:not(.op-bouton) .cta__texte, body.op-actif .resume-fiche__action > a.bouton:not(.op-bouton) .cta__texte,
body.op-actif .op-bouton .op-bouton__texte, body.op-actif .op-bouton .op-bouton__texte * { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.op { margin: 2.5rem 0; scroll-margin-top: 96px; }
.op h2 { margin-bottom: .5rem; }
.op__chapeau { max-width: 70ch; margin-bottom: 1.25rem; }
.op__grille { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 600px) { .op__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .op__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* v4 28/10: aligned cards. Each item spans 6 rows of the grid (badge, photo, name, price, key data, « En commun »)
   and shares them with its neighbours through subgrid, so prices and boxes sit at the same height in a row. */
.op-item { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.op-carte { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
@supports (grid-template-rows: subgrid) {
  .op__grille { row-gap: .5rem; }
  .op-item { display: grid; grid-row: span 6; grid-template-rows: subgrid; gap: .5rem; margin-bottom: 1rem; }
  .op-carte { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: .5rem; }
}
.op-carte__photo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: #f6f4ef; min-height: 0 !important; }
.op-carte__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.op-carte__pastille { position: absolute; top: 8px; left: 8px; min-width: 2.2rem; padding: .3rem .45rem; border-radius: 4px; background: #25272b; color: #fff; font-weight: 700; font-size: .9rem; text-align: center; }
.op-carte__titre { margin: 0; font: 600 1rem/1.3 var(--sans, inherit); align-self: start; }
.op-carte__titre a { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #25272b; text-decoration: none; min-height: 44px; }
.op-carte__titre a:hover { text-decoration: underline; }
.op-carte__pied { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin: 0; align-self: end; }
.op-carte__prix .num { font-weight: 700; font-size: 1.1rem; color: #25272b; }
.op-carte__prix small { font-size: .75rem; color: #55585e; }
.op-carte__note { font-size: .9rem; color: #55585e; white-space: nowrap; }
.op-carte__note b { color: #25272b; }
.op-item__faits { align-self: stretch; }
.op-item__raison { align-self: start; }
.op-item__pourquoi { margin: 0; font-size: .95rem; }
.op-item__pourquoi strong { display: inline-block; padding: .3rem .6rem; border-radius: 999px; background: #eef5ee; color: #1f5130; }
.op-item__raison { margin: 0; font-size: .85rem; line-height: 1.4; color: #55585e; }
/* Key data of the univers (registry canape_op_champs): label over value, 2 columns. */
.op-item__faits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .75rem; margin: 0; padding: .75rem; background: #f6f4ef; border-radius: 4px; font-size: .9rem; line-height: 1.3; }
.op-item__faits > div { min-width: 0; }
.op-item__faits dt { font-size: .75rem; color: #55585e; margin: 0; }
.op-item__faits dd { margin: 0; font-weight: 600; color: #25272b; overflow-wrap: anywhere; }
.op-item__pourquoi strong { max-width: 100%; white-space: normal; }
.op-item__pourquoi:empty { display: none; }
.op-item__raison:empty { visibility: hidden; }
.op-item a { min-height: 44px; }
.op-item .carte__titre a { display: inline-flex; align-items: center; }
/* Bug fix 28/10 (every fiche with a direct link, phones and tablets): in the column layout of .cta-duo (<= 900px), the
   flex-basis 14rem of design-fiche-t1.css became a 224px HEIGHT on « Voir sur but.fr ». */
@media (max-width: 900px) { body .fiche .cta-duo > a, body .fiche.ft .cta-duo > a { flex: 0 0 auto; } }

/* But fiches: the fixed bottom bar repeats On préfère. Same gold look as the hero button, text wraps, never cut. */
body.op-actif .but-barre .but-barre__bouton { min-height: 56px; background: #f7e9c0 !important; border: 1.5px solid #d6a62b !important; border-radius: 4px; color: #25272b !important; padding: 6px 12px 6px 14px; }
body.op-actif .but-barre .cta__texte, body.op-actif .but-barre .cta__chez { white-space: normal !important; text-overflow: clip !important; overflow: visible !important; }
body.op-actif .but-barre .cta__texte { font-weight: 700; line-height: 1.2; }
body.op-actif .but-barre .cta__chez { font: 400 .9rem/1.2 var(--sans, inherit); color: #25272b; }
body.op-actif .but-barre .cta__fleche { color: #25272b; }