/* Cycles Blain — bon cadeau 1.0.0 : mêmes couleurs que la vitrine (bleu, crème, terre cuite) */
.cbbc, .cbbc-conf { --bc-bleu: #0b5cad; --bc-bleu-f: #08427c; --bc-noir: #1f2933; --bc-gris: #3d4652; --bc-gris2: #5b6470;
  --bc-creme: #faf3ea; --bc-creme2: #faf8f5; --bc-trait: #eadfd2; --bc-trait2: #d6d1ca; --bc-terre: #d9794e; --bc-terre-c: #e8b9a1; --bc-terre-f: #b4552c; --bc-vert: #17683f;
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; color: var(--bc-noir); -webkit-font-smoothing: antialiased; }
.cbbc *, .cbbc-conf * { box-sizing: border-box; }
.cbbc { display: block; max-width: 1180px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 24px) 64px; }
.cbbc button, .cbbc input, .cbbc select, .cbbc textarea { font-family: inherit; }
.cbbc [hidden] { display: none !important; }

/* Bandeau */
.cbbc-bandeau { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  padding: 34px 40px; border: 1px solid var(--bc-trait); border-radius: 24px; background: var(--bc-creme); }
.cbbc-confettis { position: absolute; inset: 0; width: 100%; height: 100%; }
.cbbc-bandeau-texte { position: relative; display: flex; flex-direction: column; gap: 10px; max-width: 580px; }
.cbbc-bandeau h1 { margin: 0; font-size: clamp(36px, 5vw, 54px); font-weight: 700; letter-spacing: .08em; line-height: 1; text-transform: uppercase; color: var(--bc-bleu); }
.cbbc-accroche { margin: 0; font-size: clamp(17px, 2vw, 21px); font-weight: 600; color: var(--bc-terre-f); }
.cbbc-intro { margin: 0; font-size: 15px; line-height: 1.5; color: var(--bc-gris2); }
.cbbc-paquet { position: relative; flex: 0 0 auto; width: 240px; height: auto; }

