/* Bouton « Partager » + menu — partials/_partage.html.
   Chargé par base.html (articles du guide ET fiches). Tokens maison
   (tokens.css, surchargés par dossier_v1.css sur une fiche) — aucune couleur
   en dur. Dans l'en-tête dossier le bouton emprunte .ds-act ; seul le menu
   est stylé ici. */

.partage { position: relative; display: inline-flex; align-items: center; }

.partage__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--c-border);
  border-radius: 3px;
  background: var(--c-panel);
  color: var(--c-ink-2);
  font: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.partage__btn:hover,
.partage.is-open .partage__btn {
  border-color: var(--c-border-strong); color: var(--c-ink); background: var(--c-bg-2);
}
.partage__btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.partage__btn .material-symbols-outlined { font-size: 16px; }

.partage__menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  min-width: 188px; padding: 4px;
  display: flex; flex-direction: column;
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(28, 27, 23, 0.12);
}
/* `display:flex` ci-dessus l'emporterait sur le `display:none` que le
   navigateur donne à [hidden] : sans cette règle le menu naît ouvert et le
   script, qui ne fait que poser/retirer l'attribut, ne peut plus le fermer. */
.partage .partage__menu[hidden] { display: none; }

.partage--left .partage__menu,
.partage--left .partage__fb { right: auto; left: 0; }

.partage__item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border: 0; border-radius: 3px;
  background: transparent;
  color: var(--c-ink-2);
  font: inherit; font-size: 13px; text-align: left; text-decoration: none;
  white-space: nowrap; cursor: pointer;
}
.partage__item:hover,
.partage__item:focus-visible { background: var(--c-bg-2); color: var(--c-ink); outline: none; }
.partage__item .material-symbols-outlined { font-size: 16px; color: var(--c-muted); }

.partage__fb {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 31;
  padding: 3px 8px; border-radius: 3px;
  font-size: 11.5px; white-space: nowrap;
  color: var(--c-ok); background: var(--c-ok-bg);
  opacity: 0; pointer-events: none;
  transition: opacity 150ms ease;
}
.partage__fb.is-on { opacity: 1; }

@media print { .partage { display: none; } }