/*
 * Babbikit – cartes de mise en avant (affichées par bbk-cartes.js)
 * Guide trousseau sur l’accueil, cocons Ma Petite Laine sur la boutique.
 * Version 6 – 30 octobre 2026
 */

/* 1. Commun */
.bbk-carte { position: fixed; z-index: 995; right: 24px; bottom: var(--bbk-carte-bas, 24px); box-sizing: border-box; font-family: inherit; color: #0E314B; background: #FFFFFF; border-radius: 20px; overflow: hidden; box-shadow: 0 16px 40px rgba(14, 49, 75, 0.18); opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s; }
.bbk-carte.bbk-carte--visible { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s; }
.bbk-carte *, .bbk-carte *::before, .bbk-carte *::after { box-sizing: border-box; }
html:has(#header.is-open) .bbk-carte { display: none; }
.bbk-carte p { margin: 0; }
.bbk-carte svg { display: inline-block; flex: none; }
.bbk-carte__fermer { position: absolute; top: 6px; right: 6px; z-index: 2; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #4A6275; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bbk-carte__croix { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.bbk-carte__fermer:focus-visible, .bbk-carte a.bbk-carte__bouton:focus-visible { outline: 2px solid #0E314B; outline-offset: 2px; }
.bbk-carte__corps { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bbk-carte__titre { padding-right: 30px; font-size: 18px; font-weight: 700; line-height: 1.3; color: #0E314B; }
.bbk-carte__texte { font-size: 14px; line-height: 1.55; color: #4A6275; text-align: justify; hyphens: manual; }
.bbk-carte__fort { color: #0E314B; font-weight: 700; }
.bbk-carte a.bbk-carte__bouton { align-self: flex-start; display: inline-flex; align-items: center; height: 44px; padding: 0 28px; border-radius: 36px; background: #FEB737; color: #FFFFFF; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.bbk-carte a.bbk-carte__bouton:hover, .bbk-carte a.bbk-carte__bouton:focus { background: #F4A91E; color: #FFFFFF; text-decoration: none; }
.bbk-carte__tel { display: none; }

/* 2. Guide trousseau (accueil) – ordinateur */
.bbk-carte--guide { display: flex; width: 420px; max-width: calc(100vw - 48px); background: #FBF6F3; border: 1px solid #EFE7E1; box-shadow: 0 16px 40px rgba(14, 49, 75, 0.16); }
.bbk-carte--guide .bbk-carte__visuel { display: block; width: 136px; flex: none; align-self: stretch; object-fit: cover; }
.bbk-carte--guide .bbk-carte__corps { flex: 1; padding: 20px 20px 22px 22px; }
.bbk-carte--guide .bbk-carte__entete { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.bbk-carte__rond { width: 38px; height: 38px; border-radius: 50%; background: #0E314B; display: flex; align-items: center; justify-content: center; }
.bbk-carte__vignette { display: none; }
.bbk-carte--guide a.bbk-carte__bouton { margin-top: 6px; padding: 0 24px; }

/* 3. Cocons (boutique) – ordinateur */
.bbk-carte--cocons { display: flex; width: 640px; max-width: calc(100vw - 48px); }
.bbk-carte--cocons .bbk-carte__photo { position: relative; width: 300px; flex: none; background: #F5EFEA; }
.bbk-carte--cocons .bbk-carte__photo img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.bbk-carte--cocons .bbk-carte__corps { flex: 1; padding: 20px 22px 22px; }
.bbk-carte__pastille { align-self: flex-start; margin-bottom: 4px; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 14px; background: linear-gradient(135deg, #8AD4CF 0%, #6CC0BA 50%, #4FA9A2 100%); color: #FFFFFF; font-size: 12px; font-weight: 700; text-shadow: 0 1px 1px rgba(14, 49, 75, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 10px rgba(108, 192, 186, 0.45); }
.bbk-carte__oeko { display: none; color: #0E314B; font-weight: 700; white-space: nowrap; }
.bbk-carte__oeko svg { width: 15px; height: 15px; vertical-align: -2px; margin: 0 3px 0 2px; }
.bbk-carte__ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0; }
.bbk-carte__coloris { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #4A6275; }
.bbk-carte__ronds { display: flex; gap: 6px; }
.bbk-carte__ronds span { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(14, 49, 75, 0.14); }
.bbk-carte__prix { font-size: 20px; font-weight: 700; line-height: 1.2; color: #0E314B; white-space: nowrap; }
.bbk-carte__atouts { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.bbk-carte__atouts span, .bbk-carte__livraison { display: flex; align-items: center; gap: 8px; }
.bbk-carte__action { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* 4. Téléphone (871 px et moins) */
@media (max-width: 871px) {
  .bbk-carte { left: 12px; right: 12px; bottom: var(--bbk-carte-bas, 16px); width: auto; max-width: none; box-shadow: 0 -6px 28px rgba(14, 49, 75, 0.16); }
  .bbk-carte__ordi { display: none; }
  .bbk-carte__tel { display: flex; }
  .bbk-carte__texte { font-size: 13px; line-height: 1.5; }

  .bbk-carte--guide { display: block; width: auto; max-width: none; padding: 14px; }
  .bbk-carte--guide .bbk-carte__visuel, .bbk-carte--guide .bbk-carte__rond { display: none; }
  .bbk-carte--guide .bbk-carte__corps { padding: 0; gap: 12px; }
  .bbk-carte--guide .bbk-carte__entete { flex-direction: row; align-items: center; gap: 12px; }
  .bbk-carte__vignette { display: block; width: 76px; height: 76px; border-radius: 14px; object-fit: cover; flex: none; }
  .bbk-carte--guide .bbk-carte__titre { font-size: 16px; }
  .bbk-carte--guide a.bbk-carte__bouton { margin-top: 0; }
  .bbk-carte--guide .bbk-carte__fermer { top: 2px; right: 2px; }

  .bbk-carte--cocons { display: block; width: auto; max-width: none; }
  .bbk-carte--cocons .bbk-carte__photo { width: auto; height: 150px; }
  .bbk-carte--cocons .bbk-carte__photo img { object-position: center; }
  .bbk-carte--cocons .bbk-carte__fermer { top: 4px; right: 4px; color: #0E314B; }
  .bbk-carte--cocons .bbk-carte__croix { width: 30px; height: 30px; background: #FFFFFF; box-shadow: 0 2px 8px rgba(14, 49, 75, 0.15); }
  .bbk-carte--cocons .bbk-carte__corps { padding: 12px 14px; gap: 8px; }
  .bbk-carte--cocons .bbk-carte__pastille { height: 26px; margin-bottom: 6px; }
  .bbk-carte--cocons .bbk-carte__titre { padding-right: 0; font-size: 15px; }
  .bbk-carte--cocons .bbk-carte__oeko { display: inline; }
  .bbk-carte__ligne { margin: 4px 0; }
  .bbk-carte__tarif { flex-direction: column; align-items: flex-end; gap: 2px; }
  .bbk-carte__tarif .bbk-carte__prix { font-size: 18px; }
  .bbk-carte__livraison { font-size: 12px; font-weight: 600; gap: 6px; }
}

/* 5. Petits téléphones (moins de 700 px de haut) : texte de présentation masqué */
@media (max-width: 871px) and (max-height: 699px) {
  .bbk-carte__desc { display: none; }
}

/* 6. Mouvements réduits */
@media (prefers-reduced-motion: reduce) {
  .bbk-carte, .bbk-carte.bbk-carte--visible { transform: none; transition: none; }
}

/* 7. Version 4 : entrée avec rebond, ombre renforcée, halo du bouton, bandeau crème du guide sur téléphone */
.bbk-carte { transform: translateY(60px); transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s linear 0.6s; box-shadow: 0 24px 60px rgba(14, 49, 75, 0.24), 0 6px 16px rgba(14, 49, 75, 0.12); }
.bbk-carte.bbk-carte--visible { transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s; }
.bbk-carte--cocons { box-shadow: 0 28px 70px rgba(14, 49, 75, 0.30), 0 8px 20px rgba(14, 49, 75, 0.16); }
.bbk-carte--guide { box-shadow: 0 24px 60px rgba(14, 49, 75, 0.24), 0 6px 16px rgba(14, 49, 75, 0.12); }
@keyframes bbkCarteHalo { 0% { box-shadow: 0 0 0 0 rgba(254, 183, 55, 0.65); } 100% { box-shadow: 0 0 0 16px rgba(254, 183, 55, 0); } }
.bbk-carte--visible a.bbk-carte__bouton { animation: bbkCarteHalo 1.2s ease-out 0.7s 1; }
@media (max-width: 871px) {
  .bbk-carte, .bbk-carte--guide { box-shadow: 0 -10px 40px rgba(14, 49, 75, 0.26), 0 -2px 10px rgba(14, 49, 75, 0.10); }
  .bbk-carte--cocons { box-shadow: 0 -14px 50px rgba(14, 49, 75, 0.32), 0 -3px 12px rgba(14, 49, 75, 0.14); }
  .bbk-carte--guide { padding: 0; background: #FFFFFF; }
  .bbk-carte--guide .bbk-carte__corps { gap: 12px; padding: 0 0 14px; }
  .bbk-carte--guide .bbk-carte__entete { padding: 14px; background: #FBF6F3; }
  .bbk-carte--guide .bbk-carte__texte, .bbk-carte--guide a.bbk-carte__bouton { margin: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .bbk-carte, .bbk-carte.bbk-carte--visible { transform: none; transition: none; }
  .bbk-carte--visible a.bbk-carte__bouton { animation: none; }
}

/* 8. Version 5 : apparition plus vive (plus rapide, de plus bas, léger zoom, halo plus marqué) */
.bbk-carte { transform: translateY(100px) scale(0.92); transition: opacity 0.15s linear, transform 0.45s cubic-bezier(0.22, 1.6, 0.36, 1), visibility 0s linear 0.45s; }
.bbk-carte.bbk-carte--visible { transform: none; transition: opacity 0.15s linear, transform 0.45s cubic-bezier(0.22, 1.6, 0.36, 1), visibility 0s; }
@keyframes bbkCarteHalo2 { 0% { box-shadow: 0 0 0 0 rgba(254, 183, 55, 0.85); } 100% { box-shadow: 0 0 0 22px rgba(254, 183, 55, 0); } }
.bbk-carte--visible a.bbk-carte__bouton { animation: bbkCarteHalo2 1s ease-out 0.45s 1; }
@media (prefers-reduced-motion: reduce) {
  .bbk-carte, .bbk-carte.bbk-carte--visible { transform: none; transition: none; }
  .bbk-carte--visible a.bbk-carte__bouton { animation: none; }
}

/* 9. Version 6 : marges du texte du guide sur téléphone */
@media (max-width: 871px) {
  .bbk-carte--guide p.bbk-carte__texte { margin: 0; padding: 0 14px; }
}