/* ============================================================
   share-bar.css — composant de partage publication (3 variantes)
   - .ir-share-rail   : rail vertical sticky desktop (≥1024px)
   - .ir-share-footer : bandeau de fin d'article (toutes tailles)
   - .ir-share-inline : bandeau mobile haut (<1024px)
   Direction artistique : sobriété, monochrome navy, pas de fond.
   ============================================================ */

.ir-share {
  /* tokens locaux dérivés de la DA pour rester monochrome navy */
  --share-ink: var(--navy, #1B2A4A);
  --share-ink-soft: color-mix(in srgb, var(--navy, #1B2A4A) 55%, transparent);
  --share-rule: color-mix(in srgb, var(--navy, #1B2A4A) 12%, transparent);
  --share-bg-hover: color-mix(in srgb, var(--navy, #1B2A4A) 6%, transparent);
}

.ir-share a,
.ir-share button {
  color: var(--share-ink-soft);
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .15s ease, background .15s ease, transform .15s ease;
  font-family: var(--font-display, inherit);
}

.ir-share a:hover,
.ir-share a:focus-visible,
.ir-share button:hover,
.ir-share button:focus-visible {
  color: var(--share-ink);
  outline: none;
}

.ir-share a:focus-visible,
.ir-share button:focus-visible {
  box-shadow: 0 0 0 2px var(--share-rule);
  border-radius: 6px;
}

.ir-share svg {
  width: 20px;
  height: 20px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ir-share .ir-share-icon--filled svg {
  fill: currentColor;
  stroke: none;
}

/* Feedback "Lien copié" (utilisé par toutes les variantes) */
.ir-share-toast {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: .35rem .6rem;
  background: var(--navy, #1B2A4A);
  color: #fff;
  font-family: var(--font-display, inherit);
  font-size: .72rem;
  letter-spacing: .02em;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 5;
}
.ir-share-toast.is-visible { opacity: 1; }
.ir-share-toast::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--navy, #1B2A4A);
}

/* ============================================================
   A) RAIL VERTICAL STICKY — DESKTOP ≥ 1024px
   ============================================================ */
.ir-share-rail {
  display: none; /* activé par media query */
}

@media (min-width: 1024px) {
  .ir-share-rail {
    display: flex;
    position: fixed;
    top: 50%;
    /* Ancré à gauche de l'article (article-content max-width 720, centré
       dans container max-width 1200). 360px = demi-article, 64px = écart. */
    left: max(1rem, calc(50vw - 360px - 64px));
    transform: translateY(-50%);
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .ir-share-rail.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
  .ir-share-rail a,
  .ir-share-rail button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    position: relative;
  }
  .ir-share-rail a:hover,
  .ir-share-rail button:hover,
  .ir-share-rail a:focus-visible,
  .ir-share-rail button:focus-visible {
    transform: translateX(2px);
    background: var(--share-bg-hover);
  }
}

/* ============================================================
   B) BANDEAU DE FIN — toutes tailles
   ============================================================ */
.ir-share-footer {
  margin: 3rem 0 2rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--share-rule);
  border-bottom: 1px solid var(--share-rule);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.ir-share-footer-label {
  font-family: var(--font-display, inherit);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--share-ink-soft);
  margin: 0;
}

.ir-share-footer-items {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  flex-wrap: wrap;
}

.ir-share-footer-items a,
.ir-share-footer-items button {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  position: relative;
}

.ir-share-footer-items a:hover,
.ir-share-footer-items button:hover,
.ir-share-footer-items a:focus-visible,
.ir-share-footer-items button:focus-visible {
  background: var(--share-bg-hover);
}

.ir-share-footer-copy {
  margin-left: auto;
  display: inline-flex !important;
  align-items: center;
  gap: .45rem;
  padding: .5rem .85rem !important;
  width: auto !important;
  height: auto !important;
  border-radius: 999px !important;
  font-family: var(--font-display, inherit);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--share-ink-soft);
  position: relative;
}
.ir-share-footer-copy:hover,
.ir-share-footer-copy:focus-visible {
  color: var(--share-ink);
  background: var(--share-bg-hover);
}
.ir-share-footer-copy svg { width: 16px; height: 16px; }

@media (max-width: 600px) {
  .ir-share-footer { gap: .85rem; padding: 1rem 0; }
  .ir-share-footer-copy {
    margin-left: 0;
    width: 100% !important;
    justify-content: center;
  }
}

/* ============================================================
   C) BANDEAU INLINE — MOBILE < 1024px (haut d'article)
   ============================================================ */
.ir-share-inline {
  display: none;
  align-items: center;
  gap: .25rem;
  margin: .75rem 0 0;
  padding-top: .85rem;
  border-top: 1px solid var(--share-rule);
}

.ir-share-inline a,
.ir-share-inline button {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  position: relative;
}
.ir-share-inline a:hover,
.ir-share-inline button:hover,
.ir-share-inline a:focus-visible,
.ir-share-inline button:focus-visible {
  background: var(--share-bg-hover);
}
.ir-share-inline svg { width: 18px; height: 18px; }

.ir-share-inline-label {
  font-family: var(--font-display, inherit);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--share-ink-soft);
  margin-right: .35rem;
}

@media (max-width: 1023px) {
  .ir-share-inline { display: inline-flex; flex-wrap: wrap; }
}

/* Bouton "Partager natif" (mobile, navigator.share) — légèrement plus marqué */
.ir-share-native {
  color: var(--share-ink) !important;
}
.ir-share-native:hover,
.ir-share-native:focus-visible {
  background: var(--share-bg-hover);
}

/* ============================================================
   prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ir-share *,
  .ir-share-rail,
  .ir-share-toast {
    transition: none !important;
  }
  .ir-share-rail a:hover,
  .ir-share-rail button:hover,
  .ir-share-rail a:focus-visible,
  .ir-share-rail button:focus-visible {
    transform: none;
  }
}

/* ============================================================
   Print : on ne partage pas du papier
   ============================================================ */
@media print {
  .ir-share-rail,
  .ir-share-footer,
  .ir-share-inline { display: none !important; }
}