/* Étiquettes nom/prix posées sur les photos du journal.
   Rendu COMMUN à la page publique (journal_post.html) et à l'éditeur de l'espace
   publication (admin.html) : l'aperçu de l'éditeur est donc exactement ce que voient
   les visiteurs. Va avec etiquettes.js. --s = facteur de taille (1 = taille d'origine). */
.pt{--s:1;position:absolute;transform:translate(-50%,-50%);z-index:3;line-height:1.3}
.pt-dot{display:block;box-sizing:border-box;width:calc(20px * (.5 + .5 * var(--s)));height:calc(20px * (.5 + .5 * var(--s)));
  border-radius:50%;background:#c8a35a;border:2px solid #fff;cursor:pointer}
.pt-lbl{position:absolute;left:50%;bottom:calc(100% + 7px * var(--s));transform:translateX(calc(-50% + var(--dx, 0px)));
  box-sizing:border-box;width:max-content;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .58em;
  font-size:max(11px, calc(.86rem * var(--s)));font-weight:400;font-style:normal;color:#fbf6ea;text-align:left;
  background:rgba(15,25,19,.92);padding:.44em .87em;border-radius:.65em;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.pt-lbl b{color:#e0c890;font-weight:700;white-space:nowrap}
.pt-lbl i{opacity:.6}
.pt-lbl::after{content:"";position:absolute;left:var(--ax, 50%);top:100%;transform:translateX(-50%);
  border:calc(6px * var(--s)) solid transparent;border-top-color:rgba(15,25,19,.92)}
.pt.below .pt-lbl{bottom:auto;top:calc(100% + 7px * var(--s))}
.pt.below .pt-lbl::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:rgba(15,25,19,.92)}
@media (max-width:600px){.pt-lbl{font-size:max(11px, calc(.78rem * var(--s)))}}
/* Aperçu « comme sur un téléphone » (éditeur, vue Instagram) : taille de bulle du site vu sur
   téléphone quelle que soit la largeur de l'écran. C'est la proportion gravée pour les réseaux. */
.pt-tel .pt-lbl{font-size:max(11px, calc(.78rem * var(--s)))}