/* ============================================================================
   deco.css — habillage commun : ornements, bulles, petites animations
   Léger (aucune image), s'accorde avec chaque palette de boutique.
   ========================================================================== */

/* --- bandeau d'annonce : s'il en existe deja un, on l'utilise ------------ */
.deco-bandeau {
  background: var(--deco-fond, #1E4F46);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  padding: 9px 16px;
  letter-spacing: .2px;
  overflow: hidden;
  position: relative;
}
/* la rotation commence VISIBLE : sinon la barre parait vide au chargement */
.deco-bandeau span { display: inline-block; }
.deco-bandeau.anim span { animation: deco-defile 11s ease-in-out infinite; }
@keyframes deco-defile {
  0%, 68%   { opacity: 1; transform: translateY(0); }
  76%, 100% { opacity: 1; transform: translateY(0); }
}
/* quand on reutilise une barre existante (.ann), on ne touche pas a sa mise en page */
.ann[data-deco] {
  transition: opacity .45s ease;
}
.ann[data-deco].change { opacity: .25; }
@media (prefers-reduced-motion: reduce) {
  .deco-bandeau.anim span { animation: none; }
  .ann[data-deco] { transition: none; }
}

/* --- separateur ornemental (vague) ---------------------------------------- */
.deco-sep {
  display: block;
  width: 100%;
  height: 26px;
  margin: 34px 0;
  opacity: .5;
}
.deco-sep svg { display: block; width: 100%; height: 100%; }

/* --- encadre « le saviez-vous » ------------------------------------------- */
.deco-saviez {
  max-width: 760px;
  margin: 40px auto;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--deco-doux, #F4F8F6);
  border: 1.5px dashed var(--deco-accent, #5FB3A0);
  position: relative;
}
.deco-saviez::before {
  content: "💡";
  position: absolute;
  top: -14px; left: 22px;
  background: #fff;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 17px;
  border: 1.5px dashed var(--deco-accent, #5FB3A0);
}
.deco-saviez h4 {
  margin: 0 0 8px;
  font-size: 15px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--deco-accent, #5FB3A0);
}
.deco-saviez p { margin: 0; font-size: 15px; line-height: 1.65; }

/* --- citation signee (pied de page / bas de section) ---------------------- */
.deco-signature {
  text-align: center;
  font-size: 14px;
  font-style: italic;
  opacity: .72;
  margin: 30px auto 10px;
  max-width: 620px;
  line-height: 1.7;
}
.deco-signature b { font-style: normal; }

/* --- petit tampon « fait main » ------------------------------------------- */
.deco-tampon {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  padding: 5px 11px;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  transform: rotate(-3deg);
  opacity: .8;
}

/* --- ballon d'aide au survol ---------------------------------------------- */
[data-deco-aide] { position: relative; cursor: help; }
[data-deco-aide]:hover::after {
  content: attr(data-deco-aide);
  position: absolute;
  bottom: 130%; left: 50%;
  transform: translateX(-50%);
  background: #1d1d1f;
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 11px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 99;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}

/* --- clin d'oeil dans le pied de page ------------------------------------- */
.deco-pied {
  text-align: center;
  padding: 26px 18px 34px;
  font-size: 13.5px;
  opacity: .62;
  line-height: 1.8;
}
.deco-pied .deco-brindille { display: inline-block; }

/* --- le petit personnage qui regarde la page ------------------------------ */
.deco-mascotte {
  position: fixed;
  right: 18px;
  bottom: 16px;
  width: 74px;
  z-index: 60;
  opacity: 0;
  transition: opacity .5s, transform .5s;
  transform: translateY(10px);
  pointer-events: none;
}
.deco-mascotte.vu { opacity: .92; transform: translateY(0); }
.deco-mascotte img, .deco-mascotte svg { width: 100%; display: block; }
@media (max-width: 700px) { .deco-mascotte { display: none; } }