/**
 * Widget « Réseaux sociaux CercleKit ».
 *
 * Tout est piloté par les variables --ck-social-* posées par les contrôles
 * Elementor sur le wrapper du widget. Les couleurs de marque arrivent par item
 * (--ck-social-brand / --ck-social-brand-ink) : le CSS choisit fond ou icône
 * selon la forme.
 *
 * Rien n'est imposé quand l'utilisateur n'a pas choisi de couleur : on hérite
 * (currentColor). Les !important ne protègent que du style de lien du thème,
 * qui gagne en spécificité sur un simple .ck-social__link.
 */

/* Les défauts sont des valeurs de REPLI var(--x, défaut) et non des
   déclarations sur .ck-social : Elementor pose ses variables sur le wrapper
   PARENT, et une déclaration sur l'élément lui-même bat toujours une valeur
   héritée du parent — les défauts écraseraient donc les réglages du panneau. */
.ck-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ck-social-gap, 12px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ck-social .ck-social__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ck-social .ck-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ck-social-lbl-gap, 8px);
	box-sizing: border-box;
	padding: var(--ck-social-pad, 10px) !important;
	color: var(--ck-social-ic, currentColor);
	background: var(--ck-social-bg, transparent) !important;
	border: var(--ck-social-bw, 0px) solid var(--ck-social-bc, transparent) !important;
	box-shadow: none !important;
	text-decoration: none !important;
	line-height: 0;
	transition: background-color var(--ck-social-dur, 200ms) ease,
	            color var(--ck-social-dur, 200ms) ease,
	            border-color var(--ck-social-dur, 200ms) ease,
	            transform var(--ck-social-dur, 200ms) ease;
}

.ck-social .ck-social__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

/* Le logo de marque (SVG inline) et une icône de police se dimensionnent pareil. */
.ck-social .ck-social__svg,
.ck-social .ck-social__icon svg {
	width: var(--ck-social-icon, 20px);
	height: var(--ck-social-icon, 20px);
	display: block;
	fill: currentColor;
}

.ck-social .ck-social__icon i,
.ck-social .ck-social__icon span[class*="icon-"] {
	font-size: var(--ck-social-icon, 20px);
	line-height: 1;
}

.ck-social .ck-social__label {
	line-height: 1.2;
	color: var(--ck-social-lbl, currentColor);
}

/* ── Formes ─────────────────────────────────────────────────────────── */

/* Pastille : carré parfait quelle que soit la largeur du contenu. */
.ck-social--circle .ck-social__link,
.ck-social--square .ck-social__link,
.ck-social--rounded .ck-social__link {
	background: var(--ck-social-bg, #f1efe9) !important;
}

.ck-social--circle .ck-social__link { border-radius: 999px !important; }
.ck-social--square .ck-social__link { border-radius: 0 !important; }
.ck-social--rounded .ck-social__link { border-radius: var(--ck-social-radius, 8px) !important; }

.ck-social--none .ck-social__link {
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
}

/* Icône seule : la pastille reste ronde/carrée (pas d'ovale). */
.ck-social-lbl--none .ck-social__link {
	width: calc(var(--ck-social-icon, 20px) + 2 * var(--ck-social-pad, 10px) + 2 * var(--ck-social-bw, 0px));
	height: calc(var(--ck-social-icon, 20px) + 2 * var(--ck-social-pad, 10px) + 2 * var(--ck-social-bw, 0px));
	padding: 0 !important;
}

.ck-social--none.ck-social-lbl--none .ck-social__link {
	width: var(--ck-social-icon, 20px);
	height: var(--ck-social-icon, 20px);
}

.ck-social-lbl--bottom .ck-social__link {
	flex-direction: column;
	line-height: normal;
}

/* ── Couleurs de marque ─────────────────────────────────────────────── */

/* Avec pastille : la marque colore le fond, l'icône prend l'encre lisible. */
.ck-social-brand-yes .ck-social__link {
	background: var(--ck-social-brand, #f1efe9) !important;
	color: var(--ck-social-brand-ink, #fff);
}

/* Sans pastille : la marque colore l'icône. */
.ck-social-brand-yes.ck-social--none .ck-social__link {
	background: none !important;
	color: var(--ck-social-brand, currentColor);
}

.ck-social-brand-yes .ck-social__label {
	color: var(--ck-social-lbl, inherit);
}

/* ── Effets de survol ───────────────────────────────────────────────── */

.ck-social .ck-social__link:hover,
.ck-social .ck-social__link:focus-visible {
	color: var(--ck-social-ic-h, var(--ck-social-ic, currentColor));
	background: var(--ck-social-bg-h, var(--ck-social-bg, transparent)) !important;
	border-color: var(--ck-social-bc-h, var(--ck-social-bc, transparent)) !important;
}

.ck-social--circle .ck-social__link:hover,
.ck-social--square .ck-social__link:hover,
.ck-social--rounded .ck-social__link:hover,
.ck-social--circle .ck-social__link:focus-visible,
.ck-social--square .ck-social__link:focus-visible,
.ck-social--rounded .ck-social__link:focus-visible {
	background: var(--ck-social-bg-h, var(--ck-social-bg, #f1efe9)) !important;
}

/* En couleurs de marque, seuls les effets géométriques jouent : la couleur
   officielle ne doit pas être écrasée par une couleur de survol unique. */
.ck-social-brand-yes .ck-social__link:hover,
.ck-social-brand-yes .ck-social__link:focus-visible {
	background: var(--ck-social-brand, #f1efe9) !important;
	color: var(--ck-social-brand-ink, #fff);
}

.ck-social-brand-yes.ck-social--none .ck-social__link:hover,
.ck-social-brand-yes.ck-social--none .ck-social__link:focus-visible {
	background: none !important;
	color: var(--ck-social-brand, currentColor);
}

.ck-social-fx--fade .ck-social__link:hover { opacity: 0.65; }
.ck-social-fx--lift .ck-social__link:hover { transform: translateY(-3px); }
.ck-social-fx--zoom .ck-social__link:hover { transform: scale(1.12); }

/* Inversion : le fond devient l'icône et réciproquement. */
.ck-social-fx--invert .ck-social__link:hover,
.ck-social-fx--invert .ck-social__link:focus-visible {
	color: var(--ck-social-bg, #f1efe9);
	background: var(--ck-social-ic, currentColor) !important;
}

.ck-social-fx--invert.ck-social-brand-yes .ck-social__link:hover,
.ck-social-fx--invert.ck-social-brand-yes .ck-social__link:focus-visible {
	color: var(--ck-social-brand, currentColor);
	background: var(--ck-social-brand-ink, #fff) !important;
}

/* Halo de focus du navigateur retiré, focus clavier conservé (accessibilité). */
.ck-social .ck-social__link:focus { outline: none; }
.ck-social .ck-social__link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.ck-social .ck-social__link { transition: none; }
	.ck-social-fx--lift .ck-social__link:hover,
	.ck-social-fx--zoom .ck-social__link:hover { transform: none; }
}

/* Message d'aide, éditeur uniquement. */
.ck-social__empty {
	padding: 16px;
	border: 1px dashed #c9c4bb;
	border-radius: 8px;
	color: #6b6559;
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}