/* Grille formulaire + aperçu */
.cbbc-grille { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 36px; align-items: start; margin-top: 30px; }
.cbbc-form { display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.cbbc-etape { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cbbc-etape legend { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 0; font-size: 17px; font-weight: 700; color: var(--bc-noir); }
.cbbc-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bc-bleu); color: #fff; font-size: 13px; }
.cbbc-facultatif { font-size: 13px; font-weight: 500; color: var(--bc-gris2); }
.cbbc label:not(.cbbc-carte) { display: block; margin: 0; text-align: left !important; font-size: 14px; font-weight: 600; color: var(--bc-noir); }
.cbbc legend, .cbbc .cbbc-carte, .cbbc .cbbc-carte * { text-align: left !important; }
.cbbc-aide { margin: -6px 0 0 !important; font-size: 13px; color: var(--bc-gris2); }
.cbbc input::placeholder, .cbbc textarea::placeholder { color: #a3aab3; font-weight: 400; opacity: 1; }
.cbbc input[type=text], .cbbc input[type=email], .cbbc input[type=date], .cbbc input[type=number], .cbbc select, .cbbc textarea {
  width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid #c9c3bb; border-radius: 10px; background: #fff; font-size: 15px; font-weight: 500; color: var(--bc-noir); box-shadow: none; }
.cbbc textarea { padding: 10px 12px; resize: vertical; }
.cbbc input:focus, .cbbc select:focus, .cbbc textarea:focus { outline: 2px solid var(--bc-bleu); outline-offset: 1px; border-color: var(--bc-bleu); }
.cbbc .cbbc-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.cbbc-etape p { margin: 0; display: flex; flex-direction: column; gap: 6px; }

.cbbc-montants { display: flex; flex-wrap: wrap; gap: 10px; }
.cbbc-puce { min-width: 92px; height: 52px; padding: 0 18px; border: 1.5px solid var(--bc-trait2); border-radius: 12px; background: #fff; color: var(--bc-noir); font-size: 17px; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.cbbc-puce:hover { border-color: var(--bc-bleu); }
.cbbc-puce.is-on { background: var(--bc-bleu); border-color: var(--bc-bleu); color: #fff; }
.cbbc-libre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cbbc-libre input { width: 140px !important; }
.cbbc-libre span { font-size: 14px; color: var(--bc-gris2); }

.cbbc-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.cbbc .cbbc-carte { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1.5px solid var(--bc-trait); border-radius: 14px; background: #fff; cursor: pointer; color: var(--bc-noir) !important; transition: border-color .15s, background .15s; }
.cbbc-carte input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cbbc-carte > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.cbbc-carte strong { font-size: 15px; font-weight: 700; }
.cbbc-carte strong em { margin-left: 6px; font-style: normal; font-size: 12px; color: var(--bc-vert); }
.cbbc-carte small { font-size: 13px; line-height: 1.4; color: var(--bc-gris2); }
.cbbc-rond { flex: 0 0 22px; height: 22px; border: 2px solid #c9c3bb; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cbbc-carte.is-on { border-color: var(--bc-bleu); background: #eef5fb; }
.cbbc-carte.is-on .cbbc-rond { border-color: var(--bc-bleu); }
.cbbc-carte.is-on .cbbc-rond::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--bc-bleu); }
.cbbc-carte:focus-within { outline: 2px solid var(--bc-bleu); outline-offset: 2px; }
.cbbc-carte:hover { border-color: #b9cde3; }
.cbbc-carte.is-on:hover { border-color: var(--bc-bleu); }
.cbbc-magasin { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.cbbc-adresse { flex-direction: row !important; align-items: center; gap: 6px !important; font-size: 13px; color: var(--bc-gris2); }
.cbbc-envoi { padding: 16px; border: 1px solid var(--bc-trait); border-radius: 14px; background: var(--bc-creme2); }

/* Aperçu du bon */
.cbbc-cote { position: sticky; top: 150px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cbbc-apercu { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid #e4dfd8; border-radius: 20px; background: var(--bc-creme2); box-shadow: 0 10px 30px rgba(60, 45, 30, .08); }
.cbbc-coin { position: absolute; top: 0; right: 0; width: 120px; height: 120px; pointer-events: none; }
.cbbc-apercu-tete { display: flex; align-items: center; gap: 10px; min-height: 46px; }
.cbbc-apercu-tete span { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bc-terre-f); }
.cbbc-scene { display: flex; align-items: center; gap: 8px; }
.cbbc-velos { flex: 1 1 auto; min-width: 0; height: 190px; display: flex; align-items: center; justify-content: center; padding: 0; background: transparent; }
.cbbc-velo { margin: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.cbbc-velo img { width: 100%; height: 100%; max-width: none; object-fit: contain; filter: drop-shadow(0 10px 8px rgba(60, 45, 30, .12)); }
.cbbc-velo svg { width: 100%; height: 100%; }
.cbbc-fleche { flex: 0 0 40px; height: 40px; border: 1px solid var(--bc-trait2); border-radius: 50%; background: rgba(255, 255, 255, .7); color: var(--bc-noir); font-size: 22px; line-height: 1; cursor: pointer; }
.cbbc-fleche:hover { border-color: var(--bc-bleu); color: var(--bc-bleu); }
.cbbc-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cbbc-velo-nom { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: -10px; font-size: 12px; font-weight: 600; color: var(--bc-gris); }
.cbbc-points { display: flex; gap: 5px; }
.cbbc-points i { width: 6px; height: 6px; border-radius: 50%; background: var(--bc-trait2); }
.cbbc-points i.is-on { background: var(--bc-bleu); }
.cbbc-montant { margin: 0; font-size: 52px; font-weight: 700; line-height: 1; }
.cbbc-qui { margin: 0; font-size: 16px; font-weight: 600; }
.cbbc-mot { margin: 0; font-size: 14px; font-style: italic; line-height: 1.5; color: var(--bc-gris); overflow-wrap: anywhere; }
.cbbc-trait { height: 1px; background: #e4dfd8; }
.cbbc-pied { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: 12px; color: var(--bc-gris2); }
.cbbc-pied-adresse { margin: -8px 0 0; font-size: 12px; color: var(--bc-gris); }

.cbbc-total { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid #e4dfd8; border-radius: 18px; background: #fff; }
.cbbc-total-ligne { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 16px; font-weight: 700; }
.cbbc-total-ligne strong { font-size: 26px; }
.cbbc-offrir { display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; border: 0; border-radius: 12px; background: var(--bc-bleu); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; transition: background .15s; }
.cbbc-offrir:hover { background: var(--bc-bleu-f); }
.cbbc-offrir[disabled] { opacity: .65; cursor: progress; }
.cbbc-erreur { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fdecea; color: #a12a1a; font-size: 14px; }
.cbbc-paiement { margin: 0; text-align: center; font-size: 12px; color: var(--bc-gris2); }

/* Bon à savoir */
.cbbc-faq { max-width: 760px; margin: 56px auto 0; }
.cbbc-faq h2 { margin: 0 0 12px; font-size: 20px; font-weight: 700; color: var(--bc-noir); }
.cbbc-faq details { border-bottom: 1px solid #ece7e0; }
.cbbc-faq summary { min-height: 48px; display: flex; align-items: center; padding: 10px 0; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
.cbbc-faq summary::-webkit-details-marker { display: none; }
.cbbc-faq summary::after { content: "+"; margin-left: auto; font-size: 20px; color: var(--bc-terre); }
.cbbc-faq details[open] summary::after { content: "−"; }
.cbbc-faq details p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--bc-gris); }

@media (max-width: 991px) {
  .cbbc { padding-top: 14px; }
  .cbbc-bandeau { padding: 16px 18px; border-radius: 18px; flex-wrap: nowrap; }
  .cbbc-bandeau h1 { font-size: 27px; letter-spacing: .06em; }
  .cbbc-accroche { font-size: 13px; }
  .cbbc-intro { display: none; }
  .cbbc-paquet { width: 76px; }
  .cbbc-grille { grid-template-columns: 1fr; gap: 22px; margin-top: 18px; }
  .cbbc-cote { position: static; order: -1; }
  .cbbc-montant { font-size: 40px; }
  .cbbc-velos { height: 140px; }
  .cbbc-montants { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cbbc-puce { min-width: 0; height: 46px; padding: 0; font-size: 16px; }
  .cbbc-total { position: sticky; bottom: 0; z-index: 5; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px 16px; border-radius: 16px 16px 0 0; box-shadow: 0 -6px 20px rgba(60, 45, 30, .08); }
  .cbbc-total-ligne { flex-direction: column; font-size: 12px; font-weight: 500; color: var(--bc-gris2); }
  .cbbc-total-ligne strong { font-size: 20px; color: var(--bc-noir); }
  .cbbc-offrir { flex: 1 1 auto; height: 52px; font-size: 16px; }
  .cbbc-erreur { flex: 1 1 100%; }
  .cbbc-paiement { display: none; }
  .cbbc-cote { display: contents; }
  .cbbc-apercu { order: -1; }
  .cbbc-total { order: 10; }
}
@media (prefers-reduced-motion: reduce) { .cbbc * { transition: none !important; } }

/* Page de confirmation de commande */
.cbbc-conf { margin: 24px 0; padding: 24px; border: 1px solid var(--bc-trait); border-radius: 20px; background: var(--bc-creme); }
.cbbc-conf h3 { margin: 0 0 16px; font-size: 22px; font-weight: 700; color: var(--bc-bleu); }
.cbbc-conf-bon { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; padding: 18px; margin-bottom: 14px; border: 1px solid #e4dfd8; border-radius: 16px; background: #fff; }
.cbbc-conf-velo { flex: 0 0 160px; height: 100px; display: flex; align-items: center; justify-content: center; }
.cbbc-conf-velo img, .cbbc-conf-velo svg { max-width: 100%; max-height: 100%; }
.cbbc-conf-texte { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; }
.cbbc-conf-texte strong { font-size: 28px; }
.cbbc-conf-texte span { font-size: 14px; color: var(--bc-gris); }
.cbbc-conf-boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.cbbc-conf-boutons a { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 12px; font-size: 15px; font-weight: 700; text-decoration: none; }
.cbbc-conf-boutons a.is-plein { background: var(--bc-bleu); color: #fff; }
.cbbc-conf-boutons a.is-vide { border: 1.5px solid var(--bc-bleu); color: var(--bc-bleu); background: #fff; }
.cbbc-conf-attente { margin: 0; font-size: 14px; color: var(--bc-gris); }

/* ---------- 1.1.0 : cagnotte ---------- */
.cbbc-lien-cagnotte { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px dashed var(--bc-trait2); border-radius: 14px; color: var(--bc-noir) !important; text-decoration: none !important; }
.cbbc-lien-cagnotte:hover { border-color: var(--bc-bleu); }
.cbbc-lien-cagnotte svg { flex: 0 0 auto; color: var(--bc-bleu); }
.cbbc-lien-cagnotte span { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.cbbc-lien-cagnotte strong { font-size: 15px; }
.cbbc-lien-cagnotte small { font-size: 13px; color: var(--bc-gris2); }
.cbbc-lien-cagnotte b { font-size: 14px; color: var(--bc-bleu); white-space: nowrap; }

.cbcg { padding-top: 32px; }
.cbcg h2 { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--bc-noir); }
.cbcg-tete { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; }
.cbcg-tete-ligne { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.cbcg-tete-ligne > div { display: flex; flex-direction: column; gap: 8px; }
.cbcg-sur { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bc-terre-f); }
.cbcg-tete h1 { margin: 0; font-size: clamp(26px, 4vw, 34px); font-weight: 700; line-height: 1.15; color: var(--bc-bleu); }
.cbcg-tete p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--bc-gris2); }
.cbcg-etat { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 18px; background: #e6f3ec; color: var(--bc-vert); font-size: 14px; font-weight: 700; }
.cbcg-etat i { width: 8px; height: 8px; border-radius: 50%; background: var(--bc-vert); }
.cbcg-etat.is-fini { background: #f3f0eb; color: var(--bc-gris); }
.cbcg .cbbc-grille { margin-top: 0; }
.cbcg-gauche { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.cbcg-total { display: flex; flex-direction: column; gap: 14px; padding: 26px; border: 1px solid #e4dfd8; border-radius: 20px; background: var(--bc-creme2); }
.cbcg-total-haut { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.cbcg-total-haut > div { display: flex; flex-direction: column; gap: 4px; }
.cbcg-total-haut strong { font-size: 44px; line-height: 1; }
.cbcg-total-haut span { font-size: 14px; color: var(--bc-gris2); }
.cbcg-nb { font-size: 14px; color: var(--bc-gris) !important; white-space: nowrap; }
.cbcg-barre { height: 12px; border-radius: 6px; background: #ebe5dd; overflow: hidden; }
.cbcg-barre i { display: block; height: 100%; border-radius: 6px; background: var(--bc-bleu); }
.cbcg-boite { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid #e4dfd8; border-radius: 18px; }
.cbcg-lien { display: flex; flex-wrap: wrap; gap: 10px; }
.cbcg-lien input { flex: 1 1 260px; }
.cbcg-bleu, .cbcg-clair { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border-radius: 10px; font-size: 15px; font-weight: 700; text-decoration: none !important; cursor: pointer; }
.cbcg-bleu { border: 0; background: var(--bc-bleu); color: #fff !important; }
.cbcg-clair { border: 1.5px solid var(--bc-bleu); background: #fff; color: var(--bc-bleu) !important; }
.cbcg-partage { display: flex; flex-wrap: wrap; gap: 10px; }
.cbcg-partage a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--bc-trait2); border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--bc-noir) !important; text-decoration: none !important; }
.cbcg-liste { display: flex; flex-direction: column; }
.cbcg-pers { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid #ece7e0; }
.cbcg-ini { flex: 0 0 40px; height: 40px; border-radius: 50%; background: #eef5fb; color: var(--bc-bleu); font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cbcg-pers div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cbcg-pers strong { font-size: 15px; }
.cbcg-pers span { font-size: 13px; color: var(--bc-gris2); overflow-wrap: anywhere; }
.cbcg-pers b { font-size: 15px; white-space: nowrap; }
.cbcg-vide { margin: 8px 0; font-size: 14px; color: var(--bc-gris2); }
.cbcg-note { margin: 8px 0 0; font-size: 12px; color: var(--bc-gris2); }
.cbcg-velo { height: 170px; }
.cbcg-velo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 8px rgba(60, 45, 30, .12)); }
.cbcg-velo svg { width: 100%; height: 100%; }
.cbcg-de { font-size: 14px !important; line-height: 1.5; overflow-wrap: anywhere; }
.cbcg-form h2 { margin: 0; }
.cbcg-form p { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cbcg-puces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cbcg-puces .cbbc-puce { min-width: 0; height: 46px; padding: 0; font-size: 15px; }
.cbcg-radio { display: flex !important; gap: 10px; align-items: flex-start; font-size: 14px !important; font-weight: 500 !important; cursor: pointer; }
.cbcg-radio input { margin-top: 3px; }
.cbcg-fini, .cbcg-ok { gap: 10px !important; }
.cbcg-fini strong, .cbcg-ok strong { font-size: 17px; }
.cbcg-ok strong { color: var(--bc-vert); }
.cbcg-fini span, .cbcg-ok span { font-size: 14px; line-height: 1.5; color: var(--bc-gris); }
.cbcg-envoi { display: flex; flex-direction: column; gap: 10px; max-width: 460px; }
.cbcg-retour { margin: 0; text-align: center; font-size: 14px; }
.cbcg-retour a { font-weight: 700; color: var(--bc-bleu); }
@media (max-width: 991px) {
  .cbcg .cbbc-grille { display: flex; flex-direction: column; }
  .cbcg .cbbc-cote { display: flex; position: static; }
  .cbcg-participer .cbbc-cote, .cbcg-suivi .cbbc-cote { order: -1; }
  .cbcg-creer .cbbc-cote { order: 2; }
  .cbcg .cbbc-total { position: static; flex-direction: column; flex-wrap: nowrap; align-items: stretch; border-radius: 18px; box-shadow: none; }
  .cbcg .cbbc-paiement { display: block; }
  .cbcg-total-haut strong { font-size: 36px; }
}