/* =========================================================================
 * GFS Partage — style de la barre (charte Headspace / Bio-Design)
 * Police : Inter (déjà chargée localement par le site — aucun @import ici).
 * Couleurs : palette de référence du site.
 * ====================================================================== */
.gfs-partage {
	--gfs-bleu: #2C3A53;
	--gfs-violet: #7A5BC2;
	--gfs-gris: #5D6575;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin: 48px 0 8px;
	padding: 20px 24px;
	background: #FFFFFF;
	border: 1px solid rgba(44, 58, 83, 0.08);
	border-radius: 24px;
	box-shadow: 0 10px 30px rgba(44, 58, 83, 0.05);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.gfs-partage * {
	box-sizing: border-box;
}

/* ---- Blindage contre le CSS du thème ----
 * Le thème stylise tous les <button> (police MuseoModerno + texte orange #FFB347),
 * ce qui rendait « Copier le lien » et le pouce illisibles. On force ici la police
 * et les couleurs de la charte, avec assez de poids pour gagner sur le thème. */
.gfs-partage,
.gfs-partage * {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.gfs-partage__thumb,
.gfs-partage__btn {
	color: var(--gfs-bleu) !important; /* Bleu Minéral, ~10:1 sur fond clair */
}

.gfs-partage__thumb:hover,
.gfs-partage__btn:hover {
	color: var(--gfs-violet) !important;
}

.gfs-partage__thumb.is-voted,
.gfs-partage__btn.is-done {
	color: #FFFFFF !important; /* texte blanc sur fond violet */
}

.gfs-partage__count {
	color: var(--gfs-gris) !important;
}

/* ---- Module « utile » ---- */
.gfs-partage__utile {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.gfs-partage__thumb {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font: 600 0.95rem/1 'Inter', sans-serif;
	color: var(--gfs-bleu);
	background: rgba(44, 58, 83, 0.03);
	border: 1px solid rgba(44, 58, 83, 0.12);
	border-radius: 100px;
	padding: 10px 18px;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.gfs-partage__thumb:hover {
	color: var(--gfs-violet);
	border-color: var(--gfs-violet);
}

.gfs-partage__thumb.is-voted {
	color: #FFFFFF;
	background: var(--gfs-violet);
	border-color: var(--gfs-violet);
	cursor: default;
}

.gfs-partage__thumb.is-flash {
	animation: gfsPartagePop 0.4s ease;
}

.gfs-partage__count {
	font: 400 0.9rem/1.3 'Inter', sans-serif;
	color: var(--gfs-gris);
}

/* ---- Module partage ---- */
.gfs-partage__share {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.gfs-partage__share-label {
	font: 600 0.8rem/1 'Inter', sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gfs-gris);
}

.gfs-partage__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	text-decoration: none;
	font: 600 0.9rem/1 'Inter', sans-serif;
	color: var(--gfs-bleu);
	background: rgba(44, 58, 83, 0.03);
	border: 1px solid rgba(44, 58, 83, 0.12);
	border-radius: 100px;
	padding: 10px 16px;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.gfs-partage__btn:hover {
	color: var(--gfs-violet);
	border-color: var(--gfs-violet);
}

.gfs-partage__btn.is-done {
	color: #FFFFFF;
	background: var(--gfs-violet);
	border-color: var(--gfs-violet);
}

.gfs-partage__ico {
	flex: none;
}

@keyframes gfsPartagePop {
	0% { transform: scale(1); }
	40% { transform: scale(1.12); }
	100% { transform: scale(1); }
}

/* ---- Responsive : on empile sous 768px (breakpoint charte) ---- */
@media (max-width: 768px) {
	.gfs-partage {
		flex-direction: column;
		align-items: flex-start;
		padding: 18px;
		border-radius: 20px;
	}

	.gfs-partage__share {
		width: 100%;
	}
}

/* ---- Accessibilité : on coupe les animations si la personne le demande ---- */
@media (prefers-reduced-motion: reduce) {
	.gfs-partage__thumb,
	.gfs-partage__btn {
		transition: none;
	}

	.gfs-partage__thumb.is-flash {
		animation: none;
	}
}