/*
 * Âme & Conscience - Badges de format d'un événement.
 *
 * Deux teintes seulement : l'or de la boutique pour le présentiel, le rouge
 * chaud de l'enseigne de diffusion pour le direct. Le corps de texte est
 * volontairement généreux, ces badges doivent rester lisibles sur mobile
 * sans que l'on ait à les chercher.
 */

/* Sous la galerie : les deux badges sont empilés, de même largeur, et le
   bloc entier est centré sur la colonne photo. Alignés l'un sur l'autre ils
   se lisent comme un seul objet, au lieu de deux étiquettes décalées. */
.amcformat-bandeau {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 18px auto 4px;
  width: 100%;
}

.amcformat-badge {
  width: 100%;
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 12px 18px;
  border-radius: 9px;
  border: 1px solid;
  line-height: 1.35;
}

.amcformat-badge .amcformat-ico {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
}

.amcformat-badge .amcformat-txt {
  display: flex;
  flex-direction: column;
}

.amcformat-badge strong {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .02em;
}

.amcformat-badge small {
  font-size: 15px;
  opacity: .78;
  margin-top: 2px;
}

/* Présentiel : l'or de la boutique. */
.amcformat-badge.amcformat-presentiel {
  color: #6A5530;
  border-color: #E3D3B0;
  background: linear-gradient(180deg, #FBF5E9, #F4ECD9);
}

/* Direct : le rouge de l'enseigne de diffusion. */
.amcformat-badge.amcformat-direct {
  color: #A44F35;
  border-color: #F0C8BB;
  background: linear-gradient(180deg, #FFF6F3, #FEF0EC);
}

/* Le point central respire doucement, comme l'enseigne de la régie. */
.amcformat-badge.amcformat-direct .amcformat-ico circle:first-of-type {
  animation: amcformat-souffle 3.6s ease-in-out infinite;
  transform-origin: center;
}

@keyframes amcformat-souffle {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* ------------------------------------------- Rappel près du bouton d'achat */

.amcformat-rappel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 16px;
}

.amcformat-puce {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 500;
}

.amcformat-puce.amcformat-presentiel { color: #6A5530; }
.amcformat-puce.amcformat-direct     { color: #A44F35; }

.amcformat-ico-mini {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
}

.amcformat-sep {
  color: #B9AC97;
}

@media (max-width: 575px) {
  .amcformat-bandeau { gap: 10px; }
  .amcformat-badge   { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .amcformat-badge.amcformat-direct .amcformat-ico circle:first-of-type { animation: none; }
}


/* ------------------------------------- Pastilles dans les listes produits */

.amcformat-liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 4px;
}

.amcformat-pastille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 3px;
  border-radius: 20px;
  border: 1px solid;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .01em;
  white-space: nowrap;
}

.amcformat-pastille.amcformat-presentiel {
  color: #6A5530;
  border-color: #E3D3B0;
  background: #FBF5E9;
}

.amcformat-pastille.amcformat-direct {
  color: #A44F35;
  border-color: #F0C8BB;
  background: #FFF6F3;
}

.amcformat-pastille .amcformat-ico-mini {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

.amcformat-pastille.amcformat-direct .amcformat-ico-mini circle:first-of-type {
  animation: amcformat-souffle 3.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .amcformat-pastille.amcformat-direct .amcformat-ico-mini circle:first-of-type { animation: none; }
}