/* ---------------------------------------------------------------------------
   Solène — barre cadeaux du tiroir panier (fondateur 2026-09-27 ; gamifiée PAR MONTANT et refaite BASSE le
   2026-09-28 : 30 € livraison · 49 € trousse · 59 € mascara [seuils 29/09], ≤ 90 px de haut à 390 px).
   Tokens du tiroir (static/solene/css/cart_drawer.css) : Poppins · bande var(--sod-band) · marge var(--sod-gutter).
   Tons Solène : doré / nude (--gb-gold*), jamais un noir plein. Préfixe `.sod-gb`, scopé sous `.sod`.
   Géométrie : la barre (6 px) s'arrête au centre de la dernière vignette (32 px) ; le jalon i est posé à
   (i+1)/n de la barre (--sod-gb-at, écrit par cart_drawer.js) ; remplissage en % de la barre.
   + le minuteur « Offre anniversaire » du pied (`.sod-timer`, static/solene/js/offer_timer.js).
--------------------------------------------------------------------------- */
.sod .sod-gb { --gb-gold: #b8925f; --gb-gold-2: #dcc095; --gb-ink: #2a2118; --gb-half: 16px;
    flex: 0 0 auto; padding: 8px var(--sod-gutter) 6px; background: var(--sod-band); color: #000; }
.sod .sod-gb[hidden] { display: none; }
.sod .sod-gb__msg { margin: 0 0 5px; font-size: 12.5px; line-height: 16px; text-align: center; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; letter-spacing: -.005em; }
.sod .sod-gb__msg strong { font-weight: 700; }

.sod .sod-gb__track { position: relative; height: 47px; }
.sod .sod-gb__bar { position: absolute; left: 0; right: var(--gb-half); top: 13px; height: 6px; border-radius: 999px;
    background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px rgba(122, 96, 60, .12); overflow: hidden; }
.sod .sod-gb__fill { position: relative; display: block; width: 0; max-width: 100%; height: 100%; border-radius: inherit; overflow: hidden;
    background: linear-gradient(90deg, var(--gb-gold-2), var(--gb-gold)); transition: width .6s cubic-bezier(.3, .7, .3, 1); }
/* Reflet qui glisse sur la partie remplie. */
.sod .sod-gb__fill::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .75) 50%, transparent 100%);
    transform: translateX(-120%); animation: sod-gb-shine 2.6s ease-in-out infinite; }
@keyframes sod-gb-shine { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(260%); } }

.sod .sod-gb__steps { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
.sod .sod-gb__step { position: absolute; top: 0; left: calc(var(--sod-gb-at, 1) * (100% - var(--gb-half)));
    width: 32px; margin-left: -16px; }
.sod .sod-gb__dot { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    background: #fff; color: var(--gb-ink); box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(60, 40, 20, .22); }
.sod .sod-gb__dot img { display: block; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.sod .sod-gb__dot > svg { display: block; }
.sod .sod-gb__step--ship.is-done .sod-gb__dot { background: linear-gradient(135deg, var(--gb-gold-2), var(--gb-gold)); color: #fff; }
.sod .sod-gb__step.is-locked .sod-gb__dot img { filter: grayscale(1); opacity: .55; }
.sod .sod-gb__step.is-locked .sod-gb__dot > svg { opacity: .45; }
/* Pastille : coche dorée (débloqué) / petit cadenas (verrouillé). */
.sod .sod-gb__badge { position: absolute; right: -4px; bottom: -3px; display: grid; place-items: center; width: 14px; height: 14px;
    border-radius: 50%; background: var(--gb-gold); color: #fff; box-shadow: 0 0 0 1.5px #fff; }
.sod .sod-gb__step.is-locked .sod-gb__badge { background: #8a7d70; }
.sod .sod-gb__badge svg { display: block; }
/* Libellé « 30 € · Livraison » sous la vignette ; le dernier s'aligne sur le bord droit. */
.sod .sod-gb__label { position: absolute; top: 35px; left: 50%; transform: translateX(-50%); font-size: 10.5px; line-height: 12px;
    font-weight: 500; white-space: nowrap; color: rgba(0, 0, 0, .55); }
.sod .sod-gb__step.is-done .sod-gb__label { font-weight: 600; color: #000; }
.sod .sod-gb__step--last .sod-gb__label { left: auto; right: 0; transform: none; }

/* Déblocage pendant la session : rebond + confettis, une fois (cart_drawer.js::celebrate). */
.sod .sod-gb__dot.is-pop { animation: sod-gb-pop .65s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes sod-gb-pop { 0% { transform: scale(.7); } 45% { transform: scale(1.28); } 70% { transform: scale(.94); } 100% { transform: scale(1); } }
.sod .sod-gb__burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.sod .sod-gb__burst i { position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 1px; opacity: 0;
    animation: sod-gb-confetti .9s cubic-bezier(.2, .7, .3, 1) forwards; }
.sod .sod-gb__burst i:nth-child(odd) { border-radius: 50%; }
@keyframes sod-gb-confetti {
    0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.6); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .sod .sod-gb__fill { transition: none; }
    .sod .sod-gb__fill::after { animation: none; display: none; }
    .sod .sod-gb__dot.is-pop { animation: none; }
    .sod .sod-gb__burst { display: none; }
}

/* Minuteur « Offre anniversaire » juste au-dessus du bouton (fondateur 28/09 : plus gros, compteur en gras). */
.sod .sod-timer { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 10px;
    font-size: 14px; line-height: 20px; font-weight: 600; color: #b3261e; }
.sod .sod-timer svg { display: block; flex: 0 0 auto; width: 15px; height: 15px; }
.sod .sod-timer b { font-size: 18px; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; }