/* Réserve latérale : 16 px par défaut, 44 px seulement quand le bouton « Fermer » existe. Les 44 px imposés à tout le monde faisaient passer le message le plus long sur deux lignes dès 390 px, et la piste (grille empilée) prend toujours la hauteur du plus long message. */ .hmb-annonces { /* Collant, et AU-DESSUS de l'en-tête : le bandeau reste lisible pendant tout le parcours, c'est là que passent la livraison offerte, la mission et les remerciements. L'en-tête se cale juste en dessous — sa position de blocage suit « --hm-annonces-h », publié par theme.js à partir de la hauteur réelle mesurée ici (elle change avec la largeur, avec l'état compact, et tombe à zéro si la visiteuse ferme le bandeau). z-index 61 contre 60 pour l'en-tête : le bandeau passe devant, jamais dessous. */ position: sticky; top: 0; z-index: 61; overflow: hidden; background: var(--hmb-ann-bg, #fbe3d0); color: var(--hmb-ann-fg, #3f2f25); text-align: center; font-size: 0.86rem; font-weight: 700; min-height: 38px; display: flex; align-items: center; justify-content: center; padding: 0 16px; transition: background 0.5s ease, min-height 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), font-size 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); } .hmb-annonces:has(.hmb-annonces__close) { padding: 0 44px; } .hmb-annonces.is-closed { display: none; } /* Au défilement, le bandeau se resserre en même temps que l'en-tête : 38 px deviennent 28, et le texte suit. La classe est celle du thème (theme.js la pose sur à 120 px, la retire à 60), donc un seul seuil pour les deux — et surtout pas de second observateur de défilement qui viendrait se battre avec le premier. */ /* Repli avant que le script ait mesuré — et sans script du tout : la valeur nominale du bandeau, pour que l'en-tête ne vienne pas se glisser dessous (il a un z-index plus faible, il passerait derrière et serait rogné). theme.js pose ensuite la hauteur réelle en style en ligne sur , qui l'emporte sur ces deux règles : c'est lui qui a le dernier mot dès qu'il tourne, et lui seul sait qu'un message long passe sur deux lignes en dessous de 480 px. */ :root:has(.hmb-annonces) { --hm-annonces-h: 46px; } :root.is-compact:has(.hmb-annonces) { --hm-annonces-h: 28px; } html.is-compact .hmb-annonces { min-height: 28px; font-size: 0.78rem; } html.is-compact .hmb-annonces .hmb-annonces__track { min-height: 28px; } /* L'interligne du corps (1,6) et le rembourrage de la pastille de remerciement tenaient le bandeau à 36 px : la piste est une grille empilée, elle prend toujours la hauteur du plus grand message, et le remerciement est le plus grand de tous. Les deux se resserrent ici, sinon la réduction ne valait que trois pixels — invisible. */ html.is-compact .hmb-annonces .hmb-annonces__item { padding: 4px 0; line-height: 1.3; } html.is-compact .hmb-annonces .hmb-annonces__item--achat a, html.is-compact .hmb-annonces .hmb-annonces__item--achat > span:not(.hmb-annonces__icone) { padding: 2px 10px; } html.is-compact .hmb-annonces .hmb-annonces__emoji { font-size: 1em; } html.is-compact .hmb-annonces .hmb-annonces__vignette { width: 18px; height: 18px; } html.is-compact .hmb-annonces .hmb-annonces__close { width: 26px; height: 26px; } @media (prefers-reduced-motion: reduce) { .hmb-annonces { transition: none; } } /* Un reflet très lent traverse le bandeau : assez pour qu'il ne soit pas une bande morte, assez lent pour qu'on ne le remarque qu'en le cherchant. Coupé si les animations le sont. */ .hmb-annonces::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.5) 50%, transparent 62%); transform: translateX(-120%); animation: hmb-ann-reflet 9s ease-in-out 2s infinite; } .hmb-annonces__track { position: relative; width: 100%; min-height: 38px; display: grid; } .hmb-annonces__item { grid-area: 1 / 1; margin: 0; padding: 9px 0; opacity: 0; visibility: hidden; pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 8px; } .hmb-annonces__item.is-active { opacity: 1; visibility: visible; pointer-events: auto; animation: hmb-ann-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); } .hmb-annonces__icone { display: inline-flex; flex: none; opacity: 0.75; } .hmb-annonces__item a, .hmb-annonces__item > span:not(.hmb-annonces__icone) { min-width: 0; } /* ------------------------------------------------------------------------- Remerciement d'achat : une entrée qui n'appartient qu'à lui ---------------------------------------------------------------------- C'est le seul message du bandeau qui ne vient pas de la boutique : quelqu'un a acheté, et on le remercie. Il ne doit donc surtout pas se confondre avec « Livraison offerte » qui passe juste avant. Trois choses le distinguent, et elles ne servent qu'à lui : 1. le bandeau entier change de teinte pendant la durée du message (--hmb-ann-merci) ; 2. une lueur le traverse UNE fois, de gauche à droite, au moment de l'entrée ; 3. le message monte et se pose au lieu de fondre, et l'émoji éclôt en tournant. Aucune de ces trois règles ne porte sur .hmb-annonces__item seul : toutes sont conditionnées par « is-merci » ou par « --achat ». Une annonce de la boutique ne peut pas les déclencher. ---------------------------------------------------------------------- */ .hmb-annonces.is-merci { background: var(--hmb-ann-merci, #fbe9eb); } .hmb-annonces.is-merci::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.85) 50%, transparent 70%); animation: hmb-ann-lueur 1.1s cubic-bezier(0.3, 0, 0.2, 1) 1; } .hmb-annonces__item--achat { gap: 10px; font-weight: 600; position: relative; z-index: 1; } .hmb-annonces__item--achat.is-active { animation: hmb-ann-merci 0.62s cubic-bezier(0.2, 0.8, 0.2, 1); } .hmb-annonces__item--achat .hmb-annonces__icone { opacity: 1; color: var(--hm-rasp, #b8414e); } .hmb-annonces__item--achat.is-active .hmb-annonces__icone { animation: hmb-ann-eclore 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) 0.1s backwards; } .hmb-annonces__emoji { font-size: 1.15em; line-height: 1; } .hmb-annonces__vignette { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.7); } .hmb-annonces__item--achat a, .hmb-annonces__item--achat > span:not(.hmb-annonces__icone) { padding: 3px 12px; border-radius: 999px; background: rgba(255,255,255,0.68); } @keyframes hmb-ann-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes hmb-ann-merci { 0% { opacity: 0; transform: translateY(14px) scale(0.94); } 55% { opacity: 1; transform: translateY(0) scale(1.035); } 100% { opacity: 1; transform: none; } } @keyframes hmb-ann-eclore { 0% { opacity: 0; transform: scale(0.2) rotate(-25deg); } 60% { opacity: 1; transform: scale(1.3) rotate(8deg); } 100% { opacity: 1; transform: none; } } @keyframes hmb-ann-lueur { from { transform: translateX(-110%); } to { transform: translateX(110%); } } @keyframes hmb-ann-reflet { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(120%); } } /* Animations limitées : la rotation est coupée côté script, les annonces s'empilent donc toutes, et le bandeau ne change plus ni de teinte ni de lumière. */ @media (prefers-reduced-motion: reduce) { .hmb-annonces { transition: none; } .hmb-annonces__item { grid-area: auto; opacity: 1; visibility: visible; pointer-events: auto; animation: none; } .hmb-annonces::after, .hmb-annonces.is-merci::before { display: none; } .hmb-annonces__item--achat.is-active, .hmb-annonces__item--achat.is-active .hmb-annonces__icone { animation: none; } } .hmb-annonces__item a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .hmb-annonces__close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: transparent; color: inherit; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; } .hmb-annonces__close:hover { background: rgba(0,0,0,0.08); } /* Sous 480 px, la vignette et l'émoji mangeaient la moitié de la ligne du remerciement. */ @media (max-width: 479px) { .hmb-annonces { font-size: 0.8rem; } .hmb-annonces__vignette { display: none; } }