/* ══════════════════════════════════════════════════════════════════
 *  Bandeau marque mise en avant
 *  Utilisé par /boutique (annonces) et /courses (produits) via
 *  application/pages/app/partiels/bandeau_marque.php
 * ══════════════════════════════════════════════════════════════════ */

.bq-brand { position:relative; border-radius:14px; overflow:hidden; background:var(--bq-brand-color); margin-bottom:32px; }

/* Visuel : bandeau très panoramique sur desktop, plus haut sur mobile */
.bq-brand-visual {
  position:relative; width:100%; aspect-ratio:16/5; min-height:200px;
  background-size:cover; background-position:center;
  background-color:var(--bq-brand-color);
}
/* Sans bannière : dégradé de la couleur de marque */
.bq-brand-visual:not([style*="background-image"]) {
  background-image:linear-gradient(115deg, rgba(0,0,0,.35) 0%, transparent 55%), linear-gradient(135deg, var(--bq-brand-color) 0%, #0f172a 100%);
}

.bq-brand-logo {
  position:absolute; top:18px; left:18px; z-index:3;
  display:inline-flex; align-items:center; justify-content:center;
  max-width:42%; padding:8px 14px; border-radius:10px;
  background:rgba(0,0,0,.35); backdrop-filter:blur(3px);
  text-decoration:none;
}
.bq-brand-logo img { max-height:44px; max-width:100%; object-fit:contain; display:block; }
.bq-brand-logo span { color:#fff; font-size:22px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; }

/* Panneau blanc en biseau à droite (le biseau est masqué sur mobile) */
.bq-brand-panel {
  position:absolute; top:0; right:0; bottom:0; width:52%; z-index:2;
  background:#fff; clip-path:polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  display:flex; align-items:center; justify-content:flex-end;
  padding:0 4% 0 12%;
}
.bq-brand-panel-txt { max-width:100%; }
.bq-brand-accroche { margin:0; font-size:15px; font-weight:700; color:#0f172a; line-height:1.35; }
.bq-brand-sous { margin:4px 0 0; font-size:13px; color:#475569; line-height:1.35; }

/* Rail de cartes : en surimpression sur desktop, sous le visuel sur mobile */
.bq-brand-rail { position:relative; padding:14px 12px 16px; }
.bq-brand-cards {
  display:flex; gap:14px; overflow-x:auto; scroll-behavior:smooth;
  scrollbar-width:none; padding:4px 2px;
}
.bq-brand-cards::-webkit-scrollbar { display:none; }

.bq-brand-card {
  flex:0 0 250px; width:250px;
  display:flex; gap:10px; align-items:flex-start;
  background:#fff; border-radius:10px; padding:12px;
  box-shadow:0 3px 14px rgba(0,0,0,.14);
  text-decoration:none; color:inherit;
  transition:transform .12s, box-shadow .12s;
}
.bq-brand-card:hover { color:inherit; text-decoration:none; }
@media (hover:hover) {
  .bq-brand-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.18); }
}
.bq-brand-card-img { flex:0 0 62px; width:62px; height:62px; border-radius:6px; overflow:hidden; background:#f1f5f9; }
.bq-brand-card-img img { width:100%; height:100%; object-fit:contain; display:block; }
.bq-brand-card-txt { min-width:0; flex:1; display:flex; flex-direction:column; }
.bq-brand-card-nom { font-size:12px; color:#1d4ed8; line-height:1.3; }
.bq-brand-card-cat { color:#64748b; }
.bq-brand-card-nom strong { font-weight:800; }
.bq-brand-card-titre {
  font-size:12px; color:#334155; line-height:1.3; margin-bottom:4px;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.bq-brand-card-avis { display:flex; align-items:center; gap:4px; font-size:11px; margin-bottom:4px; }
.bq-brand-stars i { font-size:10px; color:#f59e0b; }
.bq-brand-stars i.vide { color:#d1d5db; }
.bq-brand-note { color:#475569; font-weight:600; }
.bq-brand-nb { color:#94a3b8; }

/* Ligne prix : prix barré + badge de remise quand il y a une promo */
.bq-brand-card-promo { display:flex; align-items:center; gap:6px; margin-bottom:2px; }
.bq-brand-barre { font-size:11px; color:#94a3b8; text-decoration:line-through; }
.bq-brand-pct {
  font-size:11px; font-weight:800; color:#fff; background:#ea580c;
  padding:1px 7px; border-radius:20px; white-space:nowrap;
}
.bq-brand-card-prix { margin-top:auto; font-size:16px; font-weight:800; color:#0f172a; }

.bq-brand-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:34px; height:34px; border-radius:50%;
  border:1px solid #e5e7eb; background:#fff; color:#374151;
  box-shadow:0 2px 8px rgba(0,0,0,.16);
  display:none; align-items:center; justify-content:center;
  font-size:13px; cursor:pointer;
}
.bq-brand-arrow.left  { left:2px; }
.bq-brand-arrow.right { right:2px; }

/* Desktop : le rail chevauche le bas du visuel, comme sur la maquette */
@media (min-width:992px) {
  .bq-brand-rail { position:absolute; left:0; right:0; bottom:0; padding:0 46px 18px; }
  .bq-brand-arrow { display:flex; }
  .bq-brand-card { flex:0 0 268px; width:268px; }
}
/* Tablette : rail sous le visuel, flèches visibles */
@media (min-width:640px) and (max-width:991.98px) {
  .bq-brand-rail { padding:14px 42px 16px; }
  .bq-brand-arrow { display:flex; }
}
/* Mobile : visuel plus haut, panneau sans biseau sous le logo, défilement tactile */
@media (max-width:639.98px) {
  .bq-brand-visual { aspect-ratio:16/9; }
  .bq-brand-panel {
    width:100%; top:auto; height:auto; clip-path:none;
    background:rgba(255,255,255,.94); padding:10px 14px;
  }
  .bq-brand-logo { top:12px; left:12px; padding:6px 10px; }
  .bq-brand-logo img { max-height:30px; }
  .bq-brand-logo span { font-size:16px; }
  .bq-brand-accroche { font-size:13px; }
  .bq-brand-sous { font-size:11px; }
  .bq-brand-card { flex:0 0 232px; width:232px; }
}