/* BLACK FRIDAY (inc/black-friday.php, black-friday.php). Header, chips and offer cards come from codes-promo.css;
   here only the discounted model cards. No green (charte). */
.bf .cpf { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; }
.bf .cpf__groupe { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.bf-marque[aria-current="page"] { background: var(--anthracite); border-color: var(--anthracite); color: var(--blanc); }
.bf-marque:hover, .bf-marque:visited { color: var(--anthracite); }
.bf-marque[aria-current="page"]:hover, .bf-marque[aria-current="page"]:visited { color: var(--blanc); }
.bf-offres, .bf-modeles { margin-top: 1.6rem; }
.bf-n { font-family: var(--sans); font-size: var(--t-sm, .88rem); font-weight: 600; color: var(--feutre); margin-left: .3rem; vertical-align: middle; }

.bf-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; align-items: stretch; }
.bfm { display: flex; flex-direction: column; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-img, 10px); overflow: hidden; min-width: 0; }
.bfm__photo { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--platre, #f1eee8); }
.bfm__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bfm__pct { position: absolute; top: .55rem; left: .55rem; padding: .18rem .5rem; border-radius: 4px; background: var(--moutarde); color: var(--anthracite); font-family: var(--sans); font-weight: 700; font-size: var(--t-sm, .88rem); line-height: 1.2; }
.bfm__corps { display: flex; flex-direction: column; flex: 1; padding: .75rem .85rem .85rem; font-family: var(--sans); }
.bfm__marque { margin: 0; font-size: var(--t-xs, .74rem); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--feutre); }
.bfm__titre { margin: .2rem 0 0; font-family: var(--serif); font-size: var(--t-lg, 1.12rem); line-height: 1.2; }
.bfm__titre a { color: var(--anthracite); text-decoration: none; }
.bfm__titre a:hover { text-decoration: underline; }
.bfm__variante { margin: .15rem 0 0; font-size: var(--t-sm, .86rem); line-height: 1.3; color: var(--feutre); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bfm__prix { margin: .55rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .45rem; }
.bfm__prix strong { font-size: 1.25rem; color: var(--anthracite); }
.bfm__ref { font-size: var(--t-sm, .86rem); color: var(--feutre); }
.bfm__regle { margin: .15rem 0 0; font-size: var(--t-xs, .74rem); line-height: 1.3; color: var(--feutre); }
.bfm__pied { margin-top: auto; padding-top: .7rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.bfm__note { font-size: var(--t-sm, .86rem); color: var(--anthracite); text-decoration: none; white-space: nowrap; }
.bfm__note:hover { text-decoration: underline; }
.bfm__cta { display: inline-flex; align-items: center; padding: .5rem .85rem; border-radius: 4px; background: var(--anthracite); color: var(--blanc); font-weight: 600; font-size: var(--t-sm, .88rem); text-decoration: none; white-space: nowrap; }
.bfm__cta:hover, .bfm__cta:visited, .bfm__cta:focus { color: var(--blanc); background: #000; }
/* Longer label set by the « Voir le {modèle} » rule (data-ctat, model sold by another merchant): its own full-width line, never cut. */
.bfm__pied:has(.bfm__cta[data-ctat]) { flex-wrap: wrap; }
.bfm__cta[data-ctat] { flex: 1 1 100%; justify-content: center; text-align: center; white-space: normal; }
.bfm__cta:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.bf-suite { margin: .9rem 0 0; }
.bf-suite__lien { font-family: var(--sans); font-weight: 600; color: var(--anthracite); }

@media (max-width: 1100px) { .bf-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .bf-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .bf .cpf { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bf .cpf__univers, .bf .cpf__groupe { flex-wrap: nowrap; }
  .bf-grille { grid-template-columns: 1fr; gap: .65rem; }
  .bfm { flex-direction: row; }
  .bfm__photo { flex: 0 0 34%; aspect-ratio: auto; min-height: 9.5rem; }
  .bfm__corps { padding: .6rem .7rem .7rem; }
  .bfm__titre { font-size: 1.02rem; }
  .bfm__pied { flex-wrap: wrap; }
  .bfm__cta { flex: 1; justify-content: center; }
}