/* ============================================================
   BARRE DE PARTAGE (SINGLE ARTICLE) — [share_buttons]
   Markup : classpro_child_share_buttons_shortcode() (inc/frontend-renders.php)
   - WhatsApp (canal n°1 au Cameroun) mis en avant : bouton pilule vert avec texte.
   - Autres réseaux : pastilles neutres à icône de couleur, couleur pleine au survol.
   - « Plus… » : partage natif du téléphone (affiché seulement si le navigateur le permet).
   - Mobile : libellé au-dessus, WhatsApp pleine largeur, icônes réparties en dessous.
   ============================================================ */
.cp-share-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin: 2.5rem 0;
  padding: 1.25rem 0;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
}

.cp-share-bar p.cp-share-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 !important;
  font-size: 1rem !important;
  font-weight: 700;
  color: var(--cp-color-primary, #20467B);
}

.cp-share-label i {
  color: var(--cp-color-secondary, #EB7630);
}

.cp-share-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Pastille ronde (réseaux secondaires) */
.cp-share-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #F1F5F9;
  color: var(--cp-share-color, #20467B) !important;
  font-size: 1.05rem;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.cp-share-btn:hover,
.cp-share-btn:focus-visible {
  background: var(--cp-share-color, #20467B);
  color: #FFFFFF !important;
  transform: translateY(-2px);
}

.cp-share-btn:focus-visible {
  outline: 3px solid var(--cp-focus-color, #20467B);
  outline-offset: 2px;
}

/* Le texte des pastilles reste lu par les lecteurs d'écran */
.cp-share-btn .cp-share-btn__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.cp-share-facebook { --cp-share-color: #1877F2; }
.cp-share-x        { --cp-share-color: #0F172A; }
.cp-share-linkedin { --cp-share-color: #0A66C2; }
.cp-share-copy,
.cp-share-native   { --cp-share-color: #20467B; }

/* WhatsApp : bouton pilule avec texte (charte boutons, format standard) */
.cp-share-btn.cp-share-whatsapp {
  width: auto;
  min-height: 46px;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--cp-radius-pill, 50px);
  background: #25D366;
  color: #FFFFFF !important;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: none;
}

.cp-share-btn.cp-share-whatsapp i {
  font-size: 1.2rem;
}

.cp-share-btn.cp-share-whatsapp .cp-share-btn__text {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
}

.cp-share-btn.cp-share-whatsapp:hover,
.cp-share-btn.cp-share-whatsapp:focus-visible {
  background: #1EBE5A;
}

.cp-share-native[hidden] {
  display: none;
}

/* Mobile : libellé, puis WhatsApp pleine largeur, puis icônes réparties */
@media (max-width: 640px) {
  .cp-share-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .cp-share-links {
    justify-content: space-between;
    gap: 0.75rem 0.5rem;
  }

  .cp-share-btn.cp-share-whatsapp {
    flex: 1 0 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-share-btn,
  .cp-share-btn:hover {
    transition: none;
    transform: none;
  }
}