/* Cycles Blain — « Ma sélection » (cbvitrine 1.9.11, reprend la 1.3.0). Ajouts seulement : les cartes et les fiches ne changent pas.
   1.9.11 : pastille Partager + page plus chaleureuse (maquette validée le 8 nov. 2026), voir la fin du fichier. */

/* ---------- Pastille du bandeau : rouge dès qu'il y a un vélo ---------- */
.cbv-sel-nb { background: #d12d2d !important; }
.cbv-icone.cbv-sel.cbv-sel-actif, .cbv-icone.cbv-sel.cbv-sel-actif:hover { color: #d12d2d; }
.cbv-icone.cbv-sel.cbv-sel-actif svg path { fill: #d12d2d; }

/* ---------- Petit cœur ---------- */
.cbv-coeur { position: absolute; z-index: 4; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: #1d1d1f; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); cursor: pointer; transition: transform .12s, color .12s; -webkit-tap-highlight-color: transparent; }
.cbv-coeur:hover { transform: scale(1.06); color: #d12d2d; }
.cbv-coeur:focus-visible { outline: 2px solid #0b5cad; outline-offset: 2px; }
.cbv-coeur.actif { color: #d12d2d; }
.cbv-coeur.actif svg path { fill: currentColor; }
.cbv-coeur.actif svg { animation: cbv-coeur-bat .28s ease-out; }
@keyframes cbv-coeur-bat { 50% { transform: scale(1.25); } }
/* Sur les cartes, le cœur prend le coin haut droit : la remise et l'étiquette « Reconditionné » descendent en bas à droite */
.cb-r-carte[data-cbv-sel-pose] .cb-r-remise, .cb-r-carte[data-cbv-sel-pose] .cb-r-occ { top: auto; bottom: 8px; }
/* Fiche vélo : sur la grande photo */
#product .images-container .product-cover .cbv-coeur-fiche { top: 16px; right: 16px; width: 48px; height: 48px; }
#product .images-container .product-cover .cbv-coeur-fiche svg { width: 24px; height: 24px; }

/* ---------- Message « Ajouté à votre sélection » ---------- */
.cbv-sel-bulle { position: fixed; z-index: 9999; left: 50%; bottom: 24px; transform: translate(-50%, 20px); max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 999px; background: #1d1d1f; color: #ffffff; font: 600 14px/1.3 Montserrat, "Helvetica Neue", Arial, sans-serif; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.cbv-sel-bulle.visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.cbv-sel-bulle a { margin-left: 6px; color: #ffffff; text-decoration: underline; font-weight: 800; }

/* ---------- Page « Ma sélection » ---------- */
.cbs { --cbs-noir: #1d1d1f; --cbs-texte2: #6e6e73; --cbs-trait: #e3e3e8; --cbs-studio: #ece8e1; --cbs-vert: #1e7a3c; --cbs-lib: 200px; --cbs-col: minmax(0, 1fr);
  max-width: 1240px; margin: 0 auto; padding: 28px 16px 64px; font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; color: var(--cbs-noir); }
body.cbs-page #wrapper .breadcrumb { display: none; }
.cbs-retour { display: inline-block; margin-bottom: 12px; font-size: 14px; font-weight: 600; color: #0b5cad; }
.cbs-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; }
.cbs-titre { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.3px; color: var(--cbs-noir); text-transform: none; }
.cbs-compte { margin: 4px 0 0; font-size: 15px; color: var(--cbs-texte2); }
.cbs-diff { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; font-size: 15px; font-weight: 600; cursor: pointer; }
.cbs-diff input { width: 20px; height: 20px; margin: 0; accent-color: #d12d2d; }
.cbs-attente { padding: 40px 0; color: var(--cbs-texte2); }

.cbs-ligne { display: grid; grid-template-columns: var(--cbs-lib) minmax(0, 1fr); gap: 20px; padding: 14px 0; border-bottom: 1px solid #eeeae4; }
.cbs-vals { display: grid; grid-template-columns: repeat(var(--cbs-n, 3), var(--cbs-col)); gap: 20px; }
.cbs-lib { font-size: 14px; color: var(--cbs-texte2); }
.cbs-val { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.cbs-val.cbs-stock { color: var(--cbs-vert); font-weight: 600; }
.cbs-section { margin: 32px 0 2px; font-size: 20px; font-weight: 800; color: var(--cbs-noir); text-transform: none; }

.cbs-ligne-velos { padding: 0 0 20px; border-bottom: 1px solid var(--cbs-trait); }
.cbs-velo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cbs-photo { position: relative; display: flex; align-items: center; justify-content: center; height: 170px; overflow: hidden; border-radius: 16px; background: var(--cbs-studio); }
.cbs-photo img { width: 100%; height: 100%; object-fit: contain; }
.cbs-retirer { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); color: #3a3a3c; cursor: pointer; }
.cbs-retirer:hover { background: #ffffff; color: #d12d2d; }
.cbs-marque { font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--cbs-texte2); }
.cbs-nom { font-size: 17px; font-weight: 800; line-height: 1.25; color: var(--cbs-noir); }
.cbs-nom:hover { color: #0b5cad; }
.cbs-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cbs-prix strong { font-size: 18px; font-weight: 800; }
.cbs-prix s { font-size: 14px; color: var(--cbs-texte2); }
.cbs-poids { margin-left: auto; font-size: 14px; color: #48484a; }
.cbs-bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--cbs-noir); color: #ffffff !important; font-size: 14px; font-weight: 700; text-decoration: none !important; }
.cbs-bouton:hover { background: #3a3a3c; }
.cbs-ajouter { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 170px; padding: 12px; border: 1.5px dashed #cfc6ba; border-radius: 16px; color: var(--cbs-texte2) !important; font-size: 14px; font-weight: 600; text-align: center; text-decoration: none !important; }
.cbs-ajouter:hover { border-color: var(--cbs-noir); color: var(--cbs-noir) !important; }

.cbs-vide { max-width: 440px; margin: 20px auto; padding: 40px 24px; border-radius: 22px; background: #f5f5f7; text-align: center; }
.cbs-vide-ic { display: inline-flex; color: #d12d2d; }
.cbs-vide-ic svg { width: 36px; height: 36px; }
.cbs-vide-titre { margin: 10px 0 6px; font-size: 20px; font-weight: 800; }
.cbs-vide p { color: var(--cbs-texte2); }
.cbs-vide .cbs-bouton { margin-top: 10px; }

/* Téléphone : 2 vélos visibles, on fait glisser pour les autres ; le nom de chaque ligne reste au-dessus */
@media (max-width: 767px) {
  .cbs { --cbs-colw: calc((100vw - 44px) / 2); padding: 18px 16px 48px; }
  .cbs-titre { font-size: 26px; }
  .cbs-tete { margin-bottom: 16px; }
  .cbs-defile { margin: 0 -16px; padding: 0 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .cbs-tableau { width: calc(var(--cbs-n) * var(--cbs-colw) + (var(--cbs-n) - 1) * 12px); }
  .cbs-ligne { display: block; padding: 10px 0; }
  .cbs-lib { position: sticky; left: 0; width: calc(100vw - 32px); margin-bottom: 6px; font-size: 12px; text-align: center; }
  .cbs-ligne-velos .cbs-lib { display: none; }
  .cbs-section { position: sticky; left: 0; width: calc(100vw - 32px); margin-top: 24px; font-size: 17px; }
  .cbs-vals { grid-template-columns: repeat(var(--cbs-n), var(--cbs-colw)); gap: 12px; }
  .cbs-vals > * { scroll-snap-align: start; }
  .cbs-val { font-size: 14px; }
  .cbs-photo, .cbs-ajouter { height: 110px; border-radius: 12px; }
  .cbs-nom { font-size: 14px; }
  .cbs-prix strong { font-size: 15px; }
  .cbs-poids { margin-left: 0; font-size: 13px; }
  .cbs-ajouter { font-size: 12px; }
}


/* ==================== 1.9.11 ==================== */

/* ---------- Pastille « Partager » (fiche et Ma sélection) ---------- */
.cbv-partage { position: relative; display: inline-flex; }
.cbv-partage-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid #d6dce5; border-radius: 50%; background: #ffffff; color: var(--cb-bleu, #0b5cad); cursor: pointer; transition: border-color .12s, transform .12s; -webkit-tap-highlight-color: transparent; }
.cbv-partage-btn:hover { border-color: var(--cb-bleu, #0b5cad); transform: scale(1.04); }
.cbv-partage-btn:focus-visible { outline: 2px solid #0b5cad; outline-offset: 2px; }
.cbv-partage-menu { position: absolute; z-index: 60; right: 0; top: calc(100% + 8px); display: flex; flex-direction: column; width: 230px; padding: 6px; border: 1px solid #e5e7eb; border-radius: 12px; background: #ffffff; box-shadow: 0 8px 24px rgba(27, 31, 42, .14); }
.cbv-partage-choix { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: #1d1d1f !important; font: 600 15px/1.2 Montserrat, "Helvetica Neue", Arial, sans-serif; text-align: left; text-decoration: none !important; cursor: pointer; }
.cbv-partage-choix:hover, .cbv-partage-choix:focus-visible { background: #f5eee4; }
/* Fiche : au bout de la ligne « Livraison offerte… » ; le menu s'ouvre vers le haut */
body.cb-fiche-velo .cb-livraison.cbv-avec-partage { display: flex; align-items: center; flex-wrap: nowrap; }
body.cb-fiche-velo .cb-livraison.cbv-avec-partage > span:not(.cbv-partage) { flex: 1 1 auto; }
body.cb-fiche-velo .cb-livraison .cbv-partage { margin-left: auto; flex: 0 0 auto; }
body.cb-fiche-velo .cb-livraison .cbv-partage-menu { top: auto; bottom: calc(100% + 8px); }

/* ---------- Page « Ma sélection » plus chaleureuse ---------- */
body.cbs-page #wrapper { background: #f6f1e9; }
.cbs { --cbs-bleu: var(--cb-bleu, #0b5cad); --cbs-studio: #efece7; margin-top: 28px; margin-bottom: 40px; padding: 36px 48px 44px; border-radius: 28px; background: #ffffff; box-shadow: 0 6px 28px rgba(120, 95, 60, .10); }
.cbs .cbs-retour { color: var(--cbs-bleu); }
.cbs .cbs-titre { font-size: 42px; font-weight: 700; color: var(--cbs-bleu); }
.cbs .cbs-actions { display: flex; align-items: center; gap: 14px; }
.cbs .cbs-partage-zone[hidden] { display: none; }
.cbs .cbs-partage-btn { width: 48px; height: 48px; }
.cbs .cbs-partage-menu { top: calc(100% + 8px); }
/* Interrupteur à la place de la case à cocher */
.cbs .cbs-diff input { -webkit-appearance: none; appearance: none; position: relative; flex: 0 0 auto; width: 44px; height: 26px; margin: 0; border-radius: 999px; background: #d6dce5; cursor: pointer; transition: background .2s; }
.cbs .cbs-diff input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: left .2s; }
.cbs .cbs-diff input:checked { background: var(--cbs-bleu); }
.cbs .cbs-diff input:checked::after { left: 21px; }
.cbs .cbs-diff input:focus-visible { outline: 2px solid #0b5cad; outline-offset: 2px; }
/* Cartes vélos */
.cbs .cbs-photo { height: 200px; border-radius: 18px; background: var(--cbs-studio); }
.cbs .cbs-nom { font-size: 18px; }
.cbs .cbs-prix strong { font-size: 22px; color: var(--cbs-bleu); }
.cbs .cbs-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.cbs .cbs-puce { padding: 6px 10px; border-radius: 999px; background: #f1f4f8; font-size: 13px; font-weight: 600; line-height: 1.25; color: #1d1d1f; }
.cbs .cbs-puce-stock { background: #eef6ef; color: #1e7a3c; }
.cbs .cbs-puce-atout { background: #f6eee1; color: #5c4321; }
.cbs .cbs-velo .cbs-bouton { margin-top: 4px; border: 2px solid var(--cbs-bleu); border-radius: 10px; background: #ffffff; color: var(--cbs-bleu) !important; }
.cbs .cbs-velo .cbs-bouton:hover { background: #eef4fb; }
.cbs .cbs-ajouter { height: 200px; gap: 6px; padding: 12px 24px; border: 2px dashed #d6d0c4; border-radius: 18px; background: #fbf9f6; color: #4b5563 !important; font-weight: 500; }
.cbs .cbs-ajouter svg { width: 28px; height: 28px; color: #b49a7a; }
.cbs .cbs-ajouter strong { font-size: 15px; font-weight: 700; color: #1d1d1f; }
.cbs .cbs-ajouter:hover { border-color: #b49a7a; }
/* Lignes : celles qui diffèrent sont surlignées */
.cbs .cbs-section { display: flex; align-items: center; gap: 12px; }
.cbs .cbs-picto { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: #f5eee4; color: #9a7b55; }
.cbs .cbs-ligne.cbs-differe { margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 8px; background: #f3f7fc; }
.cbs .cbs-ligne:not(.cbs-differe):not(.cbs-ligne-velos) .cbs-val { color: #4b5563; }
.cbs .cbs-differe .cbs-val { font-weight: 700; }
/* Encart « Vous hésitez ? » */
.cbs .cbs-aide { display: flex; align-items: center; gap: 22px; margin-top: 36px; padding: 22px 28px; border-radius: 18px; background: #f5eee4; }
.cbs .cbs-aide img { flex: 0 0 auto; width: 72px; height: 72px; border: 3px solid #ffffff; border-radius: 50%; object-fit: cover; }
.cbs .cbs-aide-texte { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; }
.cbs .cbs-aide-texte strong { font-size: 19px; font-weight: 700; }
.cbs .cbs-aide-texte span { font-size: 15px; color: #4b4436; }
.cbs .cbs-aide-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 48px; padding: 0 24px; border-radius: 10px; background: var(--cbs-bleu); color: #ffffff !important; font-size: 15px; font-weight: 700; text-decoration: none !important; }
.cbs .cbs-aide-btn:hover { background: #094c8f; }

@media (max-width: 767px) {
  .cbs { margin: 12px 10px 28px; padding: 20px 16px 28px; border-radius: 20px; --cbs-colw: calc((100vw - 64px) / 2); }
  .cbs .cbs-titre { font-size: 28px; }
  .cbs .cbs-actions { width: 100%; justify-content: space-between; }
  .cbs .cbs-partage-btn { width: 44px; height: 44px; }
  .cbs .cbs-defile { margin: 0 -16px; }
  .cbs .cbs-photo, .cbs .cbs-ajouter { height: 120px; border-radius: 14px; }
  .cbs .cbs-ajouter { padding: 10px; }
  .cbs .cbs-ajouter > span { display: none; }
  .cbs .cbs-prix strong { font-size: 16px; }
  .cbs .cbs-puce { padding: 4px 8px; font-size: 12px; }
  .cbs .cbs-ligne.cbs-differe { margin: 0; padding-left: 0; padding-right: 0; }
  .cbs .cbs-lib, .cbs .cbs-section { width: calc(100vw - 52px); }
  .cbs .cbs-aide { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; }
  .cbs .cbs-aide-btn { width: 100%; }
}