/**
 * Watoto Auto Featured Image — Boutons de partage (v3.6.0)
 */

.watoto-afi-share-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 16px 0;
	padding: 10px 0;
}

.watoto-afi-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 20px;
	background: #f0f0f1;
	border: none;
	color: #1e1e1e;
	text-decoration: none;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
}

.watoto-afi-share-btn:hover,
.watoto-afi-share-btn:focus-visible {
	background: #e2e2e3;
	transform: translateY(-1px);
	color: #1e1e1e;
}

.watoto-afi-share-btn svg {
	flex-shrink: 0;
	border-radius: 50%;
}

.watoto-afi-share-label {
	white-space: nowrap;
}

/* Sur mobile, on garde uniquement l'icône pour ne pas surcharger l'écran. */
@media (max-width: 480px) {
	.watoto-afi-share-label {
		display: none;
	}
	.watoto-afi-share-btn {
		padding: 8px;
		border-radius: 50%;
	}
}

.watoto-afi-share-copylink.watoto-afi-copied {
	background: #d4f7dc;
	color: #0a5c1f;
}

/* Style "monochrome" : les icônes héritent de cette couleur (currentColor). */
.watoto-afi-style-mono .watoto-afi-share-btn {
	color: #3971b8;
}

/* Style "texte seul" : les libellés restent toujours visibles, y compris
   sur mobile (contrairement au style avec icônes, qui masque le texte en
   dessous de 480px pour ne garder que le pictogramme). */
.watoto-afi-style-text .watoto-afi-share-label {
	display: inline !important;
}

/* ==========================================================================
 * Menu "trop-plein" responsive (⋯ Plus) — géré par assets/share-buttons.js.
 * Ces éléments sont créés dynamiquement par le script ; ce CSS définit
 * uniquement leur apparence, pas leur logique d'affichage.
 * ========================================================================== */
.watoto-afi-share-buttons {
	position: relative; /* Ancre le menu déroulant du bouton "Plus". */
}

.watoto-afi-share-more {
	display: none; /* Affiché par JS uniquement si des boutons débordent. */
}

.watoto-afi-share-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 6px;
	background: #fff;
	border: 1px solid #e2e2e3;
	border-radius: 8px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 180px;
	z-index: 100;
}

.watoto-afi-share-dropdown[hidden] {
	display: none;
}

.watoto-afi-share-dropdown .watoto-afi-share-btn {
	background: none;
	border-radius: 6px;
	width: 100%;
	justify-content: flex-start;
}

.watoto-afi-share-dropdown .watoto-afi-share-btn:hover {
	background: #f0f0f1;
}

/* Dans le menu déroulant, le libellé reste toujours visible (l'espace y
   est suffisant, contrairement à la barre principale sur mobile). */
.watoto-afi-share-dropdown .watoto-afi-share-label {
	display: inline !important;
}

/* ==========================================================================
 * Feuille de style d'impression — générique, basée sur les sélecteurs les
 * plus courants dans les thèmes WordPress. Un rendu parfait peut nécessiter
 * un ajustement spécifique au thème actif une fois testé en conditions
 * réelles (voir la documentation du plugin).
 * ========================================================================== */
@media print {
	.watoto-afi-share-buttons,
	header,
	.site-header,
	nav,
	.main-navigation,
	.sidebar,
	.widget-area,
	#comments,
	.comments-area,
	.site-footer,
	footer,
	.hrsnewsbox,
	.single-slider,
	.ad,
	.advertisement {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
	}

	article,
	.entry-content,
	.post-content {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}
}
