/* Composants « promotion » communs (templates/_composants/promotion/) :
   tampon de réduction, prix barré, bandeau de l'accueil.
   Rouge tampon : seulement sur fond papier ou en bordure (charte). */

/* Texte lu par les lecteurs d'écran, invisible à l'écran. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.tampon-promo{display:inline-block;font-family:'Special Elite',monospace;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;color:var(--tampon);background:var(--papier);border:2px solid var(--tampon);border-radius:4px;padding:3px 10px;transform:rotate(-6deg);white-space:nowrap;box-shadow:0 2px 6px var(--ombre-papier)}
.tampon-promo.offert{letter-spacing:.12em}

.prix-promo{display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.prix-promo .prix-barre{opacity:.75;font-weight:400}

/* Bandeau de l'accueil : papier, tampon à gauche. */
.bandeau-promos{padding-top:20px}
.bandeau-promo{display:flex;align-items:center;gap:18px;max-width:820px;margin:0 auto 10px;background:var(--papier);color:var(--encre);border-radius:4px;padding:14px 20px;box-shadow:0 10px 30px var(--ombre-portee)}
.bandeau-promo .tampon-promo{flex-shrink:0;font-size:1.15rem}
.bandeau-promo p{margin:0}
.bandeau-promo .titre{font-weight:700}
.bandeau-promo .detail{font-size:.92rem;color:var(--encre-douce)}
.bandeau-promo a{color:var(--encre);font-weight:700;text-underline-offset:3px}
.bandeau-promo a:hover,.bandeau-promo a:focus-visible{color:var(--tampon)}

@media (max-width:767px){
  .bandeau-promo{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 16px}
}
@media (prefers-reduced-motion:reduce){
  .tampon-promo{transform:none}
}